From a2260649b27208d37575547fae639b57df262fa7 Mon Sep 17 00:00:00 2001
From: Codarcea Alexandru-Christian <alexandru.codarcea@gmail.com>
Date: Sat, 25 Jan 2025 23:12:30 +0200
Subject: [PATCH] refactor authProvider to initialize state with null and
 simplify localStorage handling; enhance Home component with new layout and
 footer

---
 frontend/src/utils/authProvider.tsx           | 23 +----
 frontend/src/viewEvent/ViewEventService.ts    |  1 +
 frontend/src/viewEvent/ViewEventView.tsx      |  4 +
 .../EventParticipantsPanel.tsx                |  2 +-
 frontend/src/views/Home.tsx                   | 91 +++++++++++++++++--
 5 files changed, 92 insertions(+), 29 deletions(-)

diff --git a/frontend/src/utils/authProvider.tsx b/frontend/src/utils/authProvider.tsx
index c58854a..4a69010 100644
--- a/frontend/src/utils/authProvider.tsx
+++ b/frontend/src/utils/authProvider.tsx
@@ -15,35 +15,16 @@ interface AuthProviderProps {
 }
 
 export const AuthProvider = ({ children }: AuthProviderProps): React.JSX.Element => {
-    const [accessToken, setAccessTokenState] = useState<string | null>(() => {
-        // Initialize from localStorage if available
-        return localStorage.getItem('fb_access_token');
-    });
-    const [userFacebookId, setUserFacebookIdState] = useState<string | null>(() => {
-        return localStorage.getItem('fb_user_id');
-    });
-
+    const [accessToken, setAccessTokenState] = useState<string | null>(null);
+    const [userFacebookId, setUserFacebookIdState] = useState<string | null>(null);
     const isAuthenticated = !!accessToken;
 
     const setAccessToken = (token: string | null) => {
         setAccessTokenState(token);
     };
 
-    useEffect(() => {
-        if (accessToken) {
-            localStorage.setItem('fb_access_token', accessToken);
-        } else {
-            localStorage.removeItem('fb_access_token');
-        }
-    }, [accessToken]);
-
     const setUserFacebookId = (facebookId: string | null) => {
         setUserFacebookIdState(facebookId);
-        if (facebookId) {
-            localStorage.setItem('fb_user_id', facebookId);
-        } else {
-            localStorage.removeItem('fb_user_id');
-        }
     };
 
     return (
diff --git a/frontend/src/viewEvent/ViewEventService.ts b/frontend/src/viewEvent/ViewEventService.ts
index 9a7e9ba..3275146 100644
--- a/frontend/src/viewEvent/ViewEventService.ts
+++ b/frontend/src/viewEvent/ViewEventService.ts
@@ -44,6 +44,7 @@ export class ViewEventService {
     
     public async getViewEventModel(id: string, accessToken: string): Promise<ViewEventModel> {
         try {
+            console.log(accessToken);
             const url = `${this.apiUrl}${id}`;
             const response = await fetch(url, {
                 method: 'GET',
diff --git a/frontend/src/viewEvent/ViewEventView.tsx b/frontend/src/viewEvent/ViewEventView.tsx
index 5f38847..86bb31c 100644
--- a/frontend/src/viewEvent/ViewEventView.tsx
+++ b/frontend/src/viewEvent/ViewEventView.tsx
@@ -36,6 +36,10 @@ const ViewEventView = () => {
         refreshEvent();
     }, [id, refreshEvent]);
 
+    if (accessToken === null || userFacebookId === null) {
+        return <div>Loading...</div>;
+    }
+
     return (
         <>
             <Grid container marginX={"auto"} marginY={4} maxWidth="1000px" sx={{ borderRadius: '32px', overflow: 'hidden', backgroundColor: '#EEEEFF' }}>
diff --git a/frontend/src/viewEvent/eventParticipantsPanel/EventParticipantsPanel.tsx b/frontend/src/viewEvent/eventParticipantsPanel/EventParticipantsPanel.tsx
index f89b840..945a5f8 100644
--- a/frontend/src/viewEvent/eventParticipantsPanel/EventParticipantsPanel.tsx
+++ b/frontend/src/viewEvent/eventParticipantsPanel/EventParticipantsPanel.tsx
@@ -15,7 +15,7 @@ const EventParticipantsPanel = (
                         </Typography>
                     </Grid>
                     { model.participants.map((participant, index) => (
-                        <Grid size={12} key={/*participant.userFacebookId ||*/ /* Uncomment la linia asta cand edi si adi n o sa mai aiba acelasi facebookId*/ index}>
+                        <Grid size={12} key={index}>
                             <Typography variant="body1" align="left">
                                 {participant.username}
                             </Typography>
diff --git a/frontend/src/views/Home.tsx b/frontend/src/views/Home.tsx
index 189f66c..e2354eb 100644
--- a/frontend/src/views/Home.tsx
+++ b/frontend/src/views/Home.tsx
@@ -1,16 +1,93 @@
 import React from 'react';
-import { Container, Typography } from '@mui/material';
+import { Container, Typography, Card, CardContent, Box, Button, Grid, Link } from '@mui/material';
+import EventIcon from '@mui/icons-material/Event';
+import GroupIcon from '@mui/icons-material/Group';
+import SecurityIcon from '@mui/icons-material/Security';
 
 const Home = () => {
     return (
+    <>
         <Container>
-            <Typography variant="h3" gutterBottom>
-                Home Page
-            </Typography>
-            <Typography variant="body1">
-            </Typography>
+            <Card sx={{ p: 2, mb: 4 }}>
+            <Box mb={4} textAlign="center">
+                <Typography variant="h3" gutterBottom sx={{ fontWeight: 'bold' }}>
+                    Welcome to VibeSync!
+                </Typography>
+
+            </Box>
+            </Card>
+
+            <Grid container spacing={4} justifyContent="center">
+                <Grid item xs={12} sm={6}>
+                    <Card>
+                        <CardContent>
+                            <Box display="flex" alignItems="center" mb={2}>
+                                <EventIcon fontSize="large" color="primary" sx={{ mr: 2 }} />
+                                <Typography variant="h5">Event Management</Typography>
+                            </Box>
+                            <Typography variant="body2">
+                                Create and manage events effortlessly with real-time updates and seamless participant tracking.
+                            </Typography>
+                        </CardContent>
+                    </Card>
+                </Grid>
+                <Grid item xs={12} sm={6}>
+                    <Card>
+                        <CardContent>
+                            <Box display="flex" alignItems="center" mb={2}>
+                                <GroupIcon fontSize="large" color="secondary" sx={{ mr: 2 }} />
+                                <Typography variant="h5">Community Connections</Typography>
+                            </Box>
+                            <Typography variant="body2">
+                                Connect with like-minded individuals and explore personalized event recommendations.
+                            </Typography>
+                        </CardContent>
+                    </Card>
+                </Grid>
+
+            <Grid item xs={12} sm={6}>
+                            <Card>
+                                <CardContent>
+                                    <Box display="flex" alignItems="center" mb={2}>
+                                        <SecurityIcon fontSize="large" color="primary" sx={{ mr: 2 }} />
+                                        <Typography variant="h5">Secure Platform</Typography>
+                                    </Box>
+                                    <Typography variant="body2">
+                                        Your data is safe with us. Enjoy a secure and trustworthy environment for all your interactions.
+                                    </Typography>
+                                </CardContent>
+                            </Card>
+                        </Grid>
+                        </Grid>
+
         </Container>
+
+{/* Footer Section */}
+<Box
+    component="footer"
+    py={1}
+    textAlign="center"
+    bgcolor="grey.200"
+    sx={{
+        width: '100%',
+        position: 'fixed',
+        bottom: 0,
+        left: 0,
+        zIndex: 1000,
+        paddingTop: '32px',
+        paddingBottom: '64px',
+    }}
+>
+    <Typography variant="h6" gutterBottom>
+        Contact us: <Link href="mailto:support@vibesync.com">support@vibesync.com</Link>
+    </Typography>
+    <Typography variant="body1">
+        &copy; {new Date().getFullYear()} VibeSync. All rights reserved.
+    </Typography>
+</Box>
+        </>
+
     );
 };
 
-export default Home;
\ No newline at end of file
+export default Home;