ammar/cally
1
0
Fork 0
mirror of https://github.com/urosran/cally.git synced 2025-11-26 08:24:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

fixed settings paging, calendar style,

Browse Source
This commit is contained in:
ivic00
2024-10-29 20:15:20 +01:00
parent 8ba6f7aecf
commit 74d82e2029
9 changed files with 1934 additions and 1729 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
app/(auth)/_layout.tsx
View File

@ -23,9 +23,16 @@ import NavToDosIcon from "@/assets/svgs/NavToDosIcon";
import NavBrainDumpIcon from "@/assets/svgs/NavBrainDumpIcon";
import NavCalendarIcon from "@/assets/svgs/NavCalendarIcon";
import NavSettingsIcon from "@/assets/svgs/NavSettingsIcon";
import { useAtom } from "jotai";
import {
settingsPageIndex,
userSettingsView,
} from "@/components/pages/calendar/atoms";
export default function TabLayout() {
const { mutateAsync: signOut } = useSignOut();
const [pageIndex, setPageIndex] = useAtom(settingsPageIndex);
const [userView, setUserView] = useAtom(userSettingsView);
return (
<Drawer
@ -66,14 +73,22 @@ export default function TabLayout() {
title={"Calendar"}
color="rgb(7, 184, 199)"
bgColor={"rgb(231, 248, 250)"}
pressFunc={() => props.navigation.navigate("calendar")}
pressFunc={() => {
props.navigation.navigate("calendar");
setPageIndex(0);
setUserView(true);
}}
icon={<NavCalendarIcon />}
/>
<DrawerButton
color="#50be0c"
title={"Groceries"}
bgColor={"#eef9e7"}
pressFunc={() => props.navigation.navigate("grocery")}
pressFunc={() => {
props.navigation.navigate("grocery");
setPageIndex(0);
setUserView(true);
}}
icon={<NavGroceryIcon />}
/>
</View>
@ -95,21 +110,33 @@ export default function TabLayout() {
color="#8005eb"
title={"To Do's"}
bgColor={"#f3e6fd"}
pressFunc={() => props.navigation.navigate("todos")}
pressFunc={() => {
props.navigation.navigate("todos");
setPageIndex(0);
setUserView(true);
}}
icon={<NavToDosIcon />}
/>
<DrawerButton
color="#e0ca03"
title={"Brain Dump"}
bgColor={"#fffacb"}
pressFunc={() => props.navigation.navigate("brain_dump")}
pressFunc={() => {
props.navigation.navigate("brain_dump");
setPageIndex(0);
setUserView(true);
}}
icon={<NavBrainDumpIcon />}
/>
{/*<DrawerItem label="Logout" onPress={() => signOut()} />*/}
</View>
</View>
<Button
onPress={() => props.navigation.navigate("settings")}
onPress={() => {
props.navigation.navigate("settings");
setPageIndex(0);
setUserView(true);
}}
label={"Manage Settings"}
labelStyle={styles.label}
iconSource={() => (

45
components/pages/calendar/CalendarHeader.tsx
View File

@ -1,17 +1,24 @@
import React, {memo} from "react";
import {Button, Picker, PickerModes, SegmentedControl, Text, View,} from "react-native-ui-lib";
import {MaterialIcons} from "@expo/vector-icons";
import {modeMap, months} from "./constants";
import {StyleSheet} from "react-native";
import {useAtom} from "jotai";
import {modeAtom, selectedDateAtom} from "@/components/pages/calendar/atoms";
import {isSameDay} from "date-fns";
import {useAuthContext} from "@/contexts/AuthContext";
import React, { memo } from "react";
import {
Button,
Picker,
PickerModes,
SegmentedControl,
Text,
View,
} from "react-native-ui-lib";
import { MaterialIcons } from "@expo/vector-icons";
import { modeMap, months } from "./constants";
import { StyleSheet } from "react-native";
import { useAtom } from "jotai";
import { modeAtom, selectedDateAtom } from "@/components/pages/calendar/atoms";
import { format, isSameDay } from "date-fns";
import { useAuthContext } from "@/contexts/AuthContext";
export const CalendarHeader = memo(() => {
const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
const [mode, setMode] = useAtom(modeAtom);
const {profileData} = useAuthContext();
const { profileData } = useAuthContext();
const handleSegmentChange = (index: number) => {
const selectedMode = modeMap.get(index);
@ -49,23 +56,23 @@ export const CalendarHeader = memo(() => {
}}
>
<View row centerV gap-3>
<Text style={{fontFamily: "Manrope_500Medium", fontSize: 17}}>
<Text style={{ fontFamily: "Manrope_500Medium", fontSize: 17 }}>
{selectedDate.getFullYear()}
</Text>
<Picker
value={months[selectedDate.getMonth()]}
placeholder={"Select Month"}
style={{fontFamily: "Manrope_500Medium", fontSize: 17, width: 85}}
style={{ fontFamily: "Manrope_500Medium", fontSize: 17, width: 85 }}
mode={PickerModes.SINGLE}
onChange={(itemValue) => handleMonthChange(itemValue as string)}
trailingAccessory={<MaterialIcons name={"keyboard-arrow-down"}/>}
trailingAccessory={<MaterialIcons name={"keyboard-arrow-down"} />}
topBarProps={{
title: selectedDate.getFullYear().toString(),
titleStyle: {fontFamily: "Manrope_500Medium", fontSize: 17},
titleStyle: { fontFamily: "Manrope_500Medium", fontSize: 17 },
}}
>
{months.map((month) => (
<Picker.Item key={month} label={month} value={month}/>
<Picker.Item key={month} label={month} value={month} />
))}
</Picker>
</View>
@ -82,16 +89,14 @@ export const CalendarHeader = memo(() => {
borderWidth: 0.7,
borderColor: "#dadce0",
height: 30,
paddingHorizontal: 10
paddingHorizontal: 10,
}}
labelStyle={{
fontSize: 12,
color: "black",
fontFamily: "Manrope_500Medium",
}}
label={new Date().toLocaleDateString("en-US", {
timeZone: profileData?.timeZone || "",
})}
label={format(new Date(), "dd/MM/yyyy")}
onPress={() => {
setSelectedDate(new Date());
}}
@ -100,7 +105,7 @@ export const CalendarHeader = memo(() => {
<View>
<SegmentedControl
segments={[{label: "D"}, {label: "W"}, {label: "M"}]}
segments={[{ label: "D" }, { label: "W" }, { label: "M" }]}
backgroundColor="#ececec"
inactiveColor="#919191"
activeBackgroundColor="#ea156c"

59
components/pages/calendar/EventCalendar.tsx
View File

@ -1,8 +1,8 @@
import React, {useCallback, useEffect, useMemo, useState} from "react";
import {Calendar} from "react-native-big-calendar";
import {ActivityIndicator, StyleSheet, View, ViewStyle} from "react-native";
import {useGetEvents} from "@/hooks/firebase/useGetEvents";
import {useAtom, useSetAtom} from "jotai";
import React, { useCallback, useEffect, useMemo, useState } from "react";
import { Calendar } from "react-native-big-calendar";
import { ActivityIndicator, StyleSheet, View, ViewStyle } from "react-native";
import { useGetEvents } from "@/hooks/firebase/useGetEvents";
import { useAtom, useSetAtom } from "jotai";
import {
editVisibleAtom,
eventForEditAtom,
@ -10,9 +10,9 @@ import {
selectedDateAtom,
selectedNewEventDateAtom,
} from "@/components/pages/calendar/atoms";
import {useAuthContext} from "@/contexts/AuthContext";
import {CalendarEvent} from "@/components/pages/calendar/interfaces";
import {Text} from "react-native-ui-lib";
import { useAuthContext } from "@/contexts/AuthContext";
import { CalendarEvent } from "@/components/pages/calendar/interfaces";
import { Text } from "react-native-ui-lib";
interface EventCalendarProps {
calendarHeight: number;
@ -26,9 +26,9 @@ const getTotalMinutes = () => {
};
export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
({calendarHeight}) => {
const {data: events, isLoading} = useGetEvents();
const {profileData} = useAuthContext();
({ calendarHeight }) => {
const { data: events, isLoading } = useGetEvents();
const { profileData } = useAuthContext();
const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
const [mode, setMode] = useAtom(modeAtom);
@ -39,7 +39,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
const [isRendering, setIsRendering] = useState(true);
const [offsetMinutes, setOffsetMinutes] = useState(getTotalMinutes());
const todaysDate = new Date()
const todaysDate = new Date();
useEffect(() => {
if (events && mode) {
@ -55,7 +55,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
(event: CalendarEvent) => {
if (mode === "day" || mode === "week") {
setEditVisible(true);
console.log({event});
console.log({ event });
setEventForEdit(event);
} else {
setMode("day");
@ -85,7 +85,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
);
const memoizedEventCellStyle = useCallback(
(event: CalendarEvent) => ({backgroundColor: event.eventColor}),
(event: CalendarEvent) => ({ backgroundColor: event.eventColor }),
[]
);
@ -107,7 +107,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
}, [selectedDate, mode]);
const dateStyle = useMemo(() => {
if (mode === "week") return undefined
if (mode === "week") return undefined;
return isSameDate(todaysDate, selectedDate) && mode === "day"
? styles.dayHeader
: styles.otherDayHeader;
@ -161,9 +161,9 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
const appliedStyle = isCurrentDate ? currentDateStyle : defaultStyle;
return (
<View style={{alignItems: "center"}}>
<View style={{ alignItems: "center" }}>
<View style={appliedStyle}>
<Text style={{color: isCurrentDate ? "white" : "black"}}>
<Text style={{ color: isCurrentDate ? "white" : "black" }}>
{date.getDate()}
</Text>
</View>
@ -183,7 +183,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
if (isLoading || isRendering) {
return (
<View style={styles.loadingContainer}>
<ActivityIndicator size="large" color="#0000ff"/>
<ActivityIndicator size="large" color="#0000ff" />
</View>
);
}
@ -205,8 +205,29 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
headerContentStyle={memoizedHeaderContentStyle}
onSwipeEnd={handleSwipeEnd}
scrollOffsetMinutes={offsetMinutes}
theme={{
palette: {
nowIndicator: "#fd1575",
gray: {
"100": "#e8eaed",
"200": "#e8eaed",
"500": "#b7b7b7",
"800": "#919191",
},
},
typography: {
fontFamily: "PlusJakartaSans_500Medium",
sm: { fontFamily: "Manrope_600SemiBold", fontSize: 15 },
xl: {
fontFamily: "PlusJakartaSans_500Medium",
fontSize: 16,
},
moreLabel: {},
xs:{fontSize: 10}
},
}}
dayHeaderStyle={dateStyle}
dayHeaderHighlightColor={dayHeaderColor}
dayHeaderHighlightColor={"white"}
renderCustomDateForMonth={renderCustomDateForMonth}
showAdjacentMonths
/>

6
components/pages/calendar/atoms.ts
View File

@ -1,5 +1,5 @@
import { atom } from 'jotai';
import {CalendarEvent} from "@/components/pages/calendar/interfaces";
import { atom } from "jotai";
import { CalendarEvent } from "@/components/pages/calendar/interfaces";
export const editVisibleAtom = atom<boolean>(false);
export const eventForEditAtom = atom<CalendarEvent | undefined>(undefined);
@ -7,3 +7,5 @@ export const isFamilyViewAtom = atom<boolean>(false);
export const modeAtom = atom<"week" | "month" | "day">("week");
export const selectedDateAtom = atom<Date>(new Date());
export const selectedNewEventDateAtom = atom<Date | undefined>(undefined);
export const settingsPageIndex = atom<number>(0);
export const userSettingsView = atom<boolean>(true);

326
components/pages/settings/CalendarSettingsPage.tsx
View File

@ -1,10 +1,10 @@
import {AntDesign, Ionicons} from "@expo/vector-icons";
import React, {useCallback, useEffect, useState} from "react";
import {Button, Checkbox, Text, View} from "react-native-ui-lib";
import {ActivityIndicator, ScrollView, StyleSheet} from "react-native";
import {TouchableOpacity} from "react-native-gesture-handler";
import {useAuthContext} from "@/contexts/AuthContext";
import {useUpdateUserData} from "@/hooks/firebase/useUpdateUserData";
import { AntDesign, Ionicons } from "@expo/vector-icons";
import React, { useCallback, useEffect, useState } from "react";
import { Button, Checkbox, Text, View } from "react-native-ui-lib";
import { ActivityIndicator, ScrollView, StyleSheet } from "react-native";
import { TouchableOpacity } from "react-native-gesture-handler";
import { useAuthContext } from "@/contexts/AuthContext";
import { useUpdateUserData } from "@/hooks/firebase/useUpdateUserData";
import debounce from "debounce";
import AppleIcon from "@/assets/svgs/AppleIcon";
import GoogleIcon from "@/assets/svgs/GoogleIcon";
@ -12,13 +12,15 @@ import OutlookIcon from "@/assets/svgs/OutlookIcon";
import * as AuthSession from "expo-auth-session";
import * as Google from "expo-auth-session/providers/google";
import * as WebBrowser from "expo-web-browser";
import {UserProfile} from "@firebase/auth";
import {useFetchAndSaveGoogleEvents} from "@/hooks/useFetchAndSaveGoogleEvents";
import {useFetchAndSaveOutlookEvents} from "@/hooks/useFetchAndSaveOutlookEvents";
import {useFetchAndSaveAppleEvents} from "@/hooks/useFetchAndSaveAppleEvents";
import * as AppleAuthentication from 'expo-apple-authentication';
import { UserProfile } from "@firebase/auth";
import { useFetchAndSaveGoogleEvents } from "@/hooks/useFetchAndSaveGoogleEvents";
import { useFetchAndSaveOutlookEvents } from "@/hooks/useFetchAndSaveOutlookEvents";
import { useFetchAndSaveAppleEvents } from "@/hooks/useFetchAndSaveAppleEvents";
import * as AppleAuthentication from "expo-apple-authentication";
import ExpoLocalization from "expo-localization/src/ExpoLocalization";
import {colorMap} from "@/constants/colorMap";
import { colorMap } from "@/constants/colorMap";
import { useAtom } from "jotai";
import { settingsPageIndex } from "../calendar/atoms";
const googleConfig = {
androidClientId:
@ -36,24 +38,29 @@ const googleConfig = {
const microsoftConfig = {
clientId: "13c79071-1066-40a9-9f71-b8c4b138b4af",
redirectUri: AuthSession.makeRedirectUri({path: "settings"}),
redirectUri: AuthSession.makeRedirectUri({ path: "settings" }),
scopes: [
"openid",
"profile",
"email",
"offline_access",
"Calendars.ReadWrite",
"User.Read"
"User.Read",
],
authorizationEndpoint: "https://login.microsoftonline.com/common/oauth2/v2.0/authorize",
authorizationEndpoint:
"https://login.microsoftonline.com/common/oauth2/v2.0/authorize",
tokenEndpoint: "https://login.microsoftonline.com/common/oauth2/v2.0/token",
};
const CalendarSettingsPage = (props: {
setSelectedPage: (page: number) => void;
}) => {
const {profileData} = useAuthContext();
const [firstDayOfWeek, setFirstDayOfWeek] = useState<string>(profileData?.firstDayOfWeek ?? ExpoLocalization.getCalendars()[0].firstWeekday === 1 ? "Mondays" : "Sundays");
const CalendarSettingsPage = () => {
const { profileData } = useAuthContext();
const [pageIndex, setPageIndex] = useAtom(settingsPageIndex);
const [firstDayOfWeek, setFirstDayOfWeek] = useState<string>(
profileData?.firstDayOfWeek ??
ExpoLocalization.getCalendars()[0].firstWeekday === 1
? "Mondays"
: "Sundays"
);
const [selectedColor, setSelectedColor] = useState<string>(
profileData?.eventColor ?? colorMap.pink
@ -62,11 +69,15 @@ const CalendarSettingsPage = (props: {
profileData?.eventColor ?? colorMap.pink
);
const {mutateAsync: updateUserData} = useUpdateUserData();
const {mutateAsync: fetchAndSaveGoogleEvents, isLoading: isSyncingGoogle} = useFetchAndSaveGoogleEvents();
const {mutateAsync: fetchAndSaveOutlookEvents, isLoading: isSyncingOutlook} = useFetchAndSaveOutlookEvents();
const {mutateAsync: fetchAndSaveAppleEvents, isLoading: isSyncingApple} = useFetchAndSaveAppleEvents();
const { mutateAsync: updateUserData } = useUpdateUserData();
const { mutateAsync: fetchAndSaveGoogleEvents, isLoading: isSyncingGoogle } =
useFetchAndSaveGoogleEvents();
const {
mutateAsync: fetchAndSaveOutlookEvents,
isLoading: isSyncingOutlook,
} = useFetchAndSaveOutlookEvents();
const { mutateAsync: fetchAndSaveAppleEvents, isLoading: isSyncingApple } =
useFetchAndSaveAppleEvents();
WebBrowser.maybeCompleteAuthSession();
const [_, response, promptAsync] = Google.useAuthRequest(googleConfig);
@ -83,7 +94,7 @@ const CalendarSettingsPage = (props: {
const userInfoResponse = await fetch(
"https://www.googleapis.com/oauth2/v3/userinfo",
{
headers: {Authorization: `Bearer ${accessToken}`},
headers: { Authorization: `Bearer ${accessToken}` },
}
);
@ -91,13 +102,18 @@ const CalendarSettingsPage = (props: {
const googleMail = userInfo.email;
let googleAccounts = profileData?.googleAccounts;
const updatedGoogleAccounts = googleAccounts ? {...googleAccounts, [googleMail]: accessToken} : {[googleMail]: accessToken};
const updatedGoogleAccounts = googleAccounts
? { ...googleAccounts, [googleMail]: accessToken }
: { [googleMail]: accessToken };
await updateUserData({
newUserData: {googleAccounts: updatedGoogleAccounts},
newUserData: { googleAccounts: updatedGoogleAccounts },
});
await fetchAndSaveGoogleEvents({token: accessToken, email: googleMail})
await fetchAndSaveGoogleEvents({
token: accessToken,
email: googleMail,
});
}
} catch (error) {
console.error("Error during Google sign-in:", error);
@ -160,11 +176,14 @@ const CalendarSettingsPage = (props: {
console.log("Access token received, fetching user info...");
// Fetch user info from Microsoft Graph API to get the email
const userInfoResponse = await fetch("https://graph.microsoft.com/v1.0/me", {
const userInfoResponse = await fetch(
"https://graph.microsoft.com/v1.0/me",
{
headers: {
Authorization: `Bearer ${tokenData.access_token}`,
},
});
}
);
const userInfo = await userInfoResponse.json();
console.log("User info received:", userInfo);
@ -175,14 +194,19 @@ const CalendarSettingsPage = (props: {
const outlookMail = userInfo.mail || userInfo.userPrincipalName;
let microsoftAccounts = profileData?.microsoftAccounts;
const updatedMicrosoftAccounts = microsoftAccounts ? {...microsoftAccounts, [outlookMail]: tokenData.access_token} : {[outlookMail]: tokenData.access_token};
const updatedMicrosoftAccounts = microsoftAccounts
? { ...microsoftAccounts, [outlookMail]: tokenData.access_token }
: { [outlookMail]: tokenData.access_token };
// Update user data with Microsoft token and email
await updateUserData({
newUserData: {microsoftAccounts: updatedMicrosoftAccounts},
newUserData: { microsoftAccounts: updatedMicrosoftAccounts },
});
await fetchAndSaveOutlookEvents(tokenData.access_token, outlookMail)
await fetchAndSaveOutlookEvents(
tokenData.access_token,
outlookMail
);
console.log("User data updated successfully.");
}
}
@ -214,13 +238,15 @@ const CalendarSettingsPage = (props: {
console.log("Apple ID token received. Fetch user info if needed...");
await updateUserData({
newUserData: {appleToken, appleMail},
newUserData: { appleToken, appleMail },
});
console.log("User data updated with Apple ID token.");
await fetchAndSaveAppleEvents({token: appleToken, email: appleMail!});
await fetchAndSaveAppleEvents({ token: appleToken, email: appleMail! });
} else {
console.warn("Apple authentication was not successful or email was hidden.");
console.warn(
"Apple authentication was not successful or email was hidden."
);
}
} catch (error) {
console.error("Error during Apple Sign-in:", error);
@ -260,8 +286,10 @@ const CalendarSettingsPage = (props: {
const handleChangeFirstDayOfWeek = (firstDayOfWeek: string) => {
setFirstDayOfWeek(firstDayOfWeek === "Sundays" ? "Mondays" : "Sundays");
debouncedUpdateFirstDayOfWeek(firstDayOfWeek === "Sundays" ? "Mondays" : "Sundays");
}
debouncedUpdateFirstDayOfWeek(
firstDayOfWeek === "Sundays" ? "Mondays" : "Sundays"
);
};
const handleChangeColor = (color: string) => {
setPreviousSelectedColor(selectedColor);
@ -269,7 +297,10 @@ const CalendarSettingsPage = (props: {
debouncedUpdateUserData(color);
};
const clearToken = async (provider: "google" | "outlook" | "apple", email: string) => {
const clearToken = async (
provider: "google" | "outlook" | "apple",
email: string
) => {
const newUserData: Partial<UserProfile> = {};
if (provider === "google") {
let googleAccounts = profileData?.googleAccounts;
@ -290,7 +321,7 @@ const CalendarSettingsPage = (props: {
newUserData.appleAccounts = appleAccounts;
}
}
await updateUserData({newUserData});
await updateUserData({ newUserData });
};
let isConnectedToGoogle = false;
@ -326,23 +357,23 @@ const CalendarSettingsPage = (props: {
return (
<ScrollView>
<View marginH-30 marginB-30>
<TouchableOpacity onPress={() => props.setSelectedPage(0)}>
<View row marginT-20 marginB-35 centerV>
<TouchableOpacity onPress={() => setPageIndex(0)}>
<View row marginT-20 marginB-20 marginL-20 centerV>
<Ionicons
name="chevron-back"
size={14}
color="#979797"
style={{paddingBottom: 3}}
style={{ paddingBottom: 3 }}
/>
<Text
style={{fontFamily: "Poppins_400Regular", fontSize: 14.71}}
style={{ fontFamily: "Poppins_400Regular", fontSize: 14.71 }}
color="#979797"
>
Return to main settings
</Text>
</View>
</TouchableOpacity>
<View marginH-30 marginB-30>
<Text style={styles.subTitle}>Calendar settings</Text>
<View style={styles.card}>
<Text style={styles.cardTitle} marginB-14>
@ -352,7 +383,7 @@ const CalendarSettingsPage = (props: {
<TouchableOpacity onPress={() => handleChangeColor(colorMap.pink)}>
<View style={styles.colorBox} backgroundColor={colorMap.pink}>
{selectedColor == colorMap.pink && (
<AntDesign name="check" size={30} color="white"/>
<AntDesign name="check" size={30} color="white" />
)}
</View>
</TouchableOpacity>
@ -361,21 +392,21 @@ const CalendarSettingsPage = (props: {
>
<View style={styles.colorBox} 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}>
{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}>
{selectedColor == colorMap.teal && (
<AntDesign name="check" size={30} color="white"/>
<AntDesign name="check" size={30} color="white" />
)}
</View>
</TouchableOpacity>
@ -384,7 +415,7 @@ const CalendarSettingsPage = (props: {
>
<View style={styles.colorBox} backgroundColor={colorMap.purple}>
{selectedColor == colorMap.purple && (
<AntDesign name="check" size={30} color="white"/>
<AntDesign name="check" size={30} color="white" />
)}
</View>
</TouchableOpacity>
@ -428,136 +459,173 @@ const CalendarSettingsPage = (props: {
label={"Connect Google"}
labelStyle={styles.addCalLbl}
labelProps={{
numberOfLines: 2
numberOfLines: 2,
}}
iconSource={() => (
<View marginR-15>
<GoogleIcon/>
<GoogleIcon />
</View>
)}
style={styles.addCalBtn}
color="black"
text70BL
/>
{profileData?.googleAccounts ? Object.keys(profileData?.googleAccounts)?.map((googleMail) => {
{profileData?.googleAccounts
? Object.keys(profileData?.googleAccounts)?.map((googleMail) => {
const googleToken = profileData?.googleAccounts?.[googleMail];
return googleToken && <Button
return (
googleToken && (
<Button
key={googleMail}
onPress={() => clearToken("google", googleMail)}
label={`Disconnect ${googleMail}`}
labelStyle={styles.addCalLbl}
labelProps={{
numberOfLines: 2
numberOfLines: 2,
}}
iconSource={() => (
<View marginR-15>
<GoogleIcon/>
<GoogleIcon />
</View>
)}
style={styles.addCalBtn}
color="black"
text70BL
/>
}) : null}
)
);
})
: null}
<Button
onPress={() => handleAppleSignIn()}
label={"Connect Apple"}
labelStyle={styles.addCalLbl}
labelProps={{
numberOfLines: 2
numberOfLines: 2,
}}
iconSource={() => (
<View marginR-15>
<AppleIcon/>
<AppleIcon />
</View>
)}
style={styles.addCalBtn}
color="black"
text70BL
/>
{profileData?.appleAccounts ? Object.keys(profileData?.appleAccounts)?.map((appleEmail) => {
{profileData?.appleAccounts
? Object.keys(profileData?.appleAccounts)?.map((appleEmail) => {
const appleToken = profileData?.appleAccounts?.[appleEmail];
return appleToken && <Button
return (
appleToken && (
<Button
key={appleEmail}
onPress={() => clearToken("apple", appleEmail)}
label={`Disconnect ${appleEmail}`}
labelStyle={styles.addCalLbl}
labelProps={{
numberOfLines: 2
numberOfLines: 2,
}}
iconSource={() => (
<View marginR-15>
<AppleIcon/>
<AppleIcon />
</View>
)}
style={styles.addCalBtn}
color="black"
text70BL
/>
}) : null}
)
);
})
: null}
<Button
onPress={() => handleMicrosoftSignIn()}
label={"Connect Outlook"}
labelStyle={styles.addCalLbl}
labelProps={{
numberOfLines: 2
numberOfLines: 2,
}}
iconSource={() => (
<View marginR-15>
<OutlookIcon/>
<OutlookIcon />
</View>
)}
style={styles.addCalBtn}
color="black"
text70BL
/>
{profileData?.microsoftAccounts ? Object.keys(profileData?.microsoftAccounts)?.map((microsoftEmail) => {
const microsoftToken = profileData?.microsoftAccounts?.[microsoftEmail];
return microsoftToken && <Button
{profileData?.microsoftAccounts
? Object.keys(profileData?.microsoftAccounts)?.map(
(microsoftEmail) => {
const microsoftToken =
profileData?.microsoftAccounts?.[microsoftEmail];
return (
microsoftToken && (
<Button
key={microsoftEmail}
onPress={() => clearToken("outlook", microsoftEmail)}
label={`Disconnect ${microsoftEmail}`}
labelStyle={styles.addCalLbl}
labelProps={{
numberOfLines: 2
numberOfLines: 2,
}}
iconSource={() => (
<View marginR-15>
<OutlookIcon/>
<OutlookIcon />
</View>
)}
style={styles.addCalBtn}
color="black"
text70BL
/>
}) : null}
)
);
}
)
: null}
{(isConnectedToGoogle || isConnectedToMicrosoft || isConnectedToApple) && (
{(isConnectedToGoogle ||
isConnectedToMicrosoft ||
isConnectedToApple) && (
<>
<Text style={styles.subTitle} marginT-30 marginB-20>
Connected Calendars
</Text>
<View style={styles.noPaddingCard}>
<View style={{marginTop: 20}}>
{profileData?.googleAccounts && Object.keys(profileData?.googleAccounts)?.map((googleEmail) => {
const googleToken = profileData?.googleAccounts?.[googleEmail];
return googleToken && (
<View style={{ marginTop: 20 }}>
{profileData?.googleAccounts &&
Object.keys(profileData?.googleAccounts)?.map(
(googleEmail) => {
const googleToken =
profileData?.googleAccounts?.[googleEmail];
return (
googleToken && (
<TouchableOpacity
onPress={() => fetchAndSaveGoogleEvents({token: googleToken, email: googleEmail})}
onPress={() =>
fetchAndSaveGoogleEvents({
token: googleToken,
email: googleEmail,
})
}
>
<View row paddingR-20 center>
<Button
disabled={isSyncingGoogle}
onPress={() => fetchAndSaveGoogleEvents({token: googleToken, email: googleEmail})}
onPress={() =>
fetchAndSaveGoogleEvents({
token: googleToken,
email: googleEmail,
})
}
label={`Sync ${googleEmail}`}
labelStyle={styles.addCalLbl}
labelProps={{numberOfLines: 3}}
labelProps={{ numberOfLines: 3 }}
iconSource={() => (
<View marginR-15>
<GoogleIcon/>
<GoogleIcon />
</View>
)}
style={styles.addCalBtn}
@ -566,36 +634,49 @@ const CalendarSettingsPage = (props: {
/>
{isSyncingGoogle ? (
<ActivityIndicator/>
<ActivityIndicator />
) : (
<Ionicons name={"refresh"} size={20} color={"#000000"}/>
<Ionicons
name={"refresh"}
size={20}
color={"#000000"}
/>
)}
</View>
</TouchableOpacity>
)
})}
);
}
)}
{profileData?.appleAccounts && Object.keys(profileData?.appleAccounts)?.map((appleEmail) => {
{profileData?.appleAccounts &&
Object.keys(profileData?.appleAccounts)?.map((appleEmail) => {
const appleToken = profileData?.appleAccounts?.[appleEmail];
return appleToken && (
return (
appleToken && (
<TouchableOpacity
onPress={() => fetchAndSaveAppleEvents({
onPress={() =>
fetchAndSaveAppleEvents({
email: appleEmail,
token: appleToken
})}>
token: appleToken,
})
}
>
<View row paddingR-20 center>
<Button
disabled={isSyncingApple}
onPress={() => fetchAndSaveAppleEvents({
onPress={() =>
fetchAndSaveAppleEvents({
email: appleEmail,
token: appleToken
})}
token: appleToken,
})
}
label={`Sync ${appleEmail}`}
labelStyle={styles.addCalLbl}
labelProps={{numberOfLines: 3}}
labelProps={{ numberOfLines: 3 }}
iconSource={() => (
<View marginR-15>
<AppleIcon/>
<AppleIcon />
</View>
)}
style={styles.addCalBtn}
@ -603,37 +684,50 @@ const CalendarSettingsPage = (props: {
text70BL
/>
{isSyncingApple ? (
<ActivityIndicator/>
<ActivityIndicator />
) : (
<Ionicons name={"refresh"} size={20} color={"#000000"}/>
<Ionicons
name={"refresh"}
size={20}
color={"#000000"}
/>
)}
</View>
</TouchableOpacity>
)
);
})}
{profileData?.microsoftAccounts && Object.keys(profileData?.microsoftAccounts)?.map((microsoftEmail) => {
const microsoftToken = profileData?.microsoftAccounts?.[microsoftEmail];
return microsoftToken && (
{profileData?.microsoftAccounts &&
Object.keys(profileData?.microsoftAccounts)?.map(
(microsoftEmail) => {
const microsoftToken =
profileData?.microsoftAccounts?.[microsoftEmail];
return (
microsoftToken && (
<TouchableOpacity
onPress={() => fetchAndSaveOutlookEvents({
onPress={() =>
fetchAndSaveOutlookEvents({
token: microsoftToken,
email: microsoftEmail
})}
email: microsoftEmail,
})
}
>
<View row paddingR-20 center>
<Button
disabled={isSyncingOutlook}
onPress={() => fetchAndSaveOutlookEvents({
onPress={() =>
fetchAndSaveOutlookEvents({
token: microsoftToken,
email: microsoftEmail
})}
email: microsoftEmail,
})
}
label={`Sync ${microsoftEmail}`}
labelStyle={styles.addCalLbl}
labelProps={{numberOfLines: 3}}
labelProps={{ numberOfLines: 3 }}
iconSource={() => (
<View marginR-15>
<OutlookIcon/>
<OutlookIcon />
</View>
)}
style={styles.addCalBtn}
@ -641,14 +735,20 @@ const CalendarSettingsPage = (props: {
text70BL
/>
{isSyncingOutlook ? (
<ActivityIndicator/>
<ActivityIndicator />
) : (
<Ionicons name={"refresh"} size={20} color={"#000000"}/>
<Ionicons
name={"refresh"}
size={20}
color={"#000000"}
/>
)}
</View>
</TouchableOpacity>
)
})}
);
}
)}
</View>
</View>
</>
@ -701,7 +801,7 @@ const styles = StyleSheet.create({
width: "75%",
textAlign: "left",
lineHeight: 20,
overflow: "visible"
overflow: "visible",
},
subTitle: {
fontFamily: "Manrope_600SemiBold",

16
components/pages/settings/ChoreRewardSettings.tsx
View File

@ -4,16 +4,16 @@ import { Ionicons } from "@expo/vector-icons";
import { ToDosContextProvider } from "@/contexts/ToDosContext";
import ToDosList from "../todos/ToDosList";
import { ScrollView } from "react-native-gesture-handler";
import { settingsPageIndex } from "../calendar/atoms";
import { useAtom } from "jotai";
const ChoreRewardSettings = () => {
const [pageIndex, setPageIndex] = useAtom(settingsPageIndex);
const ChoreRewardSettings = (props: {
setSelectedPage: (page: number) => void;
}) => {
return (
<ToDosContextProvider>
<View marginT-10 marginH-20>
<ScrollView>
<TouchableOpacity onPress={() => props.setSelectedPage(0)}>
<View row marginT-20 marginB-35 centerV>
<TouchableOpacity onPress={() => setPageIndex(0)}>
<View row marginT-20 marginB-20 marginL-20 centerV>
<Ionicons
name="chevron-back"
size={14}
@ -28,6 +28,8 @@ const ChoreRewardSettings = (props: {
</Text>
</View>
</TouchableOpacity>
<View marginH-20>
<ScrollView>
<Text text60R marginB-20>
Chore Reward Settings
</Text>

76
components/pages/settings/SettingsPage.tsx
View File

@ -1,7 +1,7 @@
import {Button, Text, View} from "react-native-ui-lib";
import React, {useState} from "react";
import {StyleSheet} from "react-native";
import {Octicons} from "@expo/vector-icons";
import { Button, Text, View } from "react-native-ui-lib";
import React, { useState } from "react";
import { StyleSheet } from "react-native";
import { Octicons } from "@expo/vector-icons";
import CalendarSettingsPage from "./CalendarSettingsPage";
import ChoreRewardSettings from "./ChoreRewardSettings";
import UserSettings from "./UserSettings";
@ -9,7 +9,9 @@ import ProfileIcon from "@/assets/svgs/ProfileIcon";
import CalendarIcon from "@/assets/svgs/CalendarIcon";
import PrivacyPolicyIcon from "@/assets/svgs/PrivacyPolicyIcon";
import ArrowRightIcon from "@/assets/svgs/ArrowRightIcon";
import {ProfileType, useAuthContext} from "@/contexts/AuthContext";
import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
import { settingsPageIndex } from "../calendar/atoms";
import { useAtom } from "jotai";
const pageIndex = {
main: 0,
@ -20,13 +22,13 @@ const pageIndex = {
};
const SettingsPage = () => {
const {profileData} = useAuthContext()
const isntParent = profileData?.userType !== ProfileType.PARENT
const { profileData } = useAuthContext();
const [pageIndex, setPageIndex] = useAtom(settingsPageIndex);
const isntParent = profileData?.userType !== ProfileType.PARENT;
const [selectedPage, setSelectedPage] = useState<number>(0);
return (
<View flexG>
{selectedPage == 0 && (
{pageIndex == 0 && (
<View flexG centerH marginH-30 marginT-30>
<Button
disabled={isntParent}
@ -34,14 +36,19 @@ const SettingsPage = () => {
style={styles.mainBtn}
children={
<View row centerV width={"100%"}>
<ProfileIcon style={{marginRight: 10}} color="#07b9c8"/>
<Text style={[styles.label, isntParent && styles.disabledText]}>
<ProfileIcon style={{ marginRight: 10 }} color="#07b9c8" />
<Text
style={[
styles.label,
isntParent ? styles.disabledText : { color: "#07b9c8" },
]}
>
Manage My Profile
</Text>
<ArrowRightIcon style={{marginLeft: "auto"}}/>
<ArrowRightIcon style={{ marginLeft: "auto" }} />
</View>
}
onPress={() => setSelectedPage(pageIndex.user)}
onPress={() => setPageIndex(1)}
/>
<Button
disabled={isntParent}
@ -49,15 +56,20 @@ const SettingsPage = () => {
style={styles.mainBtn}
children={
<View row centerV width={"100%"}>
<CalendarIcon style={{marginRight: 10}}/>
<Text style={[styles.label, isntParent && styles.disabledText]}>
<CalendarIcon style={{ marginRight: 10 }} />
<Text
style={[
styles.label,
isntParent ? styles.disabledText : { color: "#FD1775" },
]}
>
Calendar Settings
</Text>
<ArrowRightIcon style={{marginLeft: "auto"}}/>
<ArrowRightIcon style={{ marginLeft: "auto" }} />
</View>
}
onPress={() => {
setSelectedPage(pageIndex.calendar);
setPageIndex(2);
}}
/>
<Button
@ -70,40 +82,32 @@ const SettingsPage = () => {
name="gear"
size={24}
color="#ff9900"
style={{marginRight: 10}}
style={{ marginRight: 10 }}
/>
<Text style={[styles.label, isntParent && styles.disabledText]}>
<Text style={[styles.label, isntParent ? styles.disabledText : {color: "#ff9900"}]}>
To-Do Reward Settings
</Text>
<ArrowRightIcon style={{marginLeft: "auto"}}/>
<ArrowRightIcon style={{ marginLeft: "auto" }} />
</View>
}
onPress={() => setSelectedPage(pageIndex.chore)}
onPress={() => setPageIndex(3)}
/>
<Button
backgroundColor="white"
style={styles.mainBtn}
children={
<View row centerV width={"100%"}>
<PrivacyPolicyIcon style={{marginRight: 10}}/>
<Text style={styles.label}>
Cally Privacy Policy
</Text>
<ArrowRightIcon style={{marginLeft: "auto"}}/>
<PrivacyPolicyIcon style={{ marginRight: 10 }} />
<Text style={[styles.label]} color={"#6C645B"}>Cally Privacy Policy</Text>
<ArrowRightIcon style={{ marginLeft: "auto" }} />
</View>
}
/>
</View>
)}
{selectedPage == pageIndex.calendar && (
<CalendarSettingsPage setSelectedPage={setSelectedPage}/>
)}
{selectedPage == pageIndex.chore && (
<ChoreRewardSettings setSelectedPage={setSelectedPage}/>
)}
{selectedPage == pageIndex.user && (
<UserSettings setSelectedPage={setSelectedPage}/>
)}
{pageIndex == 2 && <CalendarSettingsPage />}
{pageIndex == 3 && <ChoreRewardSettings />}
{pageIndex == 1 && <UserSettings />}
</View>
);
};
@ -123,6 +127,6 @@ const styles = StyleSheet.create({
textAlignVertical: "center",
},
disabledText: {
color: '#A9A9A9', // Example of a gray color for disabled text
color: "#A9A9A9", // Example of a gray color for disabled text
},
});

46
components/pages/settings/UserSettings.tsx
View File

@ -4,15 +4,30 @@ 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 { useAtom } from "jotai";
import { settingsPageIndex, userSettingsView } from "../calendar/atoms";
import { AuthContextProvider } from "@/contexts/AuthContext";
const UserSettings = (props: { setSelectedPage: (page: number) => void }) => {
const [selectedView, setSelectedView] = useState<boolean>(true);
const UserSettings = () => {
const [pageIndex, setPageIndex] = useAtom(settingsPageIndex);
const [userView, setUserView] = useAtom(userSettingsView);
return (
<AuthContextProvider>
<View flexG>
<ScrollView style={{ paddingBottom: 20, minHeight: "100%" }}>
<TouchableOpacity onPress={() => props.setSelectedPage(0)}>
<View row marginT-20 marginB-35 centerV>
<Ionicons name="chevron-back" size={14} color="#979797" style={{paddingBottom: 3}} />
<TouchableOpacity
onPress={() => {
setPageIndex(0);
setUserView(true);
}}
>
<View row marginT-20 marginB-20 marginL-20 centerV>
<Ionicons
name="chevron-back"
size={14}
color="#979797"
style={{ paddingBottom: 3 }}
/>
<Text
style={{ fontFamily: "Poppins_400Regular", fontSize: 14.71 }}
color="#979797"
@ -21,53 +36,54 @@ const UserSettings = (props: { setSelectedPage: (page: number) => void }) => {
</Text>
</View>
</TouchableOpacity>
<View marginH-20 flexG style={{ minHeight: "90%" }}>
<View marginH-26 flexG style={{ minHeight: "90%" }}>
<Text text60R marginB-25>
User Management
</Text>
<View style={styles.buttonSwitch} spread row>
<TouchableOpacity
onPress={() => setSelectedView(true)}
onPress={() => setUserView(true)}
centerV
centerH
style={selectedView == true ? styles.btnSelected : styles.btnNot}
style={userView == true ? styles.btnSelected : styles.btnNot}
>
<View>
<Text
style={styles.btnTxt}
color={selectedView ? "white" : "black"}
color={userView ? "white" : "black"}
>
My Profile
</Text>
</View>
</TouchableOpacity>
<TouchableOpacity
onPress={() => setSelectedView(false)}
onPress={() => setUserView(false)}
centerV
centerH
style={selectedView == false ? styles.btnSelected : styles.btnNot}
style={userView == false ? styles.btnSelected : styles.btnNot}
>
<View>
<Text
style={styles.btnTxt}
color={!selectedView ? "white" : "black"}
color={!userView ? "white" : "black"}
>
My Group
</Text>
</View>
</TouchableOpacity>
</View>
{selectedView && <MyProfile />}
{!selectedView && <MyGroup />}
{userView && <MyProfile />}
{!userView && <MyGroup />}
</View>
</ScrollView>
{!selectedView && (
{!userView && (
<View>
<Text>selview</Text>
</View>
)}
</View>
</AuthContextProvider>
);
};

152
components/pages/settings/user_settings_views/MyGroup.tsx
View File

@ -14,21 +14,21 @@ import {
TouchableOpacity,
View,
} from "react-native-ui-lib";
import React, {useEffect, useRef, 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, { useEffect, useRef, useState } from "react";
import { ImageBackground, ScrollView, StyleSheet } from "react-native";
import { PickerSingleValue } from "react-native-ui-lib/src/components/picker/types";
import { useCreateSubUser } from "@/hooks/firebase/useCreateSubUser";
import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
import UserMenu from "@/components/pages/settings/user_settings_views/UserMenu";
import {uuidv4} from "@firebase/util";
import { uuidv4 } from "@firebase/util";
import QRIcon from "@/assets/svgs/QRIcon";
import EmailIcon from "@/assets/svgs/EmailIcon";
import CircledXIcon from "@/assets/svgs/CircledXIcon";
import ProfileIcon from "@/assets/svgs/ProfileIcon";
import NavToDosIcon from "@/assets/svgs/NavToDosIcon";
import Ionicons from "@expo/vector-icons/Ionicons";
import {PreviousNextView} from "react-native-keyboard-manager";
import { PreviousNextView } from "react-native-keyboard-manager";
const MyGroup = () => {
const [showAddUserDialog, setShowAddUserDialog] = useState(false);
@ -43,10 +43,13 @@ const MyGroup = () => {
const lNameRef = useRef<TextFieldRef>(null);
const emailRef = useRef<TextFieldRef>(null);
const [showQRCodeDialog, setShowQRCodeDialog] = useState<string | boolean>(false);
const [showQRCodeDialog, setShowQRCodeDialog] = useState<string | boolean>(
false
);
const {mutateAsync: createSubUser, isLoading, isError} = useCreateSubUser();
const {data: familyMembers} = useGetFamilyMembers(true);
const { mutateAsync: createSubUser, isLoading, isError } = useCreateSubUser();
const { data: familyMembers } = useGetFamilyMembers(true);
const { user } = useAuthContext();
const parents =
familyMembers?.filter((x) => x.userType === ProfileType.PARENT) ?? [];
@ -101,12 +104,11 @@ const MyGroup = () => {
setFirstName("");
setLastName("");
setEmail("");
}, [])
}, []);
// @ts-ignore
return (
<View style={{flex: 1, minHeight: 500}}>
<View style={{ flex: 1, minHeight: 500 }}>
<View>
<ScrollView style={styles.card}>
{!parents.length && !children.length && !caregivers.length && (
@ -117,7 +119,7 @@ const MyGroup = () => {
{(!!parents.length || !!children.length) && (
<>
<Text style={styles.subTit} marginV-10>
<Text style={styles.subTit} marginB-10>
Family
</Text>
{[...parents, ...children]?.map((member, index) => (
@ -128,31 +130,37 @@ const MyGroup = () => {
style={styles.familyCard}
row
centerV
padding-10
paddingT-10
>
<Avatar
source={{uri: "https://via.placeholder.com/60"}}
size={40}
backgroundColor={Colors.grey60}
{member.pfp ? (
<ImageBackground
style={styles.pfp}
borderRadius={10.56}
source={{ uri: member.pfp || undefined }}
/>
<View marginL-10>
<Text text70M>
) : (
<View style={[styles.pfp, {backgroundColor: "#ea156d"}]} />
)}
<View row marginL-10 centerV>
<Text style={styles.name}>
{member.firstName} {member.lastName}
</Text>
<Text text90 grey40>
</View>
<View flexG />
<View row centerV gap-10>
<Text style={styles.userType}>
{member.userType === ProfileType.PARENT
? "Admin (You)"
? `Admin${
member.uid === user?.uid ? " (You)" : ""
}`
: "Child"}
</Text>
</View>
<View flex-1/>
<UserMenu
setShowQRCodeDialog={(val) => setShowQRCodeDialog(val)}
showQRCodeDialog={showQRCodeDialog === member?.uid}
userId={member?.uid!}
/>
</View>
</Card>
))}
</>
@ -160,7 +168,7 @@ const MyGroup = () => {
{!!caregivers.length && (
<>
<Text text70 marginB-10 marginT-15>
<Text style={styles.subTit} marginB-10 marginT-15>
Caregivers
</Text>
{caregivers?.map((member) => (
@ -174,7 +182,7 @@ const MyGroup = () => {
padding-10
>
<Avatar
source={{uri: member?.pfp ?? undefined}}
source={{ uri: member?.pfp ?? undefined }}
size={40}
backgroundColor={Colors.grey60}
/>
@ -187,7 +195,7 @@ const MyGroup = () => {
</Text>
</View>
<View flex-1/>
<View flex-1 />
<UserMenu
setShowQRCodeDialog={(val) => setShowQRCodeDialog(val)}
@ -215,7 +223,7 @@ const MyGroup = () => {
padding-10
>
<Avatar
source={{uri: member?.pfp ?? undefined}}
source={{ uri: member?.pfp ?? undefined }}
size={40}
backgroundColor={Colors.grey60}
/>
@ -226,7 +234,7 @@ const MyGroup = () => {
</Text>
</View>
<View flex-1/>
<View flex-1 />
<UserMenu
setShowQRCodeDialog={(val) => setShowQRCodeDialog(val)}
@ -269,7 +277,7 @@ const MyGroup = () => {
</Text>
<Button backgroundColor={"#FD1775"} style={styles.dialogBtn}>
<QRIcon/>
<QRIcon />
<Text style={styles.dialogBtnLbl} marginL-7>
Show a QR Code
</Text>
@ -284,7 +292,7 @@ const MyGroup = () => {
}, 500);
}}
>
<EmailIcon/>
<EmailIcon />
<Text style={styles.dialogBtnLbl} marginL-7>
Enter email address
</Text>
@ -309,30 +317,31 @@ const MyGroup = () => {
<KeyboardAwareScrollView>
<Card padding-25 style={styles.dialogCard}>
<View row spread>
<Text style={{fontFamily: "Manrope_500Medium", fontSize: 16}}>
<Text style={{ fontFamily: "Manrope_500Medium", fontSize: 16 }}>
New User Information
</Text>
<TouchableOpacity onPress={() => {
setShowNewUserInfoDialog(false)
}}>
<CircledXIcon/>
<TouchableOpacity
onPress={() => {
setShowNewUserInfoDialog(false);
}}
>
<CircledXIcon />
</TouchableOpacity>
</View>
<View style={styles.divider} spread/>
<View style={styles.divider} spread />
<View row centerV gap-20 marginV-20>
<View
height={65.54}
width={65.54}
children={
<ProfileIcon color={"#d6d6d6"} width={37} height={37}/>
<ProfileIcon color={"#d6d6d6"} width={37} height={37} />
}
backgroundColor={Colors.grey60}
style={{borderRadius: 25}}
style={{ borderRadius: 25 }}
center
/>
<TouchableOpacity onPress={() => {
}}>
<TouchableOpacity onPress={() => {}}>
<Text color="#50be0c" style={styles.jakarta13} marginL-15>
Upload User Profile Photo
</Text>
@ -349,21 +358,30 @@ const MyGroup = () => {
floatingPlaceholder
style={styles.inViewPicker}
trailingAccessory={
<View style={{
<View
style={{
justifyContent: "center",
alignItems: "center",
height: "100%",
marginTop: -38,
paddingRight: 15
}}>
<Ionicons name={"chevron-down"} style={{alignSelf: "center"}} size={20}
color={"#000000"}/>
paddingRight: 15,
}}
>
<Ionicons
name={"chevron-down"}
style={{ alignSelf: "center" }}
size={20}
color={"#000000"}
/>
</View>
}
>
<Picker.Item label="Child" value={ProfileType.CHILD}/>
<Picker.Item label="Parent" value={ProfileType.PARENT}/>
<Picker.Item label="Caregiver" value={ProfileType.CAREGIVER}/>
<Picker.Item label="Child" value={ProfileType.CHILD} />
<Picker.Item label="Parent" value={ProfileType.PARENT} />
<Picker.Item
label="Caregiver"
value={ProfileType.CAREGIVER}
/>
<Picker.Item
label="Family Device"
value={ProfileType.FAMILY_DEVICE}
@ -387,7 +405,7 @@ const MyGroup = () => {
onChangeText={setFirstName}
style={styles.inputField}
onSubmitEditing={() => {
lNameRef.current?.focus()
lNameRef.current?.focus();
}}
blurOnSubmit={false}
returnKeyType="next"
@ -404,11 +422,10 @@ const MyGroup = () => {
onChangeText={setLastName}
style={styles.inputField}
onSubmitEditing={() => {
emailRef.current?.focus()
emailRef.current?.focus();
}}
blurOnSubmit={false}
returnKeyType="next"
/>
</>
)}
@ -443,8 +460,8 @@ const MyGroup = () => {
fontSize: 15,
marginLeft: 7,
}}
style={{marginTop: 20, backgroundColor: "#fd1775"}}
iconSource={() => <NavToDosIcon width={22} color={"white"}/>}
style={{ marginTop: 20, backgroundColor: "#fd1775" }}
iconSource={() => <NavToDosIcon width={22} color={"white"} />}
onPress={handleCreateSubUser}
/>
</Card>
@ -460,7 +477,7 @@ const styles = StyleSheet.create({
height: 47,
width: 279,
},
dialogTitle: {fontFamily: "Manrope_600SemiBold", fontSize: 22},
dialogTitle: { fontFamily: "Manrope_600SemiBold", fontSize: 22 },
dialogBackBtn: {
fontFamily: "PlusJakartaSans_500Medium",
fontSize: 15,
@ -470,8 +487,9 @@ const styles = StyleSheet.create({
marginVertical: 15,
backgroundColor: "white",
width: "100%",
borderRadius: 15,
padding: 20,
borderRadius: 12,
paddingHorizontal: 21,
paddingVertical: 20,
},
bottomButton: {
position: "absolute",
@ -546,7 +564,7 @@ const styles = StyleSheet.create({
fontSize: 15,
color: "white",
},
divider: {height: 0.7, backgroundColor: "#e6e6e6", width: "100%"},
divider: { height: 0.7, backgroundColor: "#e6e6e6", width: "100%" },
jakarta12: {
fontFamily: "PlusJakartaSans_500Medium",
fontSize: 12,
@ -556,6 +574,16 @@ const styles = StyleSheet.create({
fontFamily: "PlusJakartaSans_500Medium",
fontSize: 13,
},
pfp: { aspectRatio: 1, width: 37.03, borderRadius: 10.56 },
userType: {
fontFamily: "Manrope_500Medium",
fontSize: 12,
color: "#858585",
},
name: {
fontFamily: "Manrope_600SemiBold",
fontSize: 16,
},
});
export default MyGroup;