edit user service to update profile

Author: KJunWei

backend/src/index.ts

@@ -5,7 +5,7 @@ import {
   handleLogout,
   handleSignUp,
 } from "./auth/auth.controller";
-import { handleCreateUser, handleGetUser } from "./user/user.controller";
+import { handleCreateUser, handleGetUser, handleUpdateUser } from "./user/user.controller";
 const app = express();
 const port = 3001;
 
@@ -22,6 +22,7 @@ app.delete("/logout", handleLogout);
 
 app.post("/user", handleCreateUser);
 app.get("/user", handleGetUser);
+app.put("/user", handleUpdateUser);
 
 app.listen(port, () => {
   console.log(`Peerprep listening on port ${port}`);

backend/src/user/user.controller.ts

@@ -1,5 +1,5 @@
 import { Request, Response } from "express";
-import { createUser, getUser } from "./user.service";
+import { createUser, getUser, updateUser } from "./user.service";
 
 export async function handleCreateUser(req: Request, res: Response) {
   try {
@@ -29,3 +29,19 @@ export async function handleGetUser(req: Request, res: Response) {
     res.status(500).send(error);
   }
 }
+
+export async function handleUpdateUser(req: Request, res: Response) {
+  try {
+    const email = req.body.params.email;
+    if (typeof email === "string") {
+      console.log(`updating user ${email}`);
+      const user = await updateUser(email, req.body.params)
+      res.status(200).send(user);
+    } else {
+      res.status(500).send("no params");
+    }
+  } catch (error) {
+    console.error(error);
+    res.status(500).send(error);
+  }
+}

backend/src/user/user.service.ts

@@ -1,5 +1,5 @@
 import { initializeApp } from "firebase/app";
-import { doc, getDoc, getFirestore, setDoc } from "firebase/firestore";
+import { doc, getDoc, getFirestore, setDoc, updateDoc } from "firebase/firestore";
 import { firebaseConfig } from "../firebase/firebase.config";
 
 initializeApp(firebaseConfig);
@@ -18,11 +18,17 @@ export async function createUser(email: string): Promise<User> {
   try {
     await setDoc(doc(db, "users", email), {
       email: email,
+      name: "-",
+      year: "-",
+      major: "-",
       role: "user",
       completed: 0,
     });
     return Promise.resolve({
       email: email,
+      name: "-",
+      year: "-",
+      major: "-",
       role: "user",
       completed: 0,
     });
@@ -50,3 +56,29 @@ export async function getUser(email: string): Promise<User> {
     return Promise.reject(error);
   }
 }
+
+export async function updateUser(email: string, params: any): Promise<User> {
+  try {
+    const document = doc(db, "users", email);
+    await updateDoc(document, {
+      name: params.name,
+      year: params.year,
+      major: params.major
+    })
+    const data = await getDoc(doc(db, "users", email));
+    const user = data.data();
+    if (user) {
+      return Promise.resolve({
+        email: email,
+        name: user.name ? user.name : undefined,
+        year: user.year ? user.year : undefined,
+        major: user.major ? user.major : undefined,
+        role: user.role,
+        completed: user.completed,
+      });
+    }
+    return Promise.reject("no such user");
+  } catch (error) {
+    return Promise.reject(error);
+  }
+}

frontend/src/api/user/data.ts

@@ -1,8 +1,11 @@
 import httpClient from "../axios/config";
-import { UserModel } from "./model";
+import { UserModel, Values } from "./model";
 
 export const createUser = (email: string) =>
   httpClient.post<UserModel>("/user", { email: email });
 
 export const getUser = (email: string) =>
   httpClient.get<UserModel>("/user", { params: { email: email } });
+
+  export const updateUser = (params: Values) =>
+  httpClient.put<UserModel>("/user", { params });

frontend/src/api/user/model.ts

@@ -6,3 +6,7 @@ export interface UserModel {
   role: string;
   completed: number;
 }
+
+export interface Values {
+  [key: string]: string;
+}

frontend/src/auth/auth.context.tsx

@@ -15,6 +15,7 @@ import { createUser, getUser, UserModel } from "../api/user";
 
 interface AuthContextData {
   user: UserModel | undefined;
+  setUser: any | undefined,
   error: string;
   signUp: (email: string, password: string) => void;
   login: (email: string, password: string) => void;
@@ -27,6 +28,7 @@ interface AuthContextProviderProps {
 
 const AuthContext = createContext<AuthContextData>({
   user: undefined,
+  setUser: undefined,
   error: "",
   signUp: (email: string, password: string) => undefined,
   login: (email: string, password: string) => undefined,
@@ -101,8 +103,8 @@ export function AuthContextProvider({ children }: AuthContextProviderProps) {
   }, [setUser, navigate]);
 
   const authContextProviderValue = useMemo(
-    () => ({ user, error, signUp, login, logout }),
-    [user, error, signUp, login, logout]
+    () => ({ user, setUser, error, signUp, login, logout }),
+    [user, setUser, error, signUp, login, logout]
   );
 
   return (

frontend/src/components/DropDownOrTextField.tsx

@@ -30,12 +30,13 @@ export function DropDownOrTextField({
 }: DropDownOrTextFieldProps) {
   const dropdowns = ["Year of Study", "Major"];
   const dropDownValues: DropDownValues = {
-    "Year of Study": ["1", "2", "3", "4", ">5"],
+    "Year of Study": ["1", "2", "3", "4", ">5", "-"],
     Major: [
       "Computer Science",
       "Business Analytics",
       "Information Systems",
       "Data Science",
+      "-"
     ],
   };
 
@@ -57,7 +58,13 @@ export function DropDownOrTextField({
           </Select>
         </FormControl>
       ) : (
-        <TextField label={title} variant="outlined" value={value[data]} />
+        <TextField label={title}
+        variant="outlined" 
+        value={value[data]}
+        disabled={title == "Email"} // Users cannot edit their email
+        onChange={(e) => {
+          setValue({ ...value, [data]: e.target.value })}
+        } />
       )}
     </>
   );

frontend/src/pages/profile.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, useCallback } from "react";
 import {
   Avatar,
   Box,
@@ -12,9 +12,10 @@ import Navbar from "../components/Navbar";
 import ProfileField from "../components/ProfileField";
 import { useAuth } from "../auth/auth.context";
 import { Values } from "../components/DropDownOrTextField";
+import { updateUser } from "../api/user";
 
 export default function Profile() {
-  const { user } = useAuth();
+  const { user, setUser } = useAuth();
   const [edit, setEdit] = useState(false);
   const [value, setValue] = useState<Values>({
     email: user?.email ? user?.email : "",
@@ -30,7 +31,15 @@ export default function Profile() {
     { title: "Major", data: "major" },
   ];
 
-  const toggleEdit = () => {
+  const toggleEdit = async () => {
+    if (edit) {
+      try {
+        const response = await updateUser(value);
+        setUser(value)
+      } catch (e) {
+        console.log(e)
+      }
+    }
     setEdit(!edit);
   };