🔀 refactor(SignIn.tsx): switch from fetch to axios for better error handling and readability

🍞 feat(SignIn.tsx): add Toast notifications for sign-in errors for better user feedback
🔧 fix(ClipElementLocal.tsx): change icon name to 'paper-plane' for better UX
🔄 refactor(ClipViewRemote.tsx): adjust layout for better readability and UX

src/auth/SignIn.tsx

@@ -1,53 +1,68 @@
+import axios from 'axios';
 import React from 'react';
 import { View, Text, Button, TextInput } from 'react-native';
 import { setUser } from '../redux/actions';
+import Toast from 'react-native-simple-toast';
 
 export default class SignIn extends React.Component<any, any> {
 
-    constructor(props: any) {
+  constructor(props: any) {
-        super(props);
+    super(props);
-        this.state = {
+    this.state = {
-            username: '',
+      username: '',
-            password: ''
+      password: ''
-        }
-        this.updateUsername = this.updateUsername.bind(this);
-        this.updatePassword = this.updatePassword.bind(this);
-        this.signInFunction = this.signInFunction.bind(this);
     }
+    this.updateUsername = this.updateUsername.bind(this);
+    this.updatePassword = this.updatePassword.bind(this);
+    this.signInFunction = this.signInFunction.bind(this);
+  }
 
-    async signInFunction() {
+  async signInFunction() {
-        const data = new FormData();
+    const formdata = new FormData();
-        data.append("username", this.state.username);
+    formdata.append("username", this.state.username);
-        data.append("password", this.state.password);
+    formdata.append("password", this.state.password);
-        const signInResponse = await fetch(
+    axios.post("https://notifysync.simailadjalim.fr/user",{
-            'https://notifysync.simailadjalim.fr/user',
+      username:this.state.username,
-            {
+      password:this.state.password
-                method: 'POST',
+    },{headers: {'Content-Type': 'multipart/form-data'}})
-                body: data
+      .then((response, status) => {
-            }
+       this.props.store.dispatch(setUser(response.data.token));
-        );
+      })
-        const signInJson = await signInResponse.json();
+      .catch(response =>{
-        if (signInJson.status === "ok") {
+        console.log("error:")
-            this.props.store.dispatch(setUser(signInJson.token));
+        console.log(response.response.data.status);
-        } else console.log(signInJson);
+        Toast.show(response.response.data.status,Toast.SHORT);
-    }
+      });
+    //console.log("test");
+    //const signInJson = data;
+    //const signInResponse = await fetch(
+    //  'https://notifysync.simailadjalim.fr/user',
+    //  {
+    //    method: 'POST',
+    //    body: formdata
+    //  }
+    //);
+    //const signInJson = await signInResponse.json();:width:,
+    //if (status === 200){
+    //} else console.log("prout" ,signInJson);
+  }
 
-    updateUsername(username: string) {
+  updateUsername(username: string) {
-        this.setState({ username: username });
+    this.setState({ username: username });
-    }
+  }
 
-    updatePassword(password: string) {
+  updatePassword(password: string) {
-        this.setState({ password: password });
+    this.setState({ password: password });
-    }
+  }
 
-    render(): React.ReactNode {
+  render(): React.ReactNode {
-        return (
+    return (
-            <View>
+      <View>
-                <Text style={{ fontWeight: 'bold', fontSize: 30, margin: 20 }}>Connexion</Text>
+        <Text style={{ fontWeight: 'bold', fontSize: 30, margin: 20, color:"black" }}>Connexion</Text>
-                <TextInput placeholder="Nom d'utilisateur" value={this.state.username} onChangeText={this.updateUsername} />
+        <TextInput placeholder="Nom d'utilisateur" value={this.state.username} onChangeText={this.updateUsername} />
-                <TextInput placeholder="Mot de Passe" value={this.state.password} onChangeText={this.updatePassword} />
+        <TextInput placeholder="Mot de Passe" value={this.state.password} onChangeText={this.updatePassword} />
-                <Button title="Se connecter" onPress={this.signInFunction} />
+        <Button title="Se connecter" onPress={this.signInFunction} />
-            </View>
+      </View>
-        );
+    );
-    }
+  }
 }

src/clip/ClipElementLocal.tsx

@@ -20,6 +20,7 @@ export default function ClipElementLocal({content, store}:{content: string,store
     );
     data.append('content', content);
     data.append('deviceName', 'TODOChangeThisMobileDevice');
+    console.log(data);
     const sendToRemoteResponse = await fetch(
       'https://notifysync.simailadjalim.fr/clipboard',
       {
@@ -41,7 +42,7 @@ export default function ClipElementLocal({content, store}:{content: string,store
           
         }}>
         <Text style={{fontSize: 20,color:"black"}}>{content.length >28 ?content.slice(0,24)+"...":content }</Text>
-        <IconVector name="sendTo" size={40} color="black"  onPress={() => sendToRemote()} />
+        <IconVector name="paper-plane" size={40} color="black"  onPress={() => sendToRemote()} />
         <IconVector name="clipboard" size={40} color="black" onPress={() => onCopy()} />
       </View>
     );

src/clip/ClipViewRemote.tsx

@@ -1,35 +1,35 @@
 import axios from 'axios';
-import React from 'react';
 import { ScrollView, Text, Button } from 'react-native';
 import ClipList from './ClipList';
 import AClipView from './AClipView';
-import { black } from 'react-native-paper/lib/typescript/styles/themes/v2/colors';
 
 export default class ClipViewRemote extends AClipView {
-    constructor(props: any) {
+  constructor(props: any) {
-        super(props);
+    super(props);
-    }
+  }
 
-    async getClips() {
+  async getClips() {
-        const { data, status } = await axios.get("http://notifysync.simailadjalim.fr/clipboard?token=" + this.props.store.getState().persistedUserReducer.token);
+    const { data, status } = await axios.get("http://notifysync.simailadjalim.fr/clipboard?token=" + this.props.store.getState().persistedUserReducer.token);
-        return Object.values(data['clipboard']);
+    return Object.values(data['clipboard']);
-    }
+  }
 
-    async componentDidMount() {
+  async componentDidMount() {
-        let clips;
+    let clips;
-        clips = await this.getClips();
+    clips = await this.getClips();
-        this.setState({clips: clips});
+    this.setState({clips: clips});
-    }
+  }
 
-    render(): JSX.Element {
+  render(): JSX.Element {
-        let title = "Remote Clipboard";
+    let title = "Remote Clipboard";
-        return <ScrollView>
+    return <>
-            <Text style={{ fontWeight: 'bold', fontSize: 30, margin: 20, color:"black" }}>
+        <Text style={{ fontWeight: 'bold', fontSize: 30, margin: 20, color:"black" }}>
-                {title}
+          {title}
-            </Text>
+        </Text>
-            <Button title="Refresh" onPress={() => this.componentDidMount()} />
+      <ScrollView>
-            <ClipList type={this.props.type} clips={this.state.clips} />
+        <Button title="Refresh" onPress={() => this.componentDidMount()} />
-            {this.getSignOutBtn()}
+        <ClipList type={this.props.type} clips={this.state.clips} />
-        </ScrollView>;
+        {this.getSignOutBtn()}
-    }
+      </ScrollView>
+    </>;
+  }
 }