From 33f5ebec62f813d789dfb9b0c264ce85da662456 Mon Sep 17 00:00:00 2001 From: Maxime Rumpler Date: Fri, 15 Mar 2024 14:19:58 +0100 Subject: [PATCH 1/2] feat: add the pages we will use for the application --- app/(pages)/_layout.tsx | 27 +++++++++++++++++++++++++++ app/(pages)/history.tsx | 28 ++++++++++++++++++++++++++++ app/(pages)/newHabit.tsx | 28 ++++++++++++++++++++++++++++ app/(pages)/settings.tsx | 28 ++++++++++++++++++++++++++++ 4 files changed, 111 insertions(+) create mode 100644 app/(pages)/history.tsx create mode 100644 app/(pages)/newHabit.tsx create mode 100644 app/(pages)/settings.tsx diff --git a/app/(pages)/_layout.tsx b/app/(pages)/_layout.tsx index 3d97db3..5e05a27 100644 --- a/app/(pages)/_layout.tsx +++ b/app/(pages)/_layout.tsx @@ -30,6 +30,33 @@ const TabLayout: React.FC = () => { }, }} /> + { + return + }, + }} + /> + { + return + }, + }} + /> + { + return + }, + }} + /> { + return ( + + + + ) +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: "center", + justifyContent: "center", + }, +}) + +export default History diff --git a/app/(pages)/newHabit.tsx b/app/(pages)/newHabit.tsx new file mode 100644 index 0000000..f8f137e --- /dev/null +++ b/app/(pages)/newHabit.tsx @@ -0,0 +1,28 @@ +import { StyleSheet } from "react-native" +import { Button } from "react-native-paper" +import { SafeAreaView } from "react-native-safe-area-context" + +const NewHabitPage: React.FC = () => { + return ( + + + + ) +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: "center", + justifyContent: "center", + }, +}) + +export default NewHabitPage diff --git a/app/(pages)/settings.tsx b/app/(pages)/settings.tsx new file mode 100644 index 0000000..553c375 --- /dev/null +++ b/app/(pages)/settings.tsx @@ -0,0 +1,28 @@ +import { StyleSheet } from "react-native" +import { Button } from "react-native-paper" +import { SafeAreaView } from "react-native-safe-area-context" + +const Settings: React.FC = () => { + return ( + + + + ) +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: "center", + justifyContent: "center", + }, +}) + +export default Settings From 7b8ca39eb214a3e8c28e60a87087a56738cdab4b Mon Sep 17 00:00:00 2001 From: Maxime Rumpler Date: Fri, 15 Mar 2024 15:30:19 +0100 Subject: [PATCH 2/2] feat: add a calendar on the history page --- app/(pages)/history.tsx | 29 +++++++++++++++++++++ package-lock.json | 56 +++++++++++++++++++++++++++++++++++++++++ package.json | 1 + 3 files changed, 86 insertions(+) diff --git a/app/(pages)/history.tsx b/app/(pages)/history.tsx index c7262b3..9af88b9 100644 --- a/app/(pages)/history.tsx +++ b/app/(pages)/history.tsx @@ -1,8 +1,12 @@ import { StyleSheet } from "react-native" import { Button } from "react-native-paper" +import { Calendar } from "react-native-calendars" import { SafeAreaView } from "react-native-safe-area-context" +import { useState } from "react" const History: React.FC = () => { + const [selected, setSelected] = useState("") + return ( + { + setSelected(day.dateString) + }} + markedDates={{ + "2023-03-01": { selected: true, marked: true, selectedColor: "blue" }, + "2023-03-02": { marked: true }, + "2023-03-03": { selected: true, marked: true, selectedColor: "blue" }, + [selected]: { + selected: true, + disableTouchEvent: true, + selectedColor: "orange", + }, + }} + theme={{ + backgroundColor: "#000000", + calendarBackground: "#000000", + textSectionTitleColor: "#b6c1cd", + selectedDayBackgroundColor: "#00adf5", + selectedDayTextColor: "#ffffff", + todayTextColor: "#00adf5", + dayTextColor: "#2d4150", + textDisabledColor: "#d9efff", + }} + /> ) } diff --git a/package-lock.json b/package-lock.json index 1aaf8a6..a1bc124 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,6 +23,7 @@ "react": "18.2.0", "react-dom": "18.2.0", "react-native": "0.73.4", + "react-native-calendars": "1.1304.1", "react-native-paper": "5.12.3", "react-native-safe-area-context": "4.8.2", "react-native-screens": "3.29.0", @@ -18148,6 +18149,15 @@ "mkdirp": "bin/cmd.js" } }, + "node_modules/moment": { + "version": "2.30.1", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz", + "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==", + "optional": true, + "engines": { + "node": "*" + } + }, "node_modules/mrmime": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.1.tgz", @@ -19553,6 +19563,23 @@ "react": "18.2.0" } }, + "node_modules/react-native-calendars": { + "version": "1.1304.1", + "resolved": "https://registry.npmjs.org/react-native-calendars/-/react-native-calendars-1.1304.1.tgz", + "integrity": "sha512-D1aU5lLhi7KCCCeHhKOkcC41K8s3paiiIfMaOQx6NezCbgKHelqT01WPpAZLh3Cm0QTC5EZo0oDPD0mCdKrDgQ==", + "dependencies": { + "hoist-non-react-statics": "^3.3.1", + "lodash": "^4.17.15", + "memoize-one": "^5.2.1", + "prop-types": "^15.5.10", + "react-native-swipe-gestures": "^1.0.5", + "recyclerlistview": "^4.0.0", + "xdate": "^0.8.0" + }, + "optionalDependencies": { + "moment": "^2.29.4" + } + }, "node_modules/react-native-paper": { "version": "5.12.3", "resolved": "https://registry.npmjs.org/react-native-paper/-/react-native-paper-5.12.3.tgz", @@ -19600,6 +19627,11 @@ "react-native": "*" } }, + "node_modules/react-native-swipe-gestures": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/react-native-swipe-gestures/-/react-native-swipe-gestures-1.0.5.tgz", + "integrity": "sha512-Ns7Bn9H/Tyw278+5SQx9oAblDZ7JixyzeOczcBK8dipQk2pD7Djkcfnf1nB/8RErAmMLL9iXgW0QHqiII8AhKw==" + }, "node_modules/react-native-vector-icons": { "version": "10.0.3", "resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-10.0.3.tgz", @@ -19997,6 +20029,20 @@ "node": ">=0.10.0" } }, + "node_modules/recyclerlistview": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/recyclerlistview/-/recyclerlistview-4.2.0.tgz", + "integrity": "sha512-uuBCi0c+ggqHKwrzPX4Z/mJOzsBbjZEAwGGmlwpD/sD7raXixdAbdJ6BTcAmuWG50Cg4ru9p12M94Njwhr/27A==", + "dependencies": { + "lodash.debounce": "4.0.8", + "prop-types": "15.8.1", + "ts-object-utils": "0.0.5" + }, + "peerDependencies": { + "react": ">= 15.2.1", + "react-native": ">= 0.30.0" + } + }, "node_modules/redent": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz", @@ -21654,6 +21700,11 @@ "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz", "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==" }, + "node_modules/ts-object-utils": { + "version": "0.0.5", + "resolved": "https://registry.npmjs.org/ts-object-utils/-/ts-object-utils-0.0.5.tgz", + "integrity": "sha512-iV0GvHqOmilbIKJsfyfJY9/dNHCs969z3so90dQWsO1eMMozvTpnB1MEaUbb3FYtZTGjv5sIy/xmslEz0Rg2TA==" + }, "node_modules/tsconfig-paths": { "version": "3.15.0", "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz", @@ -22400,6 +22451,11 @@ "uuid": "dist/bin/uuid" } }, + "node_modules/xdate": { + "version": "0.8.2", + "resolved": "https://registry.npmjs.org/xdate/-/xdate-0.8.2.tgz", + "integrity": "sha512-sNBlLfOC8S3V0vLDEUianQOXcTsc9j4lfeKU/klHe0RjHAYn0CXsSttumTot8dzalboV8gZbH38B+WcCIBjhFQ==" + }, "node_modules/xml": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/xml/-/xml-1.0.1.tgz", diff --git a/package.json b/package.json index 44ebbdd..8d93be6 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "react": "18.2.0", "react-dom": "18.2.0", "react-native": "0.73.4", + "react-native-calendars": "1.1304.1", "react-native-paper": "5.12.3", "react-native-safe-area-context": "4.8.2", "react-native-screens": "3.29.0",