🔀 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
This commit is contained in:
parent
e3b8655fe9
commit
9f4e8a1b2d
@ -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) {
|
||||
super(props);
|
||||
this.state = {
|
||||
username: '',
|
||||
password: ''
|
||||
}
|
||||
this.updateUsername = this.updateUsername.bind(this);
|
||||
this.updatePassword = this.updatePassword.bind(this);
|
||||
this.signInFunction = this.signInFunction.bind(this);
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
this.state = {
|
||||
username: '',
|
||||
password: ''
|
||||
}
|
||||
this.updateUsername = this.updateUsername.bind(this);
|
||||
this.updatePassword = this.updatePassword.bind(this);
|
||||
this.signInFunction = this.signInFunction.bind(this);
|
||||
}
|
||||
|
||||
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',
|
||||
{
|
||||
method: 'POST',
|
||||
body: data
|
||||
}
|
||||
);
|
||||
const signInJson = await signInResponse.json();
|
||||
if (signInJson.status === "ok") {
|
||||
this.props.store.dispatch(setUser(signInJson.token));
|
||||
} else console.log(signInJson);
|
||||
}
|
||||
async signInFunction() {
|
||||
const formdata = new FormData();
|
||||
formdata.append("username", this.state.username);
|
||||
formdata.append("password", this.state.password);
|
||||
axios.post("https://notifysync.simailadjalim.fr/user",{
|
||||
username:this.state.username,
|
||||
password:this.state.password
|
||||
},{headers: {'Content-Type': 'multipart/form-data'}})
|
||||
.then((response, status) => {
|
||||
this.props.store.dispatch(setUser(response.data.token));
|
||||
})
|
||||
.catch(response =>{
|
||||
console.log("error:")
|
||||
console.log(response.response.data.status);
|
||||
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) {
|
||||
this.setState({ username: username });
|
||||
}
|
||||
updateUsername(username: string) {
|
||||
this.setState({ username: username });
|
||||
}
|
||||
|
||||
updatePassword(password: string) {
|
||||
this.setState({ password: password });
|
||||
}
|
||||
updatePassword(password: string) {
|
||||
this.setState({ password: password });
|
||||
}
|
||||
|
||||
render(): React.ReactNode {
|
||||
return (
|
||||
<View>
|
||||
<Text style={{ fontWeight: 'bold', fontSize: 30, margin: 20 }}>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} />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
render(): React.ReactNode {
|
||||
return (
|
||||
<View>
|
||||
<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} />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
);
|
||||
|
||||
@ -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) {
|
||||
super(props);
|
||||
}
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
async getClips() {
|
||||
const { data, status } = await axios.get("http://notifysync.simailadjalim.fr/clipboard?token=" + this.props.store.getState().persistedUserReducer.token);
|
||||
return Object.values(data['clipboard']);
|
||||
}
|
||||
async getClips() {
|
||||
const { data, status } = await axios.get("http://notifysync.simailadjalim.fr/clipboard?token=" + this.props.store.getState().persistedUserReducer.token);
|
||||
return Object.values(data['clipboard']);
|
||||
}
|
||||
|
||||
async componentDidMount() {
|
||||
let clips;
|
||||
clips = await this.getClips();
|
||||
this.setState({clips: clips});
|
||||
}
|
||||
async componentDidMount() {
|
||||
let clips;
|
||||
clips = await this.getClips();
|
||||
this.setState({clips: clips});
|
||||
}
|
||||
|
||||
render(): JSX.Element {
|
||||
let title = "Remote Clipboard";
|
||||
return <ScrollView>
|
||||
<Text style={{ fontWeight: 'bold', fontSize: 30, margin: 20, color:"black" }}>
|
||||
{title}
|
||||
</Text>
|
||||
<Button title="Refresh" onPress={() => this.componentDidMount()} />
|
||||
<ClipList type={this.props.type} clips={this.state.clips} />
|
||||
{this.getSignOutBtn()}
|
||||
</ScrollView>;
|
||||
}
|
||||
render(): JSX.Element {
|
||||
let title = "Remote Clipboard";
|
||||
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>
|
||||
</>;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user