Untitled

function ChangePrivacyForm(props: { setAction: SetAction; action: Action }) {
  const [alertMsg, setAlertMsg] = useState("");
  const [showSpinner, setShowSpinner] = useState(false);
  const [PrivacyProfile, SetPrivacyProfile] = useState("3");
  const [PrivacyOwnedGames, SetPrivacyOwnedGames] = useState("3");
  const [PrivacyInventory, SetPrivacyInventory] = useState("3");

  const submit = async (event: any) => {
    event.preventDefault();

    const eCommentPermission = event.target.eCommentPermission.value;
    const settings = {
      PrivacyProfile: event.target.PrivacyInventory.value,
      PrivacyOwnedGames: event.target.PrivacyOwnedGames.value,
      PrivacyFriendsList: event.target.PrivacyFriendsList.value,
      PrivacyInventory: event.target.PrivacyInventory.value,
      eCommentPermission: eCommentPermission > 1 ? eCommentPermission - 2 : 2, // valve is retarded
    };

    console.log(settings);

    setShowSpinner(true);

    try {
      await axios.post(
        "pending",
        { username: props.action.username, settings },
        {
          withCredentials: true,
        }
      );
      props.setAction({ show: false });
      return;
    } catch (error: any) {
      const err: AxiosError = error;
      setShowSpinner(false);
      setAlertMsg(err.response?.data);
    }
  };

  const change = (event: any) => {
    if (event.target.name === "PrivacyProfile") {
      SetPrivacyProfile(event.target.value);
      SetPrivacyOwnedGames(event.target.value);
      SetPrivacyInventory(event.target.value);
    } else if (event.target.name === "PrivacyOwnedGames") {
      SetPrivacyOwnedGames(event.target.value);
    } else if (event.target.name === "PrivacyInventory") {
      SetPrivacyInventory(event.target.value);
    }
  };

  const Options = () => {
    if (PrivacyProfile === "3") {
      //public
      return (
        <>
          <option value="3">Public</option>
          <option value="2">Friends only</option>
          <option value="1">Private</option>
        </>
      );
    } else if (PrivacyProfile === "2") {
      //friends only
      return (
        <>
          <option value="2">Friends only</option>
          <option value="1">Private</option>
        </>
      );
    } //private
    else return <option value="1">Private</option>;
  };

  return (
    <Modal show={true} animation={false} size="lg">
      <Modal.Header>
        <Modal.Title>Change privacy settings</Modal.Title>
      </Modal.Header>
      <Modal.Body className="fullWidth">
        {showSpinner && <LoadingSpinner />}
        {!showSpinner && alertMsg && <Alert variant="danger">{alertMsg}</Alert>}
        {!showSpinner && (
          <Form onSubmit={submit}>
            <Form.Group as={Row} className="mb-3">
              <Form.Label column sm="2">
                My profile:
              </Form.Label>
              <Col>
                <Form.Select name="PrivacyProfile" onChange={change}>
                  <option value="3">Public</option>
                  <option value="2">Friends only</option>
                  <option value="1">Private</option>
                </Form.Select>
                Your community profile includes your profile summary, friends list, badges, Steam Level, showcases,
                comments, and group membership.
              </Col>
            </Form.Group>

            <Form.Group as={Row} className="mb-3">
              <Form.Label column sm="2">
                Game details:
              </Form.Label>
              <Col>
                <Form.Select name="PrivacyOwnedGames" value={PrivacyOwnedGames} onChange={change}>
                  <Options />
                </Form.Select>
                This category includes the list of all games on your Steam account, games you’ve wishlisted, your
                achievements and your playtime. This setting also controls whether you’re seen as "in-game" and the
                title of the game you are playing.
                {PrivacyOwnedGames !== "1" && (
                  <Form.Check
                    className="mt-1"
                    type="checkbox"
                    label="Always keep my total playtime private even if users can see my game details."
                  />
                )}
              </Col>
            </Form.Group>

            <Form.Group as={Row} className="mb-3">
              <Form.Label column sm="2">
                Friends List:
              </Form.Label>
              <Col>
                <Form.Select name="PrivacyFriendsList">
                  <Options />
                </Form.Select>
                This controls who can see your list of friends on your Steam Community profile.
              </Col>
            </Form.Group>

            <Form.Group as={Row} className="mb-3">
              <Form.Label column sm="2">
                Inventory:
              </Form.Label>
              <Col>
                <Form.Select name="PrivacyInventory" value={PrivacyInventory} onChange={change}>
                  <Options />
                </Form.Select>
                Your inventory includes items you've received in games that use Steam Trading. It also includes any
                Steam Trading Cards you've collected and extra copies or Steam Gifts.
                {PrivacyInventory !== "1" && (
                  <Form.Check
                    className="mt-1"
                    type="checkbox"
                    label="Always keep Steam Gifts private even if users can see my inventory."
                  />
                )}
              </Col>
            </Form.Group>

            <Form.Group as={Row} className="mb-3">
              <Form.Label column sm="2">
                Can post comments on my profile:
              </Form.Label>
              <Col>
                <Form.Select name="eCommentPermission">
                  <Options />
                </Form.Select>
              </Col>
            </Form.Group>
            <div className="d-grid gap-2">
              <Button variant="primary" type="submit" size="lg">
                Save
              </Button>
            </div>
          </Form>
        )}
      </Modal.Body>
      <Modal.Footer>
        <Button variant="secondary" onClick={() => props.setAction({ show: false })}>
          Close
        </Button>
      </Modal.Footer>
    </Modal>
  );
}