Send to remote button

src/App.tsx

@@ -38,7 +38,6 @@ class App extends React.Component<any, any> {
             username: ""
         }
         store.subscribe(() => {
-            console.log("see a dispatch");
             this.setState({ token: store.getState().userReducer.token });
         });
     }

src/auth/SignIn.tsx

@@ -16,30 +16,36 @@ export default class SignIn extends React.Component<any, any> {
     }
 
     async signInFunction() {
+        const data = new FormData();
+        data.append("username", this.state.username);
+        data.append("password", this.state.password);
         const signInResponse = await fetch(
-            'https://notifysync.simailadjalim.fr/user?username=' + this.state.username + '&password=' + this.state.password,
+            'https://notifysync.simailadjalim.fr/user',
-            { method: 'POST' }
+            {
+                method: 'POST',
+                body: data
+            }
         );
         const signInJson = await signInResponse.json();
         if (signInJson.status === "ok") {
-            this.props.store.dispatch(setUser(signInJson.token, this.state.username));
+            this.props.store.dispatch(setUser(signInJson.token));
         } else console.log(signInJson);
     }
 
     updateUsername(event: any) {
-        this.setState({username: event.target.value});
+        this.setState({ username: event.target.value });
     }
 
     updatePassword(event: any) {
-        this.setState({password: event.target.value});
+        this.setState({ password: event.target.value });
     }
 
     render(): React.ReactNode {
         return (
             <View>
                 <Text style={{ fontWeight: 'bold', fontSize: 30, margin: 20 }}>Connexion</Text>
-                <TextInput placeholder="Nom d'utilisateur" value={this.state.username} onChange={this.updateUsername}/>
+                <TextInput placeholder="Nom d'utilisateur" value={this.state.username} onChange={this.updateUsername} />
-                <TextInput placeholder="Mot de Passe" value={this.state.password} onChange={this.updatePassword}/>
+                <TextInput placeholder="Mot de Passe" value={this.state.password} onChange={this.updatePassword} />
                 <Button title="Se connecter" onPress={this.signInFunction} />
             </View>
         );

src/auth/SignUp.tsx

@@ -18,19 +18,28 @@ export default class SignUp extends React.Component<any, any> {
     }
 
     async signUpFunction() {
+        const data = new FormData();
+        data.append("username", this.state.username);
+        data.append("password", this.state.password);
         const signUpResponse = await fetch(
-            'https://notifysync.simailadjalim.fr/user?username=' + this.state.username + '&password=' + this.state.password,
+            'https://notifysync.simailadjalim.fr/user',
-            { method: 'PUT' }
+            {
+                method: 'PUT',
+                body: data
+            }
         );
         const signUpJson = await signUpResponse.json();
         if (signUpJson.status === "ok") {
             const signInResponse = await fetch(
-                'https://notifysync.simailadjalim.fr/user?username=' + this.state.username + '&password=' + this.state.password,
+                'https://notifysync.simailadjalim.fr/user',
-                { method: 'POST' }
+                {
+                    method: 'POST',
+                    body: data
+                }
             );
             const signInJson = await signInResponse.json();
             if (signInJson.status === "ok") {
-                this.props.store.dispatch(setUser(signInJson.token, this.state.username));
+                this.props.store.dispatch(setUser(signInJson.token));
             } else console.log(signInJson);
         } else console.log(signUpJson);
     }

src/clip/ClipElementLocal.tsx

@@ -1,4 +1,4 @@
-import { View, Text } from 'react-native';
+import { View, Text, Button } from 'react-native';
 import IconVector from 'react-native-vector-icons/FontAwesome5';
 import AClipElement from './AClipElement';
 
@@ -8,9 +8,26 @@ export default class ClipElementLocal extends AClipElement {
         super(props);
     }
 
+    async sendToRemote() {
+        const data = new FormData();
+        data.append("token", this.props.store.getState().userReducer.token);
+        data.append("content", this.props.content);
+        data.append("deviceName", "TODOChangeThisMobileDevice");
+        const sendToRemoteResponse = await fetch(
+            'https://notifysync.simailadjalim.fr/clipboard',
+            {
+                method: 'PUT',
+                body: data
+            }
+        );
+        const response = await sendToRemoteResponse.json();
+        console.log(response);
+    }
+
     render(): JSX.Element {
-        return <View style={{flex:1,margin:10,flexDirection:'row',justifyContent:'space-between',alignItems:'center'}}>
+        return <View style={{ flex: 1, margin: 10, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
-            <Text style={{fontSize:20,}}>{this.props.content}</Text>
+            <Text style={{ fontSize: 20, }}>{this.props.content}</Text>
+            <Button title="Send to remote" onPress={() => this.sendToRemote()} />
             <IconVector name="clipboard" size={40} onPress={() => this.onCopy()} />
         </View>;
     }

src/clip/ClipList.tsx

@@ -10,11 +10,11 @@ export default class ClipList extends React.Component<any, any> {
     }
 
     createClipElementLocal(content: string): JSX.Element {
-        return <ClipElementLocal content={content} />;
+        return <ClipElementLocal store={this.props.store} content={content} />;
     }
 
     createClipElementRemote(content: string, deviceName: string, timestamp: number): JSX.Element {
-        return <ClipElementRemote content={content} deviceName={deviceName} timestamp={timestamp} />;
+        return <ClipElementRemote store={this.props.store} content={content} deviceName={deviceName} timestamp={timestamp} />;
     }
 
     render(): JSX.Element {

src/clip/ClipViewLocal.tsx

@@ -26,7 +26,7 @@ export default class ClipViewLocal extends AClipView {
         let notTitle = "Remote Clipboard";
         return <ScrollView>
             <Text style={{ fontWeight: 'bold', fontSize: 30, margin: 20 }}>{title}</Text>
-            <ClipList type={this.props.type} clips={this.state.clips} />
+            <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=FFmkeNAxguFM5My52PhhzlOB_1ZwDr0ureD2kzuewMlhmJ6Ia6YkhcdZd1Nw4SXdLu9Ji0gzVYCfGCcgB8v8zQ");
+        const { data, status } = await axios.get("http://notifysync.simailadjalim.fr/clipboard?token=" + this.props.store.getState().userReducer.token);
         return Object.values(data['clipboard']);
     }
 
@@ -22,7 +22,6 @@ export default class ClipViewRemote extends AClipView {
 
     render(): JSX.Element {
         let title = "Remote Clipboard";
-        let notTitle = "Local Clipboard";
         return <ScrollView>
             <Text style={{ fontWeight: 'bold', fontSize: 30, margin: 20 }}>{title}</Text>
             <ClipList type={this.props.type} clips={this.state.clips} />

src/redux/actions.tsx

@@ -1,7 +1,7 @@
-export function setUser(token: string, username: string) {
+export function setUser(token: string) {
     return {
         type: "auth/connect",
-        payload: { token, username }
+        payload: { token }
     };
 }
 

src/redux/reducers.tsx

@@ -3,7 +3,7 @@ const initialState = { token: "" }
 export function userReducer(state = initialState, action: any) {
     switch (action.type) {
         case "auth/connect":
-            return { ...state, token: action.payload.token, username: action.payload.username };
+            return { ...state, token: action.payload.token };
         case "auth/disconnect":
             return { ...state, token: "" };
         default: