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

@@ -5,12 +5,21 @@ import { collection, getDocs } from "firebase/firestore";
 interface Response {
   type: "success" | "error" | undefined;
   message: any;
-  result: 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;
 }
 
@@ -21,44 +30,53 @@ interface DataContextProviderProps {
 const emptyResponse: Response = {
   type: undefined,
   message: "",
-  result: undefined,
 };
 
 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 {
-      let questions: any[] = [];
       setLoading(true);
       const query = await getDocs(collection(db, "questions"));
-      query.forEach((doc) => questions.push(doc.data()));
+      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",
-        result: questions,
       });
     } catch (e) {
       setLoading(false);
       setResponse({
         type: "error",
         message: e,
-        result: undefined,
       });
     }
   };
 
   const dataContextProviderValue = useMemo(
-    () => ({ loading, response, getQuestions }),
-    [loading, response]
+    () => ({ loading, response, questions, getQuestions }),
+    [loading, response, questions]
   );
 
   return (

src/index.tsx

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

src/pages/profile.tsx

@@ -0,0 +1,75 @@
+import { useEffect, useState } from "react";
+import {
+  Avatar,
+  Box,
+  Button,
+  Chip,
+  Container,
+  CssBaseline,
+  Grid,
+} from "@mui/material";
+import Navbar from "../components/Navbar";
+import ProfileField from "../components/ProfileField";
+import { useAuth } from "../auth/auth.context";
+import { Values } from "../components/DropDownOrTextField";
+
+export default function Profile() {
+  const { user } = useAuth();
+  const [edit, setEdit] = useState(false);
+  const [value, setValue] = useState<Values>({
+    email: user?.email ? user?.email : "",
+    name: user?.displayName ? user?.displayName : "",
+    year: "",
+    major: "",
+  });
+
+  const profileFields = [
+    { title: "Email", data: "email" },
+    { title: "Display Name", data: "name" },
+    { title: "Year of Study", data: "year" },
+    { title: "Major", data: "major" },
+  ];
+
+  const toggleEdit = () => {
+    setEdit(!edit);
+  };
+
+  useEffect(() => {
+    console.log(user);
+  });
+
+  return (
+    <Box height="100vh">
+      <CssBaseline />
+      <Navbar />
+      <Container sx={{ mt: 5 }}>
+        <Grid container spacing={2}>
+          <Grid item xs={3}>
+            <Avatar sx={{ height: 192, width: 192, mb: 2 }}>R</Avatar>
+            <Chip label="Verified User" color="primary" />
+          </Grid>
+          <Grid item xs={9}>
+            <Box display="flex" justifyContent="flex-end" width="100%">
+              <Button
+                variant="contained"
+                onClick={toggleEdit}
+                color={edit ? "success" : "primary"}
+              >
+                {edit ? "Save Details" : "Edit Details"}
+              </Button>
+            </Box>
+            {profileFields.map((field) => (
+              <ProfileField
+                title={field.title}
+                data={field.data}
+                edit={edit}
+                value={value}
+                setValue={setValue}
+              />
+            ))}
+          </Grid>
+        </Grid>
+      </Container>
+    </Box>
+  );
+}