From 504b83386d9be1489deceedf25f1a716a5fbf3f2 Mon Sep 17 00:00:00 2001 From: Djalim Simaila Date: Thu, 4 Apr 2024 13:01:24 +0200 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(notif):=20add=20new=20notifica?= =?UTF-8?q?tion=20components=20for=20local=20and=20remote=20notifications?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 📦 new(NotifElementLocal.tsx): add component to handle local notifications 📦 new(NotifElementRemote.tsx): add component to handle remote notifications 📦 new(NotifList.tsx): add component to list notifications 📦 new(NotifView.tsx): add main view for notifications 📦 new(NotifViewLocal.tsx): add view for local notifications 📦 new(NotifViewRemote.tsx): add view for remote notifications 🔧 refactor: use react-native-toast-notifications for user feedback 🔧 refactor: use redux for state management 🔧 refactor: use axios for HTTP requests 🔧 refactor: use react-native-paper for UI components 🔧 refactor: use expo-clipboard for clipboard interactions 🎯 goal: improve user experience by providing local and remote notifications --- src/components/notif/NotifElementLocal.tsx | 58 +++++++++++++++++++ src/components/notif/NotifElementRemote.tsx | 34 +++++++++++ src/components/notif/NotifList.tsx | 23 ++++++++ src/components/notif/NotifView.tsx | 58 +++++++++++++++++++ src/components/notif/NotifViewLocal.tsx | 62 +++++++++++++++++++++ src/components/notif/NotifViewRemote.tsx | 48 ++++++++++++++++ 6 files changed, 283 insertions(+) create mode 100644 src/components/notif/NotifElementLocal.tsx create mode 100644 src/components/notif/NotifElementRemote.tsx create mode 100644 src/components/notif/NotifList.tsx create mode 100644 src/components/notif/NotifView.tsx create mode 100644 src/components/notif/NotifViewLocal.tsx create mode 100644 src/components/notif/NotifViewRemote.tsx diff --git a/src/components/notif/NotifElementLocal.tsx b/src/components/notif/NotifElementLocal.tsx new file mode 100644 index 0000000..ce08427 --- /dev/null +++ b/src/components/notif/NotifElementLocal.tsx @@ -0,0 +1,58 @@ +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'; + +export default function NotifElementLocal({title,content}:{title:string;content: string}){ + + const toast = useToast(); + function onCopy() { + 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)=>{ + toast.show('the notification was sent to the server'); + }).catch(response => { + toast.show('error'); + }) + } + return ( + + + + + } + /> + + {content} + + + + ); +} + + diff --git a/src/components/notif/NotifElementRemote.tsx b/src/components/notif/NotifElementRemote.tsx new file mode 100644 index 0000000..a2c87f6 --- /dev/null +++ b/src/components/notif/NotifElementRemote.tsx @@ -0,0 +1,34 @@ +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'; + +export default function NotifElementRemote({title,content,timestamp,deviceName}:{title:string;content:string;timestamp:number;deviceName:string}){ + + const toast = useToast(); + + function onCopy() { + Clipboard.setStringAsync(content) + .then(()=>{ + toast.show('copied "'+content+'" into the clipboard'); + }); + } + + const date= new Date(timestamp*1000); + return( + + + + + {content} + {date.getHours() + ":" + date.getMinutes() + ", "+ date.toDateString()} + {deviceName} + + + ); +} diff --git a/src/components/notif/NotifList.tsx b/src/components/notif/NotifList.tsx new file mode 100644 index 0000000..9b3ef26 --- /dev/null +++ b/src/components/notif/NotifList.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import {FlatList, ScrollView} from 'react-native'; +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()} + /> + ; + } +} + diff --git a/src/components/notif/NotifView.tsx b/src/components/notif/NotifView.tsx new file mode 100644 index 0000000..9ceea3c --- /dev/null +++ b/src/components/notif/NotifView.tsx @@ -0,0 +1,58 @@ +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(){ + + const [searchQuery, setSearchQuery] = React.useState(''); + const {height, width} = useWindowDimensions(); + + const Tab = createMaterialTopTabNavigator(); + let layout = "" + + if (width < 600) layout = "compact"; + else if (width < 1200 ) layout = "medium"; + else layout = "expanded"; + return ( <> + + {layout == "compact" ? + + } + + 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 :(") + }) + } + + return ( + 600 ? ps(10) : 0 + }}> + + + + + + ); +} + diff --git a/src/components/notif/NotifViewRemote.tsx b/src/components/notif/NotifViewRemote.tsx new file mode 100644 index 0000000..3aa38b0 --- /dev/null +++ b/src/components/notif/NotifViewRemote.tsx @@ -0,0 +1,48 @@ +import React from 'react'; +import axios from 'axios'; +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 NotifList from './NotifList'; +import { useDispatch } from 'react-redux'; +import { remoteNotifAddToList } from '../../redux/reducers'; + +export default function NotifViewRemote(){ + const [clips,setClips] = React.useState(store.getState().remoteNotif.remoteNotif); + const toast = useToast(); + const dispatch = useDispatch(); + + 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']); + setClips(remoteNotif); + dispatch(remoteNotifAddToList(remoteNotif)); + toast.show("fetched latest notifications from remote"); + }) + .catch(response =>{ + console.log(response); + toast.show("failed to fetch latest notifications"); + }); + } + + return 600 ? ps(10) : 0 + }}> + + + + + ; +} +