update the state var -- DONE

[github-actions[bot]]

https://github.com/UofT-Frosh-Orientation/orientation-website/blob/0256cc09ed0649e77309d9bc706f2d193107a3ec/client/src/pages/ScuntMissionsDashboard/ScuntMissionsDashboard.jsx#L121

  };

  return (
    <div className="scunt-create-missions-tab-container">
      <div className="scunt-create-missions-container">
        <div className="scunt-create-missions-textinput">
          {missioninput.map((i) => {
            return (
              <TextInput
                key={i.key}
                label={i.label}
                placeholder={i.label}
                isRequiredInput={i.key === 'number' || i.key === 'name' ? true : false}
                onChange={
                  (input) => {
                    handleInput(input, i.key);
                  }
                  // TODO: update the state var -- DONE
                }
                style={{ width: '100%', flexGrow: '1' }}
                description={i.des}
              />
            );
          })}
          <Checkboxes
            values={['isHidden']}
            onSelected={(value, index, state, selectedIndices) => {
              handleInput(state, 'isHidden');
            }}
          />
          <Checkboxes
            values={['isJudgingStation']}
            onSelected={(value, index, state, selectedIndices) => {
              handleInput(state, 'isJudgingStation');
            }}
          />
        </div>
        <div className="scunt-create-missions-preview-container">
          <div className="scunt-create-missions-preview">
            <h3 style={{ marginBottom: '20px' }}>Mission Preview</h3>

            {newMission !== undefined ? (
              keys?.map((i) => {
                return (
                  <div key={i}>
                    <p style={{ color: 'var(--text-dynamic)', marginBottom: '8px' }}>
                      <b>{convertCamelToLabel(i)}</b>
                      <span>{': '}</span>
                    </p>
                    {newMission[i] === true || newMission[i] === false ? (
                      <div
                        style={{
                          display: 'inline-block',
                          color:
                            newMission[i] === true ? 'var(--green-success)' : 'var(--red-error)',
                        }}
                      >
                        <b>{newMission[i].toString()}</b>
                      </div>
                    ) : (
                      newMission[i].toString()
                    )}
                  </div>
                );
              })
            ) : (
              <></>
            )}
          </div>

          <Button
            label="Create Mission"
            onClick={() => {
              // TODO: call backend to submit mission
              // delete the object or set it back to initial state

              handleSubmit();
            }}
            isSecondary={true}
            style={{ width: 'fit-content' }}
          />
        </div>
      </div>
    </div>
  );
};

[github-actions[bot]]

Closed in 9dabab6d1fcacf68bed4c1579c47577ee0cabcb5