From a305aedeebaf5098b2c4e38d212312ad130cc3d7 Mon Sep 17 00:00:00 2001
From: ivic00 <102467664+ivic00@users.noreply.github.com>
Date: Tue, 10 Dec 2024 22:06:06 +0100
Subject: [PATCH] settings for other users, fixed event time

---
 .../pages/calendar/ManuallyAddEventModal.tsx  |  15 +-
 components/pages/settings/SettingsPage.tsx    |   4 +-
 .../settings/user_settings_views/MyGroup.tsx  | 148 +++++++++++-------
 .../user_settings_views/MyProfile.tsx         | 105 +++++++------
 4 files changed, 171 insertions(+), 101 deletions(-)

diff --git a/components/pages/calendar/ManuallyAddEventModal.tsx b/components/pages/calendar/ManuallyAddEventModal.tsx
index c438d76..dfb1976 100644
--- a/components/pages/calendar/ManuallyAddEventModal.tsx
+++ b/components/pages/calendar/ManuallyAddEventModal.tsx
@@ -447,6 +447,12 @@ export const ManuallyAddEventModal = () => {
                   value={startDate}
                   onChange={(date) => {
                     setStartDate(date);
+                    
+                    if (date > endDate) {
+                      const newEndDate = new Date(date);
+                      newEndDate.setDate(date.getDate() + 1);
+                      setEndDate(newEndDate);
+                    }
                   }}
                   //maximumDate={endDate}
                   style={{
@@ -459,10 +465,15 @@ export const ManuallyAddEventModal = () => {
               <DateTimePicker
                 value={startTime}
                 onChange={(time) => {
-                  if (time <= endTime) {
+                  if (
+                    endDate.getDate() === startDate.getDate() &&
+                    time.getHours() < endTime.getHours()
+                  ){
                     setStartTime(time);
+                    console.log('should happen')
                   }
                 }}
+                maximumDate={endTime}
                 minuteInterval={5}
                 dateTimeFormatter={(date, mode) =>
                   date.toLocaleTimeString("en-us", {
@@ -508,6 +519,8 @@ export const ManuallyAddEventModal = () => {
                       const newEndDate = new Date(endDate);
                       newEndDate.setDate(newEndDate.getDate() + 1);
                       setEndDate(newEndDate);
+
+                      console.log('new day');
                     }
                   }}
                   minuteInterval={5}
diff --git a/components/pages/settings/SettingsPage.tsx b/components/pages/settings/SettingsPage.tsx
index 711fb84..234265b 100644
--- a/components/pages/settings/SettingsPage.tsx
+++ b/components/pages/settings/SettingsPage.tsx
@@ -43,7 +43,7 @@ const SettingsPage = () => {
       {pageIndex == 0 && (
         <View flexG centerH marginH-30 marginT-30>
           <Button
-            disabled={isntParent}
+            disabled={false}
             backgroundColor="white"
             style={styles.mainBtn}
             children={
@@ -63,7 +63,7 @@ const SettingsPage = () => {
             onPress={() => setPageIndex(1)}
           />
           <Button
-            disabled={isntParent}
+            disabled={false}
             backgroundColor="white"
             style={styles.mainBtn}
             children={
diff --git a/components/pages/settings/user_settings_views/MyGroup.tsx b/components/pages/settings/user_settings_views/MyGroup.tsx
index 76d253a..649320e 100644
--- a/components/pages/settings/user_settings_views/MyGroup.tsx
+++ b/components/pages/settings/user_settings_views/MyGroup.tsx
@@ -169,20 +169,22 @@ const MyGroup: React.FC<MyGroupProps> = ({
                 >
                   {member.pfp ? (
                     <ImageBackground
-                    style={[
-                      styles.pfp,
-                      (member.eventColor && {
-                        borderWidth: 2,
-                        borderColor: member.eventColor,
-                      }) ||
-                        undefined,
-                    ]}
-                      borderRadius={10.56}
+                      style={[
+                        styles.pfp,
+                        (member.eventColor && {
+                          borderWidth: 2,
+                          borderColor: member.eventColor,
+                        }) ||
+                          undefined,
+                      ]}
                       source={{ uri: member.pfp || undefined }}
                     />
                   ) : (
                     <View
-                      style={[styles.pfp, { backgroundColor: member.eventColor || colorMap.pink }]}
+                      style={[
+                        styles.pfp,
+                        { backgroundColor: member.eventColor || colorMap.pink },
+                      ]}
                     />
                   )}
                   <View row marginL-10 centerV>
@@ -212,7 +214,7 @@ const MyGroup: React.FC<MyGroupProps> = ({
 
           {!!caregivers.length && (
             <View style={styles.card}>
-              <Text style={styles.subTit} marginB-10 marginT-15>
+              <Text style={styles.subTit} marginB-10>
                 Caregivers
               </Text>
               {caregivers?.map((member) => (
@@ -223,71 +225,104 @@ const MyGroup: React.FC<MyGroupProps> = ({
                   style={styles.familyCard}
                   row
                   centerV
-                  padding-10
+                  paddingT-10
                 >
-                  <Avatar
-                    source={{ uri: member?.pfp ?? undefined }}
-                    size={40}
-                    backgroundColor={Colors.grey60}
-                  />
-                  <View marginL-10>
-                    <Text text70M>
+                  {member.pfp ? (
+                    <ImageBackground
+                      style={[
+                        styles.pfp,
+                        (member.eventColor && {
+                          borderWidth: 2,
+                          borderColor: member.eventColor,
+                        }) ||
+                          undefined,
+                      ]}
+                      source={{ uri: member.pfp || undefined }}
+                    />
+                  ) : (
+                    <View
+                      style={[
+                        styles.pfp,
+                        { backgroundColor: member.eventColor || colorMap.pink },
+                      ]}
+                    />
+                  )}
+                  <View row marginL-10 centerV>
+                    <Text style={styles.name}>
                       {member.firstName} {member.lastName}
                     </Text>
-                    <Text text90 grey40>
-                      Caregiver
-                    </Text>
                   </View>
-
-                  <View flex-1 />
-
-                  <UserMenu
-                    setShowQRCodeDialog={(val) => setShowQRCodeDialog(val)}
-                    showQRCodeDialog={showQRCodeDialog === member?.uid}
-                    user={member}
-                  />
+                  <View flexG />
+                  <View row centerV gap-10>
+                    <Text style={styles.userType}>Caregiver</Text>
+                    <UserMenu
+                      setShowQRCodeDialog={(val) => setShowQRCodeDialog(val)}
+                      showQRCodeDialog={showQRCodeDialog === member?.uid}
+                      user={member}
+                    />
+                    {profileData?.userType === ProfileType.PARENT && (
+                      <UserOptions user={member} />
+                    )}
+                  </View>
                 </Card>
               ))}
             </View>
           )}
 
           {!!familyDevices.length && (
-            <>
-              <Text text70 marginB-10 marginT-15>
+            <View style={styles.card}>
+              <Text style={styles.subTit} marginB-10>
                 Family Devices
               </Text>
               {familyDevices?.map((member, index) => (
                 <Card
                   enableShadow={false}
                   elevation={0}
-                  key={`${member.firstName}_${member.lastName}_${index}`}
+                  key={`${member.firstName}_${index}`}
                   style={styles.familyCard}
                   row
                   centerV
-                  padding-10
+                  paddingT-10
                 >
-                  <Avatar
-                    source={{ uri: member?.pfp ?? undefined }}
-                    size={40}
-                    backgroundColor={Colors.grey60}
-                  />
-                  <View marginL-10>
-                    <Text text70M>{member.firstName}</Text>
-                    <Text text90 grey40>
-                      Family Device
-                    </Text>
+                  {member.pfp ? (
+                    <ImageBackground
+                      style={[
+                        styles.pfp,
+                        (member.eventColor && {
+                          borderWidth: 2,
+                          borderColor: member.eventColor,
+                        }) ||
+                          undefined,
+                      ]}
+                      imageStyle={{ borderRadius: 10.56 }}
+                      source={{ uri: member.pfp || undefined }}
+                    />
+                  ) : (
+                    <View
+                      style={[
+                        styles.pfp,
+                        { backgroundColor: member.eventColor || colorMap.pink },
+                      ]}
+                    />
+                  )}
+                  <View row marginL-10 centerV>
+                    <Text style={styles.name}>{member.firstName}</Text>
+                  </View>
+                  <View flexG />
+                  <View row centerV gap-10>
+                    <Text style={styles.userType}>Family Device</Text>
+                    <UserMenu
+                      setShowQRCodeDialog={(val) => setShowQRCodeDialog(val)}
+                      showQRCodeDialog={showQRCodeDialog === member?.uid}
+                      user={member}
+                    />
+                    {profileData?.userType === ProfileType.PARENT && (
+                      <UserOptions user={member} />
+                    )}
                   </View>
-
-                  <View flex-1 />
-
-                  <UserMenu
-                    setShowQRCodeDialog={(val) => setShowQRCodeDialog(val)}
-                    showQRCodeDialog={showQRCodeDialog === member?.uid}
-                    user={member}
-                  />
                 </Card>
               ))}
-            </>
+            </View>
           )}
         </View>
       </ScrollView>
@@ -630,7 +665,12 @@ const styles = StyleSheet.create({
     fontFamily: "PlusJakartaSans_500Medium",
     fontSize: 13,
   },
-  pfp: { aspectRatio: 1, width: 37.03, borderRadius: 10.56 },
+  pfp: {
+    aspectRatio: 1,
+    width: 37.03,
+    borderRadius: 10.56,
+    overflow: "hidden",
+  },
   userType: {
     fontFamily: "Manrope_500Medium",
     fontSize: 12,
diff --git a/components/pages/settings/user_settings_views/MyProfile.tsx b/components/pages/settings/user_settings_views/MyProfile.tsx
index 6385b9b..1af0588 100644
--- a/components/pages/settings/user_settings_views/MyProfile.tsx
+++ b/components/pages/settings/user_settings_views/MyProfile.tsx
@@ -15,7 +15,7 @@ import Ionicons from "@expo/vector-icons/Ionicons";
 import * as tz from "tzdata";
 import * as Localization from "expo-localization";
 import debounce from "debounce";
-import { useAuthContext } from "@/contexts/AuthContext";
+import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
 import { useUpdateUserData } from "@/hooks/firebase/useUpdateUserData";
 import { useChangeProfilePicture } from "@/hooks/firebase/useChangeProfilePicture";
 import { colorMap } from "@/constants/colorMap";
@@ -24,9 +24,13 @@ import { AntDesign } from "@expo/vector-icons";
 import { useDeleteUser } from "@/hooks/firebase/useDeleteUser";
 import { useUpdateHouseholdName } from "@/hooks/firebase/useUpdateHouseholdName";
 import { useGetHouseholdName } from "@/hooks/firebase/useGetHouseholdName";
+import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
 
 const MyProfile = () => {
   const { user, profileData } = useAuthContext();
+  const { data: familyMembers } = useGetFamilyMembers();
+  const [takenColors, setTakenColors] = useState<string[]>([]);
+
   const { data: hhName, refetch: refetchHHName } = useGetHouseholdName(
     profileData.familyId
   );
@@ -91,6 +95,15 @@ const MyProfile = () => {
     handleUpdateHouseholdName();
   }, [householdName]);
 
+  useEffect(() => {
+    if (familyMembers) {
+      const colors = familyMembers
+        .filter(member => member?.eventColor && member.uid !== user?.uid)
+        .map(member => member.eventColor!);
+      setTakenColors(colors);
+    }
+   }, [familyMembers]);
+
   useEffect(() => {
     if (profileData) {
       setFirstName(profileData.firstName || "");
@@ -214,18 +227,22 @@ const MyProfile = () => {
           )}
         </View>
         <View paddingH-15>
-          <Text text80 marginT-10 marginB-7 style={styles.label}>
-            Household
-          </Text>
-          <TextField
-            text70
-            placeholder="Household name"
-            style={styles.txtBox}
-            value={householdName}
-            onChangeText={async (value) => {
-              setHouseholdName(value);
-            }}
-          />
+          {profileData?.userType == ProfileType.PARENT && (
+            <>
+              <Text text80 marginT-10 marginB-7 style={styles.label}>
+                Household
+              </Text>
+              <TextField
+                text70
+                placeholder="Household name"
+                style={styles.txtBox}
+                value={householdName}
+                onChangeText={async (value) => {
+                  setHouseholdName(value);
+                }}
+              />
+            </>
+          )}
           <Text text80 marginT-10 marginB-7 style={styles.label}>
             First name
           </Text>
@@ -267,81 +284,81 @@ const MyProfile = () => {
           Color Preference
         </Text>
         <View row spread>
-          <TouchableOpacity onPress={() => handleChangeColor(colorMap.pink)}>
-            <View style={styles.colorBox} backgroundColor={colorMap.pink}>
+          <TouchableOpacity onPress={() => handleChangeColor(colorMap.pink)} disabled={takenColors.includes(colorMap.pink)}>
+            <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.pink) ? 0.1 : 1}]} backgroundColor={colorMap.pink}>
               {selectedColor == colorMap.pink && (
-                  <AntDesign name="check" size={30} color="white" />
+                <AntDesign name="check" size={30} color="white" />
               )}
             </View>
           </TouchableOpacity>
-          <TouchableOpacity onPress={() => handleChangeColor(colorMap.orange)}>
-            <View style={styles.colorBox} backgroundColor={colorMap.orange}>
+          <TouchableOpacity onPress={() => handleChangeColor(colorMap.orange)} disabled={takenColors.includes(colorMap.orange)}>
+            <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.orange) ? 0.1 : 1}]} backgroundColor={colorMap.orange}>
               {selectedColor == colorMap.orange && (
-                  <AntDesign name="check" size={30} color="white" />
+                <AntDesign name="check" size={30} color="white" />
               )}
             </View>
           </TouchableOpacity>
-          <TouchableOpacity onPress={() => handleChangeColor(colorMap.green)}>
-            <View style={styles.colorBox} backgroundColor={colorMap.green}>
+          <TouchableOpacity onPress={() => handleChangeColor(colorMap.green)} disabled={takenColors.includes(colorMap.green)}>
+            <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.green) ? 0.1 : 1}]} backgroundColor={colorMap.green}>
               {selectedColor == colorMap.green && (
-                  <AntDesign name="check" size={30} color="white" />
+                <AntDesign name="check" size={30} color="white" />
               )}
             </View>
           </TouchableOpacity>
-          <TouchableOpacity onPress={() => handleChangeColor(colorMap.teal)}>
-            <View style={styles.colorBox} backgroundColor={colorMap.teal}>
+          <TouchableOpacity onPress={() => handleChangeColor(colorMap.teal)} disabled={takenColors.includes(colorMap.teal)}>
+            <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.teal) ? 0.1 : 1}]} backgroundColor={colorMap.teal}>
               {selectedColor == colorMap.teal && (
-                  <AntDesign name="check" size={30} color="white" />
+                <AntDesign name="check" size={30} color="white" />
               )}
             </View>
           </TouchableOpacity>
-          <TouchableOpacity onPress={() => handleChangeColor(colorMap.purple)}>
-            <View style={styles.colorBox} backgroundColor={colorMap.purple}>
+          <TouchableOpacity onPress={() => handleChangeColor(colorMap.purple)}disabled={takenColors.includes(colorMap.purple)}>
+            <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.purple) ? 0.1 : 1}]} backgroundColor={colorMap.purple}>
               {selectedColor == colorMap.purple && (
-                  <AntDesign name="check" size={30} color="white" />
+                <AntDesign name="check" size={30} color="white" />
               )}
             </View>
           </TouchableOpacity>
         </View>
         <View row spread marginT-10>
-          <TouchableOpacity onPress={() => handleChangeColor(colorMap.navy)}>
-            <View style={styles.colorBox} backgroundColor={colorMap.navy}>
+          <TouchableOpacity onPress={() => handleChangeColor(colorMap.navy)} disabled={takenColors.includes(colorMap.navy)}>
+            <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.navy) ? 0.1 : 1}]} backgroundColor={colorMap.navy}>
               {selectedColor == colorMap.navy && (
-                  <AntDesign name="check" size={30} color="white" />
+                <AntDesign name="check" size={30} color="white" />
               )}
             </View>
           </TouchableOpacity>
-          <TouchableOpacity onPress={() => handleChangeColor(colorMap.red)}>
-            <View style={styles.colorBox} backgroundColor={colorMap.red}>
+          <TouchableOpacity onPress={() => handleChangeColor(colorMap.red)} disabled={takenColors.includes(colorMap.red)}>
+            <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.red) ? 0.1 : 1}]} backgroundColor={colorMap.red}>
               {selectedColor == colorMap.red && (
-                  <AntDesign name="check" size={30} color="white" />
+                <AntDesign name="check" size={30} color="white" />
               )}
             </View>
           </TouchableOpacity>
-          <TouchableOpacity onPress={() => handleChangeColor(colorMap.indigo)}>
-            <View style={styles.colorBox} backgroundColor={colorMap.indigo}>
+          <TouchableOpacity onPress={() => handleChangeColor(colorMap.indigo)} disabled={takenColors.includes(colorMap.indigo)}>
+            <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.indigo) ? 0.1 : 1}]} backgroundColor={colorMap.indigo}>
               {selectedColor == colorMap.indigo && (
-                  <AntDesign name="check" size={30} color="white" />
+                <AntDesign name="check" size={30} color="white" />
               )}
             </View>
           </TouchableOpacity>
-          <TouchableOpacity onPress={() => handleChangeColor(colorMap.emerald)}>
-            <View style={styles.colorBox} backgroundColor={colorMap.emerald}>
+          <TouchableOpacity onPress={() => handleChangeColor(colorMap.emerald)} disabled={takenColors.includes(colorMap.emerald)}>
+            <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.emerald) ? 0.1 : 1}]} backgroundColor={colorMap.emerald}>
               {selectedColor == colorMap.emerald && (
-                  <AntDesign name="check" size={30} color="white" />
+                <AntDesign name="check" size={30} color="white" />
               )}
             </View>
           </TouchableOpacity>
-          <TouchableOpacity onPress={() => handleChangeColor(colorMap.violet)}>
-            <View style={styles.colorBox} backgroundColor={colorMap.violet}>
+          <TouchableOpacity onPress={() => handleChangeColor(colorMap.violet)} disabled={takenColors.includes(colorMap.violet)}>
+            <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.violet) ? 0.1 : 1}]} backgroundColor={colorMap.violet}>
               {selectedColor == colorMap.violet && (
-                  <AntDesign name="check" size={30} color="white" />
+                <AntDesign name="check" size={30} color="white" />
               )}
             </View>
           </TouchableOpacity>
         </View>
       </View>
-      
+
       <View style={styles.card}>
         <Text style={styles.subTit}>Settings</Text>
         <Text style={styles.jakarta12}>Time Zone</Text>