persistence

src/App.tsx

@@ -24,7 +24,10 @@ import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import SignIn from './auth/SignIn';
 import SignUp from './auth/SignUp';
 import { Provider } from 'react-redux';
-import store from './redux/store';
+import { store, persistor } from './redux/store';
+import { PersistGate } from 'redux-persist/integration/react';
+
+
 
 const Stack = createNativeStackNavigator();
 const Tab = createMaterialBottomTabNavigator();
@@ -38,36 +41,17 @@ class App extends React.Component<any, any> {
             username: ""
         }
         store.subscribe(() => {
-            this.setState({ token: store.getState().userReducer.token });
+            this.setState({ token: store.getState().persistedUserReducer.token });
         });
     }
 
-    Auth() {
-        return <Provider store={store}>
-            <Tab.Navigator>
-                <Tab.Screen children={() => <SignIn store={store} />} name="Login" options={{ title: 'Connexion' }} />
-                <Tab.Screen children={() => <SignUp store={store} />} name="Register" options={{ title: 'Créer un compte' }} />
-            </Tab.Navigator>
-        </Provider>;
-    }
-
-    Clip() {
-        return (
-            <Tab.Navigator>
-                <Tab.Screen name="Local" options={{ title: 'local' }}>
-                    {(props) => <ClipViewLocal store={store} navigation={props.navigation} type={"local"} />}
-                </Tab.Screen>
-                <Tab.Screen name="Remote" options={{ title: 'distant' }}>
-                    {(props) => <ClipViewRemote store={store} navigation={props.navigation} type={"remote"} />}
-                </Tab.Screen>
-            </Tab.Navigator>
-        );
-    }
-
     render(): React.ReactNode {
         console.log("render app", store.getState());
         console.log("app state", this.state);
-        return <NavigationContainer>
+        return
+        <Provider store={store}>
+            <PersistGate loading={null} persistor={persistor}></PersistGate>
+            <NavigationContainer>
                 <Tab.Navigator>{
                     this.state.token === ""
                         ?
@@ -89,26 +73,8 @@ class App extends React.Component<any, any> {
                     ////////////////////////////////////////////////////////////
                 }</Tab.Navigator>
             </NavigationContainer>
+        </Provider>
     };
 }
 
-const styles = StyleSheet.create({
-    sectionContainer: {
-        marginTop: 32,
-        paddingHorizontal: 24,
-    },
-    sectionTitle: {
-        fontSize: 24,
-        fontWeight: '600',
-    },
-    sectionDescription: {
-        marginTop: 8,
-        fontSize: 18,
-        fontWeight: '400',
-    },
-    highlight: {
-        fontWeight: '700',
-    },
-});
-
 export default App;

src/clip/ClipElementLocal.tsx

@@ -10,7 +10,7 @@ export default class ClipElementLocal extends AClipElement {
 
     async sendToRemote() {
         const data = new FormData();
-        data.append("token", this.props.store.getState().userReducer.token);
+        data.append("token", this.props.store.getState().persistedUserReducer.token);
         data.append("content", this.props.content);
         data.append("deviceName", "TODOChangeThisMobileDevice");
         const sendToRemoteResponse = await fetch(

src/clip/ClipViewLocal.tsx

@@ -1,18 +1,32 @@
 import axios from 'axios';
 import React from 'react';
-import { ScrollView, Text, Button } from 'react-native';
+import { ScrollView, Text, Button, Clipboard } from 'react-native';
 import ClipList from './ClipList';
 import AClipView from './AClipView';
+import { addToLocal as addToLocalStorage } from '../redux/actions';
 
 
 export default class ClipViewLocal extends AClipView {
 
     constructor(props: any) {
         super(props);
+        this.state = {
+            localClips : []
+        };
+        this.getClips();
+        this.props.store.subscribe(() => {
+            this.setState({localClips : this.props.store.getState().persistedUserReducer.clips });
+        });
     }
 
     getClips() {
-        return [{ content: "test" }, { content: "test2" }];
+        const clips = this.props.store.getState().persistedUserReducer.clips;
+        this.setState({localClips: clips});
+    }
+
+    async addToLocal(){
+        console.log("should add clip");
+        this.props.store.dispatch(addToLocalStorage(await Clipboard.getString()));
     }
 
     componentDidMount() {
@@ -26,6 +40,7 @@ export default class ClipViewLocal extends AClipView {
         let notTitle = "Remote Clipboard";
         return <ScrollView>
             <Text style={{ fontWeight: 'bold', fontSize: 30, margin: 20 }}>{title}</Text>
+            <Button title="Coller depuis le presse papier" onPress={() => {this.addToLocal}} />
             <ClipList store={this.props.store} type={this.props.type} clips={this.state.clips} />
             {this.getSignOutBtn()}
         </ScrollView>;

src/clip/ClipViewRemote.tsx

@@ -10,7 +10,7 @@ export default class ClipViewRemote extends AClipView {
     }
 
     async getClips() {
-        const { data, status } = await axios.get("http://notifysync.simailadjalim.fr/clipboard?token=" + this.props.store.getState().userReducer.token);
+        const { data, status } = await axios.get("http://notifysync.simailadjalim.fr/clipboard?token=" + this.props.store.getState().persistedUserReducer.token);
         return Object.values(data['clipboard']);
     }
 

src/redux/actions.tsx

@@ -10,3 +10,10 @@ export function clearUser() {
         type: "auth/disconnect"
     };
 }
+
+export function addToLocal(content: string) {
+    return {
+        type: "local/add",
+        payload: {content}
+    };
+}

src/redux/persistance.tsx

@@ -0,0 +1,11 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { persistReducer } from 'redux-persist'
+import storage from 'redux-persist/lib/storage'
+import { userReducer } from "./reducers";
+
+const persistConfig = {
+    key: 'root',
+    storage: AsyncStorage,
+}
+
+export const persistedUserReducer = persistReducer(persistConfig, userReducer);

src/redux/reducers.tsx

@@ -1,4 +1,4 @@
-const initialState = { token: "" }
+const initialState = { token: "", clips: [] }
 
 export function userReducer(state = initialState, action: any) {
     switch (action.type) {
@@ -6,6 +6,8 @@ export function userReducer(state = initialState, action: any) {
             return { ...state, token: action.payload.token };
         case "auth/disconnect":
             return { ...state, token: "" };
+        case "local/add":
+            return { ...state, clips: [...state.clips, { content: action.payload.content }] };
         default:
             return state;
     }

src/redux/store.tsx

@@ -1,8 +1,12 @@
 import { createStore, combineReducers } from "redux";
 import { userReducer } from "./reducers";
+import { persistedUserReducer } from "./persistance"
+import { persistStore } from "redux-persist";
 
-export default createStore(
+export const store = createStore(
     combineReducers({
-        userReducer
+        persistedUserReducer
     })
 );
+
+export const persistor = persistStore(store);