PluralKit/src/Components/Private/System.js

import React, { useState, useEffect } from "react";
import * as BS from "react-bootstrap";
import { useRouteMatch } from "react-router-dom";
import autosize from "autosize";
import "moment-timezone";
import Popup from "reactjs-popup";
import Twemoji from "react-twemoji";

import history from "../../History.js";
import defaultAvatar from "../../default_discord_avatar.png";
import { FaAddressCard } from "react-icons/fa";
import EditSystem from "./Edit/EditSystem.js";
import EditSystemPrivacy from "./Edit/EditSystemPrivacy.js";

export default function System(props) {
  // match the url, if there's a member ID there, don't render this component at all
  const match = useRouteMatch("/dash/:memberID");

  // get the user from the localstorage
  const [user, setUser] = useState(JSON.parse(localStorage.getItem("user")));

  // bunch of useState stuff, used in the useEffect() hook below
  const [name, setName] = useState("");
  const [tag, setTag] = useState("");
  const [timezone, setTimezone] = useState("");
  const [avatar, setAvatar] = useState("");
  const [banner, setBanner] = useState("");
  const [desc, setDesc] = useState("");
  const [editDesc, setEditDesc] = useState("");

  // more useState, this time to actually handle state
  // TODO: name them something more intuitive maybe?
  const [editMode, setEditMode] = useState(false);
  const [privacyEdit, setPrivacyEdit] = useState(false);
  const [privacyView, setPrivacyView] = useState(false);

  const [errorAlert, setErrorAlert] = useState(false);

  // this useEffect does a couple of things after the user is gotten from localstorage
  useEffect(() => {
    // first require the discord markdown parser
    const { toHTML } = require("../../Functions/discord-parser.js");

    // check if there's a name object in user, if it's null, set name to a blank string, otherwise set name to user.name
    if (user.name) {
      setName(user.name);
    } else setName("");

    // same as above, but with the user tag instead
    if (user.tag) {
      setTag(user.tag);
    } else setTag("");

    // same as above but with timezone
    if (user.tz) {
      setTimezone(user.tz);
    } else setTimezone("");

    // also trims the avatar url so that 1. pngs won't be converted to jpegs and 2. won't be resized to 256x256
    if (user.avatar_url) {
      var avatarsmall = user.avatar_url.replace("&format=jpeg", "");
      setAvatar(avatarsmall.replace("?width=256&height=256", ""));
    } else setAvatar("");

    if (user.banner) {
      setBanner(user.banner);
    } else setBanner("");

    // same as above, but with descriptions
    // two description variables! one is just the plain description, the other is parsed and converted to html
    if (user.description) {
      setDesc(toHTML(user.description));
      setEditDesc(user.description);
    } else {
      setDesc("(no description)");
      setEditDesc("");
    }
  }, [user.description, user.tag, user.avatar_url, user.tz, user.name, user.banner]);

  // this just resizes the textarea when filled with larger amounts of text
  useEffect(() => {
    autosize(document.querySelector("textarea"));
  });

  if (match) return null;

  return (
    <>
    { user.banner && !localStorage.getItem("hidebanners") ? <div className="banner" style={{backgroundImage: `url(${user.banner})`}} alt=""/> : ""}
    <BS.Card className="mb-3 mt-3 w-100">
      <BS.Card.Header className="d-flex align-items-center justify-content-between">
        <BS.Card.Title className="float-left">
          <FaAddressCard className="mr-4 float-left" /> {name} ({user.id})
        </BS.Card.Title>
        {user.avatar_url ? (
          <Popup
            trigger={
              <BS.Image
                src={`${user.avatar_url}`}
                style={{ width: 50, height: 50 }}
                tabIndex="0"
                className="float-right"
                roundedCircle
              />
            }
            className="avatar"
            modal
          >
            {(close) => (
              <div className="text-center w-100 m-0" onClick={() => close()}>
                <BS.Image
                  src={`${avatar}`}
                  style={{ "max-width": 640, height: "auto" }}
                  thumbnail
                />
              </div>
            )}
          </Popup>
        ) : (
          <BS.Image
            src={defaultAvatar}
            style={{ width: 50, height: 50 }}
            className="float-right"
            roundedCircle
          />
        )}
      </BS.Card.Header>
      <BS.Card.Body>
        {errorAlert ? (
          <BS.Alert variant="danger">
            Something went wrong, please try logging in and out again.
          </BS.Alert>
        ) : (
          ""
        )}
        {editMode ? (
          <EditSystem
            editDesc={editDesc}
            name={name}
            tag={tag}
            timezone={timezone}
            avatar={avatar}
            banner={banner}
            setErrorAlert={setErrorAlert}
            user={user}
            setUser={setUser}
            setEditMode={setEditMode}
          />
        ) : (
          <>
            <BS.Row>
              <BS.Col className="mb-lg-3" xs={12} lg={3}>
                <b>ID:</b> {user.id}
              </BS.Col>
              <BS.Col className="mb-lg-3" xs={12} lg={3}>
                <b>Tag:</b> {tag}
              </BS.Col>
              <BS.Col className="mb-lg-3" xs={12} lg={3}>
                <b>Timezone:</b> {timezone}
              </BS.Col>
              {privacyView ? (
                ""
              ) : (
                <BS.Col className="mb-lg-3" xs={12} lg={3}>
                  <b>Privacy:</b>{" "}
                  <BS.Button
                    variant="light"
                    size="sm"
                    onClick={() => setPrivacyView(true)}
                  >
                    View
                  </BS.Button>
                </BS.Col>
              )}
            </BS.Row>
            {privacyEdit ? (
              <EditSystemPrivacy
                setErrorAlert={setErrorAlert}
                setUser={setUser}
                user={user}
                setPrivacyEdit={setPrivacyEdit}
              />
            ) : privacyView ? (
              <>
                <hr />
                <h5>Viewing privacy settings</h5>
                <BS.Row>
                  <BS.Col className="mb-lg-3" xs={12} lg={3}>
                    <b>Description:</b> {user.description_privacy}
                  </BS.Col>
                  <BS.Col className="mb-lg-3" xs={12} lg={3}>
                    <b>Member list: </b>
                    {user.member_list_privacy}
                  </BS.Col>
                  <BS.Col className="mb-lg-3" xs={12} lg={3}>
                    <b>Front:</b> {user.front_privacy}
                  </BS.Col>
                  <BS.Col className="mb-lg-3" xs={12} lg={3}>
                    <b>Front history:</b> {user.front_history_privacy}
                  </BS.Col>
                </BS.Row>
                <BS.Button
                  variant="light"
                  onClick={() => setPrivacyView(false)}
                >
                  Exit
                </BS.Button>{" "}
                <BS.Button
                  variant="primary"
                  onClick={() => setPrivacyEdit(true)}
                >
                  Edit
                </BS.Button>
                <hr />
              </>
            ) : (
              ""
            )}
            <p>
              <b>Description:</b>
            </p>
            {localStorage.getItem("twemoji") ? (
              <Twemoji options={{ className: "twemoji" }}>
                <p dangerouslySetInnerHTML={{ __html: desc }}></p>
              </Twemoji>
            ) : (
              <p dangerouslySetInnerHTML={{ __html: desc }}></p>
            )}
            {privacyEdit ? (
              ""
            ) : privacyView ? (
              ""
            ) : (
              <>
                <BS.Button variant="light" onClick={() => setEditMode(true)}>
                  Edit
                </BS.Button>
                <BS.Button
                  variant="primary"
                  className="float-right"
                  onClick={() => history.push(`/profile/${user.id}`)}
                >
                  Profile
                </BS.Button>
              </>
            )}
          </>
        )}
      </BS.Card.Body>
    </BS.Card>
    </>
  );
}