user settings, points slider

contexts/SettingsContext.tsx

@@ -1,4 +1,5 @@
 import { createContext, FC, ReactNode, useContext, useState } from "react";
+import { useAuthContext } from "./AuthContext";
 
 export const colorMap = {
   pink: "#ea156c",
@@ -8,8 +9,16 @@ export const colorMap = {
   purple: "#7305d4",
 };
 
+interface IUserDetails {
+  email: string | undefined;
+  firstName: string;
+  lastName: string;
+}
+
 interface ISettingsContext {
   calendarColor: string;
+  userDetails: IUserDetails;
+  editUserDetails: (details: Partial<IUserDetails>) => void;
   setCalendarColor: (color: string) => void;
 }
 
@@ -18,10 +27,24 @@ const SettingsContext = createContext<ISettingsContext>(undefined!);
 export const SettingsContextProvider: FC<{ children: ReactNode }> = ({
   children,
 }) => {
+  const { user } = useAuthContext();
+  const [userDetails, setUserDetails] = useState<IUserDetails>({
+    email: user?.email?.toString(),
+    firstName: "",
+    lastName: "",
+  });
   const [calendarColor, setCalendarColor] = useState<string>(colorMap.pink);
 
+  const editUserDetails = (details: Partial<IUserDetails>) => {
+    setUserDetails((prevDetails) => ({
+      ...prevDetails,
+      ...details,
+    }));
+  };
   return (
-    <SettingsContext.Provider value={{ calendarColor, setCalendarColor }}>
+    <SettingsContext.Provider
+      value={{ calendarColor, setCalendarColor, userDetails, editUserDetails }}
+    >
       {children}
     </SettingsContext.Provider>
   );