aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/assets/images/hide-caret.pngbin0 -> 285 bytes
-rw-r--r--src/assets/images/hide-caret@2x.pngbin0 -> 441 bytes
-rw-r--r--src/assets/images/hide-caret@3x.pngbin0 -> 603 bytes
-rw-r--r--src/components/notifications/Notification.tsx3
-rw-r--r--src/screens/main/NotificationsScreen.tsx150
5 files changed, 129 insertions, 24 deletions
diff --git a/src/assets/images/hide-caret.png b/src/assets/images/hide-caret.png
new file mode 100644
index 00000000..bb05b53a
--- /dev/null
+++ b/src/assets/images/hide-caret.png
Binary files differ
diff --git a/src/assets/images/hide-caret@2x.png b/src/assets/images/hide-caret@2x.png
new file mode 100644
index 00000000..3f4689d3
--- /dev/null
+++ b/src/assets/images/hide-caret@2x.png
Binary files differ
diff --git a/src/assets/images/hide-caret@3x.png b/src/assets/images/hide-caret@3x.png
new file mode 100644
index 00000000..a44c36fe
--- /dev/null
+++ b/src/assets/images/hide-caret@3x.png
Binary files differ
diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx
index f83abcbc..c8a8aa06 100644
--- a/src/components/notifications/Notification.tsx
+++ b/src/components/notifications/Notification.tsx
@@ -256,10 +256,11 @@ const styles = StyleSheet.create({
container: {
flexDirection: 'row',
height: Math.round(SCREEN_HEIGHT / 10),
- width: SCREEN_WIDTH * 0.9,
+ width: SCREEN_WIDTH,
flex: 1,
alignSelf: 'center',
alignItems: 'center',
+ paddingHorizontal: '8%',
},
avatarContainer: {
height: 42,
diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx
index 74bcf906..501c44fc 100644
--- a/src/screens/main/NotificationsScreen.tsx
+++ b/src/screens/main/NotificationsScreen.tsx
@@ -17,6 +17,7 @@ import {
Text,
View,
} from 'react-native';
+import {TouchableOpacity} from 'react-native-gesture-handler';
import {SafeAreaView} from 'react-native-safe-area-context';
import {useDispatch, useSelector} from 'react-redux';
import {TabsGradient, TaggPrompt} from '../../components';
@@ -48,8 +49,20 @@ const NotificationsScreen: React.FC = () => {
const [showSPNotifyPopUp, setShowSPNotifyPopUp] = useState(false);
const {user: loggedInUser} = useSelector((state: RootState) => state.user);
const [sectionedNotifications, setSectionedNotifications] = useState<
- {title: 'Today' | 'Yesterday' | 'This Week'; data: NotificationType[]}[]
+ {
+ title: 'Friend Requests' | 'Today' | 'Yesterday' | 'This Week';
+ data: NotificationType[];
+ }[]
>([]);
+
+ const DEFAULT_NOTIFICATIONS_SIZE = 2;
+
+ const [footerEnabled, setFooterEnabled] = useState(false);
+ const [requestLimit, setRequestLimit] = useState(DEFAULT_NOTIFICATIONS_SIZE);
+ const [allFriendRequests, setFriendRequests] = useState<NotificationType[]>(
+ [],
+ );
+
const dispatch = useDispatch();
const refreshNotifications = () => {
@@ -112,6 +125,7 @@ const NotificationsScreen: React.FC = () => {
let todays = [];
let yesterdays = [];
let thisWeeks = [];
+ let friendRequests = [];
for (const n of sortedNotifications) {
const notificationDate = moment(n.timestamp);
const dateAge = getDateAge(notificationDate);
@@ -120,34 +134,47 @@ const NotificationsScreen: React.FC = () => {
}
const unread = lastViewed ? lastViewed.diff(notificationDate) < 0 : false;
const newN = {...n, unread};
- switch (dateAge) {
- case 'today':
- todays.push(newN);
- continue;
- case 'yesterday':
- yesterdays.push(newN);
- continue;
- case 'thisWeek':
- thisWeeks.push(newN);
- continue;
- default:
- continue;
+
+ if (n.notification_type === 'FRD_REQ') {
+ friendRequests.push(newN);
+ } else {
+ switch (dateAge) {
+ case 'today':
+ todays.push(newN);
+ continue;
+ case 'yesterday':
+ yesterdays.push(newN);
+ continue;
+ case 'thisWeek':
+ thisWeeks.push(newN);
+ continue;
+ default:
+ continue;
+ }
}
}
+ setFriendRequests(friendRequests);
+ setFooterEnabled(
+ requestLimit === friendRequests.length &&
+ friendRequests.length > DEFAULT_NOTIFICATIONS_SIZE,
+ );
setSectionedNotifications(
- todays.length === 0 && yesterdays.length === 0 && thisWeeks.length === 0
+ todays.length === 0 &&
+ yesterdays.length === 0 &&
+ thisWeeks.length === 0 &&
+ friendRequests.length === 0
? []
: [
+ {
+ title: 'Friend Requests',
+ data: friendRequests.slice(0, requestLimit),
+ },
{title: 'Today', data: todays},
{title: 'Yesterday', data: yesterdays},
{title: 'This Week', data: thisWeeks},
],
);
- }, [lastViewed, notifications, showSPNotifyPopUp]);
-
- useEffect(() => {
- console.log(sectionedNotifications);
- }, [sectionedNotifications]);
+ }, [lastViewed, notifications, showSPNotifyPopUp, requestLimit]);
const renderNotification = ({item}: {item: NotificationType}) => (
<Notification
@@ -157,13 +184,74 @@ const NotificationsScreen: React.FC = () => {
/>
);
- const renderSectionHeader = ({section: {title, data}}) =>
+ const renderSectionHeader = ({
+ section: {title, data},
+ }: {
+ section: {title: string; data: NotificationType[]};
+ }) =>
data.length !== 0 && (
<View style={styles.sectionHeaderContainer}>
- <Text style={styles.sectionHeader}>{title}</Text>
+ <Text
+ style={[
+ styles.sectionFont,
+ styles.sectionHeader,
+ styles.sectionLocation,
+ ]}>
+ {title}
+ </Text>
</View>
);
+ const renderSectionFooter = ({
+ section: {title},
+ }: {
+ section: {title: string};
+ }) => {
+ if (title === 'Friend Requests') {
+ if (footerEnabled) {
+ return (
+ <TouchableOpacity
+ style={styles.sectionHeaderContainer}
+ onPress={() => {
+ setRequestLimit(DEFAULT_NOTIFICATIONS_SIZE);
+ }}>
+ <View
+ style={[styles.sectionLocation, styles.hiddenSectionContainer]}>
+ <Image
+ style={styles.hideImageStyles}
+ source={require('../../assets/images/hide-caret.png')}
+ />
+ <Text style={[styles.sectionFont, styles.sectionFooter]}>
+ {'Hide'}
+ </Text>
+ </View>
+ </TouchableOpacity>
+ );
+ }
+
+ if (allFriendRequests.length > DEFAULT_NOTIFICATIONS_SIZE) {
+ return (
+ <TouchableOpacity
+ style={styles.sectionHeaderContainer}
+ onPress={() => {
+ setRequestLimit(allFriendRequests.length);
+ }}>
+ <Text
+ style={[
+ styles.sectionFont,
+ styles.sectionFooter,
+ styles.sectionLocation,
+ ]}>
+ {`+ ${allFriendRequests.length - requestLimit} More`}
+ </Text>
+ </TouchableOpacity>
+ );
+ }
+ }
+
+ return null;
+ };
+
const SPPromptNotification: ReactElement = showSPNotifyPopUp ? (
<TaggPrompt
messageHeader={'New Suggested People Page!'}
@@ -198,13 +286,15 @@ const NotificationsScreen: React.FC = () => {
<SectionList
contentContainerStyle={styles.container}
sections={sectionedNotifications}
- keyExtractor={(item, index) => index.toString()}
+ keyExtractor={(_item, index) => index.toString()}
renderItem={renderNotification}
renderSectionHeader={renderSectionHeader}
+ renderSectionFooter={renderSectionFooter}
ListHeaderComponent={SPPromptNotification}
refreshControl={
<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
}
+ extraData={requestLimit}
ListEmptyComponent={
<View style={styles.emptyViewContainer}>
<EmptyNotificationView />
@@ -240,16 +330,30 @@ const styles = StyleSheet.create({
},
sectionHeaderContainer: {
width: '100%',
+ backgroundColor: 'white',
},
- sectionHeader: {
+
+ sectionLocation: {
marginLeft: '8%',
marginTop: '5%',
marginBottom: '2%',
+ },
+
+ sectionFont: {
fontWeight: '600',
fontSize: normalize(12),
lineHeight: normalize(14),
+ },
+ hiddenSectionContainer: {
+ flexDirection: 'row',
+ },
+ hideImageStyles: {alignSelf: 'center', marginRight: 8},
+ sectionHeader: {
color: '#828282',
},
+ sectionFooter: {
+ color: '#698DD3',
+ },
emptyViewContainer: {
flex: 1,
justifyContent: 'center',
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 12:53:58 +0000