Merge pull request #33 from CS3219-AY2324S1/auth

add profile page

Author: ngjiayuan

src/components/DropDownOrTextField.tsx

@@ -0,0 +1,64 @@
+import { Dispatch, SetStateAction } from "react";
+import {
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Select,
+  TextField,
+} from "@mui/material";
+
+export interface Values {
+  [key: string]: string;
+}
+
+interface DropDownOrTextFieldProps {
+  title: string;
+  data: string;
+  value: Values;
+  setValue: Dispatch<SetStateAction<Values>>;
+}
+
+interface DropDownValues {
+  [key: string]: string[];
+}
+
+export function DropDownOrTextField({
+  title,
+  data,
+  value,
+  setValue,
+}: DropDownOrTextFieldProps) {
+  const dropdowns = ["Year of Study", "Major"];
+  const dropDownValues: DropDownValues = {
+    "Year of Study": ["1", "2", "3", "4", ">5"],
+    Major: [
+      "Computer Science",
+      "Business Analytics",
+      "Information Systems",
+      "Data Science",
+    ],
+  };
+
+  return (
+    <>
+      {dropdowns.includes(title) ? (
+        <FormControl sx={{ width: "23.5ch" }}>
+          <InputLabel id="demo-simple-select-label">{title}</InputLabel>
+          <Select
+            labelId="demo-simple-select-label"
+            id="demo-simple-select"
+            value={value[data]}
+            label={title}
+            onChange={(e) => setValue({ ...value, [data]: e.target.value })}
+          >
+            {dropDownValues[title].map((val: string) => (
+              <MenuItem value={val}>{val}</MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+      ) : (
+        <TextField label={title} variant="outlined" value={value[data]} />
+      )}
+    </>
+  );
+}

src/components/Navbar.tsx

@@ -15,6 +15,7 @@ import {
 import MenuIcon from "@mui/icons-material/Menu";
 import AdbIcon from "@mui/icons-material/Adb";
 import { useAuth } from "../auth/auth.context";
+import { useNavigate } from "react-router-dom";
 
 const pages = ["Products", "Pricing", "Blog"];
 const authPages = [
@@ -30,6 +31,7 @@ const authPages = [
 
 export default function Navbar() {
   const { user, logout } = useAuth();
+  const navigate = useNavigate();
   const [anchorElNav, setAnchorElNav] = useState<null | HTMLElement>(null);
   const [anchorElUser, setAnchorElUser] = useState<null | HTMLElement>(null);
 
@@ -50,7 +52,7 @@ export default function Navbar() {
   };
 
   const settings = [
-    { name: "Profile", onclick: handleCloseUserMenu },
+    { name: "Profile", onclick: () => navigate("/profile", { replace: true }) },
     { name: "Account", onclick: handleCloseUserMenu },
     { name: "Dashboard", onclick: handleCloseUserMenu },
     { name: "Logout", onclick: logout },

src/components/ProfileField.tsx

@@ -0,0 +1,41 @@
+import { Dispatch, SetStateAction } from "react";
+import { Box, Grid, Typography } from "@mui/material";
+import { DropDownOrTextField, Values } from "./DropDownOrTextField";
+
+interface ProfileFieldProps {
+  title: string;
+  data: string;
+  edit: boolean;
+  value: Values;
+  setValue: Dispatch<SetStateAction<Values>>;
+}
+
+export default function ProfileField({
+  title,
+  data,
+  edit,
+  value,
+  setValue,
+}: ProfileFieldProps) {
+  return (
+    <Box my={1}>
+      {edit ? (
+        <DropDownOrTextField
+          title={title}
+          data={data}
+          value={value}
+          setValue={setValue}
+        />
+      ) : (
+        <Grid container>
+          <Grid item xs={3}>
+            <Typography fontWeight={600}>{title}:</Typography>
+          </Grid>
+          <Grid item xs={9}>
+            {value[data]}
+          </Grid>
+        </Grid>
+      )}
+    </Box>
+  );
+}

src/data/data.context.tsx

@@ -1,91 +1,91 @@
-import { createContext, ReactNode, useContext, useMemo, useState } from "react";
-import { db } from "../firebase/firebase";
-import { collection, getDocs } from "firebase/firestore";
-
-interface Response {
-  type: "success" | "error" | undefined;
-  message: any;
-}
-
-interface Question {
-  title: string;
-  tags: string[];
-  categories: string[];
-  constraints: string[];
-  difficulty: "Easy" | "Medium" | "Hard";
-  description: string;
-}
-
-interface DataContextData {
-  loading: boolean;
-  response: Response;
-  questions: Question[];
-  getQuestions: () => void;
-}
-
-interface DataContextProviderProps {
-  children: ReactNode;
-}
-
-const emptyResponse: Response = {
-  type: undefined,
-  message: "",
-};
-
-const DataContext = createContext<DataContextData>({
-  loading: false,
-  response: emptyResponse,
-  questions: [],
-  getQuestions: () => undefined,
-});
-
-export function DataContextProvider({ children }: DataContextProviderProps) {
-  const [loading, setLoading] = useState(false);
-  const [response, setResponse] = useState<Response>(emptyResponse);
-  const [questions, setQuestions] = useState<Question[]>([]);
-
-  const getQuestions = async () => {
-    try {
-      setLoading(true);
-      const query = await getDocs(collection(db, "questions"));
-      const result = query.docs.map((d) => {
-        const q = d.data();
-        return {
-          title: q.title,
-          tags: q.tags,
-          categories: q.categories,
-          constraints: q.constraints,
-          difficulty: q.difficulty,
-          description: q.description,
-        };
-      });
-      setLoading(false);
-      setQuestions(result);
-      setResponse({
-        type: "success",
-        message: "successfully retreived questions",
-      });
-    } catch (e) {
-      setLoading(false);
-      setResponse({
-        type: "error",
-        message: e,
-      });
-    }
-  };
-
-  const dataContextProviderValue = useMemo(
-    () => ({ loading, response, questions, getQuestions }),
-    [loading, response, questions]
-  );
-
-  return (
-    <DataContext.Provider value={dataContextProviderValue}>
-      {children}
-    </DataContext.Provider>
-  );
-}
-
-export const useData = () => {
-  return useContext(DataContext);
-};
+import { createContext, ReactNode, useContext, useMemo, useState } from "react";
+import { db } from "../firebase/firebase";
+import { collection, getDocs } from "firebase/firestore";
+
+interface Response {
+  type: "success" | "error" | undefined;
+  message: any;
+}
+
+interface Question {
+  title: string;
+  tags: string[];
+  categories: string[];
+  constraints: string[];
+  difficulty: "Easy" | "Medium" | "Hard";
+  description: string;
+}
+
+interface DataContextData {
+  loading: boolean;
+  response: Response;
+  questions: Question[];
+  getQuestions: () => void;
+}
+
+interface DataContextProviderProps {
+  children: ReactNode;
+}
+
+const emptyResponse: Response = {
+  type: undefined,
+  message: "",
+};
+
+const DataContext = createContext<DataContextData>({
+  loading: false,
+  response: emptyResponse,
+  questions: [],
+  getQuestions: () => undefined,
+});
+
+export function DataContextProvider({ children }: DataContextProviderProps) {
+  const [loading, setLoading] = useState(false);
+  const [response, setResponse] = useState<Response>(emptyResponse);
+  const [questions, setQuestions] = useState<Question[]>([]);
+
+  const getQuestions = async () => {
+    try {
+      setLoading(true);
+      const query = await getDocs(collection(db, "questions"));
+      const result = query.docs.map((d) => {
+        const q = d.data();
+        return {
+          title: q.title,
+          tags: q.tags,
+          categories: q.categories,
+          constraints: q.constraints,
+          difficulty: q.difficulty,
+          description: q.description,
+        };
+      });
+      setLoading(false);
+      setQuestions(result);
+      setResponse({
+        type: "success",
+        message: "successfully retreived questions",
+      });
+    } catch (e) {
+      setLoading(false);
+      setResponse({
+        type: "error",
+        message: e,
+      });
+    }
+  };
+
+  const dataContextProviderValue = useMemo(
+    () => ({ loading, response, questions, getQuestions }),
+    [loading, response, questions]
+  );
+
+  return (
+    <DataContext.Provider value={dataContextProviderValue}>
+      {children}
+    </DataContext.Provider>
+  );
+}
+
+export const useData = () => {
+  return useContext(DataContext);
+};

src/index.tsx

@@ -8,6 +8,7 @@ import SignUp from "./pages/signup";
 import AuthGuard from "./auth/AuthGuard";
 import { DataContextProvider } from "./data/data.context";
 import Landing from "./pages/landing";
+import Profile from "./pages/profile";
 
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement
@@ -30,6 +31,14 @@ root.render(
                 </AuthGuard>
               }
             />
+            <Route
+              path="/profile"
+              element={
+                <AuthGuard>
+                  <Profile />
+                </AuthGuard>
+              }
+            />
           </Routes>
         </DataContextProvider>
       </AuthContextProvider>