Make it easy/clean to hide content when a user is not logged on

[henricasanova]

Implement a simple "hide if not logged on" component.

[derrickluyen]

• created SigninCheck component for this issue
• component takes in three properties: auth, data, and content

auth: bool returning true / false depending on if user is logged in or not

data: the content to be hidden

content: the type of content being hidden, passed as a string (e.g. "simulator", "practice questions", etc...)

Import:

import SigninCheck from '../../../components/signin_check'

To include at beginning of class / component (check if user is logged in):

    const [auth, setAuth] = useState("false")

    useEffect(() => {
      setAuth(localStorage.getItem("login"))
    })

Two ways to use component:

1. pass in data as giant "div" so that it is essentially treated as one item (square bracket inside data is not necessary in this case)

<SigninCheck data={[
            <>
              <x
                ...
              />

              <y
                ...
              />

              <z
                ...
              />
            </>
            ]} auth={auth} content="practice questions"></SigninCheck>

2. pass in data as array of components (square bracket inside data is necessary in this case)

<SigninCheck data={[
              <x
                ...
              />,

              <y
                ...
              />,

              <z
                ...
              />
            ]} auth={auth} content="practice questions"></SigninCheck>

[henricasanova]

Used throughout the whole site successfully.