@computools/react-native-template-controller 0.0.3 → 0.0.5

package/template/src/app/config/__tests__/mocks/picsum_response.json

@@ -0,0 +1,82 @@
+[
+    {
+      "id": "0",
+      "author": "Alejandro Escamilla",
+      "width": 5616,
+      "height": 3744,
+      "url": "https://unsplash.com/photos/yC-Yzbqy7PY",
+      "download_url": "https://picsum.photos/id/0/5616/3744"
+    },
+    {
+      "id": "1",
+      "author": "Alejandro Escamilla",
+      "width": 5616,
+      "height": 3744,
+      "url": "https://unsplash.com/photos/LNRyGwIJr5c",
+      "download_url": "https://picsum.photos/id/1/5616/3744"
+    },
+    {
+      "id": "10",
+      "author": "Paul Jarvis",
+      "width": 2500,
+      "height": 1667,
+      "url": "https://unsplash.com/photos/6J--NXulQCs",
+      "download_url": "https://picsum.photos/id/10/2500/1667"
+    },
+    {
+      "id": "100",
+      "author": "Tina Rataj",
+      "width": 2500,
+      "height": 1656,
+      "url": "https://unsplash.com/photos/pwaaqfoMibI",
+      "download_url": "https://picsum.photos/id/100/2500/1656"
+    },
+    {
+      "id": "1000",
+      "author": "Lukas Budimaier",
+      "width": 5626,
+      "height": 3635,
+      "url": "https://unsplash.com/photos/6cY-FvMlmkQ",
+      "download_url": "https://picsum.photos/id/1000/5626/3635"
+    },
+    {
+      "id": "1001",
+      "author": "Danielle MacInnes",
+      "width": 5616,
+      "height": 3744,
+      "url": "https://unsplash.com/photos/1DkWWN1dr-s",
+      "download_url": "https://picsum.photos/id/1001/5616/3744"
+    },
+    {
+      "id": "1002",
+      "author": "NASA",
+      "width": 4312,
+      "height": 2868,
+      "url": "https://unsplash.com/photos/6-jTZysYY_U",
+      "download_url": "https://picsum.photos/id/1002/4312/2868"
+    },
+    {
+      "id": "1003",
+      "author": "E+N Photographies",
+      "width": 1181,
+      "height": 1772,
+      "url": "https://unsplash.com/photos/GYumuBnTqKc",
+      "download_url": "https://picsum.photos/id/1003/1181/1772"
+    },
+    {
+      "id": "1004",
+      "author": "Greg Rakozy",
+      "width": 5616,
+      "height": 3744,
+      "url": "https://unsplash.com/photos/SSxIGsySh8o",
+      "download_url": "https://picsum.photos/id/1004/5616/3744"
+    },
+    {
+      "id": "1005",
+      "author": "Matthew Wiebe",
+      "width": 5760,
+      "height": 3840,
+      "url": "https://unsplash.com/photos/tBtuxtLvAZs",
+      "download_url": "https://picsum.photos/id/1005/5760/3840"
+    }
+  ]

package/template/src/app/config/__tests__/mocks/token.json

@@ -0,0 +1,3 @@
+{
+    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c"
+}

package/template/src/app/config/__tests__/mocks/user.json

@@ -0,0 +1,7 @@
+{
+    "id": 123,
+    "email": "kekek@awxwax.com",
+    "first_name": "Kek",
+    "last_name": "Lol",
+    "avatar": "https://reqres.in/img/faces/2-image.jpg"
+}

package/template/src/app/config/http.ts

@@ -0,0 +1,67 @@
+import axios, {type AxiosInstance} from 'axios';
+
+import {AnyJson} from '../types/any-json';
+
+export interface RequestConfig {
+  auth?: {username: string; password: string};
+  params?: AnyJson;
+}
+
+export interface Headers {
+  [header: string]: string | number;
+}
+
+export class Http {
+  private baseURL: string;
+  private headers: Headers;
+  private axiosInstance: AxiosInstance;
+
+  public constructor(baseURL: string = '', headers: Headers = {}) {
+    this.baseURL = baseURL;
+    this.headers = headers;
+    this.axiosInstance = axios.create({baseURL, headers});
+  }
+
+  public setBaseURL(baseURL: string) {
+    this.baseURL = baseURL;
+    this.createAxiosInstance();
+  }
+
+  public addBearerToken(token: string) {
+    this.addHeader('Authorization', `Bearer ${token}`);
+  }
+
+  public addHeader(header: string, value: string | number) {
+    this.headers[header] = value;
+    this.createAxiosInstance();
+  }
+
+  public cleanHeaders() {
+    this.headers = {};
+    this.createAxiosInstance();
+  }
+
+  public async get<T>(url: string, config?: RequestConfig) {
+    const response = await this.axiosInstance.get<T>(url, config);
+    return response.data;
+  }
+
+  public async post<T>(url: string, data?: AnyJson) {
+    const response = await this.axiosInstance.post<T>(url, data);
+    return response.data;
+  }
+
+  public async put<T>(url: string, data?: AnyJson) {
+    const response = await this.axiosInstance.put<T>(url, data);
+    return response.data;
+  }
+
+  public async delete<T>(url: string, config?: RequestConfig) {
+    const response = await this.axiosInstance.delete<T>(url, config);
+    return response.data;
+  }
+
+  private createAxiosInstance() {
+    this.axiosInstance = axios.create({baseURL: this.baseURL, headers: this.headers});
+  }
+}

package/template/src/app/config/injector.ts

@@ -0,0 +1,13 @@
+type AnyClass<T> = abstract new (...args: never[]) => T;
+
+class Injector {
+  private map: Map<Object, InstanceType<typeof Object>> = new Map();
+
+  public get = <C extends AnyClass<Object>>(key: C) => this.map.get(key) as InstanceType<C>;
+
+  public set = <C extends AnyClass<Object>>(key: C, value: InstanceType<C>) => {
+    this.map.set(key, value);
+  };
+}
+
+export const injector = new Injector();

package/template/src/app/config/memory.ts

@@ -0,0 +1,22 @@
+import {MMKV} from 'react-native-mmkv';
+
+export abstract class Memory {
+  public abstract save: <T>(key: string, value: T) => void;
+
+  public abstract remove: (key: string) => void;
+
+  public abstract get: <T>(key: string) => T | null;
+}
+
+export class MMKVMemory extends Memory {
+  private storage: MMKV = new MMKV();
+
+  public save = <T>(key: string, value: T) => this.storage.set(key, JSON.stringify(value));
+
+  public remove = (key: string) => this.storage.delete(key);
+
+  public get = <T>(key: string) => {
+    const data = this.storage.getString(key);
+    return typeof data === 'string' ? (JSON.parse(data) as T) : null;
+  };
+}

package/template/src/app/infrastructure/App.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import RNBootSplash from 'react-native-bootsplash';
+import {NavigationContainer} from '@react-navigation/native';
+
+import {initLogic} from './init-logic';
+import {MainStack} from './MainStack.navigation';
+
+export const App = () => {
+  React.useEffect(() => {
+    try {
+      initLogic();
+    } finally {
+      RNBootSplash.hide();
+    }
+  });
+
+  return (
+    <NavigationContainer>
+      <MainStack />
+    </NavigationContainer>
+  );
+};

package/template/src/app/infrastructure/MainStack.navigation.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import {createNativeStackNavigator} from '@react-navigation/native-stack';
+
+import {MainStackRoutes, MainStackParamsList} from './MainStackRoutes.routes';
+import {SignUp} from './auth/screens/sign-up/SignUp.screen';
+import {Onboarding} from './onboarding/Onboarding.screen';
+import {Login} from './auth/screens/login/Login.screen';
+
+const RootStack = createNativeStackNavigator<MainStackParamsList>();
+
+export const MainStack: React.FC = () => (
+  <RootStack.Navigator screenOptions={{headerShown: false, gestureEnabled: true}} initialRouteName={MainStackRoutes.Onboarding}>
+    <RootStack.Screen name={MainStackRoutes.Onboarding} component={Onboarding} />
+    <RootStack.Screen name={MainStackRoutes.Login} component={Login} />
+    <RootStack.Screen name={MainStackRoutes.SignUp} component={SignUp} />
+  </RootStack.Navigator>
+);

package/template/src/app/infrastructure/MainStackRoutes.routes.ts

@@ -0,0 +1,11 @@
+export enum MainStackRoutes {
+  Onboarding = 'Onboarding',
+  Login = 'Login',
+  SignUp = 'SignUp',
+}
+
+export type MainStackParamsList = {
+  [MainStackRoutes.Onboarding]: undefined;
+  [MainStackRoutes.Login]: undefined;
+  [MainStackRoutes.SignUp]?: {username?: string; password?: string};
+};

package/template/src/app/infrastructure/__tests__/init-logic.test.ts

@@ -0,0 +1,24 @@
+import {Http} from '@config/http';
+import {Memory} from '@config/memory';
+import {initLogic} from '../init-logic';
+import {injector} from '@config/injector';
+import {AuthRepo} from '../auth/auth.repo';
+import {AuthService} from '../auth/auth.service';
+
+describe('init-logic', () => {
+  beforeAll(() => {
+    jest.spyOn(AuthService.prototype, 'authInit');
+  });
+
+  it('check init-logic', async () => {
+    initLogic();
+
+    expect(injector.get(Http)).toBeInstanceOf(Http);
+
+    expect(injector.get(Memory)).toBeInstanceOf(Memory);
+    expect(injector.get(AuthRepo)).toBeInstanceOf(AuthRepo);
+    expect(injector.get(AuthService)).toBeInstanceOf(AuthService);
+
+    expect(injector.get(AuthService).authInit).toHaveBeenCalled();
+  });
+});

package/template/src/app/infrastructure/auth/__tests__/auth.repo.impl.test.ts

@@ -0,0 +1,49 @@
+import {Http} from '@config/http';
+import {injector} from '@config/injector';
+import {AuthRepoImpl} from '../auth.repo.impl';
+import {MMKVMemory, Memory} from '@config/memory';
+
+describe('AuthRepo', () => {
+  let http: Http;
+  let memory: Memory;
+
+  let authRepo: AuthRepoImpl;
+
+  beforeEach(() => {
+    http = new Http();
+    memory = new MMKVMemory();
+
+    injector.set(Http, http);
+    injector.set(Memory, memory);
+
+    authRepo = new AuthRepoImpl();
+  });
+
+  it('success loginFromMemory', () => {
+    const expectedToken = 'SomeTokenMock';
+
+    jest.spyOn(memory, 'get').mockImplementationOnce(() => expectedToken);
+    jest.spyOn(http, 'addBearerToken');
+    const res = authRepo.loginFromMemory();
+
+    expect(res).toStrictEqual(expectedToken);
+    expect(http.addBearerToken).toHaveBeenCalled();
+  });
+
+  it('success/no user in memory, loginFromMemory', () => {
+    jest.spyOn(memory, 'get').mockImplementationOnce(() => null);
+    jest.spyOn(http, 'addBearerToken');
+    const res = authRepo.loginFromMemory();
+
+    expect(res).toStrictEqual(null);
+    expect(http.addBearerToken).not.toHaveBeenCalled();
+  });
+
+  it('login', async () => {
+    await expect(authRepo.login('', '')).rejects.toThrow(Error);
+  });
+
+  it('logout', async () => {
+    await expect(authRepo.logout()).rejects.toThrow(Error);
+  });
+});

package/template/src/app/infrastructure/auth/__tests__/auth.service.test.ts

@@ -0,0 +1,59 @@
+import {Http} from '@config/http';
+import {injector} from '@config/injector';
+import {AuthService} from '../auth.service';
+import {AuthRepoImpl} from '../auth.repo.impl';
+import {MMKVMemory, Memory} from '@config/memory';
+import {AuthRepo} from '../auth.repo';
+
+describe('AuthService', () => {
+  let http: Http;
+  let memory: Memory;
+  let authRepo: AuthRepoImpl;
+
+  let authService: AuthService;
+
+  beforeEach(() => {
+    http = new Http();
+    memory = new MMKVMemory();
+
+    injector.set(Http, http);
+    injector.set(Memory, memory);
+
+    authRepo = new AuthRepoImpl();
+    injector.set(AuthRepo, authRepo);
+
+    authService = new AuthService();
+  });
+
+  it('success/no user authInit', () => {
+    authService.authInit();
+
+    expect(authService.token).toBeNull();
+  });
+
+  it('success authInit', () => {
+    const expectedToken = 'SomeTokenMock';
+
+    jest.spyOn(authRepo, 'loginFromMemory').mockImplementationOnce(() => expectedToken);
+    authService.authInit();
+
+    expect(authService.token).toStrictEqual(expectedToken);
+  });
+
+  it('success login', async () => {
+    const expectedToken = 'SomeTokenMock';
+
+    jest.spyOn(authRepo, 'login').mockImplementationOnce(() => Promise.resolve(expectedToken));
+    await authService.login('', '');
+
+    expect(authService.token).toStrictEqual(expectedToken);
+  });
+
+  it('exception login', async () => {
+    await expect(authService.login('', '')).rejects.toThrow(Error);
+  });
+
+  it('logout', async () => {
+    await expect(authService.logout()).rejects.toThrow(Error);
+  });
+});

package/template/src/app/infrastructure/auth/__tests__/login.controller.test.ts

@@ -0,0 +1,42 @@
+import {Http} from '@config/http';
+import {injector} from '@config/injector';
+import {AuthService} from '../auth.service';
+import {AuthRepoImpl} from '../auth.repo.impl';
+import {MMKVMemory, Memory} from '@config/memory';
+import {AuthRepo} from '../auth.repo';
+import {LoginController} from '../screens/login/login.controller';
+
+describe('AuthService', () => {
+  let http: Http;
+  let memory: Memory;
+
+  let authRepo: AuthRepoImpl;
+
+  let authService: AuthService;
+
+  let controller: LoginController;
+
+  beforeEach(() => {
+    http = new Http();
+    memory = new MMKVMemory();
+
+    injector.set(Http, http);
+    injector.set(Memory, memory);
+
+    authRepo = new AuthRepoImpl();
+    injector.set(AuthRepo, authRepo);
+
+    authService = new AuthService();
+    injector.set(AuthService, authService);
+
+    controller = new LoginController();
+  });
+
+  it('login', async () => {
+    expect(controller.isProcessing).toBe(false);
+
+    await expect(controller.login('', '')).rejects.toThrow(Error);
+
+    expect(controller.isProcessing).toBe(false);
+  });
+});

package/template/src/app/infrastructure/auth/auth.repo.impl.ts

@@ -0,0 +1,29 @@
+import {injector} from '@config/injector';
+import {Memory} from '@config/memory';
+import {Http} from '@config/http';
+import {AuthRepo} from './auth.repo';
+
+export class AuthRepoImpl extends AuthRepo {
+  private static readonly TokenKey: string = 'USER_TOKEN';
+
+  private memory: Memory = injector.get(Memory);
+  private http: Http = injector.get(Http);
+
+  public loginFromMemory = () => {
+    const token = this.memory.get<string>(AuthRepoImpl.TokenKey);
+
+    if (token) {
+      this.http.addBearerToken(token);
+    }
+
+    return token;
+  };
+
+  public login = async (username: string, password: string): Promise<string> => {
+    throw new Error(`Not implemented login with: ${username} ${password}`);
+  };
+
+  public logout = async () => {
+    throw new Error('Not implemented');
+  };
+}

package/template/src/app/infrastructure/auth/auth.repo.ts

@@ -0,0 +1,5 @@
+export abstract class AuthRepo {
+  public abstract loginFromMemory: () => string | null;
+  public abstract login: (username: string, password: string) => Promise<string>;
+  public abstract logout: () => Promise<null>;
+}

package/template/src/app/infrastructure/auth/auth.service.ts

@@ -0,0 +1,25 @@
+import {injector} from '@config/injector';
+import {AuthRepo} from './auth.repo';
+
+export class AuthService {
+  private authRepo: AuthRepo = injector.get(AuthRepo);
+
+  private userToken: string | null = null;
+
+  public get token() {
+    return this.userToken;
+  }
+
+  public authInit() {
+    this.userToken = this.authRepo.loginFromMemory();
+  }
+
+  public async login(username: string, password: string) {
+    this.userToken = await this.authRepo.login(username, password);
+    return this.userToken;
+  }
+
+  public async logout() {
+    await this.authRepo.logout();
+  }
+}

package/template/src/app/infrastructure/auth/screens/login/Login.screen.tsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import * as yup from 'yup';
+import {useLocalObservable} from 'mobx-react-lite';
+import {yupResolver} from '@hookform/resolvers/yup';
+import {View, Text, StyleSheet} from 'react-native';
+import {CommonActions} from '@react-navigation/native';
+import {useForm, Controller, ControllerProps} from 'react-hook-form';
+import {type NativeStackScreenProps} from '@react-navigation/native-stack';
+
+import {MainStackParamsList, MainStackRoutes} from '@infra/MainStackRoutes.routes';
+import {Computools} from '@ui-kit/icons/computools/Computools.icon';
+import {InputField} from '@ui-kit/InputField.component';
+import {Button} from '@ui-kit/buttons/Button.component';
+import {LoginController} from './login.controller';
+
+enum LoginField {
+  UserName = 'username',
+  Password = 'password',
+}
+
+interface Form {
+  [LoginField.UserName]: string;
+  [LoginField.Password]: string;
+}
+
+const minPassLength = 8;
+const schema = yup
+  .object({
+    [LoginField.UserName]: yup.string().required('username is required'),
+    [LoginField.Password]: yup.string().required('password is required').min(minPassLength, 'min 8 chars'),
+  })
+  .required();
+
+export const Login: React.FC<NativeStackScreenProps<MainStackParamsList, MainStackRoutes.Login>> = ({navigation}) => {
+  const controller = useLocalObservable(() => new LoginController());
+  const {control, handleSubmit, getValues} = useForm<Form>({
+    mode: 'onBlur',
+    resolver: yupResolver(schema),
+    defaultValues: {
+      [LoginField.UserName]: '',
+      [LoginField.Password]: '',
+    },
+  });
+
+  const onLogin = async (data: Form) => {
+    try {
+      const token = await controller.login(data[LoginField.UserName], data[LoginField.Password]);
+      if (token) {
+        // TODO navigate to next flow
+        navigation.dispatch(CommonActions.navigate({name: MainStackRoutes.Onboarding}));
+      }
+    } catch {
+      // TODO: use setError from react-hook-form
+    }
+  };
+
+  const onSignUp = () => {
+    const values = getValues();
+    navigation.navigate(MainStackRoutes.SignUp, {username: values[LoginField.UserName], password: values[LoginField.Password]});
+  };
+
+  const renderUsername: ControllerProps<Form, LoginField.UserName>['render'] = ({fieldState, field}) => (
+    <InputField {...field} error={fieldState.error} containerStyle={styles.row} placeholder="Username, Mobile Number" />
+  );
+
+  const renderPassword: ControllerProps<Form, LoginField.Password>['render'] = ({fieldState, field}) => (
+    <InputField secureTextEntry {...field} error={fieldState.error} containerStyle={styles.row} placeholder="Password" />
+  );
+
+  return (
+    <View style={styles.screen}>
+      <View style={[styles.headerContainer, styles.row]}>
+        <View style={styles.iconWrapper}>
+          <Computools />
+        </View>
+        <Text style={styles.headerText}>Welcome 🤩 we glad to see you in computools rn template</Text>
+      </View>
+      <Controller name={LoginField.UserName} control={control} render={renderUsername} />
+      <Controller name={LoginField.Password} control={control} render={renderPassword} />
+      <Text style={[styles.forgetPassword, styles.row]}>Forget password?</Text>
+      <Button style={styles.row} onPress={handleSubmit(onLogin)} text="Login" />
+      <Button style={styles.row} onPress={onSignUp} text="Sign Up" />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  screen: {
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: 30,
+    paddingTop: 25,
+  },
+  headerContainer: {
+    alignItems: 'center',
+  },
+  iconWrapper: {
+    padding: 20,
+    backgroundColor: '#CDFF3A',
+    borderRadius: 15,
+  },
+  headerText: {
+    paddingTop: 10,
+    fontSize: 16,
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  row: {
+    marginBottom: 25,
+  },
+  forgetPassword: {
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+});

package/template/src/app/infrastructure/auth/screens/login/login.controller.ts

@@ -0,0 +1,27 @@
+import {makeAutoObservable} from 'mobx';
+
+import {injector} from '@config/injector';
+import {AuthService} from '@infra/auth/auth.service';
+
+export class LoginController {
+  private auth: AuthService = injector.get(AuthService);
+
+  private loginProcessing: boolean = false;
+
+  public constructor() {
+    makeAutoObservable(this);
+  }
+
+  public get isProcessing() {
+    return this.loginProcessing;
+  }
+
+  public async login(username: string, password: string) {
+    this.loginProcessing = true;
+    try {
+      return await this.auth.login(username, password);
+    } finally {
+      this.loginProcessing = false;
+    }
+  }
+}