[TMA 446] Create category (#144)

* Added welcome page

* Working code

* Small fix

* Some more cleanup

* Fixes

* Cleanup

* Fix again

* Use gradient for white bg as well

* Fixed type

8 files changed, 138 insertions, 3 deletions

diff --git a/src/store/actions/index.ts b/src/store/actions/index.ts
index 04fa9767..f9fd5e9c 100644
--- a/src/store/actions/index.ts
+++ b/src/store/actions/index.ts
@@ -1,6 +1,7 @@
 export * from './user';
 export * from './userFollow';
 export * from './userMoments';
+export * from './momentCategories';
 export * from './socials';
 export * from './taggUsers';
 export * from './userBlock';
diff --git a/src/store/actions/momentCategories.tsx b/src/store/actions/momentCategories.tsx
new file mode 100644
index 00000000..a522c3e0
--- /dev/null
+++ b/src/store/actions/momentCategories.tsx
@@ -0,0 +1,63 @@
+import {RootState} from '../rootReducer';
+import {
+  deleteMomentCategories,
+  loadMomentCategories,
+  postMomentCategories,
+} from '../../services';
+import {Action, ThunkAction} from '@reduxjs/toolkit';
+import {momentCategoriesFetched} from '../reducers';
+import {getTokenOrLogout} from '../../utils';
+import {MomentCategoryType} from '../../types';
+
+/**
+ * Load all categories for user
+ * @param userId id of the user for whom categories should be loaded
+ */
+export const loadUserMomentCategories = (
+  userId: string,
+): ThunkAction<Promise<void>, RootState, unknown, Action<string>> => async (
+  dispatch,
+) => {
+  try {
+    const token = await getTokenOrLogout(dispatch);
+    const categories = await loadMomentCategories(userId, token);
+    dispatch({
+      type: momentCategoriesFetched.type,
+      payload: {categories, add: true},
+    });
+  } catch (error) {
+    console.log(error);
+  }
+};
+
+/**
+ * Handle addition / deletion of categories for a user
+ * @param categories List of categories
+ * @param add boolean, if true, we add new categories, else we delete
+ * @param userId id of the user for whom categories should be updated
+ */
+export const updateMomentCategories = (
+  categories: Array<MomentCategoryType>,
+  add: boolean,
+  userId: string,
+): ThunkAction<Promise<void>, RootState, unknown, Action<string>> => async (
+  dispatch,
+) => {
+  try {
+    const token = await getTokenOrLogout(dispatch);
+    let success = false;
+    if (add) {
+      success = await postMomentCategories(categories, token);
+    } else {
+      success = await deleteMomentCategories(categories, userId, token);
+    }
+    if (success) {
+      dispatch({
+        type: momentCategoriesFetched.type,
+        payload: {categories, add},
+      });
+    }
+  } catch (error) {
+    console.log(error);
+  }
+};
diff --git a/src/store/actions/userX.ts b/src/store/actions/userX.ts
index 5468f762..87162eb1 100644
--- a/src/store/actions/userX.ts
+++ b/src/store/actions/userX.ts
@@ -1,6 +1,7 @@
+import {loadMomentCategories} from './../../services/MomentCategoryService';
 import {userXInStore} from './../../utils/';
 import {getTokenOrLogout, loadAllSocialsForUser} from './../../utils';
-import {UserType, ScreenType, ProfilePreviewType} from '../../types/types';
+import {UserType, ScreenType} from '../../types/types';
 import {RootState} from '../rootReducer';
 import {Action, ThunkAction} from '@reduxjs/toolkit';
 import {
@@ -13,6 +14,7 @@ import {
   userXProfileFetched,
   userXSocialsFetched,
   userXUserFetched,
+  userXMomentCategoriesFetched,
   resetScreen,
 } from '../reducers';
 import {
@@ -80,6 +82,12 @@ export const loadUserX = (
         payload: {screenType, userId, data},
       }),
     );
+    loadMomentCategories(userId, token).then((data) => {
+      dispatch({
+        type: userXMomentCategoriesFetched.type,
+        payload: {screenType, userId, data},
+      });
+    });
   } catch (error) {
     console.log(error);
   }
diff --git a/src/store/initialStates.ts b/src/store/initialStates.ts
index 817af86b..8f4a2e84 100644
--- a/src/store/initialStates.ts
+++ b/src/store/initialStates.ts
@@ -1,4 +1,4 @@
-import {MomentType} from 'src/types';
+import {MomentCategoryType, MomentType} from '../types';
 import {
   ProfileType,
   SocialAccountType,
@@ -62,6 +62,24 @@ export const NO_BLOCKED_USERS = {
   blockedUsers: EMPTY_PROFILE_PREVIEW_LIST,
 };
 
+export const MOMENT_CATEGORIES_MAP: Record<MomentCategoryType, boolean> = {
+  Friends: false,
+  Adventure: false,
+  'Photo Dump': false,
+  Food: false,
+  Music: false,
+  Art: false,
+  Sports: false,
+  Fashion: false,
+  Travel: false,
+  Pets: false,
+  Nightlife: false,
+  DIY: false,
+  Nature: false,
+  'Early Life': false,
+  Beauty: false,
+};
+
 /**
  * The dummy userId and username serve the purpose of preventing app crash
  * For instance, if it may happen that data in our store is not loaded yet for the userXId being visited.
@@ -74,6 +92,7 @@ export const EMPTY_USER_X = <UserXType>{
   followers: EMPTY_PROFILE_PREVIEW_LIST,
   following: EMPTY_PROFILE_PREVIEW_LIST,
   moments: EMPTY_MOMENTS_LIST,
+  momentCategories: MOMENT_CATEGORIES_MAP,
   socialAccounts: NO_SOCIAL_ACCOUNTS,
   user: NO_USER,
   profile: NO_PROFILE,
@@ -95,3 +114,7 @@ export const EMPTY_SCREEN_TO_USERS_LIST: Record<
   [ScreenType.Profile]: EMPTY_USERX_LIST,
   [ScreenType.Search]: EMPTY_USERX_LIST,
 };
+
+export const INITIAL_CATEGORIES_STATE = {
+  momentCategories: MOMENT_CATEGORIES_MAP,
+};
diff --git a/src/store/reducers/index.ts b/src/store/reducers/index.ts
index 0e378bc5..e09b41ee 100644
--- a/src/store/reducers/index.ts
+++ b/src/store/reducers/index.ts
@@ -5,3 +5,4 @@ export * from './userSocialsReducer';
 export * from './taggUsersReducer';
 export * from './userBlockReducer';
 export * from './userXReducer';
+export * from './momentCategoryReducer';
diff --git a/src/store/reducers/momentCategoryReducer.tsx b/src/store/reducers/momentCategoryReducer.tsx
new file mode 100644
index 00000000..d1f448f9
--- /dev/null
+++ b/src/store/reducers/momentCategoryReducer.tsx
@@ -0,0 +1,22 @@
+import {createSlice} from '@reduxjs/toolkit';
+import {INITIAL_CATEGORIES_STATE} from '../initialStates';
+import {MomentCategoryType} from '../../types';
+
+const momentCategoriesSlice = createSlice({
+  name: 'momentCategories',
+  initialState: INITIAL_CATEGORIES_STATE,
+  reducers: {
+    /**
+     * One stop to add / delete / update categories for a user
+     */
+    momentCategoriesFetched: (state, action) => {
+      const categories: Array<MomentCategoryType> = action.payload.categories;
+      for (let category of categories) {
+        state.momentCategories[category] = action.payload.add;
+      }
+    },
+  },
+});
+
+export const {momentCategoriesFetched} = momentCategoriesSlice.actions;
+export const momentCategoriesReducer = momentCategoriesSlice.reducer;
diff --git a/src/store/reducers/userXReducer.ts b/src/store/reducers/userXReducer.ts
index 154dd7dc..bb142864 100644
--- a/src/store/reducers/userXReducer.ts
+++ b/src/store/reducers/userXReducer.ts
@@ -1,4 +1,4 @@
-import {ScreenType} from '../../types/types';
+import {MomentCategoryType, ScreenType} from '../../types/types';
 import {EMPTY_SCREEN_TO_USERS_LIST, EMPTY_USER_X} from '../initialStates';
 import {createSlice} from '@reduxjs/toolkit';
 
@@ -23,31 +23,45 @@ const userXSlice = createSlice({
         action.payload.user;
     },
 
+    userXMomentCategoriesFetched: (state, action) => {
+      const categories: Array<MomentCategoryType> = action.payload.data;
+      for (let category of categories) {
+        state[<ScreenType>action.payload.screenType][
+          action.payload.userId
+        ].momentCategories[category] = true;
+      }
+    },
+
     userXMomentsFetched: (state, action) => {
       state[<ScreenType>action.payload.screenType][
         action.payload.userId
       ].moments = action.payload.data;
     },
+
     userXFollowersFetched: (state, action) => {
       state[<ScreenType>action.payload.screenType][
         action.payload.userId
       ].followers = action.payload.data;
     },
+
     userXFollowingFetched: (state, action) => {
       state[<ScreenType>action.payload.screenType][
         action.payload.userId
       ].following = action.payload.data;
     },
+
     userXAvatarFetched: (state, action) => {
       state[<ScreenType>action.payload.screenType][
         action.payload.userId
       ].avatar = action.payload.data;
     },
+
     userXCoverFetched: (state, action) => {
       state[<ScreenType>action.payload.screenType][
         action.payload.userId
       ].cover = action.payload.data;
     },
+
     userXSocialsFetched: (state, action) => {
       state[<ScreenType>action.payload.screenType][
         action.payload.userId
@@ -72,6 +86,7 @@ export const {
   userXMomentsFetched,
   userXProfileFetched,
   userXSocialsFetched,
+  userXMomentCategoriesFetched,
   resetScreen,
 } = userXSlice.actions;
 export const userXReducer = userXSlice.reducer;
diff --git a/src/store/rootReducer.ts b/src/store/rootReducer.ts
index 695ed8c7..8f002de0 100644
--- a/src/store/rootReducer.ts
+++ b/src/store/rootReducer.ts
@@ -7,6 +7,7 @@ import {
   taggUsersReducer,
   userBlockReducer,
   userXReducer,
+  momentCategoriesReducer,
 } from './reducers';
 
 /**
@@ -20,6 +21,7 @@ const rootReducer = combineReducers({
   socialAccounts: userSocialsReducer,
   taggUsers: taggUsersReducer,
   blocked: userBlockReducer,
+  momentCategories: momentCategoriesReducer,
   userX: userXReducer,
 });