Winjolu

.gitignore

@@ -1,4 +1,3 @@
 .env
-node_modules
-.env
 node_modules/
+package-lock.json

Client/Auth/AuthContext.js

@@ -0,0 +1,93 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+import axios from 'axios';
+
+/**
+ * Context object created
+ */
+const AuthContext = createContext();
+
+/**
+ * Functional component that will use the Provider functionality in the AuthContext to 
+ * share the state and functions with child components. 
+ * AuthContext : { ..., Provider: {the auth state}}
+ * @param {*} children deconstructed prop - refers to any nested components wrapped by AuthProvider
+ * in the virtual DOM (see client/index.js)
+ * @returns 
+ */
+export const AuthProvider = ({ children }) => {
+
+  /**
+   * State variables and setters for holding top level authentication information 
+   */
+  const [user, setUser] = useState(null);
+  const [session, setSession] = useState(null);
+  const [avatarUrl, setAvatarUrl] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  /**
+   * sessionStorage does not persist beyond the current session,
+   * only accessible in the same window/tab and cleared when either closed.
+   * Stored in memory on web browser, not written to disk like cookies
+   */
+  useEffect(() => {
+    const storedUser = JSON.parse(sessionStorage.getItem('user'));
+    const storedSession = JSON.parse(sessionStorage.getItem('session'));
+    const storedAvatarUrl = sessionStorage.getItem('avatarUrl');
+    if (storedUser) {
+      setUser(storedUser);
+    }
+    if (storedSession) {
+      setSession(storedSession);
+    }
+    if (storedAvatarUrl) {
+      setAvatarUrl(storedAvatarUrl);
+    }
+    setLoading(false);  // Indicates that the data fetching has completed
+  }, []);
+
+  /**
+   * Async function that makes a request 
+   * @param {*} user 
+   * @param {*} session 
+   */
+  const login = async (user, session) => {
+    setUser(user);
+    setSession(session);
+    fetchAvatarUrl(user.id);
+    sessionStorage.setItem('user', JSON.stringify(user));
+    sessionStorage.setItem('session', JSON.stringify(session));
+  };
+
+  const fetchAvatarUrl = async (userId) => {
+    try {
+      const response = await axios.get(`/api/user-profile/${userId}`);
+      const avatarUrl = response.data.avatar_url;
+      setAvatarUrl(avatarUrl);
+      sessionStorage.setItem('avatarUrl', avatarUrl);
+    } catch (error) {
+      console.error('Error fetching avatar URL:', error);
+    }
+  };
+
+  const logout = () => {
+    setUser(null);
+    setSession(null);
+    setAvatarUrl(null);
+    sessionStorage.removeItem('user');
+    sessionStorage.removeItem('session');
+    sessionStorage.removeItem('avatarUrl');
+  };
+
+  /**
+   * Using React 
+   */
+  return (
+    <AuthContext.Provider value={{ user, session, avatarUrl, login, logout, loading }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export const useAuth = () => {
+  return useContext(AuthContext);
+};

Client/Auth/AuthProviderDebugger.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import { useAuth } from './AuthContext'; // Adjust the path as needed
+
+const style = {
+  position: 'fixed',
+  bottom: '10px',
+  right: '10px',
+  width: 300,
+  bgcolor: 'background.paper',
+  border: '2px solid #000',
+  boxShadow: 24,
+  p: 2,
+  zIndex: 1000,
+  overflow: 'auto',
+  maxHeight: '50vh',
+};
+
+const AuthProviderDebugger = () => {
+  const { user, session, avatarUrl } = useAuth();
+
+  return (
+    <Box sx={style}>
+      <Typography variant="h6" component="h2">
+        AuthContext Debug Info
+      </Typography>
+      <Box sx={{ mt: 2 }}>
+        <pre>{JSON.stringify({ user, session, avatarUrl }, null, 2)}</pre>
+      </Box>
+    </Box>
+  );
+};
+
+export default AuthProviderDebugger;

Client/Auth/Login.jsx

@@ -0,0 +1,79 @@
+import React, { useState } from 'react';
+import axios from 'axios';
+import { useHistory } from 'react-router-dom';
+import { Typography, CircularProgress, Snackbar, Alert } from '@mui/material';
+import { useAuth } from './AuthContext';
+import AuthNavigationButton from '../components/AuthNavigationButton';
+import '../styles/AuthForm.css';
+
+/**
+ * User-side functionality for existing user at login and route path
+ * @returns 
+ */
+const Login = () => {
+  /**
+   * local state for email, password, loading
+   */
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [snackbar, setSnackbar] = useState({ open: false, message: '', severity: '' });
+  const history = useHistory();
+  const { login } = useAuth();
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    try {
+      const response = await axios.post('/api/login', { email, password });
+      const { user, session } = response.data;
+      login(user, session);
+      setSnackbar({ open: true, message: 'Login successful', severity: 'success' });
+      setTimeout(() => {
+        history.push('/search');
+      }, 1200); 
+    } catch (error) {
+      setSnackbar({ open: true, message: 'Login failed', severity: 'error' });
+      console.error('AxiosError:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleCloseSnackbar = () => {
+    setSnackbar({ ...snackbar, open: false });
+  };
+
+  return (
+    <div className="auth-container">
+      <div className="auth-form">
+        <Typography variant="h4" style={{ marginBottom: '1rem' }}>Login</Typography>
+        <form onSubmit={handleSubmit}>
+          <label>Email:</label>
+          <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} required />
+          <label>Password:</label>
+          <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required />
+          <button type="submit" disabled={loading}>Login</button>
+        </form>
+        {loading && (
+          <div className="center-loading">
+            <CircularProgress />
+          </div>
+        )}
+      </div>
+      <AuthNavigationButton navigateTo="/signup" label="Don't have an account? Sign-Up" />
+      <Snackbar
+        open={snackbar.open}
+        autoHideDuration={6000}
+        onClose={handleCloseSnackbar}
+        anchorOrigin={{ vertical: 'top', horizontal: 'center' }} // Center the Snackbar at the top
+      >
+        <Alert onClose={handleCloseSnackbar} severity={snackbar.severity} sx={{ width: '100%' }}>
+          {snackbar.message}
+        </Alert>
+      </Snackbar>
+    </div>
+  );
+};
+
+export default Login;

Client/Auth/LoginStatus.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { useAuth } from './AuthContext';
+
+const LoginStatus = () => {
+  const { user } = useAuth();
+  return (
+    <div className="login-status">
+      {user ? `Logged in as: ${user.user_metadata.first_name}` : 'Not logged in'}
+    </div>
+  );
+};
+
+export default LoginStatus;

Client/Auth/Signup.jsx

@@ -0,0 +1,84 @@
+import React, { useState } from 'react';
+import axios from 'axios';
+import { useHistory } from 'react-router-dom';
+import { Typography, CircularProgress, Snackbar, Alert } from '@mui/material';
+import { useAuth } from './AuthContext';
+import AuthNavigationButton from '../components/AuthNavigationButton';
+import '../styles/AuthForm.css';
+
+const Signup = () => {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [firstName, setFirstName] = useState('');
+  const [lastName, setLastName] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [snackbar, setSnackbar] = useState({ open: false, message: '', severity: '' });
+  const history = useHistory();
+  const { login } = useAuth();
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    try {
+      const response = await axios.post('/api/signup', { email, password, firstName, lastName });
+      const { user, session } = response.data;
+      login(user, session);
+      setTimeout(() => {
+        setSnackbar({ open: true, message: 'Signup successful', severity: 'success' });
+        setTimeout(() => {
+          history.push('/search');
+        }, 2000); // Redirect after 2 seconds to ensure the user sees the Snackbar
+      }, 1000); // Ensure spinner shows for at least 1 second
+    } catch (error) {
+      setTimeout(() => {
+        setSnackbar({ open: true, message: 'Signup failed', severity: 'error' });
+      }, 1000); // Ensure spinner shows for at least 1 second
+      console.error('AxiosError:', error);
+    } finally {
+      setTimeout(() => {
+        setLoading(false);
+      }, 1000); // Ensure spinner shows for at least 1 second
+    }
+  };
+
+  const handleCloseSnackbar = () => {
+    setSnackbar({ ...snackbar, open: false });
+  };
+
+  return (
+    <div className="auth-container">
+      <div className="auth-form">
+        <Typography variant="h4" style={{ marginBottom: '1rem' }}>Signup</Typography>
+        <form onSubmit={handleSubmit}>
+          <label>Email:</label>
+          <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} required />
+          <label>Password:</label>
+          <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required />
+          <label>First Name:</label>
+          <input type="text" value={firstName} onChange={(e) => setFirstName(e.target.value)} required />
+          <label>Last Name:</label>
+          <input type="text" value={lastName} onChange={(e) => setLastName(e.target.value)} required />
+          <button type="submit" disabled={loading}>Signup</button>
+        </form>
+        {loading && (
+          <div className="center-loading">
+            <CircularProgress />
+          </div>
+        )}
+      </div>
+      <AuthNavigationButton navigateTo="/login" label="Already Have an Account? Login" />
+      <Snackbar
+        open={snackbar.open}
+        autoHideDuration={6000}
+        onClose={handleCloseSnackbar}
+        anchorOrigin={{ vertical: 'top', horizontal: 'center' }} // Center the Snackbar at the top
+      >
+        <Alert onClose={handleCloseSnackbar} severity={snackbar.severity} sx={{ width: '100%' }}>
+          {snackbar.message}
+        </Alert>
+      </Snackbar>
+    </div>
+  );
+};
+
+export default Signup;

Client/Pages/About.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Container, Typography, Paper } from '@mui/material';
+
+const About = () => {
+  return (
+    <Container maxWidth="md" style={{ marginTop: '100px' }}> {/* Adjust marginTop as needed */}
+      <Paper elevation={3} style={{ padding: '20px', backgroundColor: 'rgba(255, 255, 255, 0.8)' }}>
+        <Typography variant="h2" gutterBottom>
+          About Fashion Selector
+        </Typography>
+        <Typography variant="body1" paragraph>
+          Fashion Selector is your AI-powered fashion assistant, designed to help you discover and refine your personal style.
+        </Typography>
+        <Typography variant="body1" paragraph>
+          Our mission is to make fashion accessible and enjoyable for everyone. Whether you're looking for outfit inspiration or trying to build a wardrobe that truly reflects your personality, Fashion Selector is here to guide you.
+        </Typography>
+        <Typography variant="body1">
+          Explore, experiment, and express yourself through fashion with us!
+        </Typography>
+      </Paper>
+    </Container>
+  );
+};
+
+export default About;

Client/Pages/HomePage.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import Login from '../Auth/Login'; // Adjust the path as needed
+
+const HomePage = () => {
+  return (
+      <Login />
+  );
+};
+
+export default HomePage;