feat: basic structure for calendar

2023-12-20 22:55:19 +01:00 · 2023-12-20 22:55:19 +01:00 · 65c32a9298
commit 65c32a9298
parent 37b38d33fc
5 changed files with 94 additions and 12 deletions
--- a/app/(tabs)/home/index.tsx
+++ b/app/(tabs)/home/index.tsx
@ -1,5 +1,6 @@
 import React, { useRef, useState } from 'react';
 import { NativeScrollEvent, NativeSyntheticEvent, StyleSheet, View } from 'react-native';
+import { Calendar } from 'react-native-calendars';
 import { FlatList } from 'react-native-gesture-handler';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { ExpenseItem, LoadingSymbol, Plus, SearchBar, Welcome } from '../../../components';
@ -8,14 +9,17 @@ import { useThemeColor } from "../../../hooks/useThemeColor";
 import { addExpense } from "../../../services/database";
 import { useAuth } from '../../contexts/AuthContext';
 import { useRouter } from "expo-router";
+import { SimpleDate } from '../../../util/SimpleDate';
+import { useTheme } from '../../contexts/ThemeContext';

 export default function Page() {
+    const { colors, theme } = useTheme()

    //Styles
    const styles = StyleSheet.create({
        safeAreaViewStyle: {
-            flex: 1,
-            backgroundColor: useThemeColor("containerColor"),
+            flex: 1, 
+            backgroundColor: colors.backgroundColor
        },
        container: {
            flex: 1,
@ -23,7 +27,7 @@ export default function Page() {
            justifyContent: "center",
        },
        text: {
-            color: useThemeColor("primaryText"),
+            color: colors.primaryText,
            fontSize: 70,
            fontWeight: "bold"
        },
@ -33,7 +37,6 @@ export default function Page() {
    });

    const router = useRouter();
-    const {onLogout} = useAuth();
    const [plusShow, setPlusShow] = useState(true);
    const prevOffset = useRef(0);
    
@ -75,7 +78,17 @@ export default function Page() {
            data={data}
            ListHeaderComponent={
                <>
-                    <Welcome name="My Dude" image={profile} onPress={() => {router.push("/home/userSettings")}}></Welcome>
+                    <Welcome name="My Dude" image={profile} onPress={() => {router.push("/home/userSettings")}}/>
+                    <Calendar key={theme} maxDate={SimpleDate.now().format("YYYY-MM-DD")} style={{margin: 10, borderRadius: 20, padding:10}} theme={{
+                        dayTextColor: colors.primaryText,
+                        textDisabledColor: colors.secondaryText,
+                        todayTextColor: colors.accentColor,
+                        calendarBackground: colors.containerColor,
+                        arrowColor: colors.accentColor,
+                        monthTextColor: colors.accentColor
+                    }}>
+
+                    </Calendar>
                    <SearchBar placeholder='Type to Search...'></SearchBar>
                </>
            }
--- a/app/(tabs)/home/userSettings.tsx
+++ b/app/(tabs)/home/userSettings.tsx
@ -5,7 +5,7 @@ import { SIZES } from '../../../constants/theme'
 import { SafeAreaView } from 'react-native-safe-area-context'
 import { ButtonSetting, ToggleSetting } from '../../../components'
 import { useTheme } from '../../contexts/ThemeContext'
-import { deleteExpenses } from '../../../services/database'
+import { deleteExpenses, DEV_populateDatabase } from '../../../services/database'
 import { useAuth } from '../../contexts/AuthContext'
 import { TouchableOpacity } from 'react-native-gesture-handler'

@ -61,6 +61,12 @@ export default function userSettings() {
                console.log("Expenses Deleted!");
            })}}
            />
+          <ButtonSetting settingsTitle='Populate Database' onPress={() => {
+            const del = async () => {
+              await DEV_populateDatabase()
+            }
+            del()
+          }}/>
        </View>
        
      </View>
--- a/components/home/expenseItem/expenseItem.tsx
+++ b/components/home/expenseItem/expenseItem.tsx
@ -2,12 +2,18 @@ import React from 'react';
 import { ColorValue, StyleSheet, Text, View } from 'react-native';
 import { SIZES } from '../../../constants/theme';
 import { useThemeColor } from '../../../hooks/useThemeColor';
+import { useTheme } from '../../../app/contexts/ThemeContext';
 import CustomCard from "../../common/CustomCard";
+import { SimpleDate } from '../../../util/SimpleDate';

-export type ExpenseItemProps = {color: ColorValue, category: string, title: string, date: string, value : string}
+type ISOdateString = string
+
+export type ExpenseItemProps = {color: ColorValue, category: string, title: string, date: ISOdateString, value : string}
 export default function ExpenseItem(itemProps : ExpenseItemProps) {
-  const textColor = useThemeColor("primaryText");
-  const backgroundColor = useThemeColor("backgroundColor")
+  const {colors} = useTheme()
+  const textColor = colors.primaryText
+  const backgroundColor = colors.containerColor
+  const date: SimpleDate = new SimpleDate(new Date(itemProps.date))
  return (
      <CustomCard>
        <View style={[styles.colorTip, {backgroundColor: itemProps.color}]}></View>
@ -23,7 +29,7 @@ export default function ExpenseItem(itemProps : ExpenseItemProps) {
          <Text style={{
            fontSize: SIZES.small,
            color: textColor
-          }} numberOfLines={1}>{itemProps.date}</Text>
+          }} numberOfLines={1}>{date.format("DD.MM.YYYY")}</Text>
        </View>
        <View style={[styles.valueSection, {backgroundColor: backgroundColor}]}>
          <Text style={{
--- a/package-lock.json
+++ b/package-lock.json
@ -24,6 +24,7 @@
        "react": "18.2.0",
        "react-dom": "18.2.0",
        "react-native": "0.72.6",
+        "react-native-calendars": "^1.1303.0",
        "react-native-gesture-handler": "~2.12.0",
        "react-native-safe-area-context": "4.6.3",
        "react-native-screens": "~3.22.0",
@ -14367,6 +14368,15 @@
        "mkdirp": "bin/cmd.js"
      }
    },
+    "node_modules/moment": {
+      "version": "2.29.4",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
+      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
+      "optional": true,
+      "engines": {
+        "node": "*"
+      }
+    },
    "node_modules/ms": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@ -15714,6 +15724,23 @@
        "react": "18.2.0"
      }
    },
+    "node_modules/react-native-calendars": {
+      "version": "1.1303.0",
+      "resolved": "https://registry.npmjs.org/react-native-calendars/-/react-native-calendars-1.1303.0.tgz",
+      "integrity": "sha512-afR9D+EbJQe/YnlXRly/4pqkM7iXSziaKUZz1EoKWk3R0D+sela5LknziXIiM1XFDCpYk5ZJ3cjnTed0MjxVKg==",
+      "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-gesture-handler": {
      "version": "2.12.1",
      "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.12.1.tgz",
@ -15752,6 +15779,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-uuid": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/react-native-uuid/-/react-native-uuid-2.0.1.tgz",
@ -15887,6 +15919,20 @@
        "node": ">= 4"
      }
    },
+    "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/regenerate": {
      "version": "1.4.2",
      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@ -17078,6 +17124,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/tslib": {
      "version": "2.6.2",
      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
@ -17626,6 +17677,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-name-validator": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
--- a/package.json
+++ b/package.json
@ -4,8 +4,8 @@
  "version": "1.0.0",
  "scripts": {
    "start": "expo start",
-    "android": "expo start --android",
-    "ios": "expo start --ios",
+    "android": "expo run:android",
+    "ios": "expo run:ios",
    "web": "expo start --web",
    "test": "jest --watchAll",
    "start tunnel": "expo start --tunnel",
@ -34,6 +34,7 @@
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.72.6",
+    "react-native-calendars": "^1.1303.0",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-safe-area-context": "4.6.3",
    "react-native-screens": "~3.22.0",