ammar/cally
1
0
Fork 0
mirror of https://github.com/urosran/cally.git synced 2025-07-15 17:47:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

add To Dos

Browse Source
This commit is contained in:
ivic00
2024-09-02 22:47:15 +02:00
parent ff9e94e392
commit 80a553695b
8 changed files with 210 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
app/(auth)/todos/index.tsx
View File

@ -1,7 +1,20 @@
import {View} from "react-native-ui-lib";
import ToDoItem from "@/components/pages/todos/ToDoItem";
import ToDosList from "@/components/pages/todos/ToDosList";
import HeaderTemplate from "@/components/shared/HeaderTemplate";
import { useAuthContext } from "@/contexts/AuthContext";
import { ToDosContextProvider, useToDosContext } from "@/contexts/ToDosContext";
import { ScrollView } from "react-native-gesture-handler";
import { View } from "react-native-ui-lib";
export default function Screen() {
return (
<View/>
)
return (
<ToDosContextProvider>
<ScrollView>
<View backgroundColor="white">
<HeaderTemplate message="Here are your To Do's" />
<ToDosList />
</View>
</ScrollView>
</ToDosContextProvider>
);
}

36
components/pages/todos/ToDoItem.tsx Normal file
View File

@ -0,0 +1,36 @@
import { View, Text, Checkbox } from "react-native-ui-lib";
import React from "react";
import { IToDo } from "@/contexts/ToDosContext";
import { Ionicons } from "@expo/vector-icons";
const ToDoItem = (props: { item: IToDo }) => {
return (
<View centerV backgroundColor="white" padding-15 paddingH-45>
<View centerV backgroundColor="white" row spread>
<Text text70>{props.item.title}</Text>
<Checkbox value={props.item.done} />
</View>
<View centerH paddingV-5>
<View centerV height={1} width={"100%"} backgroundColor="#e7e7e7" centerH />
</View>
<View centerH row spread>
{props.item.points && props.item.points > 0 ? (
<View centerV row>
<Ionicons name="gift-outline" size={20} color="#46a80a" />
<Text color="#46a80a">{props.item.points} points</Text>
</View>
) : (
<View />
)}
<View
height={25}
width={25}
backgroundColor="red"
style={{ borderRadius: 50 }}
/>
</View>
</View>
);
};
export default ToDoItem;

51
components/pages/todos/ToDosList.tsx Normal file
View File

@ -0,0 +1,51 @@
import { View, Text } from "react-native-ui-lib";
import React from "react";
import { IToDo, useToDosContext } from "@/contexts/ToDosContext";
import ToDoItem from "./ToDoItem";
import { format, isToday, isTomorrow } from "date-fns";
import { ScrollView } from "react-native-gesture-handler";
const groupToDosByDate = (toDos: IToDo[]) => {
return toDos.reduce((groups, toDo) => {
const dateKey = isToday(toDo.date)
? "Today • " + format(toDo.date, "EEE MMM dd")
: isTomorrow(toDo.date)
? "Tomorrow • " + format(toDo.date, "EEE MMM dd")
: format(toDo.date, "EEE MMM dd");
if (!groups[dateKey]) {
groups[dateKey] = [];
}
groups[dateKey].push(toDo);
return groups;
}, {} as { [key: string]: IToDo[] });
};
const ToDosList = () => {
const { toDos } = useToDosContext();
const groupedToDos = groupToDosByDate(toDos);
return (
<View>
{Object.keys(groupedToDos).map((dateKey) => (
<View key={dateKey}>
<Text text70 style={{ fontWeight: "bold", marginVertical: 8, paddingHorizontal: 20}}>
{dateKey}
</Text>
{groupedToDos[dateKey].map((item) => (
<ToDoItem key={item.id} item={item} />
))}
</View>
))}
</View>
);
};
export default ToDosList;
/*const groupToDosByDate = (toDos: IToDo[]) => {
return toDos.reduce((groups, toDo) => {
const dateKey
})
}*/

18
components/shared/HeaderTemplate.tsx Normal file
View File

@ -0,0 +1,18 @@
import { View, Text } from "react-native-ui-lib";
import React from "react";
import { useAuthContext } from "@/contexts/AuthContext";
const HeaderTemplate = (props: { message: string }) => {
const { user, profileData } = useAuthContext();
return (
<View row centerV padding-25>
<View backgroundColor="pink" height={65} width={65} style={{borderRadius: 22}} marginR-20 />
<View>
<Text text70L>Welcome, {user?.email}!</Text>
<Text text70BL>{props.message}</Text>
</View>
</View>
);
};
export default HeaderTemplate;

59
contexts/ToDosContext.tsx Normal file
View File

@ -0,0 +1,59 @@
import { createContext, FC, ReactNode, useContext, useState } from "react";
export interface IToDo {
id: number;
title: string;
done: boolean;
date: Date;
points?: number;
}
interface IToDosContext {
toDos: IToDo[];
updateToDo: (id: number, changes: Partial<IToDo>) => void;
}
const ToDosContext = createContext<IToDosContext>(undefined!);
export const ToDosContextProvider: FC<{ children: ReactNode }> = ({
children,
}) => {
const [toDos, setToDos] = useState<IToDo[]>([
{ id: 0, title: "Pay: Credit card", done: false, date: new Date() },
{ id: 1, title: "Monthly Log story", done: false, date: new Date() },
{ id: 2, title: "Write: Arcade Highlights", done: false, date: new Date() },
{
id: 3,
title: "Dressup: Cat",
done: false,
date: new Date(Date.now() + 86400000),
points: 40,
},
{
id: 4,
title: "Trim: Nails",
done: false,
date: new Date(Date.now() + 86400000),
},
{
id: 5,
title: "Monthly Log",
done: false,
date: new Date(Date.now() + 2 * 86400000),
},
{
id: 6,
title: "Do it",
done: false,
date: new Date(Date.now() + 3 * 86400000),
},
]);
const updateToDo = (id: number, changes: Partial<IToDo>) => {};
return (
<ToDosContext.Provider value={{ toDos, updateToDo }}>
{children}
</ToDosContext.Provider>
);
};
export const useToDosContext = () => useContext(ToDosContext)!;

33
package-lock.json generated
View File

@ -18,6 +18,7 @@
"@react-native-firebase/functions": "^20.4.0",
"@react-navigation/drawer": "^6.7.2",
"@react-navigation/native": "^6.0.2",
"date-fns": "^3.6.0",
"expo": "~51.0.24",
"expo-build-properties": "~0.12.4",
"expo-constants": "~16.0.2",
@ -10562,19 +10563,13 @@
}
},
"node_modules/date-fns": {
"version": "2.30.0",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
"integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
"integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.21.0"
},
"engines": {
"node": ">=0.11"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/date-fns"
"type": "github",
"url": "https://github.com/sponsors/kossnocorp"
}
},
"node_modules/dayjs": {
@ -19598,6 +19593,22 @@
"color-string": "^1.6.0"
}
},
"node_modules/react-native-ui-lib/node_modules/date-fns": {
"version": "2.30.0",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
"integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.21.0"
},
"engines": {
"node": ">=0.11"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/date-fns"
}
},
"node_modules/react-native-ui-lib/node_modules/semver": {
"version": "5.7.2",
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",

1
package.json
View File

@ -25,6 +25,7 @@
"@react-native-firebase/functions": "^20.4.0",
"@react-navigation/drawer": "^6.7.2",
"@react-navigation/native": "^6.0.2",
"date-fns": "^3.6.0",
"expo": "~51.0.24",
"expo-build-properties": "~0.12.4",
"expo-constants": "~16.0.2",

5
yarn.lock
View File

@ -4640,6 +4640,11 @@ date-fns@^2.29.3:
dependencies:
"@babel/runtime" "^7.21.0"
date-fns@^3.6.0:
version "3.6.0"
resolved "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz"
integrity sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==
dayjs@^1.11.10, dayjs@^1.8.15:
version "1.11.13"
resolved "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz"