maartenvr98/Kliko
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CS lib

Browse source
This commit is contained in:
Maarten 2024-08-08 14:22:35 +02:00
parent cec664c8d0
commit ff2320f08c
13 changed files with 297 additions and 297 deletions
Download patch file Download diff file Expand all files Collapse all files

36
lib/components/List.tsx
View file

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

96
lib/components/ThemedText.tsx
View file

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

8
lib/components/ThemedView.tsx
View file

@ -3,12 +3,12 @@ import { View, type ViewProps } from 'react-native';
import { useThemeColor } from '@/hooks/useThemeColor'; import { useThemeColor } from '@/hooks/useThemeColor';
export type ThemedViewProps = ViewProps & { export type ThemedViewProps = ViewProps & {
lightColor?: string; lightColor?: string;
darkColor?: string; darkColor?: string;
}; };
export function ThemedView({ style, lightColor, darkColor, ...otherProps }: ThemedViewProps) { 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} />;
} }

8
lib/components/__tests__/ThemedText-test.tsx
View file

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

2
lib/components/navigation/TabBarIcon.tsx
View file

@ -5,5 +5,5 @@ import { type IconProps } from '@expo/vector-icons/build/createIconSet';
import { type ComponentProps } from 'react'; import { type ComponentProps } from 'react';
export function TabBarIcon({ style, ...rest }: IconProps<ComponentProps<typeof Ionicons>['name']>) { export function TabBarIcon({ style, ...rest }: IconProps<ComponentProps<typeof Ionicons>['name']>) {
return <Ionicons size={28} style={[style]} {...rest} />; return <Ionicons size={28} style={[ style ]} {...rest} />;
} }

86
lib/constants/Colors.ts
View file

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

42
lib/context/AppProvider.tsx
View file

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

94
lib/context/UseStorageState.tsx
View file

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

2
lib/hooks/useColorScheme.web.ts
View file

@ -4,5 +4,5 @@
// to render different styles on the client and server, these aren't directly supported in React Native // 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. // but can be achieved using a styling library like Nativewind.
export function useColorScheme() { export function useColorScheme() {
return 'light'; return 'light';
} }

18
lib/hooks/useThemeColor.ts
View file

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

78
lib/services/message.tsx
View file

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

120
lib/services/request.tsx
View file

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

4
lib/store/store.tsx
View file

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