refactor src folder structure

src/components/EditModal.tsx

@@ -0,0 +1,150 @@
+import React, { useEffect, useState } from 'react';
+import {
+    TextInput,
+    TouchableOpacity,
+    StyleSheet,
+} from 'react-native';
+import Modal from "react-native-modal";
+import { useTranslation } from 'react-i18next';
+
+import { Colors } from '@/src/constants/Colors';
+import { ThemedView } from '@/src/components/themed/ThemedView';
+import { ThemedText } from '@/src/components/themed/ThemedText';
+import { useColorScheme } from '@/src/hooks/useColorScheme';
+import ThemedInput from '@/src/components/themed/ThemedInput';
+
+interface Field {
+    name: string;
+    title?: string;
+    placeholder: string;
+    defaultValue?: string;
+}
+
+interface EditModalProps {
+    title?: string;
+    visible: boolean;
+    onClose?: () => void;
+    onSave: (inputValues: Record<string, string>) => void;
+    fields: Field[];
+}
+
+const CustomModal: React.FC<EditModalProps> = ({ title, visible, onClose, onSave, fields }) => {
+    const colorScheme = useColorScheme() ?? 'light';
+    const [ inputValues, setInputValues ] = useState<Record<string, string>>( {} );
+    const { t } = useTranslation();
+
+    useEffect( () => {
+        const initialValues: Record<string, string> = {};
+        fields.forEach( field => {
+            if (field.defaultValue) {
+                initialValues[ field.name ] = field.defaultValue;
+            }
+        } );
+        setInputValues( initialValues );
+    }, [ fields ] );
+
+    const handleInputChange = (name: string, value: string) => {
+        setInputValues( { ...inputValues, [ name ]: value } );
+    };
+
+    const handleSave = () => {
+        onSave( inputValues );
+        if (onClose) {
+            onClose();
+        }
+    };
+
+    return (
+        <Modal isVisible={visible} useNativeDriverForBackdrop={true}>
+            <ThemedView style={{ ...styles.view, backgroundColor: Colors[ colorScheme ].background }}>
+                <ThemedText style={styles.text}>{title ? title : t( "modal.default.title" )}</ThemedText>
+
+                {fields.map( (field, index) => (
+                    <ThemedInput
+                        key={index}
+                        label={field.title}
+                        onChangeText={(text) => handleInputChange( field.name, text )}
+                        value={inputValues[ field.name ] || ''}
+                        placeholder={field.placeholder}
+                    />
+                ) )}
+
+                <ThemedView style={styles.buttonContainer}>
+                    <TouchableOpacity onPress={onClose || ( () => {
+                    } )}>
+                        <ThemedText style={[ styles.textStyle, styles.buttonClose ]}>{t( "modal.default.cancel" )}</ThemedText>
+                    </TouchableOpacity>
+
+                    <TouchableOpacity style={styles.buttonSave} onPress={handleSave}>
+                        <ThemedText style={styles.textStyle}>{t( "modal.default.save" )}</ThemedText>
+                    </TouchableOpacity>
+                </ThemedView>
+            </ThemedView>
+        </Modal>
+    );
+};
+
+const styles = StyleSheet.create( {
+    view: {
+        margin: 25,
+        borderRadius: 10,
+        paddingTop: 30,
+        paddingBottom: 30,
+        paddingLeft: 35,
+        paddingRight: 35,
+        alignItems: 'center',
+        shadowColor: '#000',
+        shadowOffset: {
+            width: 0,
+            height: 2,
+        },
+        shadowOpacity: 0.25,
+        shadowRadius: 4,
+        elevation: 5,
+    },
+    text: {
+        marginBottom: 15,
+        textAlign: 'center',
+    },
+    inputContainer: {
+        width: '100%',
+        marginBottom: 15,
+    },
+    inputTitle: {
+        fontSize: 16,
+        marginBottom: 5,
+    },
+    input: {
+        height: 40,
+        borderColor: 'gray',
+        borderWidth: 1,
+        width: '100%',
+        paddingHorizontal: 10,
+        borderRadius: 5,
+    },
+    buttonContainer: {
+        marginTop: 20,
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        width: '100%',
+    },
+    buttonClose: {
+        color: Colors.red,
+        paddingTop: 8,
+    },
+    buttonSave: {
+        backgroundColor: Colors.tint,
+        borderRadius: 5,
+        paddingTop: 10,
+        paddingBottom: 10,
+        paddingLeft: 40,
+        paddingRight: 40,
+    },
+    textStyle: {
+        color: 'white',
+        fontWeight: 'bold',
+        textAlign: 'center',
+    },
+} );
+
+export default CustomModal;

src/components/List.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+import { ThemedView } from '@/src/components/themed/ThemedView';
+
+interface ListProps {
+    data: any;
+    renderItem: Function;
+    viewStyle?: ViewStyle;
+}
+
+const CustomList: React.FC<ListProps> = ({ data, renderItem, viewStyle }) => {
+    const renderList = () => {
+        let list: any[] = [];
+
+        for (let i = 0; i < data.length; i++) {
+            const item = data[ i ];
+
+            list[ i ] = renderItem( item, i );
+        }
+
+        return list;
+    };
+
+    return (
+        <ThemedView style={viewStyle ? viewStyle : undefined}>
+            {renderList()}
+        </ThemedView>
+    );
+};
+
+export default CustomList;

src/components/navigation/TabBarIcon.tsx

@@ -0,0 +1,9 @@
+// You can (explore) the built-in icon families and icons on the web at https://icons.expo.fyi/
+
+import Ionicons from '@expo/vector-icons/Ionicons';
+import { type IconProps } from '@expo/vector-icons/build/createIconSet';
+import { type ComponentProps } from 'react';
+
+export function TabBarIcon({ style, ...rest }: IconProps<ComponentProps<typeof Ionicons>['name']>) {
+    return <Ionicons size={28} style={[ style ]} {...rest} />;
+}

src/components/themed/ThemedIcon.tsx

@@ -0,0 +1,13 @@
+// You can (explore) the built-in icon families and icons on the web at https://icons.expo.fyi/
+
+import Ionicons from '@expo/vector-icons/Ionicons';
+import { type IconProps } from '@expo/vector-icons/build/createIconSet';
+import { type ComponentProps } from 'react';
+import { useColorScheme } from '@/src/hooks/useColorScheme';
+import { Colors } from '@/src/constants/Colors';
+
+export function ThemedIcon({ style, ...rest }: IconProps<ComponentProps<typeof Ionicons>['name']>) {
+    const colorScheme = useColorScheme() ?? 'light';
+
+    return <Ionicons color={Colors[ colorScheme ].text} style={[ style ]} {...rest} />;
+}

src/components/themed/ThemedInput.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { TextInput, StyleSheet, TextInputProps, StyleProp, TextStyle, ViewStyle } from 'react-native';
+import { ThemedView } from '@/src/components/themed/ThemedView';
+import { ThemedText } from '@/src/components/themed/ThemedText';
+import { Colors } from '@/src/constants/Colors';
+import { useColorScheme } from '@/src/hooks/useColorScheme';
+
+interface InputComponentProps extends TextInputProps {
+    label?: string;
+    style?: StyleProp<ViewStyle>;
+    inputStyle?: StyleProp<TextStyle>;
+}
+
+const ThemedInput: React.FC<InputComponentProps> = ({
+    label,
+    placeholder,
+    value,
+    onChangeText,
+    secureTextEntry = false,
+    keyboardType = 'default',
+    style,
+    inputStyle,
+    ...props
+}) => {
+    const colorScheme = useColorScheme() ?? 'light';
+
+    return (
+        <ThemedView style={[ styles.container, style ]}>
+            {label && <ThemedText style={styles.label}>{label}</ThemedText>}
+            <TextInput
+                style={[ styles.input, inputStyle, {
+                    color: Colors[ colorScheme ].text,
+                    borderColor: Colors[ colorScheme ].text
+                } ]}
+                placeholderTextColor={Colors[ colorScheme ].text}
+                placeholder={placeholder}
+                value={value}
+                onChangeText={onChangeText}
+                secureTextEntry={secureTextEntry}
+                keyboardType={keyboardType}
+                {...props}
+            />
+        </ThemedView>
+    );
+};
+
+const styles = StyleSheet.create( {
+    container: {
+        width: '100%',
+    },
+    label: {
+        marginBottom: 4,
+    },
+    input: {
+        width: '100%',
+        borderWidth: 1,
+        padding: 10,
+        paddingLeft: 20,
+        borderRadius: 3,
+        marginBottom: 10,
+    },
+} );
+
+export default ThemedInput;

src/components/themed/ThemedText.tsx

@@ -0,0 +1,60 @@
+import { Text, type TextProps, StyleSheet } from 'react-native';
+
+import { useThemeColor } from '@/src/hooks/useThemeColor';
+
+export type ThemedTextProps = TextProps & {
+    lightColor?: string;
+    darkColor?: string;
+    type?: 'default' | 'title' | 'defaultSemiBold' | 'subtitle' | 'link';
+};
+
+export function ThemedText({
+    style,
+    lightColor,
+    darkColor,
+    type = 'default',
+    ...rest
+}: ThemedTextProps) {
+    const color = useThemeColor( { light: lightColor, dark: darkColor }, 'text' );
+
+    return (
+        <Text
+            style={[
+                { color },
+                type === 'default' ? styles.default : undefined,
+                type === 'title' ? styles.title : undefined,
+                type === 'defaultSemiBold' ? styles.defaultSemiBold : undefined,
+                type === 'subtitle' ? styles.subtitle : undefined,
+                type === 'link' ? styles.link : undefined,
+                style,
+            ]}
+            {...rest}
+        />
+    );
+}
+
+const styles = StyleSheet.create( {
+    default: {
+        fontSize: 16,
+        lineHeight: 24,
+    },
+    defaultSemiBold: {
+        fontSize: 16,
+        lineHeight: 24,
+        fontWeight: '600',
+    },
+    title: {
+        fontSize: 32,
+        fontWeight: 'bold',
+        lineHeight: 32,
+    },
+    subtitle: {
+        fontSize: 20,
+        fontWeight: 'bold',
+    },
+    link: {
+        lineHeight: 30,
+        fontSize: 16,
+        color: '#0a7ea4',
+    },
+} );

src/components/themed/ThemedView.tsx

@@ -0,0 +1,14 @@
+import { View, type ViewProps } from 'react-native';
+
+import { useThemeColor } from '@/src/hooks/useThemeColor';
+
+export type ThemedViewProps = ViewProps & {
+    lightColor?: string;
+    darkColor?: string;
+};
+
+export function ThemedView({ style, lightColor, darkColor, ...otherProps }: ThemedViewProps) {
+    const backgroundColor = useThemeColor( { light: lightColor, dark: darkColor }, 'background' );
+
+    return <View style={[ { backgroundColor }, style ]} {...otherProps} />;
+}

src/constants/Colors.ts

@@ -0,0 +1,62 @@
+/**
+ * Below are the colors that are used in the app. The colors are defined in the light and dark mode.
+ * There are many other ways to style your app. For example, [Nativewind](https://www.nativewind.dev/), [Tamagui](https://tamagui.dev/), [unistyles](https://reactnativeunistyles.vercel.app), etc.
+ */
+
+const tintColorLight = '#76af2a';
+const tintColorDark = '#76af2a';
+
+export const Colors = {
+    // Base
+    tint: tintColorLight,
+    black: '#000',
+    white: '#fff',
+    red: '#ff0000',
+
+    light: {
+        // Main
+        text: '#11181C',
+        background: '#fff',
+        tint: tintColorLight,
+
+        // Icons
+        icon: '#687076',
+        tabIconDefault: '#11181C',
+        tabIconSelected: tintColorLight,
+
+        // Types
+        green: '#3c8840',
+        paper: '#0071ce',
+        packages: '#f36c21',
+        grey: '#64666a',
+
+        // Buttons
+        buttonBackground: '#f5f5f5',
+
+        // Border
+        borderColor: '#f2f2f2',
+    },
+    dark: {
+        // Main
+        text: '#ECEDEE',
+        background: '#151718',
+        tint: tintColorDark,
+
+        // Icons
+        icon: '#9BA1A6',
+        tabIconDefault: '#9BA1A6',
+        tabIconSelected: tintColorDark,
+
+        // Types
+        green: '#3c8840',
+        paper: '#0071ce',
+        packages: '#f36c21',
+        grey: '#64666a',
+
+        // Buttons
+        buttonBackground: '#f5f5f5',
+
+        // Border
+        borderColor: '#f2f2f2',
+    },
+};

src/context/AppProvider.tsx

@@ -0,0 +1,31 @@
+import { createContext, PropsWithChildren, useContext } from "react";
+import { useStorageState } from '@/src/context/UseStorageState';
+
+type TokenType = {
+    token: string | null;
+    setToken: (token: string | null) => void;
+    isLoading: boolean;
+}
+
+const TokenContext = createContext<TokenType>( {
+    setToken: () => {
+    },
+    token: null,
+    isLoading: true,
+} );
+
+export const useToken = () => useContext( TokenContext );
+
+export function AppProvider({ children }: PropsWithChildren) {
+    const [ [ isLoading, token ], setSession ] = useStorageState( 'appToken' );
+
+    const tokenContext: TokenType = {
+        token,
+        setToken: (token) => {
+            setSession( token );
+        },
+        isLoading,
+    };
+
+    return <TokenContext.Provider value={tokenContext}>{children}</TokenContext.Provider>;
+}

src/context/UseStorageState.tsx

@@ -0,0 +1,67 @@
+import * as SecureStore from 'expo-secure-store';
+import * as React from 'react';
+import { Platform } from 'react-native';
+
+type UseStateHook<T> = [ [ boolean, T | null ], (value: T | null) => void ];
+
+function useAsyncState<T>(
+    initialValue: [ boolean, T | null ] = [ true, null ],
+): UseStateHook<T> {
+    return React.useReducer(
+        (state: [ boolean, T | null ], action: T | null = null): [ boolean, T | null ] => [ false, action ],
+        initialValue
+    ) as UseStateHook<T>;
+}
+
+export async function setStorageItemAsync(key: string, value: string | null) {
+    if (Platform.OS === 'web') {
+        try {
+            if (value === null) {
+                localStorage.removeItem( key );
+            } else {
+                localStorage.setItem( key, value );
+            }
+        } catch (e) {
+            console.error( 'Local storage is unavailable:', e );
+        }
+    } else {
+        if (value == null) {
+            await SecureStore.deleteItemAsync( key );
+        } else {
+            await SecureStore.setItemAsync( key, value );
+        }
+    }
+}
+
+export function useStorageState(key: string): UseStateHook<string> {
+    // Public
+    const [ state, setState ] = useAsyncState<string>();
+
+    // Get
+    React.useEffect( () => {
+        if (Platform.OS === 'web') {
+            try {
+                if (typeof localStorage !== 'undefined') {
+                    setState( localStorage.getItem( key ) );
+                }
+            } catch (e) {
+                console.error( 'Local storage is unavailable:', e );
+            }
+        } else {
+            SecureStore.getItemAsync( key ).then( (value: string | null) => {
+                setState( value );
+            } );
+        }
+    }, [ key ] );
+
+    // Set
+    const setValue = React.useCallback(
+        (value: string | null) => {
+            setState( value );
+            setStorageItemAsync( key, value );
+        },
+        [ key ]
+    );
+
+    return [ state, setValue ];
+}

src/hooks/useColorScheme.ts

@@ -0,0 +1 @@
+export { useColorScheme } from 'react-native';

src/hooks/useColorScheme.web.ts

@@ -0,0 +1,8 @@
+// NOTE: The default React Native styling doesn't support server rendering.
+// Server rendered styles should not change between the first render of the HTML
+// and the first render on the client. Typically, web developers will use CSS media queries
+// to render different styles on the client and server, these aren't directly supported in React Native
+// but can be achieved using a styling library like Nativewind.
+export function useColorScheme() {
+    return 'light';
+}

src/hooks/useThemeColor.ts

@@ -0,0 +1,22 @@
+/**
+ * Learn more about light and dark modes:
+ * https://docs.expo.dev/guides/color-schemes/
+ */
+
+import { useColorScheme } from 'react-native';
+
+import { Colors } from '@/src/constants/Colors';
+
+export function useThemeColor(
+    props: { light?: string; dark?: string },
+    colorName: keyof typeof Colors.light & keyof typeof Colors.dark
+) {
+    const theme = useColorScheme() ?? 'light';
+    const colorFromProps = props[ theme ];
+
+    if (colorFromProps) {
+        return colorFromProps;
+    } else {
+        return Colors[ theme ][ colorName ];
+    }
+}

src/localization/i18n.tsx

@@ -0,0 +1,54 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import { en, nl } from "@/assets/languages";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+
+const STORE_LANGUAGE_KEY = "settings.lang";
+
+const languageDetectorPlugin = {
+    type: "languageDetector",
+    async: true,
+    init: () => { },
+    detect: async function (callback: (lang: string) => void) {
+        try {
+            // get stored language from Async storage
+            // put your own language detection logic here
+            await AsyncStorage.getItem(STORE_LANGUAGE_KEY).then((language) => {
+                if (language) {
+                    //if language was stored before, use this language in the app
+                    return callback(language);
+                } else {
+                    //if language was not stored yet, use english
+                    return callback("nl");
+                }
+            });
+        } catch (error) {
+            console.log("Error reading language", error);
+        }
+    },
+    cacheUserLanguage: async function (language: string) {
+        try {
+            //save a user's language choice in Async storage
+            await AsyncStorage.setItem(STORE_LANGUAGE_KEY, language);
+        } catch (error) { }
+    },
+};
+const resources = {
+    en: {
+        translation: en,
+    },
+    nl: {
+        translation: nl,
+    },
+};
+
+// @ts-ignore
+i18n.use(initReactI18next).use(languageDetectorPlugin).init({
+    resources,
+    compatibilityJSON: 'v3',
+    fallbackLng: "nl",
+    interpolation: {
+        escapeValue: false,
+    },
+});
+export default i18n;

src/services/message.tsx

@@ -0,0 +1,47 @@
+import Toast from 'react-native-toast-message';
+
+export class Message {
+    /**
+     * Set success message
+     *
+     * @param message
+     */
+    static success(message: string) {
+        Message.send( 'success', message );
+    }
+
+    /**
+     * Send error message
+     *
+     * @param message
+     */
+    static error(message: string) {
+        Message.send( 'error', message );
+    }
+
+    /**
+     * Send info message
+     *
+     * @param message
+     */
+    static info(message: string) {
+        Message.send( 'info', message );
+    }
+
+    /**
+     * Send message
+     *
+     * @param type
+     * @param message
+     */
+    static send(type: string, message: string) {
+        Toast.show( {
+            type: type,
+            text1: message,
+            position: 'bottom',
+            visibilityTime: 2000,
+            autoHide: true,
+        } )
+    }
+
+}

src/services/request.tsx

@@ -0,0 +1,71 @@
+import axios from 'axios';
+
+const API_URL = 'https://kliko.maartenvr98.nl/api/v1/';
+const CONFIG = {
+    timeout: 30000,
+};
+
+export class Request {
+    /**
+     * Send GET request to API
+     *
+     * @param url
+     * @param headers
+     * @returns {Promise<AxiosResponse<any>>}
+     */
+    static get(url: string, headers = {}) {
+        return axios
+            .get( API_URL + url, {
+                ...CONFIG,
+                ...headers,
+            } )
+            .then( response => response.data )
+            .catch( error => {
+                // Handle error
+                throw error;
+            } );
+    }
+
+    /**
+     * Send POST request to API
+     *
+     * @param url
+     * @param body
+     * @param headers
+     * @returns {Promise<AxiosResponse<any>>}
+     */
+    static post(url: string, body = {}, headers = {}) {
+        return axios
+            .post( API_URL + url, body, {
+                ...CONFIG,
+                ...headers,
+            } )
+            .then( response => response.data )
+            .catch( error => {
+                // Handle error
+                throw error;
+            } );
+    }
+
+    /**
+     * Send PUT request to API
+     *
+     * @param url
+     * @param body
+     * @param headers
+     * @returns {Promise<AxiosResponse<any>>}
+     */
+    static put(url: string, body = {}, headers = {}) {
+        return axios
+            .put( API_URL + url, body, {
+                ...CONFIG,
+                ...headers,
+            } )
+            .then( response => response.data )
+            .catch( error => {
+                // Handle error
+                throw error;
+            } );
+    }
+}
+

src/store/dataStore.tsx

@@ -0,0 +1,48 @@
+// dataStore.js
+import { createSlice } from '@reduxjs/toolkit';
+
+const dataStore = createSlice( {
+    name: 'data',
+    initialState: {
+        session: {
+            token: '',
+            name: '',
+            device: '',
+            language: 'nl',
+            address: {
+                id: 0,
+                zipcode: '',
+                houseNumber: '',
+                street: '',
+                city: '',
+            },
+            coordinates: {
+                latitude: '',
+                longitude: '',
+            },
+            notifications: {
+                dayBefore: 'off',
+                sameDay: 'off',
+            },
+        },
+        reloadCalendar: true,
+        viewCategory: null,
+    },
+    reducers: {
+        setSession: (state, action) => {
+            state.session = action.payload;
+        },
+        setReloadCalendar: (state, action) => {
+            state.reloadCalendar = action.payload;
+        },
+        setViewCategory: (state, action) => {
+            state.viewCategory = action.payload;
+        },
+    },
+} );
+
+export const { setSession } = dataStore.actions;
+export const { setReloadCalendar } = dataStore.actions;
+export const { setViewCategory } = dataStore.actions;
+
+export default dataStore.reducer;

src/store/store.tsx

@@ -0,0 +1,8 @@
+import { configureStore } from '@reduxjs/toolkit';
+import dataReducer from './dataStore';
+
+export const store = configureStore( {
+    reducer: {
+        data: dataReducer,
+    },
+} );