🔀 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,6 +1,8 @@
+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> {
 
@@ -16,20 +18,33 @@ export default class SignIn extends React.Component<any, any> {
   }
 
   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) {
@@ -43,7 +58,7 @@ export default class SignIn extends React.Component<any, any> {
   render(): React.ReactNode {
     return (
       <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="Mot de Passe" value={this.state.password} onChangeText={this.updatePassword} />
         <Button title="Se connecter" onPress={this.signInFunction} />

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,9 +1,7 @@
 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) {
@@ -23,13 +21,15 @@ export default class ClipViewRemote extends AClipView {
 
   render(): JSX.Element {
     let title = "Remote Clipboard";
-        return <ScrollView>
+    return <>
         <Text style={{ fontWeight: 'bold', fontSize: 30, margin: 20, color:"black" }}>
           {title}
         </Text>
+      <ScrollView>
         <Button title="Refresh" onPress={() => this.componentDidMount()} />
         <ClipList type={this.props.type} clips={this.state.clips} />
         {this.getSignOutBtn()}
-        </ScrollView>;
+      </ScrollView>
+    </>;
   }
 }