CS lib

lib/components/List.tsx

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

lib/components/ThemedText.tsx

@@ -3,58 +3,58 @@ import { Text, type TextProps, StyleSheet } from 'react-native';
 import { useThemeColor } from '@/hooks/useThemeColor';
 
 export type ThemedTextProps = TextProps & {
-  lightColor?: string;
-  darkColor?: string;
-  type?: 'default' | 'title' | 'defaultSemiBold' | 'subtitle' | 'link';
+    lightColor?: string;
+    darkColor?: string;
+    type?: 'default' | 'title' | 'defaultSemiBold' | 'subtitle' | 'link';
 };
 
 export function ThemedText({
-  style,
-  lightColor,
-  darkColor,
-  type = 'default',
-  ...rest
+    style,
+    lightColor,
+    darkColor,
+    type = 'default',
+    ...rest
 }: ThemedTextProps) {
-  const color = useThemeColor({ light: lightColor, dark: darkColor }, 'text');
+    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}
-    />
-  );
+    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',
-  },
-});
+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',
+    },
+} );

lib/components/ThemedView.tsx

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

lib/components/__tests__/ThemedText-test.tsx

@@ -3,8 +3,8 @@ import renderer from 'react-test-renderer';
 
 import { ThemedText } from '../ThemedText';
 
-it(`renders correctly`, () => {
-  const tree = renderer.create(<ThemedText>Snapshot test!</ThemedText>).toJSON();
+it( `renders correctly`, () => {
+    const tree = renderer.create( <ThemedText>Snapshot test!</ThemedText> ).toJSON();
 
-  expect(tree).toMatchSnapshot();
-});
+    expect( tree ).toMatchSnapshot();
+} );

lib/components/navigation/TabBarIcon.tsx

@@ -5,5 +5,5 @@ 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} />;
+    return <Ionicons size={28} style={[ style ]} {...rest} />;
 }

lib/constants/Colors.ts

@@ -7,56 +7,56 @@ const tintColorLight = '#76af2a';
 const tintColorDark = '#76af2a';
 
 export const Colors = {
-  // Base
-  tint: tintColorLight,
-  black: '#000',
-  white: '#fff',
-  red: '#ff0000',
-
-  light: {
-    // Main
-    text: '#11181C',
-    background: '#fff',
+    // Base
     tint: tintColorLight,
+    black: '#000',
+    white: '#fff',
+    red: '#ff0000',
 
-    // Icons
-    icon: '#687076',
-    tabIconDefault: '#11181C',
-    tabIconSelected: tintColorLight,
+    light: {
+        // Main
+        text: '#11181C',
+        background: '#fff',
+        tint: tintColorLight,
 
-    // Types
-    green: '#3c8840',
-    paper: '#0071ce',
-    packages: '#f36c21',
-    grey: '#64666a',
+        // Icons
+        icon: '#687076',
+        tabIconDefault: '#11181C',
+        tabIconSelected: tintColorLight,
 
-    // Buttons
-    buttonBackground: '#f5f5f5',
+        // Types
+        green: '#3c8840',
+        paper: '#0071ce',
+        packages: '#f36c21',
+        grey: '#64666a',
 
-    // Border
-    borderColor: '#f2f2f2',
-  },
-  dark: {
-    // Main
-    text: '#ECEDEE',
-    background: '#151718',
-    tint: tintColorDark,
+        // Buttons
+        buttonBackground: '#f5f5f5',
 
-    // Icons
-    icon: '#9BA1A6',
-    tabIconDefault: '#9BA1A6',
-    tabIconSelected: tintColorDark,
+        // Border
+        borderColor: '#f2f2f2',
+    },
+    dark: {
+        // Main
+        text: '#ECEDEE',
+        background: '#151718',
+        tint: tintColorDark,
 
-    // Types
-    green: '#3c8840',
-    paper: '#0071ce',
-    packages: '#f36c21',
-    grey: '#64666a',
+        // Icons
+        icon: '#9BA1A6',
+        tabIconDefault: '#9BA1A6',
+        tabIconSelected: tintColorDark,
 
-    // Buttons
-    buttonBackground: '#f5f5f5',
+        // Types
+        green: '#3c8840',
+        paper: '#0071ce',
+        packages: '#f36c21',
+        grey: '#64666a',
 
-    // Border
-    borderColor: '#f2f2f2',
-  },
+        // Buttons
+        buttonBackground: '#f5f5f5',
+
+        // Border
+        borderColor: '#f2f2f2',
+    },
 };

lib/context/AppProvider.tsx

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

lib/context/UseStorageState.tsx

@@ -2,66 +2,66 @@ 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];
+type UseStateHook<T> = [ [ boolean, T | null ], (value: T | null) => void ];
 
 function useAsyncState<T>(
-  initialValue: [boolean, T | null] = [true, null],
+    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>;
+    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);
+    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 {
-      await SecureStore.setItemAsync(key, value);
+        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>();
+    // Public
+    const [ state, setState ] = useAsyncState<string>();
 
-  // Get
-  React.useEffect(() => {
-    if (Platform.OS === 'web') {
-      try {
-        if (typeof localStorage !== 'undefined') {
-          setState(localStorage.getItem(key));
+    // 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 );
+            } );
         }
-      } catch (e) {
-        console.error('Local storage is unavailable:', e);
-      }
-    } else {
-      SecureStore.getItemAsync(key).then((value: string | null) => {
-        setState(value);
-      });
-    }
-  }, [key]);
+    }, [ key ] );
 
-  // Set
-  const setValue = React.useCallback(
-    (value: string | null) => {
-      setState(value);
-      setStorageItemAsync(key, value);
-    },
-    [key]
-  );
+    // Set
+    const setValue = React.useCallback(
+        (value: string | null) => {
+            setState( value );
+            setStorageItemAsync( key, value );
+        },
+        [ key ]
+    );
 
-  return [state, setValue];
+    return [ state, setValue ];
 }

lib/hooks/useColorScheme.web.ts

@@ -4,5 +4,5 @@
 // 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';
+    return 'light';
 }

lib/hooks/useThemeColor.ts

@@ -8,15 +8,15 @@ import { useColorScheme } from 'react-native';
 import { Colors } from '@/constants/Colors';
 
 export function useThemeColor(
-  props: { light?: string; dark?: string },
-  colorName: keyof typeof Colors.light & keyof typeof Colors.dark
+    props: { light?: string; dark?: string },
+    colorName: keyof typeof Colors.light & keyof typeof Colors.dark
 ) {
-  const theme = useColorScheme() ?? 'light';
-  const colorFromProps = props[theme];
+    const theme = useColorScheme() ?? 'light';
+    const colorFromProps = props[ theme ];
 
-  if (colorFromProps) {
-    return colorFromProps;
-  } else {
-    return Colors[theme][colorName];
-  }
+    if (colorFromProps) {
+        return colorFromProps;
+    } else {
+        return Colors[ theme ][ colorName ];
+    }
 }

lib/services/message.tsx

@@ -1,47 +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);
-  }
+    /**
+     * 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 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 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,
-    })
-  }
+    /**
+     * Send message
+     *
+     * @param type
+     * @param message
+     */
+    static send(type: string, message: string) {
+        Toast.show( {
+            type: type,
+            text1: message,
+            position: 'bottom',
+            visibilityTime: 2000,
+            autoHide: true,
+        } )
+    }
 
 }

lib/services/request.tsx

@@ -2,70 +2,70 @@ import axios from 'axios';
 
 const API_URL = 'https://kliko.maartenvr98.nl/api/v1/';
 const CONFIG = {
-  timeout: 30000,
+    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 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 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;
-      });
-  }
+    /**
+     * 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;
+            } );
+    }
 }
 

lib/store/store.tsx

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