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

added confirmation dialogs, fixed scroll wheels ui tweaks

Browse Source
This commit is contained in:
ivic00
2024-10-30 00:02:25 +01:00
parent 74d82e2029
commit 7f79a1c819
14 changed files with 1077 additions and 654 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -26,6 +26,7 @@ import NavSettingsIcon from "@/assets/svgs/NavSettingsIcon";
import { useAtom } from "jotai";
import {
settingsPageIndex,
toDosPageIndex,
userSettingsView,
} from "@/components/pages/calendar/atoms";
@ -33,6 +34,7 @@ export default function TabLayout() {
const { mutateAsync: signOut } = useSignOut();
const [pageIndex, setPageIndex] = useAtom(settingsPageIndex);
const [userView, setUserView] = useAtom(userSettingsView);
const [toDosIndex, setToDosIndex] = useAtom(toDosPageIndex);
return (
<Drawer
@ -76,6 +78,7 @@ export default function TabLayout() {
pressFunc={() => {
props.navigation.navigate("calendar");
setPageIndex(0);
setToDosIndex(0);
setUserView(true);
}}
icon={<NavCalendarIcon />}
@ -87,6 +90,7 @@ export default function TabLayout() {
pressFunc={() => {
props.navigation.navigate("grocery");
setPageIndex(0);
setToDosIndex(0);
setUserView(true);
}}
icon={<NavGroceryIcon />}
@ -113,6 +117,7 @@ export default function TabLayout() {
pressFunc={() => {
props.navigation.navigate("todos");
setPageIndex(0);
setToDosIndex(0);
setUserView(true);
}}
icon={<NavToDosIcon />}
@ -124,6 +129,7 @@ export default function TabLayout() {
pressFunc={() => {
props.navigation.navigate("brain_dump");
setPageIndex(0);
setToDosIndex(0);
setUserView(true);
}}
icon={<NavBrainDumpIcon />}
@ -135,6 +141,7 @@ export default function TabLayout() {
onPress={() => {
props.navigation.navigate("settings");
setPageIndex(0);
setToDosIndex(0);
setUserView(true);
}}
label={"Manage Settings"}

4
assets/svgs/OutlookIcon.tsx
View File

@ -3,8 +3,8 @@ import Svg, { Path, LinearGradient, Stop, SvgProps } from "react-native-svg";
const OutlookIcon: React.FC<SvgProps> = (props) => (
<Svg
width={34}
height={34}
width={props.width || 34}
height={props.height || 34}
viewBox="0 0 48 48"
{...props}
>

82
components/pages/brain_dump/BrainDumpDialog.tsx Normal file
View File

@ -0,0 +1,82 @@
import React from "react";
import { Dialog, Button, Text, View } from "react-native-ui-lib";
import { StyleSheet } from "react-native";
interface BrainDumpDialogProps {
visible: boolean;
title: string;
onDismiss: () => void;
onConfirm: () => void;
}
const BrainDumpDialog: React.FC<BrainDumpDialogProps> = ({
visible,
title,
onDismiss,
onConfirm,
}) => {
return (
<Dialog
visible={visible}
onDismiss={onDismiss}
containerStyle={styles.dialog}
>
<Text center style={styles.title}>
Delete Note
</Text>
<View center>
<Text style={styles.text} center>
Are you sure you want to delete the {"\n"}
<Text style={{ fontSize: 16, fontFamily: "PlusJakartaSans_700Bold" }}>
{title}
</Text>{" "}
Note?
</Text>
</View>
<View row right gap-8>
<Button
label="Cancel"
onPress={onDismiss}
style={styles.cancelBtn}
color="#999999"
labelStyle={{ fontFamily: "Poppins_500Medium", fontSize: 13.53 }}
/>
<Button
label="Yes"
onPress={onConfirm}
style={styles.confirmBtn}
labelStyle={{ fontFamily: "PlusJakartaSans_500Medium" }}
/>
</View>
</Dialog>
);
};
// Empty stylesheet for future styles
const styles = StyleSheet.create({
confirmBtn: {
backgroundColor: "#ea156d",
},
cancelBtn: {
backgroundColor: "white",
},
dialog: {
backgroundColor: "white",
paddingHorizontal: 25,
paddingTop: 35,
paddingBottom: 17,
borderRadius: 20,
},
title: {
fontFamily: "Manrope_600SemiBold",
fontSize: 22,
marginBottom: 20,
},
text: {
fontFamily: "PlusJakartaSans_400Regular",
fontSize: 16,
marginBottom: 25,
},
});
export default BrainDumpDialog;

21
components/pages/brain_dump/MoveBrainDump.tsx
View File

@ -18,6 +18,7 @@ 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 BrainDumpDialog from "./BrainDumpDialog";
const MoveBrainDump = (props: {
item: IBrainDump;
@ -28,12 +29,26 @@ const MoveBrainDump = (props: {
const [description, setDescription] = useState<string>(
props.item.description
);
const [modalVisible, setModalVisible] = useState<boolean>(false);
const { width } = Dimensions.get("screen");
useEffect(() => {
updateBrainDumpItem(props.item.id, { description: description });
}, [description]);
const showConfirmationDialog = () => {
setModalVisible(true);
};
const handleDeleteNote = () =>{
deleteBrainDump(props.item.id);
}
const hideConfirmationDialog = () => {
setModalVisible(false);
}
return (
<Dialog
bottom={true}
@ -81,8 +96,7 @@ const MoveBrainDump = (props: {
marginL-5
iconSource={() => <BinIcon />}
onPress={() => {
deleteBrainDump(props.item.id);
props.setIsVisible(false);
showConfirmationDialog();
}}
/>
</View>
@ -145,6 +159,7 @@ const MoveBrainDump = (props: {
</View>
</TouchableOpacity>
</View>
<BrainDumpDialog visible={modalVisible} title={props.item.title} onDismiss={hideConfirmationDialog} onConfirm={handleDeleteNote} />
</Dialog>
);
};
@ -194,7 +209,7 @@ const styles = StyleSheet.create({
description: {
fontFamily: "Manrope_400Regular",
fontSize: 14,
}
},
});
export default MoveBrainDump;

81
components/pages/calendar/DeleteEventDialog.tsx Normal file
View File

@ -0,0 +1,81 @@
import React from "react";
import { Dialog, Button, Text, View } from "react-native-ui-lib";
import { StyleSheet } from "react-native";
interface DeleteEventDialogProps {
visible: boolean;
title: string;
onDismiss: () => void;
onConfirm: () => void;
}
const DeleteEventDialog: React.FC<DeleteEventDialogProps> = ({
visible,
title,
onDismiss,
onConfirm,
}) => {
return (
<Dialog
visible={visible}
onDismiss={onDismiss}
containerStyle={styles.dialog}
>
<Text center style={styles.title}>
Delete Event
</Text>
<View center>
<Text style={styles.text} center>
Are you sure you want to delete the event:{" "}
<Text style={{ fontSize: 16, fontFamily: "PlusJakartaSans_700Bold" }}>
{title}
</Text>{" "}
</Text>
</View>
<View row right gap-8>
<Button
label="Cancel"
onPress={onDismiss}
style={styles.cancelBtn}
color="#999999"
labelStyle={{ fontFamily: "Poppins_500Medium", fontSize: 13.53 }}
/>
<Button
label="Yes"
onPress={onConfirm}
style={styles.confirmBtn}
labelStyle={{ fontFamily: "PlusJakartaSans_500Medium" }}
/>
</View>
</Dialog>
);
};
// Empty stylesheet for future styles
const styles = StyleSheet.create({
confirmBtn: {
backgroundColor: "#ea156d",
},
cancelBtn: {
backgroundColor: "white",
},
dialog: {
backgroundColor: "white",
paddingHorizontal: 25,
paddingTop: 35,
paddingBottom: 17,
borderRadius: 20,
},
title: {
fontFamily: "Manrope_600SemiBold",
fontSize: 22,
marginBottom: 20,
},
text: {
fontFamily: "PlusJakartaSans_400Regular",
fontSize: 16,
marginBottom: 25,
},
});
export default DeleteEventDialog;

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

@ -207,7 +207,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
scrollOffsetMinutes={offsetMinutes}
theme={{
palette: {
nowIndicator: "#fd1575",
nowIndicator: profileData?.eventColor || "#fd1575",
gray: {
"100": "#e8eaed",
"200": "#e8eaed",
@ -223,13 +223,15 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
fontSize: 16,
},
moreLabel: {},
xs:{fontSize: 10}
xs: { fontSize: 10 },
},
}}
dayHeaderStyle={dateStyle}
dayHeaderHighlightColor={"white"}
renderCustomDateForMonth={renderCustomDateForMonth}
showAdjacentMonths
hourStyle={styles.hourStyle}
ampm
/>
);
}
@ -273,4 +275,9 @@ const styles = StyleSheet.create({
alignItems: "center",
justifyContent: "center",
},
hourStyle: {
color: "#5f6368",
fontSize: 12,
fontFamily: "Manrope_500Medium",
},
});

144
components/pages/calendar/ManuallyAddEventModal.tsx
View File

@ -17,7 +17,7 @@ import {
import { ScrollView } from "react-native-gesture-handler";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { useEffect, useRef, useState } from "react";
import {AntDesign, Feather, Ionicons,} from "@expo/vector-icons";
import { AntDesign, Feather, Ionicons } from "@expo/vector-icons";
import { PickerMultiValue } from "react-native-ui-lib/src/components/picker/types";
import { useCreateEvent } from "@/hooks/firebase/useCreateEvent";
import { EventData } from "@/hooks/firebase/types/eventData";
@ -30,8 +30,15 @@ import MenuIcon from "@/assets/svgs/MenuIcon";
import CameraIcon from "@/assets/svgs/CameraIcon";
import AssigneesDisplay from "@/components/shared/AssigneesDisplay";
import { useAtom } from "jotai";
import {eventForEditAtom, selectedNewEventDateAtom} from "@/components/pages/calendar/atoms";
import {
eventForEditAtom,
selectedNewEventDateAtom,
} from "@/components/pages/calendar/atoms";
import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
import BinIcon from "@/assets/svgs/BinIcon";
import CloseXIcon from "@/assets/svgs/CloseXIcon";
import PenIcon from "@/assets/svgs/PenIcon";
import DeleteEventDialog from "./DeleteEventDialog";
const daysOfWeek = [
{ label: "Monday", value: "monday" },
@ -46,24 +53,39 @@ const daysOfWeek = [
export const ManuallyAddEventModal = () => {
const insets = useSafeAreaInsets();
const [selectedNewEventDate, setSelectedNewEndDate] = useAtom(selectedNewEventDateAtom)
const [editEvent, setEditEvent] = useAtom(eventForEditAtom)
const [selectedNewEventDate, setSelectedNewEndDate] = useAtom(
selectedNewEventDateAtom
);
const [editEvent, setEditEvent] = useAtom(eventForEditAtom);
const [deleteModalVisible, setDeleteModalVisible] = useState<boolean>(false);
const showDeleteEventModal = () => {
setDeleteModalVisible(true);
};
const handleDeleteEvent = () => {};
const hideDeleteEventModal = () => {
setDeleteModalVisible(false);
};
const { show, close, initialDate } = {
show: !!selectedNewEventDate || !!editEvent,
close: () => {
setSelectedNewEndDate(undefined)
setEditEvent(undefined)
setSelectedNewEndDate(undefined);
setEditEvent(undefined);
},
initialDate: selectedNewEventDate || editEvent?.start
}
initialDate: selectedNewEventDate || editEvent?.start,
};
const detailsRef = useRef<TextFieldRef>(null)
const detailsRef = useRef<TextFieldRef>(null);
const [title, setTitle] = useState<string>(editEvent?.title || "");
const [details, setDetails] = useState<string>(editEvent?.notes || "");
const [isAllDay, setIsAllDay] = useState(editEvent?.allDay || false);
const [isPrivate, setIsPrivate] = useState<boolean>(editEvent?.private || false);
const [isPrivate, setIsPrivate] = useState<boolean>(
editEvent?.private || false
);
const [startTime, setStartTime] = useState(() => {
const date = initialDate ?? new Date();
date.setSeconds(0, 0);
@ -75,15 +97,20 @@ export const ManuallyAddEventModal = () => {
date.setSeconds(0, 0);
return date;
}
const date = (editEvent?.end ?? initialDate)
? addHours((editEvent?.end ?? initialDate!), 1)
const date =
editEvent?.end ?? initialDate
? addHours(editEvent?.end ?? initialDate!, 1)
: addHours(new Date(), 1);
date.setSeconds(0, 0);
return date;
});
const [startDate, setStartDate] = useState(initialDate ?? new Date());
const [endDate, setEndDate] = useState(editEvent?.end ?? initialDate ?? new Date());
const [selectedAttendees, setSelectedAttendees] = useState<string[]>(editEvent?.participants ?? []);
const [endDate, setEndDate] = useState(
editEvent?.end ?? initialDate ?? new Date()
);
const [selectedAttendees, setSelectedAttendees] = useState<string[]>(
editEvent?.participants ?? []
);
const [repeatInterval, setRepeatInterval] = useState<PickerMultiValue>([]);
const { mutateAsync: createEvent, isLoading, isError } = useCreateEvent();
@ -105,8 +132,9 @@ export const ManuallyAddEventModal = () => {
date.setSeconds(0, 0);
return date;
}
const date = (editEvent?.end ?? initialDate)
? addHours((editEvent?.end ?? initialDate!), 1)
const date =
editEvent?.end ?? initialDate
? addHours(editEvent?.end ?? initialDate!, 1)
: addHours(new Date(), 1);
date.setSeconds(0, 0);
return date;
@ -155,13 +183,13 @@ export const ManuallyAddEventModal = () => {
endDate: finalEndDate,
allDay: isAllDay,
attendees: selectedAttendees,
notes: details
notes: details,
};
if (editEvent?.id) eventData.id = editEvent?.id
if (editEvent?.id) eventData.id = editEvent?.id;
await createEvent(eventData);
setEditEvent(undefined)
setEditEvent(undefined);
close();
};
@ -228,6 +256,39 @@ export const ManuallyAddEventModal = () => {
paddingRight: insets.right, // Safe area inset for right
}}
>
{editEvent ? (
<>
<View center paddingT-8>
<TouchableOpacity onPress={close}>
<DropModalIcon />
</TouchableOpacity>
</View>
<View row spread paddingH-10 paddingB-15>
<Button
color="#05a8b6"
style={styles.topBtn}
iconSource={() => <CloseXIcon />}
onPress={close}
/>
<View row>
<Button
style={styles.topBtn}
marginR-10
iconSource={() => <PenIcon />}
onPress={handleSave}
/>
<Button
style={styles.topBtn}
marginL-5
iconSource={() => <BinIcon />}
onPress={() => {
showDeleteEventModal();
}}
/>
</View>
</View>
</>
) : (
<View
style={{
flexDirection: "row",
@ -261,6 +322,7 @@ export const ManuallyAddEventModal = () => {
</Text>
</TouchableOpacity>
</View>
)}
<ScrollView style={{ minHeight: "85%" }}>
<TextField
placeholder="Add event title"
@ -308,7 +370,7 @@ export const ManuallyAddEventModal = () => {
onChange={(date) => {
setStartDate(date);
}}
maximumDate={endDate}
//maximumDate={endDate}
style={{
fontFamily: "PlusJakartaSans_500Medium",
fontSize: 16,
@ -320,7 +382,7 @@ export const ManuallyAddEventModal = () => {
value={startTime}
onChange={(time) => {
if (time <= endTime) {
setStartTime(time)
setStartTime(time);
} else {
const currentTime = new Date();
currentTime.setSeconds(0, 0);
@ -404,10 +466,12 @@ export const ManuallyAddEventModal = () => {
<View flex-1 />
<Picker
value={selectedAttendees}
onChange={(value) => setSelectedAttendees(value as string[] ?? [])}
onChange={(value) =>
setSelectedAttendees((value as string[]) ?? [])
}
style={{ marginLeft: "auto" }}
mode={PickerModes.MULTI}
renderInput={() =>
renderInput={() => (
<Button
size={ButtonSize.small}
paddingH-8
@ -423,9 +487,13 @@ export const ManuallyAddEventModal = () => {
}}
color="#ea156c"
label="Add"
labelStyle={{fontFamily: "Manrope_600SemiBold", fontSize: 14}}
labelStyle={{
fontFamily: "Manrope_600SemiBold",
fontSize: 14,
}}
/>
}>
)}
>
{members?.map((member) => (
<Picker.Item
key={member?.uid}
@ -437,8 +505,10 @@ export const ManuallyAddEventModal = () => {
</View>
<View marginL-35>
<AssigneesDisplay setSelectedAttendees={setSelectedAttendees}
selectedAttendees={selectedAttendees}/>
<AssigneesDisplay
setSelectedAttendees={setSelectedAttendees}
selectedAttendees={selectedAttendees}
/>
</View>
<View style={styles.divider} />
@ -516,8 +586,16 @@ export const ManuallyAddEventModal = () => {
</View>
</TouchableOpacity>
<TextField value={details} onChangeText={setDetails} ref={detailsRef} maxLength={2000} multiline
numberOfLines={10} marginT-10 style={{flex: 1, minHeight: 180}}/>
<TextField
value={details}
onChangeText={setDetails}
ref={detailsRef}
maxLength={2000}
multiline
numberOfLines={10}
marginT-10
style={{ flex: 1, minHeight: 180 }}
/>
</View>
</ScrollView>
<Button
@ -536,6 +614,14 @@ export const ManuallyAddEventModal = () => {
)}
/>
</View>
{editEvent && (
<DeleteEventDialog
visible={deleteModalVisible}
title={editEvent?.title}
onDismiss={hideDeleteEventModal}
onConfirm={handleDeleteEvent}
/>
)}
</Modal>
);
};

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

@ -9,3 +9,4 @@ 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);
export const toDosPageIndex = atom<number>(0);

2
components/pages/grocery/AddGroceryItem.tsx
View File

@ -14,7 +14,7 @@ const AddGroceryItem = () => {
paddingH-25
style={{
position: "absolute",
bottom: 20,
bottom: 65,
width: "100%",
height: 60,
}}

16
components/pages/grocery/GroceryWrapper.tsx
View File

@ -1,4 +1,4 @@
import {ScrollView} from "react-native";
import { Dimensions, ScrollView } from "react-native";
import { View } from "react-native-ui-lib";
import React, { useEffect, useRef } from "react";
import AddGroceryItem from "./AddGroceryItem";
@ -19,18 +19,22 @@ const GroceryWrapper = () => {
}, [isAddingGrocery]);
return (
<View height={"100%"} paddingT-15 paddingH-15>
<View height={"100%"}>
<View height={Dimensions.get("window").height}>
<View>
<ScrollView
ref={scrollViewRef}
automaticallyAdjustKeyboardInsets={true}
showsHorizontalScrollIndicator={false}
showsVerticalScrollIndicator={false}
>
<View marginB-70>
<View height={"100%"}>
<View marginB-115>
<GroceryList />
</View>
</ScrollView>
{!isAddingGrocery && <AddGroceryItem/>}
</View>
</ScrollView>
</View>
{!isAddingGrocery && <AddGroceryItem />}
</View>
);
};

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

@ -1,7 +1,7 @@
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 { ActivityIndicator, Alert, ScrollView, StyleSheet } from "react-native";
import { TouchableOpacity } from "react-native-gesture-handler";
import { useAuthContext } from "@/contexts/AuthContext";
import { useUpdateUserData } from "@/hooks/firebase/useUpdateUserData";
@ -21,6 +21,7 @@ import ExpoLocalization from "expo-localization/src/ExpoLocalization";
import { colorMap } from "@/constants/colorMap";
import { useAtom } from "jotai";
import { settingsPageIndex } from "../calendar/atoms";
import CalendarSettingsDialog from "./calendar_components/CalendarSettingsDialog";
const googleConfig = {
androidClientId:
@ -61,6 +62,29 @@ const CalendarSettingsPage = () => {
? "Mondays"
: "Sundays"
);
const [isModalVisible, setModalVisible] = useState<boolean>(false);
const [selectedService, setSelectedService] = useState<
"google" | "outlook" | "apple"
>("google");
const [selectedEmail, setSelectedEmail] = useState<string>("");
const showConfirmationDialog = (
serviceName: "google" | "outlook" | "apple",
email: string
) => {
setSelectedService(serviceName);
setSelectedEmail(email);
setModalVisible(true);
};
const handleConfirm = () => {
clearToken(selectedService, selectedEmail);
setModalVisible(false);
};
const handleCancel = () => {
setModalVisible(false);
};
const [selectedColor, setSelectedColor] = useState<string>(
profileData?.eventColor ?? colorMap.pink
@ -477,7 +501,9 @@ const CalendarSettingsPage = () => {
googleToken && (
<Button
key={googleMail}
onPress={() => clearToken("google", googleMail)}
onPress={() => {
showConfirmationDialog("google", googleMail);
}}
label={`Disconnect ${googleMail}`}
labelStyle={styles.addCalLbl}
labelProps={{
@ -520,7 +546,7 @@ const CalendarSettingsPage = () => {
appleToken && (
<Button
key={appleEmail}
onPress={() => clearToken("apple", appleEmail)}
onPress={() => showConfirmationDialog("apple", appleEmail)}
label={`Disconnect ${appleEmail}`}
labelStyle={styles.addCalLbl}
labelProps={{
@ -565,7 +591,9 @@ const CalendarSettingsPage = () => {
microsoftToken && (
<Button
key={microsoftEmail}
onPress={() => clearToken("outlook", microsoftEmail)}
onPress={() => {
showConfirmationDialog("outlook", microsoftEmail);
}}
label={`Disconnect ${microsoftEmail}`}
labelStyle={styles.addCalLbl}
labelProps={{
@ -754,6 +782,13 @@ const CalendarSettingsPage = () => {
</>
)}
</View>
<CalendarSettingsDialog
visible={isModalVisible}
serviceName={selectedService}
email={selectedEmail}
onDismiss={handleCancel}
onConfirm={handleConfirm}
/>
</ScrollView>
);
};

86
components/pages/settings/calendar_components/CalendarSettingsDialog.tsx Normal file
View File

@ -0,0 +1,86 @@
import React from "react";
import { Dialog, Button, Text, View } from "react-native-ui-lib";
import { StyleSheet } from "react-native";
interface ConfirmationDialogProps {
visible: boolean;
serviceName: "google" | "outlook" | "apple";
email: string;
onDismiss: () => void;
onConfirm: () => void;
}
const CalendarSettingsDialog: React.FC<ConfirmationDialogProps> = ({
visible,
serviceName,
email,
onDismiss,
onConfirm,
}) => {
return (
<Dialog
visible={visible}
onDismiss={onDismiss}
containerStyle={styles.dialog}
>
<Text center style={styles.title}>
Disconnect {serviceName}
</Text>
<View center>
<Text style={styles.text} center>
Are you sure you want to disconnect this {"\n"}
<Text style={{ fontSize: 16, fontFamily: "PlusJakartaSans_700Bold" }}>
{serviceName}
</Text>{" "}
calendar
{"\n"}
for {email}?
</Text>
</View>
<View row right gap-8>
<Button
label="Cancel"
onPress={onDismiss}
style={styles.cancelBtn}
color="#999999"
labelStyle={{ fontFamily: "Poppins_500Medium", fontSize: 13.53 }}
/>
<Button
label="Yes"
onPress={onConfirm}
style={styles.confirmBtn}
labelStyle={{ fontFamily: "PlusJakartaSans_500Medium" }}
/>
</View>
</Dialog>
);
};
// Empty stylesheet for future styles
const styles = StyleSheet.create({
confirmBtn: {
backgroundColor: "#ea156d",
},
cancelBtn: {
backgroundColor: "white",
},
dialog: {
backgroundColor: "white",
paddingHorizontal: 25,
paddingTop: 35,
paddingBottom: 17,
borderRadius: 20,
},
title: {
fontFamily: "Manrope_600SemiBold",
fontSize: 22,
marginBottom: 20,
},
text: {
fontFamily: "PlusJakartaSans_400Regular",
fontSize: 16,
marginBottom: 25,
},
});
export default CalendarSettingsDialog;

30
components/pages/todos/ToDoItem.tsx
View File

@ -12,7 +12,7 @@ import { useToDosContext } from "@/contexts/ToDosContext";
import { Ionicons } from "@expo/vector-icons";
import PointsSlider from "@/components/shared/PointsSlider";
import { IToDo } from "@/hooks/firebase/types/todoData";
import { ImageBackground } from "react-native";
import { ImageBackground, StyleSheet } from "react-native";
import AddChoreDialog from "@/components/pages/todos/AddChoreDialog";
import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
import RepeatIcon from "@/assets/svgs/RepeatIcon";
@ -48,7 +48,7 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
let isTodoEditable;
if (isParent) {
isTodoEditable = true
isTodoEditable = true;
} else {
isTodoEditable = props.item.creatorId === profileData?.uid;
}
@ -81,20 +81,16 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
fontSize: 15,
}}
onPress={() => {
isTodoEditable ? setVisible(true) : null
isTodoEditable ? setVisible(true) : null;
}}
>
{props.item.title}
</Text>
<Checkbox
value={props.item.done}
containerStyle={{
borderWidth: 0.7,
borderRadius: 50,
borderColor: "gray",
height: 24.64,
width: 24.64,
}}
containerStyle={[styles.checkbox, { borderRadius: 50 }]}
style={styles.checked}
borderRadius={50}
color="#fd1575"
onValueChange={(value) => {
updateToDo({ id: props.item.id, done: !props.item.done });
@ -258,3 +254,17 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
};
export default ToDoItem;
const styles = StyleSheet.create({
checkbox: {
borderRadius: 50,
borderWidth: 0.7,
color: "#bfbfbf",
borderColor: "#bfbfbf",
width: 24.64,
aspectRatio: 1,
},
checked: {
borderRadius: 50,
},
});

25
components/pages/todos/ToDosPage.tsx
View File

@ -9,10 +9,13 @@ import {TouchableOpacity} from "react-native-gesture-handler";
import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
import FamilyChoresProgress from "./family-chores/FamilyChoresProgress";
import UserChoresProgress from "./user-chores/UserChoresProgress";
import { useAtom } from "jotai";
import { toDosPageIndex } from "../calendar/atoms";
const ToDosPage = () => {
const [pageIndex, setPageIndex] = useState<number>(0);
const { profileData } = useAuthContext();
const [pageIndex, setPageIndex] = useAtom(toDosPageIndex);
const { width, height } = Dimensions.get("screen");
const pageLink = (
<TouchableOpacity onPress={() => setPageIndex(1)}>
@ -23,13 +26,18 @@ const ToDosPage = () => {
);
return (
<>
<View paddingH-25 backgroundColor="#f9f8f7" height={"100%"} width={width}>
{pageIndex == 0 && (
<View>
<ScrollView
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
>
<View
paddingH-25
backgroundColor="#f9f8f7"
height={"100%"}
width={width}
>
{pageIndex == 0 && (
<View>
<View>
<HeaderTemplate
message="Here are your To Do's"
@ -59,16 +67,17 @@ const ToDosPage = () => {
)}
<ToDosList />
</View>
</ScrollView>
</View>
)}
{pageIndex == 1 && <FamilyChoresProgress setPageIndex={setPageIndex}/>}
{pageIndex == 1 && (
<FamilyChoresProgress setPageIndex={setPageIndex} />
)}
{pageIndex == 2 && <UserChoresProgress setPageIndex={setPageIndex} />}
</View>
</ScrollView>
<AddChore />
</>
)
;
);
};
const styles = StyleSheet.create({