diff --git a/App.tsx b/App.tsx index c315dbf..b469204 100644 --- a/App.tsx +++ b/App.tsx @@ -1,64 +1,72 @@ import 'react-native-gesture-handler'; // ^ le bouge pas ca casse tout ^ -import { AppRegistry, Platform } from 'react-native' +import {AppRegistry, Platform} from 'react-native'; - -import { useState } from "react"; -import { NavigationContainer, DefaultTheme } from '@react-navigation/native'; -import { createNativeStackNavigator } from '@react-navigation/native-stack'; -import { Provider } from 'react-redux'; -import { store,persistor } from './src/redux/store'; -import { PaperProvider } from 'react-native-paper'; -import { ToastProvider } from 'react-native-toast-notifications' +import {useState} from 'react'; +import {NavigationContainer, DefaultTheme} from '@react-navigation/native'; +import {createNativeStackNavigator} from '@react-navigation/native-stack'; +import {Provider} from 'react-redux'; +import {store, persistor} from './src/redux/store'; +import {PaperProvider} from 'react-native-paper'; +import {ToastProvider} from 'react-native-toast-notifications'; import AuthPage from './src/pages/Auth'; import ClipPage from './src/pages/Clips'; import IntroPage from './src/pages/Intro'; -import { StatusBar } from 'expo-status-bar'; -import { Material3Dracula, ReactNavigationDracula } from './src/themes'; -import { PixelRatio, useWindowDimensions } from 'react-native'; -import { SafeAreaProvider } from 'react-native-safe-area-context'; +import {StatusBar} from 'expo-status-bar'; +import {Material3Dracula, ReactNavigationDracula} from './src/themes'; +import {PixelRatio, useWindowDimensions} from 'react-native'; +import {SafeAreaProvider} from 'react-native-safe-area-context'; const Stack = createNativeStackNavigator(); -import { PersistGate } from 'redux-persist/integration/react'; +import {PersistGate} from 'redux-persist/integration/react'; +function App() { + const [token, setToken] = useState(store.getState().user.token); + const [username, setUsername] = useState(''); -function App(){ - const [token,setToken] = useState(store.getState().user.token); - const [username,setUsername] = useState(""); - - const {height,width} = useWindowDimensions(); + const {height, width} = useWindowDimensions(); console.log(width); - console.log(PixelRatio.get()) - - store.subscribe(()=>{ - let newToken = store.getState().user.token; + console.log(PixelRatio.get()); + + store.subscribe(() => { + let newToken = store.getState().user.token; setToken(newToken); - }) - + }); + return ( - - - - - { - token !== "" ? ( - <> - - - ) : ( + + + + + {token !== '' ? ( <> - - + - ) - } - - - - + ) : ( + <> + + + + )} + + + + diff --git a/src/components/auth/SignIn.tsx b/src/components/auth/SignIn.tsx index 1d39919..328769f 100644 --- a/src/components/auth/SignIn.tsx +++ b/src/components/auth/SignIn.tsx @@ -1,83 +1,88 @@ import axios from 'axios'; import React from 'react'; -import { View, Text, Platform, useWindowDimensions } from 'react-native'; -import { useToast } from "react-native-toast-notifications"; -import { Button, TextInput } from 'react-native-paper'; -import { login } from '../../redux/reducers'; -import { useDispatch } from 'react-redux'; -import { ReactNavigationDracula as t } from '../../themes'; -import { ps } from '../../utils'; +import {View, Text, Platform, useWindowDimensions} from 'react-native'; +import {useToast} from 'react-native-toast-notifications'; +import {Button, TextInput} from 'react-native-paper'; +import {login} from '../../redux/reducers'; +import {useDispatch} from 'react-redux'; +import {ReactNavigationDracula as t} from '../../themes'; +import {ps} from '../../utils'; -export default function SignIn(){ - const [username, setUsername] = React.useState(""); - const [password, setPassword] = React.useState(""); - const [token,setToken] = React.useState(""); +export default function SignIn() { + const [username, setUsername] = React.useState(''); + const [password, setPassword] = React.useState(''); + const [token, setToken] = React.useState(''); const toast = useToast(); const dispatch = useDispatch(); const {height, width} = useWindowDimensions(); - - async function signInFunction(dispatch) { - axios.post("https://notifysync.simailadjalim.fr/user",{ - username:username, - password:password - },{ - headers: {'Content-Type': 'multipart/form-data'}}) - .then((response, status) => { + async function signInFunction(dispatch) { + axios + .post( + 'https://notifysync.simailadjalim.fr/user', + { + username: username, + password: password, + }, + { + headers: {'Content-Type': 'multipart/form-data'}, + }, + ) + .then((response, status) => { let token = response.data.token; - dispatch(login({username:username,token:token})); - toast.show("login successful .w.",{ - type:"success" + dispatch(login({username: username, token: token})); + toast.show('login successful .w.', { + type: 'success', }); }) - .catch(response =>{ + .catch(response => { toast.show(response.response.data.status); }); } - return 600 ? t.colors.card : t.colors.background, - }]}> - - - Connexion - - - - - - + }, + ]}> + + Connexion + + + + + + ); } - diff --git a/src/components/auth/SignUp.tsx b/src/components/auth/SignUp.tsx index 3fdbb0d..8e91f0a 100644 --- a/src/components/auth/SignUp.tsx +++ b/src/components/auth/SignUp.tsx @@ -1,106 +1,124 @@ import React from 'react'; -import {View, Text, Platform, useWindowDimensions } from 'react-native'; +import {View, Text, Platform, useWindowDimensions} from 'react-native'; import axios from 'axios'; -import { useToast } from "react-native-toast-notifications"; -import { Button, TextInput } from 'react-native-paper'; -import { useDispatch } from 'react-redux'; -import { login } from '../../redux/reducers'; -import { ReactNavigationDracula as t } from '../../themes'; -import { ps } from '../../utils'; +import {useToast} from 'react-native-toast-notifications'; +import {Button, TextInput} from 'react-native-paper'; +import {useDispatch} from 'react-redux'; +import {login} from '../../redux/reducers'; +import {ReactNavigationDracula as t} from '../../themes'; +import {ps} from '../../utils'; -export default function SignUp(){ - const [username, setUsername] = React.useState(""); - const [password, setPassword] = React.useState(""); - const [confirm, setConfirm] = React.useState(""); +export default function SignUp() { + const [username, setUsername] = React.useState(''); + const [password, setPassword] = React.useState(''); + const [confirm, setConfirm] = React.useState(''); const toast = useToast(); const dispatch = useDispatch(); const {height, width} = useWindowDimensions(); function signUpFunction(dispatch) { - - if (confirm != password){ - toast.show("The password and its confirmation are not the same",{ - type:"warning" + if (confirm != password) { + toast.show('The password and its confirmation are not the same', { + type: 'warning', }); return; } - axios.put("https://notifysync.simailadjalim.fr/user",{ - username:username, - password:password - },{ - headers: {'Content-Type': 'multipart/form-data'}}) + axios + .put( + 'https://notifysync.simailadjalim.fr/user', + { + username: username, + password: password, + }, + { + headers: {'Content-Type': 'multipart/form-data'}, + }, + ) .then((response, status) => { - toast.show("Account created, logging in !",{type:"success"}); - axios.post("https://notifysync.simailadjalim.fr/user",{ - username:username, - password:password - },{ - headers: {'Content-Type': 'multipart/form-data'}}) + toast.show('Account created, logging in !', {type: 'success'}); + axios + .post( + 'https://notifysync.simailadjalim.fr/user', + { + username: username, + password: password, + }, + { + headers: {'Content-Type': 'multipart/form-data'}, + }, + ) .then((response, status) => { let token = response.data.token; - dispatch(login({username:username,token:token})); - toast.show("login successful .w.",{type:"success"}); + dispatch(login({username: username, token: token})); + toast.show('login successful .w.', {type: 'success'}); }) - .catch(response =>{ - toast.show(response.response.data.status); + .catch(response => { + toast.show(response.response.data.status); }); // }) - .catch(response =>{ + .catch(response => { toast.show(response.response.data.status); }); } return ( - 600 ? t.colors.card : t.colors.background, - }]}> - - Créer un compte - - - - - - + }, + ]}> + + Créer un compte + + + + + + ); } - diff --git a/src/components/clip/ClipElementLocal.tsx b/src/components/clip/ClipElementLocal.tsx index b16af74..0a66c87 100644 --- a/src/components/clip/ClipElementLocal.tsx +++ b/src/components/clip/ClipElementLocal.tsx @@ -1,34 +1,43 @@ import axios from 'axios'; import {View} from 'react-native'; import IconVector from 'react-native-vector-icons/FontAwesome5'; -import { useToast } from "react-native-toast-notifications"; -import * as Clipboard from 'expo-clipboard'; -import { Avatar, Card, Text } from 'react-native-paper'; -import { store } from '../../redux/store'; -import { Button } from 'react-native-paper'; +import {useToast} from 'react-native-toast-notifications'; +import * as Clipboard from 'expo-clipboard'; +import {Avatar, Card, Text} from 'react-native-paper'; +import {store} from '../../redux/store'; +import {Button, Menu} from 'react-native-paper'; +import {useState} from 'react'; -export default function ClipElementLocal({content}:{content: string}){ - +export default function ClipElementLocal({content}: {content: string}) { + const [visible, setVisible] = useState(false); + const [coords, setCoords] = useState({x: 0, y: 0}); const toast = useToast(); + function onCopy() { - Clipboard.setStringAsync(content) - .then(()=>{ - toast.show('copied "'+content+'" into the clipboard'); - }); + Clipboard.setStringAsync(content).then(() => { + toast.show('copied "' + content + '" into the clipboard'); + }); } - function sendToRemote() { - axios.put("https://notifysync.simailadjalim.fr/clipboard",{ - content:content, - deviceName:"TestNative", - token: store.getState().user.token - },{ - headers: {'Content-Type': 'multipart/form-data'}} - ).then((response,status)=>{ - toast.show('"'+content+'" was sent to the server'); - }).catch(response => { - toast.show('error'); - }) + function sendToRemote() { + axios + .put( + 'https://notifysync.simailadjalim.fr/clipboard', + { + content: content, + deviceName: 'TestNative', + token: store.getState().user.token, + }, + { + headers: {'Content-Type': 'multipart/form-data'}, + }, + ) + .then((response, status) => { + toast.show('"' + content + '" was sent to the server'); + }) + .catch(response => { + toast.show('error'); + }); } return ( - - - - } + setVisible(false)} + anchor={coords}> + {}} title="View" /> + {}} title="Share" /> + {}} title="Delete" /> + + + setCoords({x: evt.nativeEvent.pageX, y: evt.nativeEvent.pageY}) + } + onPress={onCopy} + onLongPress={() => setVisible(true)}> + ( + + )} /> @@ -53,5 +78,3 @@ export default function ClipElementLocal({content}:{content: string}){ ); } - - diff --git a/src/components/clip/ClipElementRemote.tsx b/src/components/clip/ClipElementRemote.tsx index 990cefb..3ccbabf 100644 --- a/src/components/clip/ClipElementRemote.tsx +++ b/src/components/clip/ClipElementRemote.tsx @@ -1,33 +1,67 @@ -import { View } from 'react-native'; +import {View} from 'react-native'; import IconVector from 'react-native-vector-icons/FontAwesome5'; import * as Clipboard from 'expo-clipboard'; -import { useToast } from "react-native-toast-notifications"; -import { Card, Text, Button } from 'react-native-paper'; +import {useToast} from 'react-native-toast-notifications'; +import {Card, Text, Menu} from 'react-native-paper'; +import {useState} from 'react'; -export default function ClipElementRemote({content,timestamp,deviceName}:{content:string;timestamp:number,deviceName:string}){ +export default function ClipElementRemote({ + content, + timestamp, + deviceName, +}: { + content: string; + timestamp: number; + deviceName: string; +}) { + const [visible, setVisible] = useState(false); + const [coords, setCoords] = useState({x: 0, y: 0}); const toast = useToast(); function onCopy() { - Clipboard.setStringAsync(content) - .then(()=>{ - toast.show('copied "'+content+'" into the clipboard'); - }); + Clipboard.setStringAsync(content).then(() => { + toast.show('copied "' + content + '" into the clipboard'); + }); } - const date= new Date(timestamp*1000); - return( - - - + const date = new Date(timestamp * 1000); + return ( + + setVisible(false)} + anchor={coords}> + {}} title="View" /> + {}} title="Share" /> + {}} title="Delete" /> + + + setCoords({x: evt.nativeEvent.pageX, y: evt.nativeEvent.pageY}) + } + onPress={onCopy} + onLongPress={() => setVisible(true)}> + - {date.getHours() + ":" + date.getMinutes() + ", "+ date.toDateString()} + + {date.getHours() + + ':' + + date.getMinutes() + + ', ' + + date.toDateString()} + {deviceName} - - ); + + + ); } diff --git a/src/components/clip/ClipList.tsx b/src/components/clip/ClipList.tsx index a687630..a1f390b 100644 --- a/src/components/clip/ClipList.tsx +++ b/src/components/clip/ClipList.tsx @@ -2,7 +2,7 @@ import React from 'react'; import {FlatList, ScrollView} from 'react-native'; import ClipElementLocal from './ClipElementLocal'; import ClipElementRemote from './ClipElementRemote'; -import { nanoid } from '@reduxjs/toolkit'; +import {nanoid} from '@reduxjs/toolkit'; export default class ClipList extends React.Component { constructor(props: any) { @@ -11,21 +11,29 @@ export default class ClipList extends React.Component { render(): JSX.Element { if (this.props.type === 'local') { - return } keyExtractor={item => nanoid()} inverted={true} /> + ); } else { - return } + renderItem={({item}) => ( + + )} keyExtractor={item => nanoid()} inverted={true} /> - ; + ); } - } } diff --git a/src/components/clip/ClipView.tsx b/src/components/clip/ClipView.tsx index 66768bc..4ede6fe 100644 --- a/src/components/clip/ClipView.tsx +++ b/src/components/clip/ClipView.tsx @@ -1,58 +1,72 @@ -import React from "react"; -import { useWindowDimensions, ScrollView, View } from "react-native"; -import { Searchbar, Button } from "react-native-paper" -import ClipViewLocal from "./ClipViewLocal"; -import ClipViewRemote from "./ClipViewRemote"; -import { ps } from "../../utils"; -import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs"; +import React from 'react'; +import {useWindowDimensions, ScrollView, View} from 'react-native'; +import {Searchbar, Button} from 'react-native-paper'; +import ClipViewLocal from './ClipViewLocal'; +import ClipViewRemote from './ClipViewRemote'; +import {ps} from '../../utils'; +import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs'; -export default function ClipView(){ - +export default function ClipView() { const [searchQuery, setSearchQuery] = React.useState(''); const {height, width} = useWindowDimensions(); const Tab = createMaterialTopTabNavigator(); - let layout = "" + let layout = ''; - if (width < 600) layout = "compact"; - else if (width < 1200 ) layout = "medium"; - else layout = "expanded"; - return ( <> - - {layout == "compact" ? - + mode="elevated" + onPress={() => { + dispatch(addToLocal); + }}> + Coller depuis le presse papier + - + - - ); + + ); } - diff --git a/src/components/clip/ClipViewRemote.tsx b/src/components/clip/ClipViewRemote.tsx index 61357fb..89f9d91 100644 --- a/src/components/clip/ClipViewRemote.tsx +++ b/src/components/clip/ClipViewRemote.tsx @@ -1,52 +1,64 @@ import React from 'react'; import axios from 'axios'; -import { ScrollView,View, Text, useWindowDimensions } from 'react-native'; +import {ScrollView, View, Text, useWindowDimensions} from 'react-native'; import ClipList from './ClipList'; -import { store } from '../../redux/store'; -import { useToast } from 'react-native-toast-notifications'; -import { Button } from 'react-native-paper'; -import { ps } from '../../utils'; -import { useDispatch } from 'react-redux'; -import { remoteClipAddToList } from '../../redux/reducers'; +import {store} from '../../redux/store'; +import {useToast} from 'react-native-toast-notifications'; +import {Button} from 'react-native-paper'; +import {ps} from '../../utils'; +import {useDispatch} from 'react-redux'; +import {remoteClipAddToList} from '../../redux/reducers'; -export default function ClipViewRemote(){ - const [clips,setClips] = React.useState(store.getState().remoteClip.remoteClip); +export default function ClipViewRemote() { + const [clips, setClips] = React.useState( + store.getState().remoteClip.remoteClip, + ); const toast = useToast(); const dispatch = useDispatch(); - - const {height,width} = useWindowDimensions(); + + const {height, width} = useWindowDimensions(); async function getClips(dispatch) { - axios.get("http://notifysync.simailadjalim.fr/clipboard?token="+store.getState().user.token) - .then((response,status) => { - let remoteclips = Object.values(response["data"]['clipboard']); + axios + .get( + 'http://notifysync.simailadjalim.fr/clipboard?token=' + + store.getState().user.token, + ) + .then((response, status) => { + let remoteclips = Object.values(response['data']['clipboard']); setClips(remoteclips); - dispatch(remoteClipAddToList(remoteclips)) - toast.show("fetched latest clips from remote"); + dispatch(remoteClipAddToList(remoteclips)); + toast.show('fetched latest clips from remote'); }) - .catch(response =>{ + .catch(response => { console.log(response); - toast.show("failed to fetch latest clips"); + toast.show('failed to fetch latest clips'); }); } function getSignOutBtn() { - return + return ( + + ); } - let title = "Remote Clipboard"; - return 600 ? ps(10) : 0 - }}> - - - - - ; + let title = 'Remote Clipboard'; + return ( + 600 ? ps(10) : 0, + }}> + + + + + + ); } - diff --git a/src/components/notif/NotifElementLocal.tsx b/src/components/notif/NotifElementLocal.tsx index ce08427..894f4f1 100644 --- a/src/components/notif/NotifElementLocal.tsx +++ b/src/components/notif/NotifElementLocal.tsx @@ -1,35 +1,50 @@ import axios from 'axios'; import {View} from 'react-native'; import IconVector from 'react-native-vector-icons/FontAwesome5'; -import { useToast } from "react-native-toast-notifications"; -import * as Clipboard from 'expo-clipboard'; -import { Avatar, Card, Text } from 'react-native-paper'; -import { store } from '../../redux/store'; -import { Button } from 'react-native-paper'; +import {useToast} from 'react-native-toast-notifications'; +import * as Clipboard from 'expo-clipboard'; +import {Avatar, Card, Text} from 'react-native-paper'; +import {store} from '../../redux/store'; +import {Button, Menu} from 'react-native-paper'; +import {useState} from 'react'; -export default function NotifElementLocal({title,content}:{title:string;content: string}){ +export default function NotifElementLocal({ + title, + content, +}: { + title: string; + content: string; +}) { + const [visible, setVisible] = useState(false); + const [coords, setCoords] = useState({x: 0, y: 0}); const toast = useToast(); function onCopy() { - Clipboard.setStringAsync(content) - .then(()=>{ - toast.show('copied "'+content+'" into the clipboard'); - }); + Clipboard.setStringAsync(content).then(() => { + toast.show('copied "' + content + '" into the clipboard'); + }); } - function sendToRemote() { - axios.put("https://notifysync.simailadjalim.fr/notification",{ - title:title, - content:content, - deviceName:"TestNative", - token: store.getState().user.token - },{ - headers: {'Content-Type': 'multipart/form-data'}} - ).then((response,status)=>{ + function sendToRemote() { + axios + .put( + 'https://notifysync.simailadjalim.fr/notification', + { + title: title, + content: content, + deviceName: 'TestNative', + token: store.getState().user.token, + }, + { + headers: {'Content-Type': 'multipart/form-data'}, + }, + ) + .then((response, status) => { toast.show('the notification was sent to the server'); - }).catch(response => { - toast.show('error'); - }) + }) + .catch(response => { + toast.show('error'); + }); } return ( - - - - } + setVisible(false)} + anchor={coords}> + {}} title="View" /> + {}} title="Share" /> + {}} title="Delete" /> + + + setCoords({x: evt.nativeEvent.pageX, y: evt.nativeEvent.pageY}) + } + onPress={onCopy} + onLongPress={() => setVisible(true)}> + ( + + )} /> {content} @@ -54,5 +85,3 @@ export default function NotifElementLocal({title,content}:{title:string;content: ); } - - diff --git a/src/components/notif/NotifElementRemote.tsx b/src/components/notif/NotifElementRemote.tsx index a2c87f6..75211e3 100644 --- a/src/components/notif/NotifElementRemote.tsx +++ b/src/components/notif/NotifElementRemote.tsx @@ -1,34 +1,69 @@ -import { View } from 'react-native'; +import {View} from 'react-native'; import * as Clipboard from 'expo-clipboard'; -import { useToast } from "react-native-toast-notifications"; -import { Card, Text, Button } from 'react-native-paper'; +import {useToast} from 'react-native-toast-notifications'; +import {Card, Text, Menu} from 'react-native-paper'; +import {useState} from 'react'; -export default function NotifElementRemote({title,content,timestamp,deviceName}:{title:string;content:string;timestamp:number;deviceName:string}){ - +export default function NotifElementRemote({ + title, + content, + timestamp, + deviceName, +}: { + title: string; + content: string; + timestamp: number; + deviceName: string; +}) { + const [visible, setVisible] = useState(false); + const [coords, setCoords] = useState({x: 0, y: 0}); const toast = useToast(); function onCopy() { - Clipboard.setStringAsync(content) - .then(()=>{ - toast.show('copied "'+content+'" into the clipboard'); - }); + Clipboard.setStringAsync(content).then(() => { + toast.show('copied "' + content + '" into the clipboard'); + }); } - const date= new Date(timestamp*1000); - return( - - - + const date = new Date(timestamp * 1000); + return ( + + setVisible(false)} + anchor={coords}> + {}} title="View" /> + {}} title="Share" /> + {}} title="Delete" /> + + + setCoords({x: evt.nativeEvent.pageX, y: evt.nativeEvent.pageY}) + } + onPress={onCopy} + onLongPress={() => setVisible(true)}> + {content} - {date.getHours() + ":" + date.getMinutes() + ", "+ date.toDateString()} + + {date.getHours() + + ':' + + date.getMinutes() + + ', ' + + date.toDateString()} + {deviceName} - - ); + + + ); } diff --git a/src/components/notif/NotifList.tsx b/src/components/notif/NotifList.tsx index 9b3ef26..4217470 100644 --- a/src/components/notif/NotifList.tsx +++ b/src/components/notif/NotifList.tsx @@ -1,23 +1,40 @@ import React from 'react'; import {FlatList, ScrollView} from 'react-native'; -import { nanoid } from '@reduxjs/toolkit'; +import {nanoid} from '@reduxjs/toolkit'; import NotifElementLocal from './NotifElementLocal'; import NotifElementRemote from './NotifElementRemote'; -export default function NotifList({type,notifs}:{type:string,notifs:Array}) { - if (type === 'local') { - return } - keyExtractor={item => nanoid()} - /> - } else { - return } - keyExtractor={item => nanoid()} - /> - ; - } +export default function NotifList({ + type, + notifs, +}: { + type: string; + notifs: Array; +}) { + if (type === 'local') { + return ( + ( + + )} + keyExtractor={item => nanoid()} + /> + ); + } else { + return ( + ( + + )} + keyExtractor={item => nanoid()} + /> + ); + } } - diff --git a/src/components/notif/NotifView.tsx b/src/components/notif/NotifView.tsx index 9ceea3c..bff2998 100644 --- a/src/components/notif/NotifView.tsx +++ b/src/components/notif/NotifView.tsx @@ -1,58 +1,72 @@ -import React from "react"; -import { useWindowDimensions, ScrollView, View } from "react-native"; -import { Searchbar, Button } from "react-native-paper" -import NotifViewLocal from "./NotifViewLocal"; -import NotifViewRemote from "./NotifViewRemote"; -import { ps } from "../../utils"; -import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs"; +import React from 'react'; +import {useWindowDimensions, ScrollView, View} from 'react-native'; +import {Searchbar, Button} from 'react-native-paper'; +import NotifViewLocal from './NotifViewLocal'; +import NotifViewRemote from './NotifViewRemote'; +import {ps} from '../../utils'; +import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs'; -export default function NotifView(){ - +export default function NotifView() { const [searchQuery, setSearchQuery] = React.useState(''); const {height, width} = useWindowDimensions(); const Tab = createMaterialTopTabNavigator(); - let layout = "" + let layout = ''; - if (width < 600) layout = "compact"; - else if (width < 1200 ) layout = "medium"; - else layout = "expanded"; - return ( <> - - {layout == "compact" ? - + return ( + + ); } async function addToLocal(dispatch) { Clipboard.getStringAsync() - .then(value =>{ - let newNotif = {"title":"placeholder title","content":"placeholder content"}; - console.log(value); - dispatch(localNotifAddToList(newNotif)); - setNotifs([...notifs,newNotif]); - toast.show('added "'+value+'" into history'); - }) - .catch((error)=>{ - console.log(error); - toast.show("could not retreive last notification :(") - }) + .then(value => { + let newNotif = { + title: 'placeholder title', + content: 'placeholder content', + }; + console.log(value); + dispatch(localNotifAddToList(newNotif)); + setNotifs([...notifs, newNotif]); + toast.show('added "' + value + '" into history'); + }) + .catch(error => { + console.log(error); + toast.show('could not retreive last notification :('); + }); } return ( - 600 ? ps(10) : 0 - }}> + 600 ? ps(10) : 0, + }}> + mode="elevated" + onPress={() => { + console.log('TODO'); + dispatch(addToLocal); + }}> + importer la derniere notification + - + - - ); + + ); } - diff --git a/src/components/notif/NotifViewRemote.tsx b/src/components/notif/NotifViewRemote.tsx index 3aa38b0..d6edb13 100644 --- a/src/components/notif/NotifViewRemote.tsx +++ b/src/components/notif/NotifViewRemote.tsx @@ -1,48 +1,56 @@ import React from 'react'; import axios from 'axios'; -import { ScrollView,View, Text, useWindowDimensions } from 'react-native'; +import {ScrollView, View, Text, useWindowDimensions} from 'react-native'; import NotifListfrom from './NotifList'; -import { store } from '../../redux/store'; -import { useToast } from 'react-native-toast-notifications'; -import { Button } from 'react-native-paper'; -import { ps } from '../../utils'; +import {store} from '../../redux/store'; +import {useToast} from 'react-native-toast-notifications'; +import {Button} from 'react-native-paper'; +import {ps} from '../../utils'; import NotifList from './NotifList'; -import { useDispatch } from 'react-redux'; -import { remoteNotifAddToList } from '../../redux/reducers'; +import {useDispatch} from 'react-redux'; +import {remoteNotifAddToList} from '../../redux/reducers'; -export default function NotifViewRemote(){ - const [clips,setClips] = React.useState(store.getState().remoteNotif.remoteNotif); +export default function NotifViewRemote() { + const [clips, setClips] = React.useState( + store.getState().remoteNotif.remoteNotif, + ); const toast = useToast(); const dispatch = useDispatch(); - const {height,width} = useWindowDimensions(); + const {height, width} = useWindowDimensions(); async function getNotif(dispatch) { - axios.get("http://notifysync.simailadjalim.fr/notification?token="+store.getState().user.token) - .then((response,status) => { - let remoteNotif = Object.values(response["data"]['notifications']); + axios + .get( + 'http://notifysync.simailadjalim.fr/notification?token=' + + store.getState().user.token, + ) + .then((response, status) => { + let remoteNotif = Object.values(response['data']['notifications']); setClips(remoteNotif); dispatch(remoteNotifAddToList(remoteNotif)); - toast.show("fetched latest notifications from remote"); + toast.show('fetched latest notifications from remote'); }) - .catch(response =>{ + .catch(response => { console.log(response); - toast.show("failed to fetch latest notifications"); + toast.show('failed to fetch latest notifications'); }); } - return 600 ? ps(10) : 0 - }}> - - - - - ; + return ( + 600 ? ps(10) : 0, + }}> + + + + + + ); } - diff --git a/src/pages/Auth.tsx b/src/pages/Auth.tsx index a5625b7..39eec8d 100644 --- a/src/pages/Auth.tsx +++ b/src/pages/Auth.tsx @@ -1,35 +1,42 @@ -import { Platform, View, useWindowDimensions } from "react-native"; -import SignIn from "../components/auth/SignIn"; -import SignUp from "../components/auth/SignUp"; +import {Platform, View, useWindowDimensions} from 'react-native'; +import SignIn from '../components/auth/SignIn'; +import SignUp from '../components/auth/SignUp'; -import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs'; -import { ps } from "../utils"; +import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs'; +import {ps} from '../utils'; -export default function AuthPage(){ +export default function AuthPage() { const {height, width} = useWindowDimensions(); const Tab = createMaterialTopTabNavigator(); - if (width > 700){ + if (width > 700) { return ( - - - - - );} - else{ - return( - - } - name="Login" - options={{title: 'Connexion'}} - /> - } - name="Register" - options={{title: 'Créer un compte'}} - /> - - ); + + + + + ); + } else { + return ( + + } + name="Login" + options={{title: 'Connexion'}} + /> + } + name="Register" + options={{title: 'Créer un compte'}} + /> + + ); } } diff --git a/src/pages/Clips.tsx b/src/pages/Clips.tsx index ba4b441..5f9c5a1 100644 --- a/src/pages/Clips.tsx +++ b/src/pages/Clips.tsx @@ -1,19 +1,25 @@ -import React from "react"; -import { Drawer as DrawerLayout } from 'react-native-drawer-layout'; -import { Button, Drawer} from 'react-native-paper'; -import { Platform, View,StyleSheet, useWindowDimensions } from "react-native"; -import { Modal, Text, Portal } from 'react-native-paper'; -import { useDispatch } from 'react-redux'; -import { disconnect, localClipClear, localNotifClear, remoteClipClear, remoteNotifClear } from "../redux/reducers"; -import { ReactNavigationDracula as t } from "../themes"; -import ClipView from "../components/clip/ClipView"; -import Settings from "./Settings"; -import NotifView from "../components/notif/NotifView"; +import React from 'react'; +import {Drawer as DrawerLayout} from 'react-native-drawer-layout'; +import {Button, Drawer} from 'react-native-paper'; +import {Platform, View, StyleSheet, useWindowDimensions} from 'react-native'; +import {Modal, Text, Portal} from 'react-native-paper'; +import {useDispatch} from 'react-redux'; +import { + disconnect, + localClipClear, + localNotifClear, + remoteClipClear, + remoteNotifClear, +} from '../redux/reducers'; +import {ReactNavigationDracula as t} from '../themes'; +import ClipView from '../components/clip/ClipView'; +import Settings from './Settings'; +import NotifView from '../components/notif/NotifView'; const styles = StyleSheet.create({ modal: { - display:"flex", - flexDirection:"column", + display: 'flex', + flexDirection: 'column', padding: 10, gap: 10, alignItems: 'center', @@ -21,168 +27,171 @@ const styles = StyleSheet.create({ }, }); -export default function ClipPage(){ +export default function ClipPage() { const [open, setOpen] = React.useState(false); const [visible, setVisible] = React.useState(false); const [active, setActive] = React.useState('clips'); - const dispatch = useDispatch() + const dispatch = useDispatch(); const hideModal = () => setVisible(false); const containerStyle = {backgroundColor: 'white', padding: 20}; const {height, width} = useWindowDimensions(); - - function signout(){ - dispatch(localClipClear()) - dispatch(remoteClipClear()) - dispatch(localNotifClear()) - dispatch(remoteNotifClear()) - dispatch(disconnect()) + function signout() { + dispatch(localClipClear()); + dispatch(remoteClipClear()); + dispatch(localNotifClear()); + dispatch(remoteNotifClear()); + dispatch(disconnect()); } - let layout = "" - - if (width < 600) layout = "compact"; - else if (width < 1200 ) layout = "medium"; - else layout = "expanded"; + let layout = ''; + if (width < 600) layout = 'compact'; + else if (width < 1200) layout = 'medium'; + else layout = 'expanded'; let style = {}; - if (layout == "medium"){ + if (layout == 'medium') { style = StyleSheet.create({ drawer: { backgroundColor: t.colors.background, - width : 100 - } - }) + width: 100, + }, + }); } else { style = StyleSheet.create({ - drawer : { - backgroundColor: t.colors.background - } - }) + drawer: { + backgroundColor: t.colors.background, + }, + }); } let page; - if (active == "clips") page = ; - if (active == "notif") page = ; - if (active == "settings") page = ; + if (active == 'clips') page = ; + if (active == 'notif') page = ; + if (active == 'settings') page = ; - return ( - - - Do you really want to sign out? - - - - - setOpen(true)} - onClose={() => setOpen(false)} - drawerStyle={style.drawer} - renderDrawerContent={() => { - if (layout != "medium"){ - return <> - - { - setActive('clips'); - setOpen(false) - }} - /> - { - setActive('notif'); - setOpen(false) - }} - /> - { - setActive('settings'); - setOpen(false) - }} - /> - - - setVisible(true)} - label="Sign out" - /> - - - }else{ - return - - { - setActive('clips'); - setOpen(false) - }} - /> - { - setActive('notif'); - setOpen(false) - }} - /> - { - setActive('settings'); - setOpen(false) - }} - /> - - - setVisible(true)} - /> - - - } - }} - > - {page} - - + return ( + + + + Do you really want to sign out? + + + + + setOpen(true)} + onClose={() => setOpen(false)} + drawerStyle={style.drawer} + renderDrawerContent={() => { + if (layout != 'medium') { + return ( + <> + + { + setActive('clips'); + setOpen(false); + }} + /> + { + setActive('notif'); + setOpen(false); + }} + /> + { + setActive('settings'); + setOpen(false); + }} + /> + + + setVisible(true)} + label="Sign out" + /> + + + ); + } else { + return ( + + + { + setActive('clips'); + setOpen(false); + }} + /> + { + setActive('notif'); + setOpen(false); + }} + /> + { + setActive('settings'); + setOpen(false); + }} + /> + + + setVisible(true)} + /> + + + ); + } + }}> + {page} + + ); } diff --git a/src/pages/Intro.tsx b/src/pages/Intro.tsx index ce94751..b65043d 100644 --- a/src/pages/Intro.tsx +++ b/src/pages/Intro.tsx @@ -1,23 +1,26 @@ -import { View, Text } from "react-native"; -import { Button } from 'react-native-paper'; -import { ps } from "../utils"; -import { ReactNavigationDracula as t } from "../themes"; +import {View, Text} from 'react-native'; +import {Button} from 'react-native-paper'; +import {ps} from '../utils'; +import {ReactNavigationDracula as t} from '../themes'; -export default function IntroPage({navigation}){ - return( - - - Salut, bienvenue dans ClipSync :) connecte toi pour commencer + + Salut, bienvenue dans ClipSync :) connecte toi pour commencer