DjalimSimaila/ClipSync-Mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

persistence

Browse Source
This commit is contained in:
Romain CLEMENT 2023-04-09 23:56:02 +02:00
parent b91487e344
commit d1d749290a
8 changed files with 76 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
src/App.tsx
View File

@ -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,77 +41,40 @@ 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>
<Tab.Navigator>{
this.state.token === ""
?
return
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}></PersistGate>
<NavigationContainer>
<Tab.Navigator>{
this.state.token === ""
?
////////////////////////////////////////////////////////////
<>
<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.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.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.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>
</NavigationContainer>
}</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;

2
src/clip/ClipElementLocal.tsx
View File

@ -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(

19
src/clip/ClipViewLocal.tsx
View File

@ -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>;

2
src/clip/ClipViewRemote.tsx
View File

@ -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']);
}

7
src/redux/actions.tsx
View File

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

11
src/redux/persistance.tsx Normal file
View File

@ -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);

4
src/redux/reducers.tsx
View File

@ -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;
}

8
src/redux/store.tsx
View File

@ -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);