From b91487e344855c618979d271f947deabbc64bfcd Mon Sep 17 00:00:00 2001
From: Romain CLEMENT <rc2301@orange.fr>
Date: Sun, 9 Apr 2023 23:11:57 +0200
Subject: [PATCH] Send to remote button

---
 src/App.tsx                   |  1 -
 src/auth/SignIn.tsx           | 20 +++++++++++++-------
 src/auth/SignUp.tsx           | 19 ++++++++++++++-----
 src/clip/ClipElementLocal.tsx | 23 ++++++++++++++++++++---
 src/clip/ClipList.tsx         |  4 ++--
 src/clip/ClipViewLocal.tsx    |  2 +-
 src/clip/ClipViewRemote.tsx   |  3 +--
 src/redux/actions.tsx         |  4 ++--
 src/redux/reducers.tsx        |  2 +-
 9 files changed, 54 insertions(+), 24 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 2c4f0f7..8a005a9 100644
--- a/src/App.tsx
+++ b/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 });
         });
     }
diff --git a/src/auth/SignIn.tsx b/src/auth/SignIn.tsx
index ffd696c..1cd80f4 100644
--- a/src/auth/SignIn.tsx
+++ b/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,
-            { method: 'POST' }
+            'https://notifysync.simailadjalim.fr/user',
+            {
+                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="Mot de Passe" value={this.state.password} onChange={this.updatePassword}/>
+                <TextInput placeholder="Nom d'utilisateur" value={this.state.username} onChange={this.updateUsername} />
+                <TextInput placeholder="Mot de Passe" value={this.state.password} onChange={this.updatePassword} />
                 <Button title="Se connecter" onPress={this.signInFunction} />
             </View>
         );
diff --git a/src/auth/SignUp.tsx b/src/auth/SignUp.tsx
index cad338d..33ee082 100644
--- a/src/auth/SignUp.tsx
+++ b/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,
-            { method: 'PUT' }
+            'https://notifysync.simailadjalim.fr/user',
+            {
+                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,
-                { method: 'POST' }
+                'https://notifysync.simailadjalim.fr/user',
+                {
+                    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);
     }
diff --git a/src/clip/ClipElementLocal.tsx b/src/clip/ClipElementLocal.tsx
index 8db043d..1b99bf5 100644
--- a/src/clip/ClipElementLocal.tsx
+++ b/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'}}>
-            <Text style={{fontSize:20,}}>{this.props.content}</Text>
+        return <View style={{ flex: 1, margin: 10, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+            <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>;
     }
diff --git a/src/clip/ClipList.tsx b/src/clip/ClipList.tsx
index 46cfdfc..beba587 100644
--- a/src/clip/ClipList.tsx
+++ b/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 {
diff --git a/src/clip/ClipViewLocal.tsx b/src/clip/ClipViewLocal.tsx
index 141dd37..feca26b 100644
--- a/src/clip/ClipViewLocal.tsx
+++ b/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>;
     }
diff --git a/src/clip/ClipViewRemote.tsx b/src/clip/ClipViewRemote.tsx
index d69ddf0..7fbb7a5 100644
--- a/src/clip/ClipViewRemote.tsx
+++ b/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} />
diff --git a/src/redux/actions.tsx b/src/redux/actions.tsx
index e06906b..5177556 100644
--- a/src/redux/actions.tsx
+++ b/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 }
     };
 }
 
diff --git a/src/redux/reducers.tsx b/src/redux/reducers.tsx
index e5d97ff..a17f7e9 100644
--- a/src/redux/reducers.tsx
+++ b/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: