user settings, points slider

components/pages/main/SignUpPage.tsx

@@ -26,7 +26,7 @@ const SignUpPage = (props: { unsetRegister: () => any }) => {
   const { mutateAsync: signUp } = useSignUp();
 
   const handleSignUp = async () => {
-    await signUp({ email, password });
+    await signUp({ email, password, firstName, lastName });
   };
 
   return (

components/pages/settings/SettingsPage.tsx

@@ -5,6 +5,7 @@ import { Entypo, Ionicons, Octicons } from "@expo/vector-icons";
 import CalendarSettingsPage from "./CalendarSettingsPage";
 import ChoreRewardSettings from "./ChoreRewardSettings";
 import UserSettings from "./UserSettings";
+import { AuthContextProvider } from "@/contexts/AuthContext";
 
 const styles = StyleSheet.create({
   mainBtn: {
@@ -24,74 +25,82 @@ const pageIndex = {
 const SettingsPage = () => {
   const [selectedPage, setSelectedPage] = useState<number>(0);
   return (
-    <View>
-      {selectedPage == 0 && (
-        <View centerH marginH-30 marginT-30>
-          <Button
-            backgroundColor="white"
-            style={styles.mainBtn}
-            label="Manage my profile"
-            color="#07b8c7"
-            iconSource={() => (
-              <Ionicons
-                name="person-circle-sharp"
-                size={24}
-                color="#07b8c7"
-                style={{ marginRight: 10 }}
-              />
-            )}
-            onPress={() => setSelectedPage(pageIndex.user)}
-          />
-          <Button
-            backgroundColor="white"
-            style={styles.mainBtn}
-            label="Calendar settings"
-            color="#fd1775"
-            iconSource={() => (
-              <Ionicons
-                name="home-outline"
-                size={24}
-                color="#fd1775"
-                style={{ marginRight: 10 }}
-              />
-            )}
-            onPress={() => {setSelectedPage(pageIndex.calendar)}}
-          />
-          <Button
-            backgroundColor="white"
-            style={styles.mainBtn}
-            label="Chore reward settings"
-            color="#ff9900"
-            iconSource={() => (
-              <Octicons
-                name="gear"
-                size={24}
-                color="#ff9900"
-                style={{ marginRight: 10 }}
-              />
-            )}
-            onPress={() => setSelectedPage(pageIndex.chore)}
-          />
-          <Button
-            backgroundColor="white"
-            style={styles.mainBtn}
-            label="Kaly privacy policy"
-            iconSource={() => (
-              <Entypo
-                name="text-document"
-                size={24}
-                color="#6c645b"
-                style={{ marginRight: 10 }}
-              />
-            )}
-            color="#6c645b"
-          />
-        </View>
-      )}
-      {selectedPage == pageIndex.calendar && <CalendarSettingsPage setSelectedPage={setSelectedPage} />}
-      {selectedPage == pageIndex.chore && <ChoreRewardSettings setSelectedPage={setSelectedPage} />}
-      {selectedPage == pageIndex.user && <UserSettings setSelectedPage={setSelectedPage} />}
-    </View>
+      <View>
+        {selectedPage == 0 && (
+          <View centerH marginH-30 marginT-30>
+            <Button
+              backgroundColor="white"
+              style={styles.mainBtn}
+              label="Manage my profile"
+              color="#07b8c7"
+              iconSource={() => (
+                <Ionicons
+                  name="person-circle-sharp"
+                  size={24}
+                  color="#07b8c7"
+                  style={{ marginRight: 10 }}
+                />
+              )}
+              onPress={() => setSelectedPage(pageIndex.user)}
+            />
+            <Button
+              backgroundColor="white"
+              style={styles.mainBtn}
+              label="Calendar settings"
+              color="#fd1775"
+              iconSource={() => (
+                <Ionicons
+                  name="home-outline"
+                  size={24}
+                  color="#fd1775"
+                  style={{ marginRight: 10 }}
+                />
+              )}
+              onPress={() => {
+                setSelectedPage(pageIndex.calendar);
+              }}
+            />
+            <Button
+              backgroundColor="white"
+              style={styles.mainBtn}
+              label="Chore reward settings"
+              color="#ff9900"
+              iconSource={() => (
+                <Octicons
+                  name="gear"
+                  size={24}
+                  color="#ff9900"
+                  style={{ marginRight: 10 }}
+                />
+              )}
+              onPress={() => setSelectedPage(pageIndex.chore)}
+            />
+            <Button
+              backgroundColor="white"
+              style={styles.mainBtn}
+              label="Kaly privacy policy"
+              iconSource={() => (
+                <Entypo
+                  name="text-document"
+                  size={24}
+                  color="#6c645b"
+                  style={{ marginRight: 10 }}
+                />
+              )}
+              color="#6c645b"
+            />
+          </View>
+        )}
+        {selectedPage == pageIndex.calendar && (
+          <CalendarSettingsPage setSelectedPage={setSelectedPage} />
+        )}
+        {selectedPage == pageIndex.chore && (
+          <ChoreRewardSettings setSelectedPage={setSelectedPage} />
+        )}
+        {selectedPage == pageIndex.user && (
+          <UserSettings setSelectedPage={setSelectedPage} />
+        )}
+      </View>
   );
 };
 

components/pages/settings/UserSettings.tsx

@@ -4,6 +4,7 @@ import { Ionicons } from "@expo/vector-icons";
 import { ScrollView, StyleSheet } from "react-native";
 import MyProfile from "./user_settings_views/MyProfile";
 import MyGroup from "./user_settings_views/MyGroup";
+import { useAuthContext } from "@/contexts/AuthContext";
 
 const UserSettings = (props: { setSelectedPage: (page: number) => void }) => {
   const [selectedView, setSelectedView] = useState<boolean>(true);

components/pages/settings/user_settings_views/MyProfile.tsx

@@ -1,8 +1,19 @@
 import { View, Text, TextField } from "react-native-ui-lib";
-import React from "react";
+import React, { useState } from "react";
 import { StyleSheet } from "react-native";
 import { ScrollView } from "react-native-gesture-handler";
+import { useAuthContext } from "@/contexts/AuthContext";
+import { useSettingsContext } from "@/contexts/SettingsContext";
+import { useUpdateUserData } from "@/hooks/firebase/useUpdateUserData";
 const MyProfile = () => {
+  const { user, profileData } = useAuthContext();
+
+  const [lastName, setLastName] = useState<string>(profileData?.lastName || "");
+  const [firstName, setFirstName] = useState<string>(
+    profileData?.firstName || ""
+  );
+
+  const { mutateAsync: updateUserData } = useUpdateUserData();
   return (
     <View>
       <View style={styles.card}>
@@ -18,15 +29,38 @@ const MyProfile = () => {
           <Text text80 marginT-10 marginB-7 color="#a1a1a1">
             First name
           </Text>
-          <TextField text70 placeholder="First name" style={styles.txtBox} />
+          <TextField
+            text70
+            placeholder="First name"
+            style={styles.txtBox}
+            value={firstName}
+            onChangeText={async (value) => {
+              setFirstName(value);
+              await updateUserData({ newUserData: { firstName: value } });
+            }}
+          />
           <Text text80 marginT-10 marginB-7 color="#a1a1a1">
             Last name
           </Text>
-          <TextField text70 placeholder="Last name" style={styles.txtBox} />
+          <TextField
+            text70
+            placeholder="Last name"
+            style={styles.txtBox}
+            value={lastName}
+            onChangeText={async (value) => {
+              setLastName(value);
+              await updateUserData({ newUserData: { lastName: value } });
+            }}
+          />
           <Text text80 marginT-10 marginB-7 color="#a1a1a1">
             Email address
           </Text>
-          <TextField text70 placeholder="Email address" style={styles.txtBox} />
+          <TextField
+            text70
+            placeholder="Email address"
+            value={user?.email?.toString()}
+            style={styles.txtBox}
+          />
         </View>
       </View>
 
@@ -35,7 +69,7 @@ const MyProfile = () => {
         <Text text80 marginT-20 marginB-7 color="#a1a1a1">
           Time Zone
         </Text>
-        <TextField text70 placeholder="Email address" style={styles.txtBox} />
+        <TextField text70 placeholder="Time Zone" style={styles.txtBox} />
       </View>
     </View>
   );

components/pages/todos/AddChore.tsx

@@ -20,6 +20,7 @@ import LinearGradient from "react-native-linear-gradient";
 import { PanningDirectionsEnum } from "react-native-ui-lib/src/components/panningViews/panningProvider";
 import { repeatOptions, useToDosContext } from "@/contexts/ToDosContext";
 import { setDate } from "date-fns";
+import PointsSlider from "@/components/shared/PointsSlider";
 
 const AddChore = () => {
   const { addToDo, toDos } = useToDosContext();
@@ -232,36 +233,11 @@ const AddChore = () => {
             Reward Points
           </Text>
         </View>
-        <View marginH-30 row spread>
-          <View width={"80%"}>
-            <Slider
-              value={points}
-              onValueChange={(value) => setPoints(value)}
-              minimumValue={0}
-              step={10}
-              maximumValue={100}
-            />
-            <View row spread>
-              <Text>0</Text>
-              <Text>50</Text>
-              <Text>100</Text>
-            </View>
-          </View>
-          <View style={{ marginLeft: "auto" }}>
-            <TextField
-              value={points.toString()}
-              onChangeText={(text) => {
-                handleChange(text);
-              }}
-              containerStyle={{
-                borderWidth: 1,
-                borderColor: "#d9d9d9",
-                width: 45,
-                borderRadius: 5,
-              }}
-            />
-          </View>
-        </View>
+        <PointsSlider
+          points={points}
+          setPoints={setPoints}
+          handleChange={handleChange}
+        />
       </Dialog>
     </LinearGradient>
   );