diff --git a/components/pages/settings/user_settings_views/MyGroup.tsx b/components/pages/settings/user_settings_views/MyGroup.tsx index 11fcc3c..f6ce778 100644 --- a/components/pages/settings/user_settings_views/MyGroup.tsx +++ b/components/pages/settings/user_settings_views/MyGroup.tsx @@ -1,322 +1,388 @@ import { - Avatar, - Button, - Card, - Colors, - Dialog, - FloatingButton, - PanningProvider, - Picker, - Text, - TextField, - TouchableOpacity, - View, + Avatar, + Button, + Card, + Colors, + Dialog, + FloatingButton, + PanningProvider, + Picker, + Text, + TextField, + TouchableOpacity, + View, } from "react-native-ui-lib"; -import React, { useState } from "react"; -import { ScrollView, StyleSheet } from "react-native"; -import { PickerSingleValue } from "react-native-ui-lib/src/components/picker/types"; -import { useCreateSubUser } from "@/hooks/firebase/useCreateSubUser"; -import { ProfileType } from "@/contexts/AuthContext"; -import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers"; +import React, {useState} from "react"; +import {ScrollView, StyleSheet} from "react-native"; +import {PickerSingleValue} from "react-native-ui-lib/src/components/picker/types"; +import {useCreateSubUser} from "@/hooks/firebase/useCreateSubUser"; +import {ProfileType} from "@/contexts/AuthContext"; +import {useGetFamilyMembers} from "@/hooks/firebase/useGetFamilyMembers"; import UserMenu from "@/components/pages/settings/user_settings_views/UserMenu"; +import {uuidv4} from "@firebase/util"; const MyGroup = () => { - const [showAddUserDialog, setShowAddUserDialog] = useState(false); - const [showNewUserInfoDialog, setShowNewUserInfoDialog] = useState(false); - const [selectedStatus, setSelectedStatus] = useState< - string | PickerSingleValue - >(ProfileType.CHILD); - const [firstName, setFirstName] = useState(""); - const [lastName, setLastName] = useState(""); - const [email, setEmail] = useState(""); + const [showAddUserDialog, setShowAddUserDialog] = useState(false); + const [showNewUserInfoDialog, setShowNewUserInfoDialog] = useState(false); + const [selectedStatus, setSelectedStatus] = useState< + string | PickerSingleValue + >(ProfileType.CHILD); + const [firstName, setFirstName] = useState(""); + const [lastName, setLastName] = useState(""); + const [email, setEmail] = useState(""); - const { mutateAsync: createSubUser, isLoading, isError } = useCreateSubUser(); - const { data: familyMembers } = useGetFamilyMembers(true); + const [showQRCodeDialog, setShowQRCodeDialog] = useState(""); - const parents = - familyMembers?.filter((x) => x.userType === ProfileType.PARENT) ?? []; - const children = - familyMembers?.filter((x) => x.userType === ProfileType.CHILD) ?? []; - const caregivers = - familyMembers?.filter((x) => x.userType === ProfileType.CAREGIVER) ?? []; + const {mutateAsync: createSubUser, isLoading, isError} = useCreateSubUser(); + const {data: familyMembers} = useGetFamilyMembers(true); - const handleCreateSubUser = async () => { - if (!firstName || !lastName || !email) { - console.error("All fields are required"); - return; - } + const parents = + familyMembers?.filter((x) => x.userType === ProfileType.PARENT) ?? []; + const children = + familyMembers?.filter((x) => x.userType === ProfileType.CHILD) ?? []; + const caregivers = + familyMembers?.filter((x) => x.userType === ProfileType.CAREGIVER) ?? []; + const familyDevices = + familyMembers?.filter((x) => x.userType === ProfileType.FAMILY_DEVICE) ?? []; - if (!email.includes("@")) { - console.error("Invalid email address"); - return; - } + const handleCreateSubUser = async () => { + if (!firstName || (selectedStatus !== ProfileType.FAMILY_DEVICE && !lastName)) { + console.error("First name and last name are required"); + return; + } - await createSubUser({ - firstName, - lastName, - email, - password: email, - userType: selectedStatus as ProfileType, - }); + if (selectedStatus !== ProfileType.FAMILY_DEVICE && !email) { + console.error("Email is required for non-family device users"); + return; + } - if (!isError) { - setShowNewUserInfoDialog(false); - } - }; + if (email && !email.includes("@")) { + console.error("Invalid email address"); + return; + } - console.log(familyMembers); + const res = await createSubUser({ + firstName, + lastName: selectedStatus === ProfileType.FAMILY_DEVICE ? "" : lastName, + email: email || `placeholder_${uuidv4().split("-")[0]}@family.device`, + password: uuidv4(), + userType: selectedStatus as ProfileType, + }); + console.log(res) - return ( - - - - {!parents.length && !children.length && !caregivers.length && ( - - {isLoading ? "Loading...." : "No user devices added"} - - )} + if (!isError) { + setShowNewUserInfoDialog(false); - {(!!parents.length || !!children.length) && ( - <> - - Family - - {[...parents, ...children]?.map((member) => ( - - - - - {member.firstName} {member.lastName} - - - {member.userType === ProfileType.PARENT - ? "Admin (You)" - : "Child"} - - + if(res?.data?.userId) { + setTimeout(() => { + setShowQRCodeDialog(res.data.userId) + }, 500) + } + } - - - - ))} - - )} + }; - {!!caregivers.length && ( - <> - - Caregivers - - {caregivers?.map((member) => ( - - - - - {member.firstName} {member.lastName} - - - Caregiver - - - - ))} - - )} - - + return ( + + + + {!parents.length && !children.length && !caregivers.length && ( + + {isLoading ? "Loading...." : "No user devices added"} + + )} - setShowAddUserDialog(true), - }} - /> + {(!!parents.length || !!children.length) && ( + <> + + Family + + {[...parents, ...children]?.map((member, index) => ( + + + + + {member.firstName} {member.lastName} + + + {member.userType === ProfileType.PARENT + ? "Admin (You)" + : "Child"} + + - setShowAddUserDialog(false)} - panDirection={PanningProvider.Directions.DOWN} - > - - Add a new user device + - - + setShowQRCodeDialog("")} showQRCodeDialog={showQRCodeDialog === member?.uid} userId={member?.uid!}/> + + ))} + + )} - setShowAddUserDialog(false)} center> - Return to user settings - - - + {!!caregivers.length && ( + <> + + Caregivers + + {caregivers?.map((member) => ( + + + + + {member.firstName} {member.lastName} + + + Caregiver + + - setShowNewUserInfoDialog(false)} - > - - - New User Information - setShowAddUserDialog(false)}> - X - - + setShowQRCodeDialog("")} showQRCodeDialog={showQRCodeDialog === member?.uid} userId={member?.uid!}/> + + ))} + + )} - - + + Family Devices + + {familyDevices?.map((member, index) => ( + + + + + {member.firstName} + + + Family Device + + + + setShowQRCodeDialog("")} showQRCodeDialog={showQRCodeDialog === member?.uid} userId={member?.uid!}/> + + ))} + + )} + + + + setShowAddUserDialog(true), + }} /> - {}}> - - Upload User Profile Photo - - - - Member Status - setSelectedStatus(item)} - style={styles.picker} - showSearch - floatingPlaceholder - > - - - - + setShowAddUserDialog(false)} + panDirection={PanningProvider.Directions.DOWN} + > + + Add a new user device - First Name - + + - Last Name - + setShowAddUserDialog(false)} center> + Return to user settings + + + - Email Address - + setShowNewUserInfoDialog(false)} + > + + + New User Information + setShowAddUserDialog(false)}> + X + + - - - ); + + + { + }}> + + Upload User Profile Photo + + + + + Member Status + setSelectedStatus(item)} + style={styles.picker} + showSearch + floatingPlaceholder + > + + + + + + + + {selectedStatus === ProfileType.FAMILY_DEVICE ? "Device Name" : "First Name"} + + + + {selectedStatus !== ProfileType.FAMILY_DEVICE && ( + <> + Last Name + + + )} + + {selectedStatus !== ProfileType.FAMILY_DEVICE && ( + <> + Email Address (Optional) + + + )} + + @@ -47,7 +52,7 @@ const UserMenu = ({userId}:{userId: string}) => { > Scan this QR Code to Login: - +