mirror of
https://github.com/urosran/cally.git
synced 2025-11-26 00:24:53 +00:00
Notification changes
This commit is contained in:
Milan Paunovic
@ -1,89 +1,68 @@
|
||||
import { SegmentedControl, View } from "react-native-ui-lib";
|
||||
import React, { memo, useCallback, useEffect, useRef, useState } from "react";
|
||||
import React, { memo, useCallback } from "react";
|
||||
import { StyleSheet } from "react-native";
|
||||
import { NavigationProp, useNavigationState } from "@react-navigation/native";
|
||||
|
||||
const ViewSwitch = memo(function ViewSwitch({
|
||||
navigation,
|
||||
}: {
|
||||
navigation: any;
|
||||
}) {
|
||||
const isNavigating = useRef(false);
|
||||
const navigationState = useNavigationState((state) => state);
|
||||
const [selectedIndex, setSelectedIndex] = useState(
|
||||
navigationState.index === 6 ? 1 : 0
|
||||
);
|
||||
interface ViewSwitchProps {
|
||||
navigation: NavigationProp<any>;
|
||||
}
|
||||
|
||||
// Sync the selected index with navigation state
|
||||
useEffect(() => {
|
||||
const newIndex = navigationState.index === 6 ? 1 : 0;
|
||||
if (selectedIndex !== newIndex) {
|
||||
setSelectedIndex(newIndex);
|
||||
}
|
||||
isNavigating.current = false;
|
||||
}, [navigationState.index]);
|
||||
const ViewSwitch = memo(function ViewSwitch({ navigation }: ViewSwitchProps) {
|
||||
const currentIndex = useNavigationState((state) => state.index === 6 ? 1 : 0);
|
||||
|
||||
const handleSegmentChange = useCallback(
|
||||
(index: number) => {
|
||||
if (isNavigating.current) return;
|
||||
if (index === selectedIndex) return;
|
||||
const handleSegmentChange = useCallback(
|
||||
(index: number) => {
|
||||
if (index === currentIndex) return;
|
||||
navigation.navigate(index === 0 ? "calendar" : "todos");
|
||||
},
|
||||
[navigation, currentIndex]
|
||||
);
|
||||
|
||||
isNavigating.current = true;
|
||||
setSelectedIndex(index);
|
||||
|
||||
// Delay navigation slightly to allow the segment control to update
|
||||
requestAnimationFrame(() => {
|
||||
navigation.navigate(index === 0 ? "calendar" : "todos");
|
||||
});
|
||||
console.log(selectedIndex)
|
||||
},
|
||||
[navigation, selectedIndex]
|
||||
);
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<SegmentedControl
|
||||
segments={[
|
||||
{ label: "Calendar", segmentLabelStyle: styles.labelStyle },
|
||||
{ label: "To Do's", segmentLabelStyle: styles.labelStyle },
|
||||
]}
|
||||
containerStyle={styles.segmentContainer}
|
||||
style={styles.segment}
|
||||
backgroundColor="#ebebeb"
|
||||
inactiveColor="black"
|
||||
activeColor="white"
|
||||
activeBackgroundColor="#ea156c"
|
||||
outlineColor="white"
|
||||
outlineWidth={3}
|
||||
onChangeIndex={handleSegmentChange}
|
||||
initialIndex={selectedIndex}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<SegmentedControl
|
||||
segments={[
|
||||
{ label: "Calendar", segmentLabelStyle: styles.labelStyle },
|
||||
{ label: "To Do's", segmentLabelStyle: styles.labelStyle },
|
||||
]}
|
||||
containerStyle={styles.segmentContainer}
|
||||
style={styles.segment}
|
||||
backgroundColor="#ebebeb"
|
||||
inactiveColor="black"
|
||||
activeColor="white"
|
||||
activeBackgroundColor="#ea156c"
|
||||
outlineColor="white"
|
||||
outlineWidth={3}
|
||||
onChangeIndex={handleSegmentChange}
|
||||
initialIndex={currentIndex}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
});
|
||||
export default ViewSwitch;
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
borderRadius: 30,
|
||||
backgroundColor: "#ebebeb",
|
||||
shadowColor: "#000",
|
||||
shadowOffset: { width: 0, height: 0 },
|
||||
shadowOpacity: 0,
|
||||
shadowRadius: 0,
|
||||
elevation: 0,
|
||||
},
|
||||
segmentContainer: {
|
||||
height: 44,
|
||||
width: 220,
|
||||
},
|
||||
segment: {
|
||||
borderRadius: 50,
|
||||
borderWidth: 0,
|
||||
height: 44,
|
||||
},
|
||||
labelStyle: {
|
||||
fontSize: 16,
|
||||
fontFamily: "Manrope_600SemiBold",
|
||||
},
|
||||
container: {
|
||||
borderRadius: 30,
|
||||
backgroundColor: "#ebebeb",
|
||||
shadowColor: "#000",
|
||||
shadowOffset: { width: 0, height: 0 },
|
||||
shadowOpacity: 0,
|
||||
shadowRadius: 0,
|
||||
elevation: 0,
|
||||
},
|
||||
segmentContainer: {
|
||||
height: 44,
|
||||
width: 220,
|
||||
},
|
||||
segment: {
|
||||
borderRadius: 50,
|
||||
borderWidth: 0,
|
||||
height: 44,
|
||||
},
|
||||
labelStyle: {
|
||||
fontSize: 16,
|
||||
fontFamily: "Manrope_600SemiBold",
|
||||
},
|
||||
});
|
||||
|
||||
export default ViewSwitch;
|
||||
@ -1,92 +1,89 @@
|
||||
import React, { useEffect } from "react";
|
||||
import { View, Text } from "react-native-ui-lib";
|
||||
import React, {useEffect} from "react";
|
||||
import {Text, View} from "react-native-ui-lib";
|
||||
import * as ScreenOrientation from "expo-screen-orientation";
|
||||
import TabletContainer from "../tablet_components/TabletContainer";
|
||||
import ToDosPage from "../../todos/ToDosPage";
|
||||
import ToDosList from "../../todos/ToDosList";
|
||||
import SingleUserChoreList from "./SingleUserChoreList";
|
||||
import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
|
||||
import { ImageBackground, StyleSheet } from "react-native";
|
||||
import { colorMap } from "@/constants/colorMap";
|
||||
import { ScrollView } from "react-native-gesture-handler";
|
||||
import {useGetFamilyMembers} from "@/hooks/firebase/useGetFamilyMembers";
|
||||
import {ImageBackground, StyleSheet} from "react-native";
|
||||
import {ScrollView} from "react-native-gesture-handler";
|
||||
|
||||
const TabletChoresPage = () => {
|
||||
const { data: users } = useGetFamilyMembers();
|
||||
// Function to lock the screen orientation to landscape
|
||||
const lockScreenOrientation = async () => {
|
||||
await ScreenOrientation.lockAsync(
|
||||
ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT
|
||||
);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
lockScreenOrientation(); // Lock orientation when the component mounts
|
||||
|
||||
return () => {
|
||||
// Optional: Unlock to default when the component unmounts
|
||||
ScreenOrientation.unlockAsync();
|
||||
const {data: users} = useGetFamilyMembers();
|
||||
// Function to lock the screen orientation to landscape
|
||||
const lockScreenOrientation = async () => {
|
||||
await ScreenOrientation.lockAsync(
|
||||
ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT
|
||||
);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<TabletContainer>
|
||||
<ScrollView horizontal>
|
||||
<View row gap-25 padding-25>
|
||||
{users?.map((user, index) => (
|
||||
<View>
|
||||
<View row centerV>
|
||||
{user.pfp ? (
|
||||
<ImageBackground
|
||||
source={{ uri: user.pfp }}
|
||||
style={[
|
||||
styles.pfp,
|
||||
(user.eventColor && {
|
||||
borderWidth: 2,
|
||||
borderColor: user.eventColor,
|
||||
}) ||
|
||||
undefined,
|
||||
]}
|
||||
borderRadius={13.33}
|
||||
/>
|
||||
) : (
|
||||
<View
|
||||
center
|
||||
style={styles.pfp}
|
||||
backgroundColor={user.eventColor || "#00a8b6"}
|
||||
>
|
||||
<Text color="white">
|
||||
{user.firstName.at(0)}
|
||||
{user.lastName.at(0)}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
<Text style={styles.name} marginL-15>
|
||||
{user.firstName}
|
||||
</Text>
|
||||
<Text style={[styles.name, { color: "#9b9b9b" }]} marginL-5>
|
||||
({user.userType})
|
||||
</Text>
|
||||
</View>
|
||||
<SingleUserChoreList user={user} />
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</TabletContainer>
|
||||
);
|
||||
useEffect(() => {
|
||||
lockScreenOrientation(); // Lock orientation when the component mounts
|
||||
|
||||
return () => {
|
||||
// Optional: Unlock to default when the component unmounts
|
||||
ScreenOrientation.unlockAsync();
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<TabletContainer>
|
||||
<ScrollView horizontal>
|
||||
<View row gap-25 padding-25>
|
||||
{users?.map((user, index) => (
|
||||
<View>
|
||||
<View row centerV>
|
||||
{user.pfp ? (
|
||||
<ImageBackground
|
||||
source={{uri: user.pfp}}
|
||||
style={[
|
||||
styles.pfp,
|
||||
(user.eventColor && {
|
||||
borderWidth: 2,
|
||||
borderColor: user.eventColor,
|
||||
}) ||
|
||||
undefined,
|
||||
]}
|
||||
borderRadius={13.33}
|
||||
/>
|
||||
) : (
|
||||
<View
|
||||
center
|
||||
style={styles.pfp}
|
||||
backgroundColor={user.eventColor || "#00a8b6"}
|
||||
>
|
||||
<Text color="white">
|
||||
{user.firstName.at(0)}
|
||||
{user.lastName.at(0)}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
<Text style={styles.name} marginL-15>
|
||||
{user.firstName}
|
||||
</Text>
|
||||
<Text style={[styles.name, {color: "#9b9b9b"}]} marginL-5>
|
||||
({user.userType})
|
||||
</Text>
|
||||
</View>
|
||||
<SingleUserChoreList user={user}/>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</TabletContainer>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
pfp: {
|
||||
width: 46.74,
|
||||
aspectRatio: 1,
|
||||
borderRadius: 13.33,
|
||||
},
|
||||
name: {
|
||||
fontFamily: "Manrope_600SemiBold",
|
||||
fontSize: 22.43,
|
||||
color: "#2c2c2c",
|
||||
},
|
||||
pfp: {
|
||||
width: 46.74,
|
||||
aspectRatio: 1,
|
||||
borderRadius: 13.33,
|
||||
},
|
||||
name: {
|
||||
fontFamily: "Manrope_600SemiBold",
|
||||
fontSize: 22.43,
|
||||
color: "#2c2c2c",
|
||||
},
|
||||
});
|
||||
|
||||
export default TabletChoresPage;
|
||||
|
||||
@ -3,7 +3,6 @@ import React from "react";
|
||||
import { useBrainDumpContext } from "@/contexts/DumpContext";
|
||||
import { FlatList } from "react-native";
|
||||
import BrainDumpItem from "./DumpItem";
|
||||
import LinearGradient from "react-native-linear-gradient";
|
||||
|
||||
const DumpList = (props: { searchText: string }) => {
|
||||
const { brainDumps } = useBrainDumpContext();
|
||||
|
||||
@ -1,131 +1,121 @@
|
||||
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";
|
||||
import {useIsMutating} from "react-query";
|
||||
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";
|
||||
|
||||
export const CalendarHeader = memo(() => {
|
||||
const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
|
||||
const [mode, setMode] = useAtom(modeAtom);
|
||||
const { profileData } = useAuthContext();
|
||||
const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
|
||||
const [mode, setMode] = useAtom(modeAtom);
|
||||
|
||||
const handleSegmentChange = (index: number) => {
|
||||
const selectedMode = modeMap.get(index);
|
||||
if (selectedMode) {
|
||||
setTimeout(() => {
|
||||
setMode(selectedMode as "day" | "week" | "month");
|
||||
}, 150);
|
||||
}
|
||||
};
|
||||
const handleSegmentChange = (index: number) => {
|
||||
const selectedMode = modeMap.get(index);
|
||||
if (selectedMode) {
|
||||
setTimeout(() => {
|
||||
setMode(selectedMode as "day" | "week" | "month");
|
||||
}, 150);
|
||||
}
|
||||
};
|
||||
|
||||
const handleMonthChange = (month: string) => {
|
||||
const currentDay = selectedDate.getDate();
|
||||
const currentYear = selectedDate.getFullYear();
|
||||
const newMonthIndex = months.indexOf(month);
|
||||
const handleMonthChange = (month: string) => {
|
||||
const currentDay = selectedDate.getDate();
|
||||
const currentYear = selectedDate.getFullYear();
|
||||
const newMonthIndex = months.indexOf(month);
|
||||
|
||||
const updatedDate = new Date(currentYear, newMonthIndex, currentDay);
|
||||
setSelectedDate(updatedDate);
|
||||
};
|
||||
const updatedDate = new Date(currentYear, newMonthIndex, currentDay);
|
||||
setSelectedDate(updatedDate);
|
||||
};
|
||||
|
||||
const isSelectedDateToday = isSameDay(selectedDate, new Date());
|
||||
const isSelectedDateToday = isSameDay(selectedDate, new Date());
|
||||
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 8,
|
||||
borderRadius: 20,
|
||||
borderBottomLeftRadius: 0,
|
||||
borderBottomRightRadius: 0,
|
||||
backgroundColor: "white",
|
||||
marginBottom: 10,
|
||||
}}
|
||||
>
|
||||
<View row centerV gap-3>
|
||||
<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 }}
|
||||
mode={PickerModes.SINGLE}
|
||||
onChange={(itemValue) => handleMonthChange(itemValue as string)}
|
||||
trailingAccessory={<MaterialIcons name={"keyboard-arrow-down"} />}
|
||||
topBarProps={{
|
||||
title: selectedDate.getFullYear().toString(),
|
||||
titleStyle: { fontFamily: "Manrope_500Medium", fontSize: 17 },
|
||||
}}
|
||||
>
|
||||
{months.map((month) => (
|
||||
<Picker.Item key={month} label={month} value={month} />
|
||||
))}
|
||||
</Picker>
|
||||
</View>
|
||||
|
||||
<View row centerV>
|
||||
{!isSelectedDateToday && (
|
||||
<Button
|
||||
size={"xSmall"}
|
||||
marginR-0
|
||||
avoidInnerPadding
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
borderRadius: 50,
|
||||
backgroundColor: "white",
|
||||
borderWidth: 0.7,
|
||||
borderColor: "#dadce0",
|
||||
height: 30,
|
||||
paddingHorizontal: 10,
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 8,
|
||||
borderRadius: 20,
|
||||
borderBottomLeftRadius: 0,
|
||||
borderBottomRightRadius: 0,
|
||||
backgroundColor: "white",
|
||||
marginBottom: 10,
|
||||
}}
|
||||
labelStyle={{
|
||||
fontSize: 12,
|
||||
color: "black",
|
||||
fontFamily: "Manrope_500Medium",
|
||||
}}
|
||||
label={format(new Date(), "dd/MM/yyyy")}
|
||||
onPress={() => {
|
||||
setSelectedDate(new Date());
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
>
|
||||
<View row centerV gap-3>
|
||||
<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}}
|
||||
mode={PickerModes.SINGLE}
|
||||
onChange={(itemValue) => handleMonthChange(itemValue as string)}
|
||||
trailingAccessory={<MaterialIcons name={"keyboard-arrow-down"}/>}
|
||||
topBarProps={{
|
||||
title: selectedDate.getFullYear().toString(),
|
||||
titleStyle: {fontFamily: "Manrope_500Medium", fontSize: 17},
|
||||
}}
|
||||
>
|
||||
{months.map((month) => (
|
||||
<Picker.Item key={month} label={month} value={month}/>
|
||||
))}
|
||||
</Picker>
|
||||
</View>
|
||||
|
||||
<View>
|
||||
<SegmentedControl
|
||||
segments={[{ label: "D" }, { label: "W" }, { label: "M" }]}
|
||||
backgroundColor="#ececec"
|
||||
inactiveColor="#919191"
|
||||
activeBackgroundColor="#ea156c"
|
||||
activeColor="white"
|
||||
outlineColor="white"
|
||||
outlineWidth={3}
|
||||
segmentLabelStyle={styles.segmentslblStyle}
|
||||
onChangeIndex={handleSegmentChange}
|
||||
initialIndex={mode === "day" ? 0 : mode === "week" ? 1 : 2}
|
||||
/>
|
||||
<View row centerV>
|
||||
{!isSelectedDateToday && (
|
||||
<Button
|
||||
size={"xSmall"}
|
||||
marginR-0
|
||||
avoidInnerPadding
|
||||
style={{
|
||||
borderRadius: 50,
|
||||
backgroundColor: "white",
|
||||
borderWidth: 0.7,
|
||||
borderColor: "#dadce0",
|
||||
height: 30,
|
||||
paddingHorizontal: 10,
|
||||
}}
|
||||
labelStyle={{
|
||||
fontSize: 12,
|
||||
color: "black",
|
||||
fontFamily: "Manrope_500Medium",
|
||||
}}
|
||||
label={format(new Date(), "dd/MM/yyyy")}
|
||||
onPress={() => {
|
||||
setSelectedDate(new Date());
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
<View>
|
||||
<SegmentedControl
|
||||
segments={[{label: "D"}, {label: "W"}, {label: "M"}]}
|
||||
backgroundColor="#ececec"
|
||||
inactiveColor="#919191"
|
||||
activeBackgroundColor="#ea156c"
|
||||
activeColor="white"
|
||||
outlineColor="white"
|
||||
outlineWidth={3}
|
||||
segmentLabelStyle={styles.segmentslblStyle}
|
||||
onChangeIndex={handleSegmentChange}
|
||||
initialIndex={mode === "day" ? 0 : mode === "week" ? 1 : 2}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
);
|
||||
});
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
segmentslblStyle: {
|
||||
fontSize: 12,
|
||||
fontFamily: "Manrope_600SemiBold",
|
||||
},
|
||||
segmentslblStyle: {
|
||||
fontSize: 12,
|
||||
fontFamily: "Manrope_600SemiBold",
|
||||
},
|
||||
});
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import React from "react";
|
||||
import { View } from "react-native-ui-lib";
|
||||
import HeaderTemplate from "@/components/shared/HeaderTemplate";
|
||||
import { InnerCalendar } from "@/components/pages/calendar/InnerCalendar";
|
||||
|
||||
export default function CalendarPage() {
|
||||
|
||||
@ -1,61 +1,60 @@
|
||||
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { Calendar } from "react-native-big-calendar";
|
||||
import { ActivityIndicator, ScrollView, StyleSheet, View, ViewStyle } from "react-native";
|
||||
import { useGetEvents } from "@/hooks/firebase/useGetEvents";
|
||||
import { useAtom, useAtomValue, 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,
|
||||
isAllDayAtom, isFamilyViewAtom,
|
||||
isAllDayAtom,
|
||||
isFamilyViewAtom,
|
||||
modeAtom,
|
||||
refreshTriggerAtom,
|
||||
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 { addDays, compareAsc, isWithinInterval, subDays } from "date-fns";
|
||||
import {useAuthContext} from "@/contexts/AuthContext";
|
||||
import {CalendarEvent} from "@/components/pages/calendar/interfaces";
|
||||
import {Text} from "react-native-ui-lib";
|
||||
import {addDays, compareAsc, isWithinInterval, subDays} from "date-fns";
|
||||
import {useCalSync} from "@/hooks/useCalSync";
|
||||
import {useSyncEvents} from "@/hooks/useSyncOnScroll";
|
||||
import {colorMap} from "@/constants/colorMap";
|
||||
|
||||
interface EventCalendarProps {
|
||||
calendarHeight: number;
|
||||
// WAS USED FOR SCROLLABLE CALENDARS, PERFORMANCE WAS NOT OPTIMAL
|
||||
calendarWidth: number;
|
||||
calendarHeight: number;
|
||||
// WAS USED FOR SCROLLABLE CALENDARS, PERFORMANCE WAS NOT OPTIMAL
|
||||
calendarWidth: number;
|
||||
}
|
||||
|
||||
const getTotalMinutes = () => {
|
||||
const date = new Date();
|
||||
return Math.abs(date.getUTCHours() * 60 + date.getUTCMinutes() - 200);
|
||||
const date = new Date();
|
||||
return Math.abs(date.getUTCHours() * 60 + date.getUTCMinutes() - 200);
|
||||
};
|
||||
|
||||
export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
|
||||
({ calendarHeight }) => {
|
||||
const { data: events, isLoading, refetch } = useGetEvents();
|
||||
const { profileData, user } = useAuthContext();
|
||||
const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
|
||||
const [mode, setMode] = useAtom(modeAtom);
|
||||
const [isFamilyView] = useAtom(isFamilyViewAtom);
|
||||
({calendarHeight}) => {
|
||||
const {data: events, isLoading, refetch} = useGetEvents();
|
||||
const {profileData, user} = useAuthContext();
|
||||
const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
|
||||
const [mode, setMode] = useAtom(modeAtom);
|
||||
const [isFamilyView] = useAtom(isFamilyViewAtom);
|
||||
|
||||
const setEditVisible = useSetAtom(editVisibleAtom);
|
||||
const [isAllDay, setIsAllDay] = useAtom(isAllDayAtom);
|
||||
const setEventForEdit = useSetAtom(eventForEditAtom);
|
||||
const shouldRefresh = useAtomValue(refreshTriggerAtom);
|
||||
const setSelectedNewEndDate = useSetAtom(selectedNewEventDateAtom);
|
||||
const setEditVisible = useSetAtom(editVisibleAtom);
|
||||
const [isAllDay, setIsAllDay] = useAtom(isAllDayAtom);
|
||||
const setEventForEdit = useSetAtom(eventForEditAtom);
|
||||
const setSelectedNewEndDate = useSetAtom(selectedNewEventDateAtom);
|
||||
|
||||
const {isSyncing} = useSyncEvents()
|
||||
const [offsetMinutes, setOffsetMinutes] = useState(getTotalMinutes());
|
||||
useCalSync()
|
||||
const {isSyncing} = useSyncEvents()
|
||||
const [offsetMinutes, setOffsetMinutes] = useState(getTotalMinutes());
|
||||
useCalSync()
|
||||
|
||||
const todaysDate = new Date();
|
||||
const todaysDate = new Date();
|
||||
|
||||
const handlePressEvent = useCallback(
|
||||
(event: CalendarEvent) => {
|
||||
if (mode === "day" || mode === "week") {
|
||||
setEditVisible(true);
|
||||
// console.log({event});
|
||||
const handlePressEvent = useCallback(
|
||||
(event: CalendarEvent) => {
|
||||
if (mode === "day" || mode === "week") {
|
||||
setEditVisible(true);
|
||||
// console.log({event});
|
||||
setEventForEdit(event);
|
||||
} else {
|
||||
setMode("day");
|
||||
@ -65,209 +64,195 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
|
||||
[setEditVisible, setEventForEdit, mode]
|
||||
);
|
||||
|
||||
const handlePressCell = useCallback(
|
||||
(date: Date) => {
|
||||
if (mode === "day" || mode === "week") {
|
||||
setSelectedNewEndDate(date);
|
||||
} else {
|
||||
setMode("day");
|
||||
setSelectedDate(date);
|
||||
}
|
||||
},
|
||||
[mode, setSelectedNewEndDate, setSelectedDate]
|
||||
);
|
||||
const handlePressCell = useCallback(
|
||||
(date: Date) => {
|
||||
if (mode === "day" || mode === "week") {
|
||||
setSelectedNewEndDate(date);
|
||||
} else {
|
||||
setMode("day");
|
||||
setSelectedDate(date);
|
||||
}
|
||||
},
|
||||
[mode, setSelectedNewEndDate, setSelectedDate]
|
||||
);
|
||||
|
||||
const handlePressDayHeader = useCallback(
|
||||
(date: Date) => {
|
||||
if (mode === "day") {
|
||||
setIsAllDay(true);
|
||||
setSelectedNewEndDate(date);
|
||||
setEditVisible(true);
|
||||
}
|
||||
if (mode === 'week')
|
||||
{
|
||||
setSelectedDate(date)
|
||||
const handlePressDayHeader = useCallback(
|
||||
(date: Date) => {
|
||||
if (mode === "day") {
|
||||
setIsAllDay(true);
|
||||
setSelectedNewEndDate(date);
|
||||
setEditVisible(true);
|
||||
}
|
||||
if (mode === 'week') {
|
||||
setSelectedDate(date)
|
||||
|
||||
setMode("day")
|
||||
}
|
||||
},
|
||||
[mode, setSelectedNewEndDate]
|
||||
);
|
||||
setMode("day")
|
||||
}
|
||||
},
|
||||
[mode, setSelectedNewEndDate]
|
||||
);
|
||||
|
||||
const handleSwipeEnd = useCallback(
|
||||
(date: Date) => {
|
||||
setSelectedDate(date);
|
||||
},
|
||||
[setSelectedDate]
|
||||
);
|
||||
const handleSwipeEnd = useCallback(
|
||||
(date: Date) => {
|
||||
setSelectedDate(date);
|
||||
},
|
||||
[setSelectedDate]
|
||||
);
|
||||
|
||||
const memoizedEventCellStyle = useCallback(
|
||||
(event: CalendarEvent) => {
|
||||
let eventColor = event.eventColor;
|
||||
if (!isFamilyView && event.attendees?.includes(user?.uid)) {
|
||||
eventColor = profileData?.eventColor ?? colorMap.teal;
|
||||
}
|
||||
const memoizedEventCellStyle = useCallback(
|
||||
(event: CalendarEvent) => {
|
||||
let eventColor = event.eventColor;
|
||||
if (!isFamilyView && event.attendees?.includes(user?.uid)) {
|
||||
eventColor = profileData?.eventColor ?? colorMap.teal;
|
||||
}
|
||||
|
||||
return { backgroundColor: eventColor , fontSize: 14}
|
||||
},
|
||||
[]
|
||||
);
|
||||
return {backgroundColor: eventColor, fontSize: 14}
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
const memoizedWeekStartsOn = useMemo(
|
||||
() => (profileData?.firstDayOfWeek === "Mondays" ? 1 : 0),
|
||||
[profileData]
|
||||
);
|
||||
const memoizedWeekStartsOn = useMemo(
|
||||
() => (profileData?.firstDayOfWeek === "Mondays" ? 1 : 0),
|
||||
[profileData]
|
||||
);
|
||||
|
||||
// console.log({memoizedWeekStartsOn, profileData: profileData?.firstDayOfWeek,
|
||||
const isSameDate = useCallback((date1: Date, date2: Date) => {
|
||||
return (
|
||||
date1.getDate() === date2.getDate() &&
|
||||
date1.getMonth() === date2.getMonth() &&
|
||||
date1.getFullYear() === date2.getFullYear()
|
||||
);
|
||||
}, []);
|
||||
|
||||
const isSameDate = useCallback((date1: Date, date2: Date) => {
|
||||
return (
|
||||
date1.getDate() === date2.getDate() &&
|
||||
date1.getMonth() === date2.getMonth() &&
|
||||
date1.getFullYear() === date2.getFullYear()
|
||||
);
|
||||
}, []);
|
||||
const dayHeaderColor = useMemo(() => {
|
||||
return isSameDate(todaysDate, selectedDate) ? "white" : "#4d4d4d";
|
||||
}, [selectedDate, mode]);
|
||||
|
||||
const dayHeaderColor = useMemo(() => {
|
||||
return isSameDate(todaysDate, selectedDate) ? "white" : "#4d4d4d";
|
||||
}, [selectedDate, mode]);
|
||||
const dateStyle = useMemo(() => {
|
||||
if (mode === "week") return undefined;
|
||||
return isSameDate(todaysDate, selectedDate) && mode === "day"
|
||||
? styles.dayHeader
|
||||
: styles.otherDayHeader;
|
||||
}, [selectedDate, mode]);
|
||||
|
||||
const dateStyle = useMemo(() => {
|
||||
if (mode === "week") return undefined;
|
||||
return isSameDate(todaysDate, selectedDate) && mode === "day"
|
||||
? styles.dayHeader
|
||||
: styles.otherDayHeader;
|
||||
}, [selectedDate, mode]);
|
||||
const memoizedHeaderContentStyle = useMemo(() => {
|
||||
if (mode === "day") {
|
||||
return styles.dayModeHeader;
|
||||
} else if (mode === "week") {
|
||||
return styles.weekModeHeader;
|
||||
} else if (mode === "month") {
|
||||
return styles.monthModeHeader;
|
||||
} else {
|
||||
return {};
|
||||
}
|
||||
}, [mode]);
|
||||
|
||||
const memoizedHeaderContentStyle = useMemo(() => {
|
||||
if (mode === "day") {
|
||||
return styles.dayModeHeader;
|
||||
} else if (mode === "week") {
|
||||
return styles.weekModeHeader;
|
||||
} else if (mode === "month") {
|
||||
return styles.monthModeHeader;
|
||||
} else {
|
||||
return {};
|
||||
}
|
||||
}, [mode]);
|
||||
const {enrichedEvents, filteredEvents} = useMemo(() => {
|
||||
const startTime = Date.now(); // Start timer
|
||||
|
||||
const { enrichedEvents, filteredEvents } = useMemo(() => {
|
||||
const startTime = Date.now(); // Start timer
|
||||
const startOffset = mode === "month" ? 40 : mode === "week" ? 10 : 1;
|
||||
const endOffset = mode === "month" ? 40 : mode === "week" ? 10 : 1;
|
||||
|
||||
const startOffset = mode === "month" ? 40 : mode === "week" ? 10 : 1;
|
||||
const endOffset = mode === "month" ? 40 : mode === "week" ? 10 : 1;
|
||||
const filteredEvents =
|
||||
events?.filter(
|
||||
(event) =>
|
||||
event.start &&
|
||||
event.end &&
|
||||
isWithinInterval(event.start, {
|
||||
start: subDays(selectedDate, startOffset),
|
||||
end: addDays(selectedDate, endOffset),
|
||||
}) &&
|
||||
isWithinInterval(event.end, {
|
||||
start: subDays(selectedDate, startOffset),
|
||||
end: addDays(selectedDate, endOffset),
|
||||
})
|
||||
) ?? [];
|
||||
|
||||
const filteredEvents =
|
||||
events?.filter(
|
||||
(event) =>
|
||||
event.start &&
|
||||
event.end &&
|
||||
isWithinInterval(event.start, {
|
||||
start: subDays(selectedDate, startOffset),
|
||||
end: addDays(selectedDate, endOffset),
|
||||
}) &&
|
||||
isWithinInterval(event.end, {
|
||||
start: subDays(selectedDate, startOffset),
|
||||
end: addDays(selectedDate, endOffset),
|
||||
})
|
||||
) ?? [];
|
||||
const enrichedEvents = filteredEvents.reduce((acc, event) => {
|
||||
const dateKey = event.start.toISOString().split("T")[0];
|
||||
acc[dateKey] = acc[dateKey] || [];
|
||||
acc[dateKey].push({
|
||||
...event,
|
||||
overlapPosition: false,
|
||||
overlapCount: 0,
|
||||
});
|
||||
|
||||
const enrichedEvents = filteredEvents.reduce((acc, event) => {
|
||||
const dateKey = event.start.toISOString().split("T")[0];
|
||||
acc[dateKey] = acc[dateKey] || [];
|
||||
acc[dateKey].push({
|
||||
...event,
|
||||
overlapPosition: false,
|
||||
overlapCount: 0,
|
||||
});
|
||||
acc[dateKey].sort((a, b) => compareAsc(a.start, b.start));
|
||||
|
||||
acc[dateKey].sort((a, b) => compareAsc(a.start, b.start));
|
||||
return acc;
|
||||
}, {} as Record<string, CalendarEvent[]>);
|
||||
|
||||
return acc;
|
||||
}, {} as Record<string, CalendarEvent[]>);
|
||||
const endTime = Date.now();
|
||||
// console.log("memoizedEvents computation time:", endTime - startTime, "ms");
|
||||
|
||||
const endTime = Date.now();
|
||||
// console.log("memoizedEvents computation time:", endTime - startTime, "ms");
|
||||
return {enrichedEvents, filteredEvents};
|
||||
}, [events, selectedDate, mode]);
|
||||
|
||||
return { enrichedEvents, filteredEvents };
|
||||
}, [events, selectedDate, mode]);
|
||||
const renderCustomDateForMonth = (date: Date) => {
|
||||
const circleStyle = useMemo<ViewStyle>(
|
||||
() => ({
|
||||
width: 30,
|
||||
height: 30,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
borderRadius: 15,
|
||||
}),
|
||||
[]
|
||||
);
|
||||
|
||||
const renderCustomDateForMonth = (date: Date) => {
|
||||
const circleStyle = useMemo<ViewStyle>(
|
||||
() => ({
|
||||
width: 30,
|
||||
height: 30,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
borderRadius: 15,
|
||||
}),
|
||||
[]
|
||||
);
|
||||
const defaultStyle = useMemo<ViewStyle>(
|
||||
() => ({
|
||||
...circleStyle,
|
||||
}),
|
||||
[circleStyle]
|
||||
);
|
||||
|
||||
const defaultStyle = useMemo<ViewStyle>(
|
||||
() => ({
|
||||
...circleStyle,
|
||||
}),
|
||||
[circleStyle]
|
||||
);
|
||||
const currentDateStyle = useMemo<ViewStyle>(
|
||||
() => ({
|
||||
...circleStyle,
|
||||
backgroundColor: "#4184f2",
|
||||
}),
|
||||
[circleStyle]
|
||||
);
|
||||
|
||||
const currentDateStyle = useMemo<ViewStyle>(
|
||||
() => ({
|
||||
...circleStyle,
|
||||
backgroundColor: "#4184f2",
|
||||
}),
|
||||
[circleStyle]
|
||||
);
|
||||
const renderDate = useCallback(
|
||||
(date: Date) => {
|
||||
const isCurrentDate = isSameDate(todaysDate, date);
|
||||
const appliedStyle = isCurrentDate ? currentDateStyle : defaultStyle;
|
||||
|
||||
const renderDate = useCallback(
|
||||
(date: Date) => {
|
||||
const isCurrentDate = isSameDate(todaysDate, date);
|
||||
const appliedStyle = isCurrentDate ? currentDateStyle : defaultStyle;
|
||||
return (
|
||||
<View style={{alignItems: "center"}}>
|
||||
<View style={appliedStyle}>
|
||||
<Text style={{color: isCurrentDate ? "white" : "black"}}>
|
||||
{date.getDate()}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
},
|
||||
[todaysDate, currentDateStyle, defaultStyle] // dependencies
|
||||
);
|
||||
|
||||
return (
|
||||
<View style={{ alignItems: "center" }}>
|
||||
<View style={appliedStyle}>
|
||||
<Text style={{ color: isCurrentDate ? "white" : "black" }}>
|
||||
{date.getDate()}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
},
|
||||
[todaysDate, currentDateStyle, defaultStyle] // dependencies
|
||||
);
|
||||
return renderDate(date);
|
||||
};
|
||||
|
||||
return renderDate(date);
|
||||
};
|
||||
useEffect(() => {
|
||||
setOffsetMinutes(getTotalMinutes());
|
||||
}, [events, mode]);
|
||||
|
||||
useEffect(() => {
|
||||
setOffsetMinutes(getTotalMinutes());
|
||||
}, [events, mode]);
|
||||
|
||||
useEffect(() => {
|
||||
refetch()
|
||||
.then(() => {
|
||||
console.log('✅ Events refreshed successfully');
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('❌ Events refresh failed:', error);
|
||||
});
|
||||
}, [shouldRefresh, refetch])
|
||||
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<View style={styles.loadingContainer}>
|
||||
{isSyncing && <Text>Syncing...</Text>}
|
||||
if (isLoading) {
|
||||
return (
|
||||
<View style={styles.loadingContainer}>
|
||||
{isSyncing && <Text>Syncing...</Text>}
|
||||
<ActivityIndicator size="large" color="#0000ff"/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
// console.log(enrichedEvents, filteredEvents)
|
||||
// console.log(enrichedEvents, filteredEvents)
|
||||
|
||||
return (
|
||||
<>
|
||||
return (
|
||||
<>
|
||||
{isSyncing && (
|
||||
<View style={styles.loadingContainer}>
|
||||
{isSyncing && <Text>Syncing...</Text>}
|
||||
@ -317,14 +302,14 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
|
||||
dayHeaderHighlightColor={"white"}
|
||||
showAdjacentMonths
|
||||
headerContainerStyle={mode !== "month" ? {
|
||||
overflow:"hidden",
|
||||
overflow: "hidden",
|
||||
} : {}}
|
||||
hourStyle={styles.hourStyle}
|
||||
onPressDateHeader={handlePressDayHeader}
|
||||
onPressDateHeader={handlePressDayHeader}
|
||||
ampm
|
||||
// renderCustomDateForMonth={renderCustomDateForMonth}
|
||||
/>
|
||||
<View style={{backgroundColor: 'white', height: 50, width: '100%'}} />
|
||||
<View style={{backgroundColor: 'white', height: 50, width: '100%'}}/>
|
||||
</>
|
||||
|
||||
);
|
||||
|
||||
@ -11,7 +11,6 @@ import { PanningDirectionsEnum } from "react-native-ui-lib/src/incubator/panView
|
||||
import { Dimensions, Platform, StyleSheet } from "react-native";
|
||||
|
||||
import DropModalIcon from "@/assets/svgs/DropModalIcon";
|
||||
import { useBrainDumpContext } from "@/contexts/DumpContext";
|
||||
import KeyboardManager from "react-native-keyboard-manager";
|
||||
import { useFeedbackContext } from "@/contexts/FeedbackContext";
|
||||
|
||||
|
||||
@ -14,9 +14,6 @@ import PenIcon from "@/assets/svgs/PenIcon";
|
||||
import BinIcon from "@/assets/svgs/BinIcon";
|
||||
import DropModalIcon from "@/assets/svgs/DropModalIcon";
|
||||
import CloseXIcon from "@/assets/svgs/CloseXIcon";
|
||||
import NavCalendarIcon from "@/assets/svgs/NavCalendarIcon";
|
||||
import NavToDosIcon from "@/assets/svgs/NavToDosIcon";
|
||||
import RemindersIcon from "@/assets/svgs/RemindersIcon";
|
||||
import MenuIcon from "@/assets/svgs/MenuIcon";
|
||||
import { IFeedback, useFeedbackContext } from "@/contexts/FeedbackContext";
|
||||
import FeedbackDialog from "./FeedbackDialog";
|
||||
|
||||
@ -2,7 +2,6 @@ import {Dimensions, StyleSheet} from "react-native";
|
||||
import React from "react";
|
||||
import {Button, View,} from "react-native-ui-lib";
|
||||
import {useGroceryContext} from "@/contexts/GroceryContext";
|
||||
import {FontAwesome6} from "@expo/vector-icons";
|
||||
import PlusIcon from "@/assets/svgs/PlusIcon";
|
||||
|
||||
const { width } = Dimensions.get("screen");
|
||||
|
||||
@ -1,14 +1,25 @@
|
||||
import {FlatList, StyleSheet} from "react-native";
|
||||
import React from "react";
|
||||
import React, {useCallback} from "react";
|
||||
import {Card, Text, View} from "react-native-ui-lib";
|
||||
import HeaderTemplate from "@/components/shared/HeaderTemplate";
|
||||
import {useGetNotifications} from "@/hooks/firebase/useGetNotifications";
|
||||
import {Notification, useGetNotifications} from "@/hooks/firebase/useGetNotifications";
|
||||
import {formatDistanceToNow} from "date-fns";
|
||||
import {useRouter} from "expo-router";
|
||||
import {useSetAtom} from "jotai";
|
||||
import {modeAtom, selectedDateAtom} from "@/components/pages/calendar/atoms";
|
||||
|
||||
const NotificationsPage = () => {
|
||||
const {data: notifications} = useGetNotifications()
|
||||
|
||||
console.log(notifications?.[0])
|
||||
const setSelectedDate = useSetAtom(selectedDateAtom);
|
||||
const setMode = useSetAtom(modeAtom);
|
||||
const {data: notifications} = useGetNotifications();
|
||||
const {push} = useRouter();
|
||||
const goToEventDay = useCallback((notification: Notification) => () => {
|
||||
if (notification?.date) {
|
||||
setSelectedDate(notification.date);
|
||||
setMode("day")
|
||||
}
|
||||
push({pathname: "/calendar"});
|
||||
}, [push, setSelectedDate]);
|
||||
|
||||
|
||||
return (
|
||||
@ -18,32 +29,56 @@ const NotificationsPage = () => {
|
||||
<HeaderTemplate
|
||||
message={"Welcome to your notifications!"}
|
||||
isWelcome={false}
|
||||
children={
|
||||
<Text
|
||||
style={{fontFamily: "Manrope_400Regular", fontSize: 14}}
|
||||
>
|
||||
See your notifications here.
|
||||
</Text>
|
||||
}
|
||||
/>
|
||||
>
|
||||
<Text style={styles.subtitle}>
|
||||
See your notifications here.
|
||||
</Text>
|
||||
</HeaderTemplate>
|
||||
</View>
|
||||
|
||||
<FlatList contentContainerStyle={{paddingBottom: 10, paddingHorizontal: 25}}
|
||||
data={notifications ?? []}
|
||||
renderItem={({item}) => <Card padding-20 gap-10 marginB-10>
|
||||
<Text text70>{item.content}</Text>
|
||||
<View row spread>
|
||||
<Text
|
||||
text90>{formatDistanceToNow(new Date(item.timestamp), {addSuffix: true})}</Text>
|
||||
<Text text90>{item.timestamp.toLocaleDateString()}</Text>
|
||||
</View>
|
||||
</Card>}/>
|
||||
</View>
|
||||
<FlatList
|
||||
contentContainerStyle={styles.listContainer}
|
||||
data={notifications ?? []}
|
||||
renderItem={({item}) => (
|
||||
<Card
|
||||
padding-20
|
||||
marginB-10
|
||||
key={item.content}
|
||||
onPress={goToEventDay(item)}
|
||||
activeOpacity={0.6}
|
||||
enableShadow={false}
|
||||
style={styles.card}
|
||||
>
|
||||
<Text text70>{item.content}</Text>
|
||||
<View row spread marginT-10>
|
||||
<Text text90>
|
||||
{formatDistanceToNow(new Date(item.timestamp), {addSuffix: true})}
|
||||
</Text>
|
||||
<Text text90>
|
||||
{item.timestamp.toLocaleDateString()}
|
||||
</Text>
|
||||
</View>
|
||||
</Card>
|
||||
)}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
listContainer: {
|
||||
paddingBottom: 10,
|
||||
paddingHorizontal: 25,
|
||||
},
|
||||
card: {
|
||||
width: '100%',
|
||||
backgroundColor: 'white',
|
||||
},
|
||||
subtitle: {
|
||||
fontFamily: "Manrope_400Regular",
|
||||
fontSize: 14,
|
||||
},
|
||||
searchField: {
|
||||
borderWidth: 0.7,
|
||||
borderColor: "#9b9b9b",
|
||||
@ -54,4 +89,4 @@ const styles = StyleSheet.create({
|
||||
},
|
||||
});
|
||||
|
||||
export default NotificationsPage;
|
||||
export default NotificationsPage;
|
||||
@ -1,91 +1,88 @@
|
||||
import { Image } from "react-native";
|
||||
import React, { useRef } from "react";
|
||||
import { View, Text, Button, TextField } from "react-native-ui-lib";
|
||||
import {Image, StyleSheet} from "react-native";
|
||||
import React, {useRef} from "react";
|
||||
import {Button, Text, TextField, View} from "react-native-ui-lib";
|
||||
import Onboarding from "react-native-onboarding-swiper";
|
||||
import { StyleSheet } from "react-native";
|
||||
import { useAuthContext } from "@/contexts/AuthContext";
|
||||
import { useSignUp } from "@/hooks/firebase/useSignUp";
|
||||
const OnboardingFlow = () => {
|
||||
const onboardingRef = useRef(null);
|
||||
const { mutateAsync: signUp } = useSignUp();
|
||||
|
||||
return (
|
||||
<Onboarding
|
||||
showPagination={false}
|
||||
ref={onboardingRef}
|
||||
containerStyles={{ backgroundColor: "#f9f8f7" }}
|
||||
imageContainerStyles={{
|
||||
paddingBottom: 0,
|
||||
paddingTop: 0,
|
||||
}}
|
||||
pages={[
|
||||
{
|
||||
backgroundColor: "#f9f8f7",
|
||||
image: (
|
||||
<Image
|
||||
source={require("../../../assets/images/splash-clock.png")}
|
||||
height={10}
|
||||
width={10}
|
||||
/>
|
||||
),
|
||||
title: <Text text30>Welcome to Cally</Text>,
|
||||
subtitle: (
|
||||
<View paddingB-250 marginH-20 spread>
|
||||
<Text text50R>Lightening Mental Loads, One Family at a Time</Text>
|
||||
<Button
|
||||
label="Continue"
|
||||
style={{ backgroundColor: "#fd1775" }}
|
||||
onPress={() => onboardingRef?.current?.goToPage(1, true)}
|
||||
/>
|
||||
</View>
|
||||
),
|
||||
},
|
||||
{
|
||||
backgroundColor: "#f9f8f7",
|
||||
title: <Text>Get started with Cally</Text>,
|
||||
image: (
|
||||
<Image
|
||||
source={require("../../../assets/images/splash-clock.png")}
|
||||
height={10}
|
||||
width={10}
|
||||
/>
|
||||
),
|
||||
subtitle: (
|
||||
<View
|
||||
style={{
|
||||
marginBottom: "auto",
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<View marginH-30>
|
||||
{/*<TextField style={styles.textfield} placeholder="First name" />*/}
|
||||
{/*<TextField style={styles.textfield} placeholder="Last name" />*/}
|
||||
<TextField style={styles.textfield} placeholder="Email" />
|
||||
<TextField style={styles.textfield} placeholder="Password" />
|
||||
<Button
|
||||
label="Login"
|
||||
backgroundColor="#ea156c"
|
||||
onPress={() => {
|
||||
console.log("Onboarding Done");
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
const OnboardingFlow = () => {
|
||||
const onboardingRef = useRef(null);
|
||||
|
||||
return (
|
||||
<Onboarding
|
||||
showPagination={false}
|
||||
ref={onboardingRef}
|
||||
containerStyles={{backgroundColor: "#f9f8f7"}}
|
||||
imageContainerStyles={{
|
||||
paddingBottom: 0,
|
||||
paddingTop: 0,
|
||||
}}
|
||||
pages={[
|
||||
{
|
||||
backgroundColor: "#f9f8f7",
|
||||
image: (
|
||||
<Image
|
||||
source={require("../../../assets/images/splash-clock.png")}
|
||||
height={10}
|
||||
width={10}
|
||||
/>
|
||||
),
|
||||
title: <Text text30>Welcome to Cally</Text>,
|
||||
subtitle: (
|
||||
<View paddingB-250 marginH-20 spread>
|
||||
<Text text50R>Lightening Mental Loads, One Family at a Time</Text>
|
||||
<Button
|
||||
label="Continue"
|
||||
style={{backgroundColor: "#fd1775"}}
|
||||
onPress={() => onboardingRef?.current?.goToPage(1, true)}
|
||||
/>
|
||||
</View>
|
||||
),
|
||||
},
|
||||
{
|
||||
backgroundColor: "#f9f8f7",
|
||||
title: <Text>Get started with Cally</Text>,
|
||||
image: (
|
||||
<Image
|
||||
source={require("../../../assets/images/splash-clock.png")}
|
||||
height={10}
|
||||
width={10}
|
||||
/>
|
||||
),
|
||||
subtitle: (
|
||||
<View
|
||||
style={{
|
||||
marginBottom: "auto",
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<View marginH-30>
|
||||
{/*<TextField style={styles.textfield} placeholder="First name" />*/}
|
||||
{/*<TextField style={styles.textfield} placeholder="Last name" />*/}
|
||||
<TextField style={styles.textfield} placeholder="Email"/>
|
||||
<TextField style={styles.textfield} placeholder="Password"/>
|
||||
<Button
|
||||
label="Login"
|
||||
backgroundColor="#ea156c"
|
||||
onPress={() => {
|
||||
console.log("Onboarding Done");
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default OnboardingFlow;
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
textfield: {
|
||||
backgroundColor: "white",
|
||||
marginVertical: 10,
|
||||
padding: 30,
|
||||
height: 45,
|
||||
borderRadius: 50,
|
||||
},
|
||||
textfield: {
|
||||
backgroundColor: "white",
|
||||
marginVertical: 10,
|
||||
padding: 30,
|
||||
height: 45,
|
||||
borderRadius: 50,
|
||||
},
|
||||
});
|
||||
|
||||
@ -2,7 +2,6 @@ import React, { useState } from "react";
|
||||
import { Dialog, Button, Text, View } from "react-native-ui-lib";
|
||||
import { StyleSheet } from "react-native";
|
||||
import { Feather } from "@expo/vector-icons";
|
||||
import {useDeleteUser} from "@/hooks/firebase/useDeleteUser";
|
||||
|
||||
interface ConfirmationDialogProps {
|
||||
visible: boolean;
|
||||
|
||||
@ -33,8 +33,6 @@ import KeyboardManager, {
|
||||
} from "react-native-keyboard-manager";
|
||||
import { ScrollView } from "react-native-gesture-handler";
|
||||
import { useUploadProfilePicture } from "@/hooks/useUploadProfilePicture";
|
||||
import { ImagePickerAsset } from "expo-image-picker";
|
||||
import MenuDotsIcon from "@/assets/svgs/MenuDotsIcon";
|
||||
import UserOptions from "./UserOptions";
|
||||
|
||||
type MyGroupProps = {
|
||||
|
||||
@ -9,7 +9,6 @@ import {
|
||||
import QRCode from "react-native-qrcode-svg";
|
||||
import { PanningDirectionsEnum } from "react-native-ui-lib/src/components/panningViews/panningProvider";
|
||||
import Ionicons from "@expo/vector-icons/Ionicons";
|
||||
import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
|
||||
import { UserProfile } from "@/hooks/firebase/types/profileTypes";
|
||||
import { StyleSheet } from "react-native";
|
||||
import { ProfileType } from "@/contexts/AuthContext";
|
||||
|
||||
@ -1,68 +1,66 @@
|
||||
import { Dimensions, StyleSheet } from "react-native";
|
||||
import React, { useState } from "react";
|
||||
import { Button, ButtonSize, Text, View } from "react-native-ui-lib";
|
||||
import { AntDesign } from "@expo/vector-icons";
|
||||
import LinearGradient from "react-native-linear-gradient";
|
||||
import {StyleSheet} from "react-native";
|
||||
import React, {useState} from "react";
|
||||
import {Button, ButtonSize, Text, View} from "react-native-ui-lib";
|
||||
import AddChoreDialog from "./AddChoreDialog";
|
||||
import PlusIcon from "@/assets/svgs/PlusIcon";
|
||||
|
||||
const AddChore = () => {
|
||||
const [isVisible, setIsVisible] = useState<boolean>(false);
|
||||
const [isVisible, setIsVisible] = useState<boolean>(false);
|
||||
|
||||
return (
|
||||
<View
|
||||
row
|
||||
spread
|
||||
paddingH-20
|
||||
style={{
|
||||
position: "absolute",
|
||||
bottom: 15,
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<View style={styles.buttonContainer}>
|
||||
<Button
|
||||
marginB-30
|
||||
size={ButtonSize.large}
|
||||
style={styles.button}
|
||||
onPress={() => setIsVisible(!isVisible)}
|
||||
return (
|
||||
<View
|
||||
row
|
||||
spread
|
||||
paddingH-20
|
||||
style={{
|
||||
position: "absolute",
|
||||
bottom: 15,
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<PlusIcon />
|
||||
<Text
|
||||
white
|
||||
style={{ fontFamily: "Manrope_600SemiBold", fontSize: 15 }}
|
||||
marginL-5
|
||||
>
|
||||
Create new to do
|
||||
</Text>
|
||||
</Button>
|
||||
</View>
|
||||
{isVisible && (
|
||||
<AddChoreDialog isVisible={isVisible} setIsVisible={setIsVisible} />
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
<View style={styles.buttonContainer}>
|
||||
<Button
|
||||
marginB-30
|
||||
size={ButtonSize.large}
|
||||
style={styles.button}
|
||||
onPress={() => setIsVisible(!isVisible)}
|
||||
>
|
||||
<PlusIcon/>
|
||||
<Text
|
||||
white
|
||||
style={{fontFamily: "Manrope_600SemiBold", fontSize: 15}}
|
||||
marginL-5
|
||||
>
|
||||
Create new to do
|
||||
</Text>
|
||||
</Button>
|
||||
</View>
|
||||
{isVisible && (
|
||||
<AddChoreDialog isVisible={isVisible} setIsVisible={setIsVisible}/>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddChore;
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
gradient: {
|
||||
height: 150,
|
||||
position: "absolute",
|
||||
bottom: 0,
|
||||
width: "100%",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
buttonContainer: {
|
||||
width: "100%",
|
||||
alignItems: "center",
|
||||
},
|
||||
button: {
|
||||
backgroundColor: "rgb(253, 23, 117)",
|
||||
height: 53.26,
|
||||
borderRadius: 30,
|
||||
width: 335,
|
||||
},
|
||||
gradient: {
|
||||
height: 150,
|
||||
position: "absolute",
|
||||
bottom: 0,
|
||||
width: "100%",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
buttonContainer: {
|
||||
width: "100%",
|
||||
alignItems: "center",
|
||||
},
|
||||
button: {
|
||||
backgroundColor: "rgb(253, 23, 117)",
|
||||
height: 53.26,
|
||||
borderRadius: 30,
|
||||
width: 335,
|
||||
},
|
||||
});
|
||||
|
||||
@ -1,44 +1,43 @@
|
||||
import { View, Text, Button } from "react-native-ui-lib";
|
||||
import {Text, View} from "react-native-ui-lib";
|
||||
import React from "react";
|
||||
import { Fontisto } from "@expo/vector-icons";
|
||||
import { ProgressBar } from "react-native-ui-lib/src/components/progressBar";
|
||||
import { useToDosContext } from "@/contexts/ToDosContext";
|
||||
import {ProgressBar} from "react-native-ui-lib/src/components/progressBar";
|
||||
import {useToDosContext} from "@/contexts/ToDosContext";
|
||||
import FireworksOrangeIcon from "@/assets/svgs/FireworksOrangeIcon";
|
||||
|
||||
const ProgressCard = ({children}: {children?: React.ReactNode}) => {
|
||||
const { maxPoints } = useToDosContext();
|
||||
return (
|
||||
<View
|
||||
backgroundColor="white"
|
||||
marginB-5
|
||||
padding-15
|
||||
style={{ borderRadius: 22 }}
|
||||
>
|
||||
<View row centerV>
|
||||
<FireworksOrangeIcon />
|
||||
<Text marginL-15 text70 style={{fontFamily: 'Manrope_600SemiBold', fontSize: 14}}>
|
||||
You have earned XX points this week!{" "}
|
||||
</Text>
|
||||
</View>
|
||||
<ProgressBar
|
||||
progress={50}
|
||||
progressColor="#ea156c"
|
||||
style={{
|
||||
height: 21,
|
||||
backgroundColor: "#fcf2f6",
|
||||
marginTop: 15,
|
||||
marginBottom: 5,
|
||||
}}
|
||||
/>
|
||||
<View row spread>
|
||||
<Text style={{fontSize: 13, color: '#858585'}}>0</Text>
|
||||
<Text style={{fontSize: 13, color: '#858585'}}>{maxPoints}</Text>
|
||||
</View>
|
||||
<View centerV centerH>
|
||||
{children}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
const ProgressCard = ({children}: { children?: React.ReactNode }) => {
|
||||
const {maxPoints} = useToDosContext();
|
||||
return (
|
||||
<View
|
||||
backgroundColor="white"
|
||||
marginB-5
|
||||
padding-15
|
||||
style={{borderRadius: 22}}
|
||||
>
|
||||
<View row centerV>
|
||||
<FireworksOrangeIcon/>
|
||||
<Text marginL-15 text70 style={{fontFamily: 'Manrope_600SemiBold', fontSize: 14}}>
|
||||
You have earned XX points this week!{" "}
|
||||
</Text>
|
||||
</View>
|
||||
<ProgressBar
|
||||
progress={50}
|
||||
progressColor="#ea156c"
|
||||
style={{
|
||||
height: 21,
|
||||
backgroundColor: "#fcf2f6",
|
||||
marginTop: 15,
|
||||
marginBottom: 5,
|
||||
}}
|
||||
/>
|
||||
<View row spread>
|
||||
<Text style={{fontSize: 13, color: '#858585'}}>0</Text>
|
||||
<Text style={{fontSize: 13, color: '#858585'}}>{maxPoints}</Text>
|
||||
</View>
|
||||
<View centerV centerH>
|
||||
{children}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProgressCard;
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import React from "react";
|
||||
import { View } from "react-native";
|
||||
import { BarChart } from "react-native-gifted-charts";
|
||||
|
||||
const FamilyChart = () => {
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import React from "react";
|
||||
import { View } from "react-native";
|
||||
import { BarChart } from "react-native-gifted-charts";
|
||||
|
||||
const UserChart = () => {
|
||||
|
||||
@ -1,191 +1,181 @@
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
ProgressBar,
|
||||
Button,
|
||||
ButtonSize,
|
||||
Modal,
|
||||
Dialog,
|
||||
TouchableOpacity,
|
||||
} from "react-native-ui-lib";
|
||||
import React, { useState } from "react";
|
||||
import { StyleSheet } from "react-native";
|
||||
import {Button, ButtonSize, Dialog, ProgressBar, Text, TouchableOpacity, View,} from "react-native-ui-lib";
|
||||
import React, {useState} from "react";
|
||||
import {StyleSheet} from "react-native";
|
||||
import UserChart from "./UserChart";
|
||||
import ProgressCard from "../ProgressCard";
|
||||
import { AntDesign, Feather, Ionicons } from "@expo/vector-icons";
|
||||
import { ScrollView } from "react-native-gesture-handler";
|
||||
import { PanViewDirectionsEnum } from "react-native-ui-lib/src/incubator/panView";
|
||||
import {AntDesign, Ionicons} from "@expo/vector-icons";
|
||||
import {ScrollView} from "react-native-gesture-handler";
|
||||
import FireworksOrangeIcon from "@/assets/svgs/FireworksOrangeIcon";
|
||||
|
||||
const UserChoresProgress = ({
|
||||
setPageIndex,
|
||||
}: {
|
||||
setPageIndex: (value: number) => void;
|
||||
setPageIndex,
|
||||
}: {
|
||||
setPageIndex: (value: number) => void;
|
||||
}) => {
|
||||
const [modalVisible, setModalVisible] = useState<boolean>(false);
|
||||
return (
|
||||
<View marginT-20 paddingB-20>
|
||||
<ScrollView
|
||||
showsVerticalScrollIndicator={false}
|
||||
showsHorizontalScrollIndicator={false}
|
||||
>
|
||||
<TouchableOpacity onPress={() => setPageIndex(0)}>
|
||||
<View row marginT-4 marginB-10 centerV>
|
||||
<Ionicons
|
||||
name="chevron-back"
|
||||
size={14}
|
||||
color="#979797"
|
||||
style={{ paddingBottom: 3 }}
|
||||
/>
|
||||
<Text
|
||||
style={{ fontFamily: "Poppins_400Regular", fontSize: 14.71 }}
|
||||
color="#979797"
|
||||
>
|
||||
Return to To Do's
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
<View>
|
||||
<Text style={{ fontFamily: "Manrope_700Bold", fontSize: 20 }}>
|
||||
Your To Do's Progress Report
|
||||
</Text>
|
||||
</View>
|
||||
<View row spread marginT-25 marginB-5>
|
||||
<Text text70 style={{ fontFamily: "Manrope_600SemiBold" }}>
|
||||
Daily Goal
|
||||
</Text>
|
||||
</View>
|
||||
<ProgressCard />
|
||||
<View row spread marginT-15 marginB-8>
|
||||
<Text text70 style={{ fontFamily: "Manrope_600SemiBold" }}>
|
||||
Points Earned This Week
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.card} paddingL-10>
|
||||
<UserChart />
|
||||
</View>
|
||||
<View row spread marginT-20 marginB-8 centerV>
|
||||
<Text text70 style={{ fontFamily: "Manrope_600SemiBold" }}>
|
||||
Total Reward Points
|
||||
</Text>
|
||||
<Button
|
||||
size={ButtonSize.small}
|
||||
label="Spend my points"
|
||||
color="#50be0c"
|
||||
backgroundColor="#ebf2e4"
|
||||
onPress={() => setModalVisible(true)}
|
||||
labelStyle={{
|
||||
fontSize: 13,
|
||||
fontFamily: "Manrope_400Regular",
|
||||
}}
|
||||
iconSource={() => (
|
||||
<AntDesign
|
||||
name="gift"
|
||||
size={20}
|
||||
style={{ marginRight: 5 }}
|
||||
color="#50be0c"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</View>
|
||||
<View style={styles.card}>
|
||||
<View row centerV>
|
||||
<FireworksOrangeIcon color="#8005eb" />
|
||||
<Text
|
||||
marginL-8
|
||||
text70
|
||||
style={{ fontFamily: "Manrope_600SemiBold", fontSize: 14 }}
|
||||
const [modalVisible, setModalVisible] = useState<boolean>(false);
|
||||
return (
|
||||
<View marginT-20 paddingB-20>
|
||||
<ScrollView
|
||||
showsVerticalScrollIndicator={false}
|
||||
showsHorizontalScrollIndicator={false}
|
||||
>
|
||||
You have 1200 points saved!
|
||||
</Text>
|
||||
</View>
|
||||
<ProgressBar
|
||||
progress={80}
|
||||
progressColor="#ff9900"
|
||||
style={{
|
||||
height: 21,
|
||||
backgroundColor: "#faeedb",
|
||||
marginTop: 15,
|
||||
marginBottom: 5,
|
||||
}}
|
||||
/>
|
||||
<View row spread>
|
||||
<Text style={{ fontSize: 13, color: "#858585" }}>0</Text>
|
||||
<Text style={{ fontSize: 13, color: "#858585" }}>5000</Text>
|
||||
</View>
|
||||
<TouchableOpacity onPress={() => setPageIndex(0)}>
|
||||
<View row marginT-4 marginB-10 centerV>
|
||||
<Ionicons
|
||||
name="chevron-back"
|
||||
size={14}
|
||||
color="#979797"
|
||||
style={{paddingBottom: 3}}
|
||||
/>
|
||||
<Text
|
||||
style={{fontFamily: "Poppins_400Regular", fontSize: 14.71}}
|
||||
color="#979797"
|
||||
>
|
||||
Return to To Do's
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
<View>
|
||||
<Text style={{fontFamily: "Manrope_700Bold", fontSize: 20}}>
|
||||
Your To Do's Progress Report
|
||||
</Text>
|
||||
</View>
|
||||
<View row spread marginT-25 marginB-5>
|
||||
<Text text70 style={{fontFamily: "Manrope_600SemiBold"}}>
|
||||
Daily Goal
|
||||
</Text>
|
||||
</View>
|
||||
<ProgressCard/>
|
||||
<View row spread marginT-15 marginB-8>
|
||||
<Text text70 style={{fontFamily: "Manrope_600SemiBold"}}>
|
||||
Points Earned This Week
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.card} paddingL-10>
|
||||
<UserChart/>
|
||||
</View>
|
||||
<View row spread marginT-20 marginB-8 centerV>
|
||||
<Text text70 style={{fontFamily: "Manrope_600SemiBold"}}>
|
||||
Total Reward Points
|
||||
</Text>
|
||||
<Button
|
||||
size={ButtonSize.small}
|
||||
label="Spend my points"
|
||||
color="#50be0c"
|
||||
backgroundColor="#ebf2e4"
|
||||
onPress={() => setModalVisible(true)}
|
||||
labelStyle={{
|
||||
fontSize: 13,
|
||||
fontFamily: "Manrope_400Regular",
|
||||
}}
|
||||
iconSource={() => (
|
||||
<AntDesign
|
||||
name="gift"
|
||||
size={20}
|
||||
style={{marginRight: 5}}
|
||||
color="#50be0c"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</View>
|
||||
<View style={styles.card}>
|
||||
<View row centerV>
|
||||
<FireworksOrangeIcon color="#8005eb"/>
|
||||
<Text
|
||||
marginL-8
|
||||
text70
|
||||
style={{fontFamily: "Manrope_600SemiBold", fontSize: 14}}
|
||||
>
|
||||
You have 1200 points saved!
|
||||
</Text>
|
||||
</View>
|
||||
<ProgressBar
|
||||
progress={80}
|
||||
progressColor="#ff9900"
|
||||
style={{
|
||||
height: 21,
|
||||
backgroundColor: "#faeedb",
|
||||
marginTop: 15,
|
||||
marginBottom: 5,
|
||||
}}
|
||||
/>
|
||||
<View row spread>
|
||||
<Text style={{fontSize: 13, color: "#858585"}}>0</Text>
|
||||
<Text style={{fontSize: 13, color: "#858585"}}>5000</Text>
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
<Dialog
|
||||
visible={modalVisible}
|
||||
onDismiss={() => setModalVisible(false)}
|
||||
children={
|
||||
<View style={styles.card} paddingH-35 paddingT-35>
|
||||
<Text text60 center marginB-35 style={{fontFamily: 'Manrope_600SemiBold'}}>
|
||||
How would you like to spend your points?
|
||||
</Text>
|
||||
<Button
|
||||
label="Skip a Chore Cor a Day - 150 pts"
|
||||
text70
|
||||
marginB-15
|
||||
backgroundColor="#05a8b6"
|
||||
size={ButtonSize.large}
|
||||
labelStyle={styles.bigButtonText}
|
||||
/>
|
||||
<Button
|
||||
label="Extra Screen Time - 100 pts"
|
||||
text70
|
||||
marginB-15
|
||||
backgroundColor="#ea156c"
|
||||
size={ButtonSize.large}
|
||||
labelStyle={styles.bigButtonText}
|
||||
/>
|
||||
<Button
|
||||
label="Movie Night - 50 pts"
|
||||
text70
|
||||
marginB-15
|
||||
backgroundColor="#7305d4"
|
||||
size={ButtonSize.large}
|
||||
labelStyle={styles.bigButtonText}
|
||||
/>
|
||||
<Button
|
||||
label="Ice Cream Treat - 25 pts"
|
||||
text70
|
||||
marginB-15
|
||||
backgroundColor="#e28800"
|
||||
size={ButtonSize.large}
|
||||
labelStyle={styles.bigButtonText}
|
||||
/>
|
||||
<TouchableOpacity onPress={() => setModalVisible(false)}>
|
||||
<Text text70 marginT-20 center color="#999999" style={{fontFamily: 'Manrope_500Medium'}}>
|
||||
Go back to my to dos
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
}
|
||||
/>
|
||||
</View>
|
||||
</ScrollView>
|
||||
<Dialog
|
||||
visible={modalVisible}
|
||||
onDismiss={() => setModalVisible(false)}
|
||||
children={
|
||||
<View style={styles.card} paddingH-35 paddingT-35>
|
||||
<Text text60 center marginB-35 style={{fontFamily: 'Manrope_600SemiBold'}}>
|
||||
How would you like to spend your points?
|
||||
</Text>
|
||||
<Button
|
||||
label="Skip a Chore Cor a Day - 150 pts"
|
||||
text70
|
||||
marginB-15
|
||||
backgroundColor="#05a8b6"
|
||||
size={ButtonSize.large}
|
||||
labelStyle={styles.bigButtonText}
|
||||
/>
|
||||
<Button
|
||||
label="Extra Screen Time - 100 pts"
|
||||
text70
|
||||
marginB-15
|
||||
backgroundColor="#ea156c"
|
||||
size={ButtonSize.large}
|
||||
labelStyle={styles.bigButtonText}
|
||||
/>
|
||||
<Button
|
||||
label="Movie Night - 50 pts"
|
||||
text70
|
||||
marginB-15
|
||||
backgroundColor="#7305d4"
|
||||
size={ButtonSize.large}
|
||||
labelStyle={styles.bigButtonText}
|
||||
/>
|
||||
<Button
|
||||
label="Ice Cream Treat - 25 pts"
|
||||
text70
|
||||
marginB-15
|
||||
backgroundColor="#e28800"
|
||||
size={ButtonSize.large}
|
||||
labelStyle={styles.bigButtonText}
|
||||
/>
|
||||
<TouchableOpacity onPress={() => setModalVisible(false)}>
|
||||
<Text text70 marginT-20 center color="#999999" style={{fontFamily: 'Manrope_500Medium'}} >
|
||||
Go back to my to dos
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
);
|
||||
};
|
||||
const styles = StyleSheet.create({
|
||||
pfpSmall: {
|
||||
width: 30,
|
||||
aspectRatio: 1,
|
||||
borderRadius: 50,
|
||||
marginHorizontal: 2,
|
||||
},
|
||||
pfpBig: {
|
||||
width: 50,
|
||||
aspectRatio: 1,
|
||||
borderRadius: 50,
|
||||
},
|
||||
card: {
|
||||
backgroundColor: "white",
|
||||
borderRadius: 20,
|
||||
padding: 20,
|
||||
},
|
||||
bigButtonText:{
|
||||
fontFamily: 'Manrope_400Regular'
|
||||
}
|
||||
pfpSmall: {
|
||||
width: 30,
|
||||
aspectRatio: 1,
|
||||
borderRadius: 50,
|
||||
marginHorizontal: 2,
|
||||
},
|
||||
pfpBig: {
|
||||
width: 50,
|
||||
aspectRatio: 1,
|
||||
borderRadius: 50,
|
||||
},
|
||||
card: {
|
||||
backgroundColor: "white",
|
||||
borderRadius: 20,
|
||||
padding: 20,
|
||||
},
|
||||
bigButtonText: {
|
||||
fontFamily: 'Manrope_400Regular'
|
||||
}
|
||||
});
|
||||
|
||||
export default UserChoresProgress;
|
||||
|
||||
Reference in New Issue
Block a user