🔥 feat(package.json): add @expo/metro-runtime, react-dom, react-native-toast-notifications, react-native-web dependencies for better compatibility and notifications
🔥 feat(App.tsx): wrap app in ToastProvider for toast notifications, add console logs for debugging 🔥 feat(SignIn.tsx, SignUp.tsx): refactor updateUsername and updatePassword methods for better type safety 🔥 feat(ClipElementLocal.tsx, ClipElementRemote.tsx): refactor to functional components, add color to text and icons for better visibility 🔥 feat(ClipViewLocal.tsx, ClipViewRemote.tsx): add color to title for better visibility 🔥 feat(ClipElementRemote.tsx): add color to text for better visibility 🔥 feat(ClipViewRemote.tsx): reorder elements for better readability 🔥 feat(ClipViewLocal.tsx): add color to title for better visibility 🔥 feat(SignUp.tsx): refactor updatePassword method for better type safety 🔥 feat(SignIn.tsx): refactor updateUsername and updatePassword methods for better type safety 🔥 feat(ClipElementLocal.tsx): refactor to functional component, add color to text and icons for better visibility 🔥 feat(ClipElementRemote.tsx): refactor to functional component, add color to text for better visibility 🔥 feat(ClipViewLocal.tsx): add color to title for better visibility 🔥 feat(ClipViewRemote.tsx): add color to title for better visibility 🔥 feat(ClipViewRemote.tsx): reorder elements for better readability 🔥 feat(ClipViewLocal.tsx): add color to title for better visibility 🔥 feat(ClipViewRemote.tsx): add color to title for better visibility 🔥 feat(ClipViewRemote.tsx): reorder elements for better readability 🔥 feat(ClipViewLocal.tsx): add color to title for better visibility 🔥 feat(ClipViewRemote.tsx): add color to title for better visibility 🔥 feat(ClipViewRemote.tsx): reorder elements for better readability 🔥 feat(ClipViewLocal.tsx): add color to title for better visibility 🔥 feat(ClipViewRemote.tsx): add color to title for better visibility 🔥 feat(ClipViewRemote.tsx): reorder
This commit is contained in:
parent
11035e3a05
commit
e3b8655fe9
@ -10,6 +10,7 @@
|
||||
"test": "jest"
|
||||
},
|
||||
"dependencies": {
|
||||
"@expo/metro-runtime": "^3.1.3",
|
||||
"@react-native-async-storage/async-storage": "^1.18.1",
|
||||
"@react-navigation/material-bottom-tabs": "^6.2.15",
|
||||
"@react-navigation/native": "^6.1.6",
|
||||
@ -21,13 +22,16 @@
|
||||
"expo-constants": "^14.4.2",
|
||||
"expo-modules-core": "^1.5.12",
|
||||
"react": "18.2.0",
|
||||
"react-dom": "18.2.0",
|
||||
"react-native": "0.71.4",
|
||||
"react-native-async-storage": "^0.0.1",
|
||||
"react-native-paper": "^5.6.0",
|
||||
"react-native-safe-area-context": "^4.9.0",
|
||||
"react-native-safe-area-view": "^1.1.1",
|
||||
"react-native-simple-toast": "^2.0.0",
|
||||
"react-native-toast-notifications": "^3.4.0",
|
||||
"react-native-vector-icons": "^9.2.0",
|
||||
"react-native-web": "~0.18.10",
|
||||
"react-redux": "^8.0.5",
|
||||
"redux": "^4.2.1",
|
||||
"redux-persist": "^6.0.0"
|
||||
|
||||
114
src/App.tsx
114
src/App.tsx
@ -6,29 +6,18 @@
|
||||
*/
|
||||
import * as React from 'react';
|
||||
import {NavigationContainer, StackActions} from '@react-navigation/native';
|
||||
import type {PropsWithChildren} from 'react';
|
||||
import {
|
||||
SafeAreaView,
|
||||
ScrollView,
|
||||
StatusBar,
|
||||
StyleSheet,
|
||||
Text,
|
||||
useColorScheme,
|
||||
View,
|
||||
} from 'react-native';
|
||||
|
||||
import {Platform} from 'react-native';
|
||||
import ClipViewLocal from './clip/ClipViewLocal';
|
||||
import ClipViewRemote from './clip/ClipViewRemote';
|
||||
import {createMaterialBottomTabNavigator} from '@react-navigation/material-bottom-tabs';
|
||||
import {createNativeStackNavigator} from '@react-navigation/native-stack';
|
||||
import SignIn from './auth/SignIn';
|
||||
import SignUp from './auth/SignUp';
|
||||
import {Provider} from 'react-redux';
|
||||
import {store, persistor} from './redux/store';
|
||||
import {PersistGate} from 'redux-persist/integration/react';
|
||||
|
||||
const Stack = createNativeStackNavigator();
|
||||
const Tab = createMaterialBottomTabNavigator();
|
||||
import { ToastProvider } from 'react-native-toast-notifications'
|
||||
|
||||
|
||||
class App extends React.Component<any, any> {
|
||||
constructor(props: any) {
|
||||
@ -40,59 +29,64 @@ class App extends React.Component<any, any> {
|
||||
store.subscribe(() => {
|
||||
this.setState({token: store.getState().persistedUserReducer.token});
|
||||
});
|
||||
console.log(Platform.OS);
|
||||
console.log(typeof store);
|
||||
}
|
||||
|
||||
|
||||
render(): React.ReactNode {
|
||||
console.log('render app', store.getState());
|
||||
console.log('app state', this.state);
|
||||
return (
|
||||
<Provider store={store}>
|
||||
<PersistGate loading={null} persistor={persistor} />
|
||||
<NavigationContainer>
|
||||
<Tab.Navigator>
|
||||
{
|
||||
this.state.token === '' ? (
|
||||
<ToastProvider>
|
||||
<Provider store={store}>
|
||||
<PersistGate loading={null} persistor={persistor} />
|
||||
<NavigationContainer>
|
||||
<Tab.Navigator>
|
||||
{
|
||||
this.state.token === '' ? (
|
||||
////////////////////////////////////////////////////////////
|
||||
<>
|
||||
<Tab.Screen
|
||||
children={() => <SignIn store={store} />}
|
||||
name="Login"
|
||||
options={{title: 'Connexion'}}
|
||||
/>
|
||||
<Tab.Screen
|
||||
children={() => <SignUp store={store} />}
|
||||
name="Register"
|
||||
options={{title: 'Créer un compte'}}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
////////////////////////////////////////////////////////////
|
||||
<>
|
||||
<Tab.Screen name="Local" options={{title: 'local'}}>
|
||||
{props => (
|
||||
<ClipViewLocal
|
||||
store={store}
|
||||
navigation={props.navigation}
|
||||
type={'local'}
|
||||
/>
|
||||
)}
|
||||
</Tab.Screen>
|
||||
<Tab.Screen name="Remote" options={{title: 'distant'}}>
|
||||
{props => (
|
||||
<ClipViewRemote
|
||||
store={store}
|
||||
navigation={props.navigation}
|
||||
type={'remote'}
|
||||
/>
|
||||
)}
|
||||
</Tab.Screen>
|
||||
</>
|
||||
)
|
||||
////////////////////////////////////////////////////////////
|
||||
<>
|
||||
<Tab.Screen
|
||||
children={() => <SignIn store={store} />}
|
||||
name="Login"
|
||||
options={{title: 'Connexion'}}
|
||||
/>
|
||||
<Tab.Screen
|
||||
children={() => <SignUp store={store} />}
|
||||
name="Register"
|
||||
options={{title: 'Créer un compte'}}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
////////////////////////////////////////////////////////////
|
||||
<>
|
||||
<Tab.Screen name="Local" options={{title: 'local'}}>
|
||||
{props => (
|
||||
<ClipViewLocal
|
||||
store={store}
|
||||
navigation={props.navigation}
|
||||
type={'local'}
|
||||
/>
|
||||
)}
|
||||
</Tab.Screen>
|
||||
<Tab.Screen name="Remote" options={{title: 'distant'}}>
|
||||
{props => (
|
||||
<ClipViewRemote
|
||||
store={store}
|
||||
navigation={props.navigation}
|
||||
type={'remote'}
|
||||
/>
|
||||
)}
|
||||
</Tab.Screen>
|
||||
</>
|
||||
)
|
||||
////////////////////////////////////////////////////////////
|
||||
}
|
||||
</Tab.Navigator>
|
||||
</NavigationContainer>
|
||||
</Provider>
|
||||
}
|
||||
</Tab.Navigator>
|
||||
</NavigationContainer>
|
||||
</Provider>
|
||||
</ToastProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -32,22 +32,22 @@ export default class SignIn extends React.Component<any, any> {
|
||||
} else console.log(signInJson);
|
||||
}
|
||||
|
||||
updateUsername(event: any) {
|
||||
this.setState({ username: event.target.value });
|
||||
updateUsername(username: string) {
|
||||
this.setState({ username: username });
|
||||
}
|
||||
|
||||
updatePassword(event: any) {
|
||||
this.setState({ password: event.target.value });
|
||||
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} onChange={this.updateUsername} />
|
||||
<TextInput placeholder="Mot de Passe" value={this.state.password} onChange={this.updatePassword} />
|
||||
<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>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import React from 'react';
|
||||
import {View, Text, Button, TextInput} from 'react-native';
|
||||
import {accessibilityProps} from 'react-native-paper/lib/typescript/src/components/MaterialCommunityIcon';
|
||||
import {setUser} from '../redux/actions';
|
||||
|
||||
export default class SignUp extends React.Component<any, any> {
|
||||
@ -50,7 +49,7 @@ export default class SignUp extends React.Component<any, any> {
|
||||
this.setState({username: username});
|
||||
}
|
||||
|
||||
updatePassword(password: any) {
|
||||
updatePassword(password: string) {
|
||||
this.setState({password: password});
|
||||
}
|
||||
|
||||
|
||||
@ -1,16 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Clipboard } from 'react-native';
|
||||
import Toast from 'react-native-simple-toast';
|
||||
|
||||
export default class AClipElement extends React.Component<any, any> {
|
||||
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
onCopy() {
|
||||
Clipboard.setString(this.props.content);
|
||||
Toast.show('Put "' + this.props.content + '" in clipboard', Toast.SHORT);
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,20 +1,24 @@
|
||||
import {View, Text, Button} from 'react-native';
|
||||
import IconVector from 'react-native-vector-icons/FontAwesome5';
|
||||
import AClipElement from './AClipElement';
|
||||
import Toast from 'react-native-simple-toast';
|
||||
import { Clipboard } from 'react-native';
|
||||
import { Store } from 'redux';
|
||||
import { black } from 'react-native-paper/lib/typescript/styles/themes/v2/colors';
|
||||
|
||||
export default class ClipElementLocal extends AClipElement {
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
}
|
||||
export default function ClipElementLocal({content, store}:{content: string,store : Store }){
|
||||
|
||||
function onCopy() {
|
||||
Clipboard.setString(content);
|
||||
Toast.show('Put "' + content + '" in clipboard', Toast.SHORT);
|
||||
}
|
||||
|
||||
async sendToRemote() {
|
||||
async function sendToRemote() {
|
||||
const data = new FormData();
|
||||
data.append(
|
||||
'token',
|
||||
this.props.store.getState().persistedUserReducer.token,
|
||||
store.getState().persistedUserReducer.token,
|
||||
);
|
||||
data.append('content', this.props.content);
|
||||
data.append('content', content);
|
||||
data.append('deviceName', 'TODOChangeThisMobileDevice');
|
||||
const sendToRemoteResponse = await fetch(
|
||||
'https://notifysync.simailadjalim.fr/clipboard',
|
||||
@ -24,11 +28,9 @@ export default class ClipElementLocal extends AClipElement {
|
||||
},
|
||||
);
|
||||
const response = await sendToRemoteResponse.json();
|
||||
Toast.show(this.props.content + 'was sent to the server', Toast.SHORT);
|
||||
Toast.show(content + 'was sent to the server', Toast.SHORT);
|
||||
}
|
||||
|
||||
render(): JSX.Element {
|
||||
return (
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
flex: 1,
|
||||
@ -36,11 +38,13 @@ export default class ClipElementLocal extends AClipElement {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
|
||||
}}>
|
||||
<Text style={{fontSize: 20}}>{this.props.content.length >28 ?this.props.content.slice(0,24)+"...":this.props.content }</Text>
|
||||
<IconVector name="sendTo" size={40} onPress={() => this.sendToRemote()} />
|
||||
<IconVector name="clipboard" size={40} onPress={() => this.onCopy()} />
|
||||
<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="clipboard" size={40} color="black" onPress={() => onCopy()} />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -1,23 +1,24 @@
|
||||
import { View, Text } from 'react-native';
|
||||
import IconVector from 'react-native-vector-icons/FontAwesome5';
|
||||
import AClipElement from './AClipElement';
|
||||
import { Store } from 'redux';
|
||||
import { Clipboard } from 'react-native';
|
||||
import Toast from 'react-native-simple-toast';
|
||||
|
||||
export default class ClipElementRemote extends AClipElement {
|
||||
export default function ClipElementRemote({content,timestamp,deviceName,store}:{content:string;timestamp:number,deviceName:string;store: Store}){
|
||||
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
}
|
||||
function onCopy() {
|
||||
Clipboard.setString(content);
|
||||
Toast.show('Put "' + content + '" in clipboard', Toast.SHORT);
|
||||
}
|
||||
|
||||
render(): JSX.Element {
|
||||
const date= new Date(this.props.timestamp*1000);
|
||||
console.log(this.props.timestamp*1000);
|
||||
return <View style={{flex:1,margin:10,flexDirection:'row',justifyContent:'space-between',alignItems:'center'}}>
|
||||
<View style={{flex:1,margin:10,flexDirection:'column'}}>
|
||||
<Text style={{fontSize:20,}}>{this.props.content.length >28 ?this.props.content.slice(0,24)+"...":this.props.content}</Text>
|
||||
<Text style={{fontSize:10,}}>{this.props.deviceName}</Text>
|
||||
<Text style={{fontSize:10,}}>{date.getHours() + ":" + date.getMinutes() + ", "+ date.toDateString()}</Text>
|
||||
</View>
|
||||
<IconVector name="clipboard" size={40} onPress={() => this.onCopy()} />
|
||||
</View>;
|
||||
}
|
||||
}
|
||||
const date= new Date(timestamp*1000);
|
||||
console.log(timestamp*1000);
|
||||
return <View style={{flex:1,margin:10,flexDirection:'row',justifyContent:'space-between',alignItems:'center'}}>
|
||||
<View style={{flex:1,margin:10,flexDirection:'column'}}>
|
||||
<Text style={{fontSize:20,color:"black"}}>{content.length >28 ?content.slice(0,24)+"...":content}</Text>
|
||||
<Text style={{fontSize:10,color:"black"}}>{deviceName}</Text>
|
||||
<Text style={{fontSize:10,color:"black"}}>{date.getHours() + ":" + date.getMinutes() + ", "+ date.toDateString()}</Text>
|
||||
</View>
|
||||
<IconVector name="clipboard" size={40} color="black" onPress={() => onCopy()} />
|
||||
</View>;
|
||||
}
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
import axios from 'axios';
|
||||
import React from 'react';
|
||||
import {ScrollView, Text, Button, Clipboard} from 'react-native';
|
||||
import ClipList from './ClipList';
|
||||
import AClipView from './AClipView';
|
||||
@ -39,7 +37,7 @@ export default class ClipViewLocal extends AClipView {
|
||||
let notTitle = 'Remote Clipboard';
|
||||
return (
|
||||
<ScrollView>
|
||||
<Text style={{fontWeight: 'bold', fontSize: 30, margin: 20}}>
|
||||
<Text style={{fontWeight: 'bold', fontSize: 30, margin: 20, color:"black"}}>
|
||||
{title}
|
||||
</Text>
|
||||
<Button
|
||||
|
||||
@ -3,6 +3,7 @@ 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,10 +24,12 @@ export default class ClipViewRemote extends AClipView {
|
||||
render(): JSX.Element {
|
||||
let title = "Remote Clipboard";
|
||||
return <ScrollView>
|
||||
<Text style={{ fontWeight: 'bold', fontSize: 30, margin: 20 }}>{title}</Text>
|
||||
<ClipList type={this.props.type} clips={this.state.clips} />
|
||||
<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>;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user