feat: page agnostic features

[cewei8483]

This change is 

[SKairinos]

Reviewed 12 of 16 files at r1, all commit messages.
Reviewable status: 12 of 16 files reviewed, 9 unresolved discussions (waiting on @cewei8483)

---

frontend/public/index.html line 81 at r1 (raw file):

<script src="https://cdn-ukwest.onetrust.com/scripttemplates/otSDKStub.js" type="text/javascript" charset="UTF-8"
  data-domain-script="5da42396-cb12-4493-8d04-5179033cfbad"></script>
  

For all these scripts, can you please download these JS files and put them into the folder src/scripts. Then, I want you to load these scripts in the App component like this using React.useEffect(() => { ... }, []); Also try to load the freshworks widget in the App component

---

frontend/src/features/MessageBanner.tsx line 28 at r1 (raw file):

      ? <Grid container xs={12} style={{ backgroundColor: theme.palette.tertiary.main }} alignItems='center'>
        <Container maxWidth={process.env.REACT_APP_CONTAINER_MAX_WIDTH as Breakpoint}>
          <Toolbar>

Instead of Toolbar, use

---

frontend/src/features/ScreenTimePopUp.tsx line 14 at r1 (raw file):

  open: boolean,
  setOpen: React.Dispatch<React.SetStateAction<boolean>>,
  interval: number

remove this prop

---

frontend/src/features/ScreenTimePopUp.tsx line 18 at r1 (raw file):

  const handleClose = (): void => {
    setOpen(false);
    setTimeout(() => { setOpen(true); }, interval);

don't set this timeout here. set it in the app component.

---

frontend/src/features/ScreenTimePopUp.tsx line 22 at r1 (raw file):

  return (
    <>

no need for react fragment

---

frontend/src/features/SessionPopUp.tsx line 12 at r1 (raw file):

  open: boolean,
  setOpen: React.Dispatch<React.SetStateAction<boolean>>,
  interval: number

remove interval prop

---

frontend/src/features/SessionPopUp.tsx line 18 at r1 (raw file):

  const handleClose = (): void => {
    setOpen(false);
    setTimeout(() => { setOpen(true); }, interval);

remove. logic for opening modal should be in the app component. however, a timeout should exist here to close the popup after 2 mins and call the logout endpoint (add a TODO for this).

---

frontend/src/features/SessionPopUp.tsx line 22 at r1 (raw file):

  return (
    <>

remove react fragment

---

frontend/src/features/SessionPopUp.tsx line 37 at r1 (raw file):

          </Typography>
          <Typography variant='h5' textAlign='center'>
            {minute} min {second} secs

please implement this countdown. this can be achieved using states for the remaining time and a useEffect. Here is an example.

[cewei8483]

@SKairinos , about js scripts:

• It seems that I need to put the scripts into public folder as this post describes or else the scripts wouldn't work
• The freshDesk script works fine but the ones for oneTrust (cookies management) complained like below if I load them in useEffect
• 
• 

Also, your comment on MessageBanner is cut:

[SKairinos]

instead of toolbar, use Stack element with direction='row' prop

[SKairinos]

Reviewed 1 of 16 files at r1, 1 of 2 files at r2, 3 of 3 files at r3, all commit messages.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @cewei8483)

[SKairinos]

Reviewed 1 of 1 files at r4, 5 of 5 files at r5, all commit messages.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @cewei8483)