Merge pull request #2 from Aku-mi/persist_storage

Persist Storage Added
Akuqt · Sep 1, 2021 · 9477f91 · 9477f91
2 parents 87faf9a + 4dca6da
commit 9477f91
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 13 deletions.
diff --git a/cattleia-native-app/App/index.tsx b/cattleia-native-app/App/index.tsx
@@ -1,10 +1,13 @@
 import React from 'react';
 import {Provider} from 'react-redux';
-import {store} from './redux/store';
+import {store, persistor} from './redux/store';
+import {PersistGate} from 'redux-persist/integration/react';
 import {Pages} from './pages';
 
 export default () => (
   <Provider store={store}>
-    <Pages />
+    <PersistGate loading={null} persistor={persistor}>
+      <Pages />
+    </PersistGate>
   </Provider>
 );
diff --git a/cattleia-native-app/App/pages/HomePage/index.tsx b/cattleia-native-app/App/pages/HomePage/index.tsx
@@ -9,7 +9,7 @@ import {RootState} from '../../redux/store';
 type RootStackParamList = {
   Login: undefined;
   Register: undefined;
-  HomePage: {};
+  Main: undefined;
 };
 
 type Props = NativeStackScreenProps<RootStackParamList, 'Login'>;
@@ -50,6 +50,18 @@ export const HomePage: React.FC<Props> = ({navigation}) => {
           Sign In
         </Txt>
       </Btn>
+      <Btn
+        bg={colors.primary}
+        onPress={() => {
+          navigation.navigate('Main');
+        }}
+        style={{
+          borderRadius: 4,
+        }}>
+        <Txt btn colors={colors}>
+          Profile
+        </Txt>
+      </Btn>
     </Container>
   );
 };
diff --git a/cattleia-native-app/App/pages/Main/index.tsx b/cattleia-native-app/App/pages/Main/index.tsx
@@ -34,7 +34,7 @@ export const Main: React.FC = () => {
         tabBarActiveTintColor: colors.primary,
         tabBarInactiveTintColor: colors.secondary,
       })}
-      initialRouteName="Information"
+      initialRouteName="Profile"
       backBehavior="initialRoute"
       sceneContainerStyle={{
         backgroundColor: colors.bgColor,

diff --git a/cattleia-native-app/App/pages/index.tsx b/cattleia-native-app/App/pages/index.tsx
@@ -20,10 +20,10 @@ const Stack = createNativeStackNavigator();
 export const Pages = () => {
   const colorScheme = useColorScheme();
   const dispatch = useDispatch();
+  const darkTheme = useSelector((state: RootState) => state.themeReducer.dark);
   useEffect(() => {
-    dispatch(setMode(colorScheme === 'dark'));
+    dispatch(setMode(colorScheme === 'dark' || darkTheme));
   }, []);
-  const darkTheme = useSelector((state: RootState) => state.themeReducer.dark);
   const colors = darkTheme ? theme.dark : theme.light;
   return (
     <NavigationContainer>
@@ -34,11 +34,7 @@ export const Pages = () => {
           animation: 'slide_from_right',
           contentStyle: {backgroundColor: colors.bgColor},
         }}>
-        <Stack.Screen
-          name="Main"
-          component={Main}
-          options={{headerShown: false}}
-        />
+        <Stack.Screen name="Main" component={Main} />
         <Stack.Screen name="HomePage" component={HomePage} />
         <Stack.Screen name="Login" component={Login} />
         <Stack.Screen name="Register" component={Register} />

diff --git a/cattleia-native-app/App/redux/store.ts b/cattleia-native-app/App/redux/store.ts
@@ -1,10 +1,40 @@
-import {configureStore} from '@reduxjs/toolkit';
+import {configureStore, combineReducers} from '@reduxjs/toolkit';
 import themeReducer from './theme';
 import userReducer from './user';
 
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import {
+  persistStore,
+  persistReducer,
+  FLUSH,
+  PAUSE,
+  PERSIST,
+  PURGE,
+  REGISTER,
+  REHYDRATE,
+} from 'redux-persist';
+
+const persistConfig = {
+  key: 'root',
+  storage: AsyncStorage,
+};
+
+const rootReducer = combineReducers({
+  themeReducer: persistReducer(persistConfig, themeReducer),
+  userReducer: persistReducer(persistConfig, userReducer),
+});
+
 export const store = configureStore({
-  reducer: {themeReducer, userReducer},
+  reducer: rootReducer,
+  middleware: getDefaultMiddleware =>
+    getDefaultMiddleware({
+      serializableCheck: {
+        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
+      },
+    }),
 });
 
+export const persistor = persistStore(store);
+
 export type RootState = ReturnType<typeof store.getState>;
 export type AppDispatch = typeof store.dispatch;
diff --git a/cattleia-native-app/package.json b/cattleia-native-app/package.json
@@ -10,12 +10,14 @@
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
   },
   "dependencies": {
+    "@react-native-async-storage/async-storage": "^1.15.7",
     "@react-navigation/bottom-tabs": "^6.0.2",
     "@react-navigation/drawer": "^6.1.0",
     "@react-navigation/native": "^6.0.2",
     "@react-navigation/native-stack": "^6.0.3",
     "@reduxjs/toolkit": "^1.6.1",
     "axios": "^0.21.1",
+    "immutable": "3.8.2",
     "react": "17.0.1",
     "react-native": "0.64.2",
     "react-native-dropdown-picker": "^5.1.23",
@@ -25,6 +27,7 @@
     "react-native-screens": "^3.5.0",
     "react-native-vector-icons": "^8.1.0",
     "react-redux": "^7.2.4",
+    "redux-persist": "^6.0.0",
     "styled-components": "^5.3.0"
   },
   "devDependencies": {

diff --git a/cattleia-native-app/yarn.lock b/cattleia-native-app/yarn.lock
@@ -989,6 +989,13 @@
     "@types/yargs" "^15.0.0"
     chalk "^4.0.0"
 
+"@react-native-async-storage/async-storage@^1.15.7":
+  version "1.15.7"
+  resolved "https://registry.yarnpkg.com/@react-native-async-storage/async-storage/-/async-storage-1.15.7.tgz#736ac5cfe211b081e70389e80c237398d1451f08"
+  integrity sha512-ctD51BxjBxSSZ/3xCxQ//e10nP3rWFuOABsOGCGCqCXO4ypznK+fcWONHI6fIZubfV5KdyBJnNXcKtXRjocE5Q==
+  dependencies:
+    merge-options "^3.0.4"
+
 "@react-native-community/cli-debugger-ui@^5.0.1":
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/@react-native-community/cli-debugger-ui/-/cli-debugger-ui-5.0.1.tgz#6b1f3367b8e5211e899983065ea2e72c1901d75f"
@@ -3465,6 +3472,11 @@ immer@^9.0.1:
   resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.5.tgz#a7154f34fe7064f15f00554cc94c66cc0bf453ec"
   integrity sha512-2WuIehr2y4lmYz9gaQzetPR2ECniCifk4ORaQbU3g5EalLt+0IVTosEPJ5BoYl/75ky2mivzdRzV8wWgQGOSYQ==
 
+immutable@3.8.2:
+  version "3.8.2"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.2.tgz#c2439951455bb39913daf281376f1530e104adf3"
+  integrity sha1-wkOZUUVbs5kT2vKBN28VMOEErfM=
+
 import-fresh@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-2.0.0.tgz#d81355c15612d386c61f9ddd3922d4304822a546"
@@ -3708,6 +3720,11 @@ is-number@^7.0.0:
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
   integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
 
+is-plain-obj@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-2.1.0.tgz#45e42e37fccf1f40da8e5f76ee21515840c09287"
+  integrity sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==
+
 is-plain-object@^2.0.3, is-plain-object@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
@@ -4587,6 +4604,13 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+merge-options@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/merge-options/-/merge-options-3.0.4.tgz#84709c2aa2a4b24c1981f66c179fe5565cc6dbb7"
+  integrity sha512-2Sug1+knBjkaMsMgf1ctR1Ujx+Ayku4EdJN4Z+C2+JzoeF7A3OZ9KM2GY0CpQS51NR61LTurMJrRKPhSs3ZRTQ==
+  dependencies:
+    is-plain-obj "^2.1.0"
+
 merge-stream@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
@@ -5736,6 +5760,11 @@ rechoir@^0.6.2:
   dependencies:
     resolve "^1.1.6"
 
+redux-persist@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/redux-persist/-/redux-persist-6.0.0.tgz#b4d2972f9859597c130d40d4b146fecdab51b3a8"
+  integrity sha512-71LLMbUq2r02ng2We9S215LtPu3fY0KgaGE0k8WRgl6RkqxtGfl7HUozz1Dftwsb0D/5mZ8dwAaPbtnzfvbEwQ==
+
 redux-thunk@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622"