Refactored UserAccount (#894)

* removed functions in UserAccount and changed docker-compose.yaml to have different postgres version * added new line at end of file docker-compose --------- Co-authored-by: Jasmine Tran <[email protected]>
devsoc-unsw · Sep 30, 2024 · 7f976be · 7f976be
1 parent 01e11fa
commit 7f976be
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 63 deletions.
diff --git a/client/src/components/sidebar/UserAccount.tsx b/client/src/components/sidebar/UserAccount.tsx
@@ -1,9 +1,10 @@
-import { AccountCircle, LoginRounded, LogoutRounded } from '@mui/icons-material';
+import { LoginRounded, LogoutRounded } from '@mui/icons-material';
 import { Button, IconButton, Tooltip } from '@mui/material';
 import { styled } from '@mui/system';
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useState } from 'react';
 
 import { API_URL } from '../../api/config';
+import { undefinedUser, UserContext } from '../../context/UserContext';
 import { TimetableData } from '../../interfaces/Periods';
 import StyledDialog from '../StyledDialog';
 import UserProfile from './groupsSidebar/friends/UserProfile';
@@ -18,17 +19,6 @@ const UserAuth = styled('div')`
   justify-content: space-between;
 `;
 
-const UserInfo = styled('div')`
-  display: flex;
-  align-items: center;
-  gap: 12px;
-`;
-
-const UserText = styled('div')`
-  display: flex;
-  flex-direction: column;
-`;
-
 const StyledIconButton = styled(IconButton)`
   display: flex;
   gap: 16px;
@@ -45,11 +35,6 @@ const StyledButton = styled(Button)`
   border: 1px solid ${({ theme }) => theme.palette.primary.main};
 `;
 
-const StyledAccountIcon = styled(AccountCircle)`
-  width: 28px;
-  height: 28px;
-`;
-
 const ExpandedContainer = styled('div')`
   display: flex;
   align-items: center;
@@ -74,47 +59,10 @@ export interface User {
 }
 
 const UserAccount: React.FC<UserAccountProps> = ({ collapsed }) => {
-  const [login, setLogin] = useState(false);
   const [windowLocation, setWindowLocation] = useState('');
-  const [user, setUser] = useState<User>();
   const [logoutDialog, setLogoutDialog] = useState(false);
 
-  const getUserInfo = async (userID: string) => {
-    try {
-      const response = await fetch(`${API_URL.server}/user/profile/${userID}`, {
-        method: 'GET',
-        headers: {
-          Accept: 'application/json',
-          'Content-Type': 'application/json',
-        },
-      });
-      const userResponse = await response.text();
-      if (userResponse !== '') setUser(JSON.parse(userResponse).data);
-    } catch (error) {
-      console.log(error);
-    }
-  };
-
-  useEffect(() => {
-    async function runAsync() {
-      try {
-        const response = await fetch(`${API_URL.server}/auth/user`, {
-          credentials: 'include',
-        });
-        const userResponse = await response.text();
-        if (userResponse !== '') {
-          setLogin(true);
-          getUserInfo(JSON.parse(userResponse));
-        } else {
-          setUser(undefined);
-          setLogin(false);
-        }
-      } catch (error) {
-        console.log(error);
-      }
-    }
-    runAsync();
-  }, []);
+  const { user, setUser } = useContext(UserContext);
 
   const loginCall = async () => {
     setWindowLocation(window.location.href);
@@ -136,9 +84,10 @@ const UserAccount: React.FC<UserAccountProps> = ({ collapsed }) => {
       console.log(error);
     }
     window.location.replace(windowLocation);
-    setUser(undefined);
+    setUser(undefinedUser);
   };
-  if (!login) {
+
+  if (!user.userID) {
     return collapsed ? (
       <Tooltip title="Log in" placement="right">
         <StyledIconButton onClick={loginCall}>
@@ -150,8 +99,6 @@ const UserAccount: React.FC<UserAccountProps> = ({ collapsed }) => {
     );
   }
 
-  if (!user) return <></>;
-
   return (
     <>
       <StyledDialog

diff --git a/client/src/context/UserContext.tsx b/client/src/context/UserContext.tsx
@@ -6,8 +6,8 @@ import { Group } from '../interfaces/Group';
 import NetworkError from '../interfaces/NetworkError';
 import { UserContextProviderProps } from '../interfaces/PropTypes';
 
-//TODO, is this best practise?
-const undefinedUser = {
+
+export const undefinedUser = {
   userID: '',
   firstname: '',
   lastname: '',

diff --git a/server/docker-compose.yaml b/server/docker-compose.yaml
@@ -20,7 +20,7 @@ services:
     container_name: notangles-database
     hostname: notangles_database
     restart: always
-    image: postgres:alpine
+    image: postgres:16-alpine
     ports:
       - '5432:5432'
     environment: