Networking improvements (#31)

add auth token setup; improve on networking types; post rn upgrade build / test fixes
brains-and-beards · Jun 22, 2023 · e659fab · e659fab
1 parent 10503f3
commit e659fab
Show file tree

Hide file tree

Showing 47 changed files with 1,042 additions and 233 deletions.
diff --git a/README.md b/README.md
@@ -10,11 +10,20 @@ npx react-native init MyProject --template https://github.com/brains-and-beards/
 
 Project inits with some demo usage files. You can browse them to see the proposed usage patterns. After init feel free to remove them:
 
+- `src/__mocks__/fixtures`
+- `src/api/mappers/comicMappers.ts`
+- `src/api/types/comic.types.ts`
 - `src/api/comics.ts`
+- `src/components/inputs/DemoTextInput.tsx`
 - `src/components/surfaces/DemoCard.tsx`
 - `src/localization/pl`
-- `src/model/ComicModel.ts`
+- `src/screens/LoginScreen.tsx`
 - `src/screens/DemoScreen.tsx`
 - `src/screens/DemoScreen.test.tsx`
 - `src/screens/TranslationsDemoScreen`
 - `src/screens/demoSlice.ts`
+- `src/screens/__tests__/demoSlice.test.ts`
+
+## Security
+
+Project contains basic code for auth token management. It stores sensitive information with [react-native-encrypted-storage](https://github.com/emeraldsanto/react-native-encrypted-storage#readme) library. Although it has been listed in [react-native's official docs](https://reactnative.dev/docs/security#:~:text=react%2Dnative%2Dencrypted%2Dstorage%20%2D%20uses%20Keychain%20on%20iOS%20and%20EncryptedSharedPreferences%20on%20Android.), it's a community-maintained package. **Use at your own risk** or replace it with your own implementation.
diff --git a/template/.buckconfig b/template/.buckconfig
diff --git a/template/.eslintrc.js b/template/.eslintrc.js
@@ -15,6 +15,7 @@ module.exports = {
     'prettier',
     'jest',
     'eslint-comments',
+    '@jambit/typed-redux-saga',
   ],
   env: {
     'react-native/react-native': true,
@@ -65,6 +66,11 @@ module.exports = {
     // React-Native Plugin
 
     'react-native/no-inline-styles': 1,
+
+    // Typed Redux Saga Plugin
+
+    '@jambit/typed-redux-saga/use-typed-effects': 'error', // ensures, that you import from typed-redux-saga instead of redux-saga/effects
+    '@jambit/typed-redux-saga/delegate-effects': 'error', // ensures, that you use yield* on effects from typed-redux-saga
   },
   settings: {
     react: {

diff --git a/template/.node-version b/template/.node-version
@@ -1 +1 @@
-16
+18
diff --git a/template/.prettierrc.js b/template/.prettierrc.js
@@ -14,7 +14,6 @@ module.exports = {
     '^@hoc/(.*)$',
     '^@hooks/(.*)$',
     '^@localization/(.*)$',
-    '^@models/(.*)$',
     '^@navigation/(.*)$',
     '^@redux/(.*)$',
     '^@screens/(.*)$',

diff --git a/template/README.md b/template/README.md
@@ -2,14 +2,19 @@
 
 This app has been generated using [react-native-template-redbeard](https://github.com/brains-and-beards/react-native-template-redbeard). It includes preconfigured file structure and packages. It also inits with some demo usage files, feel free to remove these:
 
+- `src/__mocks__/fixtures`
+- `src/api/mappers/comicMappers.ts`
+- `src/api/types/comic.types.ts`
 - `src/api/comics.ts`
+- `src/components/inputs/DemoTextInput.tsx`
 - `src/components/surfaces/DemoCard.tsx`
 - `src/localization/pl`
-- `src/model/ComicModel.ts`
+- `src/screens/LoginScreen.tsx`
 - `src/screens/DemoScreen.tsx`
 - `src/screens/DemoScreen.test.tsx`
 - `src/screens/TranslationsDemoScreen`
 - `src/screens/demoSlice.ts`
+- `src/screens/__tests__/demoSlice.test.ts`
 
 ## File tree
 
@@ -28,6 +33,10 @@ This app has been generated using [react-native-template-redbeard](https://githu
 - `screens/` - App screens
 - `utils/` - Universal helpers
 
+## Authentication
+
+App uses preconfigured auth token management. It stores sensitive information via [react-native-encrypted-storage](https://github.com/emeraldsanto/react-native-encrypted-storage#readme) library.
+
 ## Environments
 
 There are three different environments preconfigured with [react-native-config](https://github.com/luggit/react-native-config). Use `.env.[development|staging|production]` files to place things like `API_URL`s etc.  

diff --git a/template/android/app/build.gradle b/template/android/app/build.gradle
@@ -34,7 +34,7 @@ react {
     //   The list of variants to that are debuggable. For those we're going to
     //   skip the bundling of the JS bundle and the assets. By default is just 'debug'.
     //   If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants.
-    // debuggableVariants = ["liteDebug", "prodDebug"]
+    debuggableVariants = ["developmentDebug", "stagingDebug", "productionDebug"]
     /* Bundling */
     //   A list containing the node command and its flags. Default is just 'node'.
     // nodeExecutableAndArgs = ["node"]
@@ -62,12 +62,6 @@ react {
     // hermesFlags = ["-O", "-output-source-map"]
 }
 
-project.ext.react = [
-    enableHermes: true,  // clean and rebuild if changing
-]
-
-apply from: "../../node_modules/react-native/react.gradle"
-
 /**
  * Set this to true to create four separate APKs instead of one,
  * one for each native architecture. This is useful if you don't
@@ -94,15 +88,6 @@ def enableProguardInReleaseBuilds = false
  */
 def jscFlavor = 'org.webkit:android-jsc:+'
 
-/**
- * Whether to enable the Hermes VM.
- *
-* This should be set on project.ext.react and that value will be read here. If it is not set
- * on project.ext.react, JavaScript will not be compiled to Hermes Bytecode
- * and the benefits of using Hermes will therefore be sharply reduced.
- */
-def enableHermes = project.ext.react.get("enableHermes", false);
-
 /**
  * Architectures to build native code for.
  */

diff --git a/template/android/app/src/main/java/com/helloworld/MainActivity.java b/template/android/app/src/main/java/com/helloworld/MainActivity.java
@@ -38,26 +38,6 @@ protected ReactActivityDelegate createReactActivityDelegate() {
            );
   }
 
-  public static class MainActivityDelegate extends ReactActivityDelegate {
-    public MainActivityDelegate(ReactActivity activity, String mainComponentName) {
-      super(activity, mainComponentName);
-    }
-    @Override
-    protected ReactRootView createRootView() {
-      ReactRootView reactRootView = new ReactRootView(getContext());
-      // If you opted-in for the New Architecture, we enable the Fabric Renderer.
-      reactRootView.setIsFabric(BuildConfig.IS_NEW_ARCHITECTURE_ENABLED);
-      return reactRootView;
-    }
-
-    @Override
-    protected boolean isConcurrentRootEnabled() {
-      // If you opted-in for the New Architecture, we enable Concurrent Root (i.e. React 18).
-      // More on this on https://reactjs.org/blog/2022/03/29/react-v18.html
-      return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED;
-    }
-  }
-
   @Override
   protected void onCreate(Bundle savedInstanceState) {
     SplashScreen.show(this, R.style.SplashScreen_SecondTheme, true);

diff --git a/template/babel.config.js b/template/babel.config.js
@@ -29,7 +29,6 @@ module.exports = {
           '@hoc': './src/hoc',
           '@hooks': './src/hooks',
           '@localization': './src/localization',
-          '@models': './src/models',
           '@navigation': './src/navigation',
           '@redux': './src/redux',
           '@screens': './src/screens',

diff --git a/template/jest.setup.ts b/template/jest.setup.ts
@@ -1,9 +1,8 @@
+import { enableFetchMocks } from 'jest-fetch-mock'
 import 'react-native-gesture-handler/jestSetup'
+import { Middleware } from 'redux'
 
-jest.useFakeTimers()
-
-const customGlobal = global
-customGlobal.fetch = require('jest-fetch-mock')
+enableFetchMocks()
 
 // react-native-config-node: read env variables from .env.example
 process.env.NODE_ENV = 'example'
@@ -34,3 +33,25 @@ jest.mock('react-native-splash-screen', () => ({
   show: jest.fn(),
   hide: jest.fn(),
 }))
+jest.mock('react-native-encrypted-storage', () => ({
+  setItem: jest.fn(() => Promise.resolve(true)),
+  getItem: jest.fn(() => Promise.resolve('fake-stored-value')),
+  removeItem: jest.fn(() => Promise.resolve()),
+  clear: jest.fn(() => Promise.resolve()),
+}))
+jest.mock('redux-persist', () => {
+  const real = jest.requireActual('redux-persist')
+  return {
+    ...real,
+    persistReducer: jest.fn().mockImplementation((_config, reducers) => reducers),
+  }
+})
+jest.mock('react-native-mmkv-flipper-plugin', () => ({
+  initializeMMKVFlipper: jest.fn(),
+}))
+jest.mock('redux-flipper', () => {
+  const fakeMiddleware: Middleware = _store => next => action => next(action)
+  return {
+    default: jest.fn(() => fakeMiddleware),
+  }
+})
diff --git a/template/package.json b/template/package.json
@@ -3,11 +3,11 @@
   "version": "0.0.1",
   "private": true,
   "scripts": {
-    "android:dev": "react-native run-android --variant=developmentdebug --appIdSuffix development",
+    "android:dev": "react-native run-android --variant=developmentDebug --appIdSuffix development",
     "android:devRelease": "react-native run-android --variant=developmentrelease --appIdSuffix development",
-    "android:stg": "react-native run-android --variant=stagingdebug --appIdSuffix staging",
+    "android:stg": "react-native run-android --variant=stagingDebug --appIdSuffix staging",
     "android:stgRelease": "react-native run-android --variant=stagingrelease --appIdSuffix staging",
-    "android:prod": "react-native run-android --variant=productiondebug",
+    "android:prod": "react-native run-android --variant=productionDebug",
     "android:prodRelease": "react-native run-android --variant=productionrelease",
     "ios:dev": "react-native run-ios --scheme Development",
     "ios:stg": "react-native run-ios --scheme Staging",
@@ -30,8 +30,11 @@
     "react-i18next": "^11.11.4",
     "react-native": "0.71.6",
     "react-native-config": "^1.4.3",
+    "react-native-encrypted-storage": "^4.0.3",
     "react-native-flipper": "^0.178.1",
     "react-native-gesture-handler": "^1.10.3",
+    "react-native-mmkv": "^2.8.0",
+    "react-native-mmkv-flipper-plugin": "^1.0.0",
     "react-native-reanimated": "^2.8.0",
     "react-native-safe-area-context": "^3.2.0",
     "react-native-screens": "^3.4.0",
@@ -40,12 +43,15 @@
     "react-redux": "^7.2.4",
     "redux": "^4.1.0",
     "redux-flipper": "^2.0.1",
-    "redux-saga": "^1.1.3"
+    "redux-persist": "^6.0.0",
+    "redux-saga": "^1.1.3",
+    "typed-redux-saga": "^1.5.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@babel/preset-env": "^7.20.0",
     "@babel/runtime": "^7.20.0",
+    "@jambit/eslint-plugin-typed-redux-saga": "^0.4.0",
     "@react-native-community/eslint-config": "^3.2.0",
     "@testing-library/jest-native": "^4.0.1",
     "@testing-library/react-native": "^7.2.0",

diff --git a/template/src/__mocks__/mockedApi.ts b/template/src/__mocks__/mockedApi.ts
diff --git a/template/src/models/RemoteData.ts → template/src/api/RemoteData.ts b/template/src/models/RemoteData.ts → template/src/api/RemoteData.ts
diff --git a/template/src/api/apiSaga.ts b/template/src/api/apiSaga.ts
diff --git a/template/src/api/auth.ts b/template/src/api/auth.ts
@@ -0,0 +1,21 @@
+import { AuthTokens } from './common'
+import { Credentials } from './types/auth.types'
+
+// This is the place where you want to call your auth provider API
+
+export const logIn = (_credentials: Credentials) => {
+  return new Promise<{ accessToken: string; refreshToken: string }>(resolve => {
+    const fakeAuthTokens = { accessToken: 'FAKE_ACCESS_TOKEN', refreshToken: 'FAKE_REFRESH_TOKEN' }
+    setTimeout(() => resolve(fakeAuthTokens), 500)
+  })
+}
+
+export const refreshTokens = (_refreshToken: AuthTokens['refreshToken']) => {
+  return new Promise<{ accessToken: string; refreshToken: string }>(resolve => {
+    const fakeRefreshedAuthTokens = {
+      accessToken: 'REFRESHED_ACCESS_TOKEN',
+      refreshToken: 'REFRESHED_REFRESH_TOKEN',
+    }
+    setTimeout(() => resolve(fakeRefreshedAuthTokens), 500)
+  })
+}