Show calendar

app/(tabs)/index.tsx

@@ -1,21 +1,47 @@
-import {StyleSheet, ScrollView, SafeAreaView, View, StatusBar} from 'react-native';
+import React, {useEffect, useState} from 'react';
-// @ts-ignore
+import {StyleSheet, ScrollView, SafeAreaView, View, StatusBar, TouchableOpacity, Image} from 'react-native';
 import CalendarPicker from 'react-native-calendar-picker';
+import Ionicons from '@expo/vector-icons/Ionicons';
 
 import {ThemedText} from '@/components/ThemedText';
 import {ThemedView} from '@/components/ThemedView';
 import {Colors} from '@/constants/Colors';
 import {useColorScheme} from '@/hooks/useColorScheme';
-import React, {useEffect} from 'react';
-import Ionicons from '@expo/vector-icons/Ionicons';
 import {useToken} from '@/context/AppProvider';
+import {Request} from '@/services/request';
+import List from '@/components/List';
 
 export default function HomeScreen() {
   const colorScheme = useColorScheme() ?? 'light';
   const {token, isLoading} = useToken();
+  const [name, setName] = useState(' '); // Default empty space to prevent layout shifting
+  const [dates, setDates] = useState<any | null>([]);
+  const [types, setTypes] = useState<any | null>([]);
 
   useEffect(() => {
-    console.log('token found', token);
+    if (token) {
+      Request.post('calendar', {token: token}).then((response) => {
+        if (response.success) {
+          // Set name
+          setName(response.name);
+
+          // Set dates
+          let calendarDates: any[] = [];
+          response.dates.forEach((date: any) => {
+            calendarDates.push({
+              date: new Date(date.date),
+              style: {backgroundColor: date.color},
+              textStyle: {color: Colors.white},
+              allowDisabled: true,
+            })
+          })
+          setDates(calendarDates);
+
+          // Set types
+          setTypes(response.types);
+        }
+      })
+    }
   }, [token]);
 
   return (
@@ -23,22 +49,24 @@ export default function HomeScreen() {
       <ThemedView style={styles.container}>
         <ScrollView>
           <ThemedView style={styles.titleContainer}>
-            <ThemedText type="title">{ getGreeting() },</ThemedText>
+            <ThemedText type="title">{getGreeting()},</ThemedText>
           </ThemedView>
 
           <ThemedView style={styles.titleContainer}>
-            <ThemedText type="title" style={{color: Colors[colorScheme].tint}}>Maarten</ThemedText>
+            <ThemedText type="title" style={{color: Colors[colorScheme].tint}}>{name}</ThemedText>
           </ThemedView>
 
           <ThemedView style={styles.calendarContainer}>
             <CalendarPicker
               showDayStragglers={true}
               enableDateChange={false}
+              customDatesStyles={dates}
+              todayTextStyle={styles.today}
               previousComponent={
-                <Ionicons size={28} name="chevron-back" />
+                <Ionicons size={28} name="chevron-back"/>
               }
               nextComponent={
-                <Ionicons size={28} name="chevron-forward" />
+                <Ionicons size={28} name="chevron-forward"/>
               }
               weekdays={["Zo", "Ma", "Di", "Woe", "Do", "Vrij", "Zat"]}
               months={[
@@ -59,22 +87,17 @@ export default function HomeScreen() {
           </ThemedView>
 
           <ThemedView style={styles.legendaContainer}>
-            <View style={styles.legendaItem}>
+            <ThemedText type='subtitle'>Legenda:</ThemedText>
-              <View style={{...styles.circle, backgroundColor: Colors[colorScheme].green}}/>
+            <List
-              <ThemedText type="default">GFT+e</ThemedText>
+              data={types}
-            </View>
+              viewStyle={styles.legendaList}
-            <View style={styles.legendaItem}>
+              renderItem={(type: any, index: any) => (
-              <View style={{...styles.circle, backgroundColor: Colors[colorScheme].paper}}/>
+                <View style={styles.legendaItem} key={index}>
-              <ThemedText type="default">Papier</ThemedText>
+                  <View style={{...styles.circle, backgroundColor: type.color}}/>
-            </View>
+                  <ThemedText type="default">{ type.name }</ThemedText>
-            <View style={styles.legendaItem}>
+                </View>
-              <View style={{...styles.circle, backgroundColor: Colors[colorScheme].packages}}/>
+              )}
-              <ThemedText type="default">PMD</ThemedText>
+            />
-            </View>
-            <View style={styles.legendaItem}>
-              <View style={{...styles.circle, backgroundColor: Colors[colorScheme].grey}}/>
-              <ThemedText type="default">Restafval</ThemedText>
-            </View>
           </ThemedView>
         </ScrollView>
       </ThemedView>
@@ -112,11 +135,14 @@ const styles = StyleSheet.create({
     marginTop: 15,
   },
   legendaContainer: {
-    marginTop: 25,
+    marginTop: 40,
+  },
+  legendaList: {
+    marginTop: 15,
     flex: 1,
-    flexDirection: 'row',
+    flexDirection: 'column',
     alignContent: 'center',
-    gap: 10,
+    gap: 15,
   },
   legendaItem: {
     flex: 1,
@@ -130,4 +156,13 @@ const styles = StyleSheet.create({
     height: 25,
     borderRadius: 50,
   },
+  today: {
+    borderWidth: 3,
+    borderColor: Colors.dark.grey,
+    borderRadius: 25,
+    textAlign: 'center',
+    paddingTop: 8,
+    width: 40,
+    height: 40,
+  },
 });

components/List.tsx

@@ -1,12 +1,14 @@
-import {StyleSheet, View} from 'react-native';
 import React from 'react';
+import {ViewStyle} from 'react-native';
+import {ThemedView} from '@/components/ThemedView';
 
 interface ListProps {
   data: any;
   renderItem: Function;
+  viewStyle?: ViewStyle;
 }
 
-const CustomList: React.FC<ListProps> = ({ data, renderItem }) => {
+const CustomList: React.FC<ListProps> = ({ data, renderItem, viewStyle }) => {
   const renderList = () => {
     let list: any[] = [];
 
@@ -20,9 +22,9 @@ const CustomList: React.FC<ListProps> = ({ data, renderItem }) => {
   };
 
   return (
-    <View>
+    <ThemedView style={viewStyle ? viewStyle : undefined}>
       {renderList()}
-    </View>
+    </ThemedView>
   );
 };
 

constants/Colors.ts

@@ -7,6 +7,10 @@ const tintColorLight = '#76af2a';
 const tintColorDark = '#76af2a';
 
 export const Colors = {
+  // Base
+  black: '#000',
+  white: '#fff',
+
   light: {
     // Main
     text: '#11181C',

expo-env.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="expo/types" />
+declare module 'react-native-calendar-picker';
 
 // NOTE: This file should not be edited and should be in your git ignore