[TMA-461] Notifications Screen (#151)

* renamed ProfileStack to MainStack, created initial notifications data type

* cleaned up code

* added notifications to redux

* finished sectioned list

* updated types to make more sense

* finished sectioned notifications by date

* updated notification type and tested mock backend integration

* finished read or unread logic

* minor changes

* another minor fix

* finished integration

* moved stuff

* added ability to navigate to user profile

Co-authored-by: Husam Salhab <47015061+hsalhab@users.noreply.github.com>

8 files changed, 55 insertions, 6 deletions

diff --git a/src/store/actions/index.ts b/src/store/actions/index.ts
index f9fd5e9c..285ca4de 100644
--- a/src/store/actions/index.ts
+++ b/src/store/actions/index.ts
@@ -6,3 +6,4 @@ export * from './socials';
 export * from './taggUsers';
 export * from './userBlock';
 export * from './userX';
+export * from './notifications';
diff --git a/src/store/actions/notifications.ts b/src/store/actions/notifications.ts
new file mode 100644
index 00000000..bace1776
--- /dev/null
+++ b/src/store/actions/notifications.ts
@@ -0,0 +1,21 @@
+import {Action, ThunkAction} from '@reduxjs/toolkit';
+import {getNotificationsData} from '../../services';
+import {userNotificationsFetched} from '../reducers';
+import {RootState} from '../rootReducer';
+
+export const loadUserNotifications = (): ThunkAction<
+  Promise<void>,
+  RootState,
+  unknown,
+  Action<string>
+> => async (dispatch) => {
+  try {
+    const notifications = await getNotificationsData();
+    dispatch({
+      type: userNotificationsFetched.type,
+      payload: notifications,
+    });
+  } catch (error) {
+    console.log(error);
+  }
+};
diff --git a/src/store/actions/user.ts b/src/store/actions/user.ts
index e77b8513..eee5fcde 100644
--- a/src/store/actions/user.ts
+++ b/src/store/actions/user.ts
@@ -26,7 +26,7 @@ export const loadUserData = (
     const token = await getTokenOrLogout(dispatch);
     const [profile, avatar, cover] = await Promise.all([
       loadProfileInfo(token, user.userId),
-      loadAvatar(token, user.userId),
+      loadAvatar(user.userId, false),
       loadCover(token, user.userId),
     ]);
     dispatch({
diff --git a/src/store/actions/userX.ts b/src/store/actions/userX.ts
index 87162eb1..e313546e 100644
--- a/src/store/actions/userX.ts
+++ b/src/store/actions/userX.ts
@@ -52,7 +52,7 @@ export const loadUserX = (
         payload: {screenType, userId, data},
       }),
     );
-    loadAvatar(token, userId).then((data) =>
+    loadAvatar(userId, false).then((data) =>
       dispatch({
         type: userXAvatarFetched.type,
         payload: {screenType, userId, data},
diff --git a/src/store/initialStates.ts b/src/store/initialStates.ts
index 8f4a2e84..b75569d6 100644
--- a/src/store/initialStates.ts
+++ b/src/store/initialStates.ts
@@ -1,11 +1,13 @@
-import {MomentCategoryType, MomentType} from '../types';
 import {
-  ProfileType,
-  SocialAccountType,
+  MomentCategoryType,
+  MomentType,
+  NotificationType,
   ProfilePreviewType,
+  ProfileType,
   ScreenType,
-  UserXType,
+  SocialAccountType,
   UserType,
+  UserXType,
 } from '../types';
 
 export const NO_PROFILE: ProfileType = {
@@ -20,6 +22,8 @@ export const NO_PROFILE: ProfileType = {
 
 export const EMPTY_MOMENTS_LIST = <MomentType[]>[];
 
+export const EMPTY_NOTIFICATIONS_LIST = <NotificationType[]>[];
+
 export const NO_USER: UserType = {
   userId: '',
   username: '',
@@ -34,6 +38,10 @@ export const NO_USER_DATA = {
   cover: <string | null>'',
 };
 
+export const NO_NOTIFICATIONS = {
+  notifications: EMPTY_NOTIFICATIONS_LIST,
+};
+
 export const NO_FOLLOW_DATA = {
   followers: EMPTY_PROFILE_PREVIEW_LIST,
   following: EMPTY_PROFILE_PREVIEW_LIST,
@@ -113,6 +121,7 @@ export const EMPTY_SCREEN_TO_USERS_LIST: Record<
 > = {
   [ScreenType.Profile]: EMPTY_USERX_LIST,
   [ScreenType.Search]: EMPTY_USERX_LIST,
+  [ScreenType.Notifications]: EMPTY_USERX_LIST,
 };
 
 export const INITIAL_CATEGORIES_STATE = {
diff --git a/src/store/reducers/index.ts b/src/store/reducers/index.ts
index e09b41ee..f525eb81 100644
--- a/src/store/reducers/index.ts
+++ b/src/store/reducers/index.ts
@@ -6,3 +6,4 @@ export * from './taggUsersReducer';
 export * from './userBlockReducer';
 export * from './userXReducer';
 export * from './momentCategoryReducer';
+export * from './userNotificationsReducer';
diff --git a/src/store/reducers/userNotificationsReducer.ts b/src/store/reducers/userNotificationsReducer.ts
new file mode 100644
index 00000000..4fc196ca
--- /dev/null
+++ b/src/store/reducers/userNotificationsReducer.ts
@@ -0,0 +1,15 @@
+import {createSlice} from '@reduxjs/toolkit';
+import {NO_NOTIFICATIONS} from '../initialStates';
+
+const userNotificationsSlice = createSlice({
+  name: 'userNotifications',
+  initialState: NO_NOTIFICATIONS,
+  reducers: {
+    userNotificationsFetched: (state, action) => {
+      state.notifications = action.payload;
+    },
+  },
+});
+
+export const {userNotificationsFetched} = userNotificationsSlice.actions;
+export const userNotificationsReducer = userNotificationsSlice.reducer;
diff --git a/src/store/rootReducer.ts b/src/store/rootReducer.ts
index 8f002de0..7940b1fe 100644
--- a/src/store/rootReducer.ts
+++ b/src/store/rootReducer.ts
@@ -8,6 +8,7 @@ import {
   userBlockReducer,
   userXReducer,
   momentCategoriesReducer,
+  userNotificationsReducer,
 } from './reducers';
 
 /**
@@ -18,6 +19,7 @@ const rootReducer = combineReducers({
   user: userDataReducer,
   follow: userFollowReducer,
   moments: userMomentsReducer,
+  notifications: userNotificationsReducer,
   socialAccounts: userSocialsReducer,
   taggUsers: taggUsersReducer,
   blocked: userBlockReducer,