Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add notifications to Notifications screen #412

Draft
wants to merge 5 commits into
base: main
Choose a base branch
from
Draft

feat: add notifications to Notifications screen #412

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3613db5
Added useNotificationReducer
Sebastian-Webster Dec 19, 2023
3a0c0ee
Add more actions to notification reducer
Sebastian-Webster Dec 19, 2023
f9c989d
Modify notification reducer and screen
Sebastian-Webster Dec 19, 2023
500e757
Add very basic UI for notifications for testing
Sebastian-Webster Dec 27, 2023
c02706f
chore: merge main
Sebastian-Webster Jun 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 56 additions & 0 deletions components/Notification.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
import { useNavigation, useTheme } from "@react-navigation/native";
import { Component } from "react";
import { TouchableOpacity } from "react-native";
import { Text, View } from "react-native";

class Notification extends Component {
constructor(props) {
super(props);
this.touchDisabled = !props.notification.profilePublicId && !(props.notification.postId && props.notification.postFormat)
}

shouldComponentUpdate(nextProps, nextState) {
const colorsAreSame = this.props.colorsIndexNum === nextProps.colorsIndexNum;

if (colorsAreSame) return false

return true
}

handlePress = () => {
if (this.props.notification.profilePublicId) {
return this.props.navigation.navigate('ProfilePages', {pubId: this.props.notification.profilePublicId})
}

if (this.props.notification.postId && this.props.notification.postFormat) {
return
}

alert('handlePress should not be getting called. This is a bug.')
}

render() {
return (
<TouchableOpacity disabled={this.touchDisabled} onPress={this.handlePress} style={{borderColor: this.props.colors.tertiary, borderTopWidth: this.props.index === 0 ? 2 : 0, borderBottomWidth: 2, padding: 5}}>
<Text style={{color: this.props.colors.tertiary, fontSize: 20, textAlign: 'center'}}>{this.props.notification.text}</Text>
</TouchableOpacity>
)
}
}

const NotificationFunction = (props) => {
const {colors, colorsIndexNum} = useTheme();
const navigation = useNavigation();

const notificationProps = {
notification: props.notification,
navigation,
colors,
colorsIndexNum,
index: props.index
}

return <Notification {...notificationProps}/>
}

export default NotificationFunction;
147 changes: 147 additions & 0 deletions hooks/useNotificationReducer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,147 @@
import { useReducer } from "react";

const reducer = (state, action) => {
if (action.type === 'addNotifications') {
const newNotifications = state.notifications.concat(action.notifications)

return {
...state,
notifications: newNotifications,
error: null,
loadingFeed: false,
reloadingFeed: false,
noMoreNotifications: action.noMoreNotifications
}
}

if (action.type === 'startLoadingNotifications') {
return {
...state,
loadingFeed: true,
error: null
}
}

if (action.type === 'startReloadingNotifications') {
return {
...state,
loadingFeed: true,
reloadingFeed: true,
error: null,
noMoreNotifications: false,
notifications: []
}
}

if (action.type === 'errorLoadingNotifications') {
return {
...state,
loadingFeed: false,
reloadingFeed: false,
error: action.error
}
}

if (action.type === 'startClearingNotifications') {
return {
...state,
clearing: true,
errorClearing: null
}
}

if (action.type === 'cancelClearingNotifications') {
return {
...state,
errorClearing: null
}
}

if (action.type === 'clearedNotifications') {
return {
...state,
clearing: false,
notifications: [],
errorClearing: null,
noMoreNotifications: false
}
}

if (action.type === 'errorClearingNotifications') {
return {
...state,
clearing: false,
errorClearing: action.error
}
}

if (action.type === 'startDeletingNotification') {
if (typeof action.index !== 'number') throw new Error(`Expected action.index for useNotificationReducer for startDeletingNotification action to be a number. Received: ${typeof action.index}`)
const newNotifications = [...state.notifications];

newNotifications[action.index] = {
...newNotifications[action.index],
errorDeleting: null,
deleting: true
}

return {
...state,
notifications: newNotifications
}
}

if (action.type === 'errorDeletingNotification') {
if (typeof action.index !== 'number') throw new Error(`Expected action.index for useNotificationReducer for errorDeletingNotification action to be a number. Received: ${typeof action.index}`)
const newNotifications = [...state.notifications];

newNotifications[action.index] = {
...newNotifications[action.index],
deleting: false,
errorDeleting: error
}

return {
...state,
notifications: newNotifications
}
}

if (action.type === 'deletedNotification') {
if (typeof action.index !== 'number') throw new Error(`Expected action.index for useNotificationReducer for deletedNotification action to be a number. Received: ${typeof action.index}`)

const newNotifications = [...state.notifications];

newNotifications.splice(action.index, 1)

return {
...state,
notifications: newNotifications
}
}

if (action.type === 'noMoreNotifications') {
return {
...state,
noMoreNotifications: true
}
}

throw new Error(`Unknown action type was given to useNotificationReducer: ${action.type}`)
}

const initialState = {
notifications: [],
error: null,
loadingFeed: false,
reloadingFeed: false,
errorClearing: null,
clearing: false,
noMoreNotifications: false
}

const useNotificationReducer = () => {
return useReducer(reducer, initialState)
}

export default useNotificationReducer;
144 changes: 118 additions & 26 deletions screens/NotificationsScreen.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, {useContext, useState} from 'react';
import {View, Text, TouchableOpacity, FlatList} from 'react-native';
import React, {useContext, useEffect} from 'react';
import {View, Text, TouchableOpacity, FlatList, RefreshControl, ActivityIndicator} from 'react-native';
import { useTheme } from '@react-navigation/native';
import {
StyledButton,
Expand All @@ -10,13 +10,54 @@ import EvilIcons from 'react-native-vector-icons/EvilIcons';
import {CredentialsContext} from '../components/CredentialsContext';
import TopNavBar from '../components/TopNavBar.js';
import { StatusBarHeightContext } from '../components/StatusBarHeightContext.js';
import useNotificationReducer from '../hooks/useNotificationReducer.js';
import axios from 'axios';
import { ServerUrlContext } from '../components/ServerUrlContext.js';
import ParseErrorMessage from '../components/ParseErrorMessage.js';
import Ionicons from 'react-native-vector-icons/Ionicons.js';
import Notification from '../components/Notification.js';

const NotificationsScreen = ({navigation}) => {
const {colors, dark} = useTheme();
const [notificationReducer, dispatch] = useNotificationReducer();

const {colors, colorsIndexNum} = useTheme();
const {storedCredentials, setStoredCredentials} = useContext(CredentialsContext);
if (storedCredentials) {var {privateAccount} = storedCredentials} else {var {privateAccount} = {privateAccount: false}}
const [notifications, setNotifications] = useState([])
const StatusBarHeight = useContext(StatusBarHeightContext);
const {serverUrl} = useContext(ServerUrlContext)

const loadNotifications = (reloadFeed) => {
console.warn(notificationReducer.notifications)
dispatch({type: reloadFeed ? 'startReloadingNotifications' : 'startLoadingNotifications'})

const url = serverUrl + '/tempRoute/getnotifications';
const toSend = notificationReducer.notifications.length > 0 && !reloadFeed ? {lastNotificationId: notificationReducer.notifications[notificationReducer.notifications.length - 1]._id} : {};

axios.post(url, toSend).then(response => {
const result = response.data;
const {notifications, noMoreNotifications} = result.data;

console.warn(result.data)

dispatch({type: 'addNotifications', notifications, noMoreNotifications})
}).catch(error => {
console.error(ParseErrorMessage(error))
dispatch({type: 'errorLoadingNotifications', error: ParseErrorMessage(error)})
})
}

const clearNotifications = () => {
alert('Coming soon')
}

const cancelClearingNotifications = () => {
alert('Coming soon')
}

useEffect(() => {
loadNotifications(true);
}, [])

return(
<>
<TopNavBar screenName="Notifications" hideBackButton rightIcon={
Expand All @@ -26,30 +67,81 @@ const NotificationsScreen = ({navigation}) => {
}/>
{storedCredentials ?
<>
<FlatList
data={notifications}
renderItem={({item}) => {/* Implement when notifications are implemented */}}
keyExtractor={(item, index) => 'key'+index}
ListHeaderComponent={
privateAccount == true ?
<TouchableOpacity style={{borderColor: colors.borderColor, borderWidth: 3}} onPress={() => {navigation.navigate('AccountFollowRequestsScreen')}}>
<View style={{justifyContent: 'center', alignItems: 'flex-start', marginLeft: 5}}>
<Text style={{color: colors.tertiary, fontSize: 20, fontWeight: 'bold'}}>Account Follow Requests</Text>
<Text style={{color: colors.tertiary, fontSize: 16}}>Check who wants to follow you</Text>
</View>
<View style={{position: 'absolute', right: 5, top: 4, alignItems: 'center', justifyContent: 'center'}}>
<EvilIcons size={45} color={colors.tertiary} name="arrow-right"/>
{
privateAccount == true ?
<TouchableOpacity style={{borderColor: colors.borderColor, borderWidth: 3}} onPress={() => {navigation.navigate('AccountFollowRequestsScreen')}}>
<View style={{justifyContent: 'center', alignItems: 'flex-start', marginLeft: 5}}>
<Text style={{color: colors.tertiary, fontSize: 20, fontWeight: 'bold'}}>Account Follow Requests</Text>
<Text style={{color: colors.tertiary, fontSize: 16}}>Check who wants to follow you</Text>
</View>
<View style={{position: 'absolute', right: 5, top: 4, alignItems: 'center', justifyContent: 'center'}}>
<EvilIcons size={45} color={colors.tertiary} name="arrow-right"/>
</View>
</TouchableOpacity>
: null
}
{
notificationReducer.clearing ?
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Text style={{color: colors.tertiary, fontSize: 20, fontWeight: 'bold', textAlign: 'center'}}>Clearing notifications...</Text>
<ActivityIndicator color={colors.brand} size="large"/>
</View>
: notificationReducer.errorClearing ?
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Text style={{color: colors.errorColor, fontSize: 24, fontWeight: 'bold', textAlign: 'center'}}>An error occured:</Text>
<Text style={{color: colors.errorColor, fontSize: 20, textAlign: 'center', marginVertical: 20}}>{notificationReducer.errorClearing}</Text>
<View style={{flexDirection: 'row'}}>
<TouchableOpacity onPress={cancelClearingNotifications} style={{borderColor: colors.tertiary, borderWidth: 3, padding: 12, borderRadius: 10, marginRight: 20}}>
<Text style={{color: colors.tertiary, fontSize: 14, fontWeight: 'bold'}}>Cancel</Text>
</TouchableOpacity>
<TouchableOpacity onPress={clearNotifications} style={{borderColor: colors.errorColor, borderWidth: 3, padding: 12, borderRadius: 10}}>
<Text style={{color: colors.tertiary, fontSize: 14, fontWeight: 'bold'}}>Retry</Text>
</TouchableOpacity>
</View>
</View>
: notificationReducer.notifications.length > 0 ?
<FlatList
data={notificationReducer.notifications}
renderItem={({item, index}) => <Notification notification={item} index={index}/>}
keyExtractor={(item, index) => 'key'+index}
ListHeaderComponent={
<TouchableOpacity style={{borderColor: colors.red, borderWidth: 2, paddingVertical: 5, paddingHorizontal: 10, borderRadius: 10, marginHorizontal: 40, marginVertical: 10}} onPress={clearNotifications}>
<Text style={{color: colors.red, fontSize: 20, fontWeight: 'bold', textAlign: 'center'}}>Clear Notifications</Text>
</TouchableOpacity>
}
ListFooterComponent={
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center', marginTop: 50}}>
<Text style={{color: colors.tertiary, fontSize: 20, fontWeight: 'bold', textAlign: 'center'}}>Notifications need backend implementation and will be coming soon</Text>
</View>
</TouchableOpacity>
: null
}
ListFooterComponent={
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center', marginTop: 50}}>
<Text style={{color: colors.tertiary, fontSize: 20, fontWeight: 'bold', textAlign: 'center'}}>Notifications need backend implementation and will be coming soon</Text>
}
refreshControl={
<RefreshControl
refreshing={notificationReducer.reloadingFeed}
onRefresh={() => {
loadNotifications(true)
}}
/>
}

/>
:
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center', marginHorizontal: 10}}>
{
notificationReducer.error ?
<>
<Text style={{color: colors.errorColor, fontSize: 24, fontWeight: 'bold', textAlign: 'center'}}>An error occured:</Text>
<Text style={{color: colors.errorColor, fontSize: 20, textAlign: 'center', marginVertical: 20}}>{notificationReducer.error}</Text>
<TouchableOpacity onPress={() => loadNotifications(true)}>
<Ionicons name="reload" size={50} color={colors.errorColor} />
</TouchableOpacity>
</>
: notificationReducer.loadingFeed ?
<ActivityIndicator color={colors.brand} size="large"/>
:
<Text style={{color: colors.tertiary, fontSize: 20, textAlign: 'center'}}>You have no notifications from the past 7 days</Text>
}
</View>
}

/>
}
</>
:
<View style={{flex: 1, justifyContent: 'center', marginHorizontal: '2%'}}>
Expand Down