[TMA-410] Edit Non-Integrated Socials (#126)

* removed refs, added KB avoidance, UI done

* missed some things

* now parsing response correctly from backend

* fixed naming

* now allow empty strings to un-link a social

* hide field if empty, allow empty string, fixed taggs bar not updating bug

* Fix bug where non integrated socials do not show up on edit profile page

Co-authored-by: Ashm Walia <40498934+ashmgarv@users.noreply.github.com>
Co-authored-by: Ashm Walia <ashmwalia@outlook.com>

3 files changed, 42 insertions, 2 deletions

diff --git a/src/store/actions/user.ts b/src/store/actions/user.ts
index 09ec8abf..e77b8513 100644
--- a/src/store/actions/user.ts
+++ b/src/store/actions/user.ts
@@ -2,7 +2,7 @@ import {RootState} from '../rootReducer';
 import {UserType} from '../../types/types';
 import {loadProfileInfo, loadAvatar, loadCover} from '../../services';
 import {Action, ThunkAction} from '@reduxjs/toolkit';
-import {userLoggedIn, userDetailsFetched} from '../reducers';
+import {userLoggedIn, userDetailsFetched, socialEdited} from '../reducers';
 import {getTokenOrLogout} from '../../utils';
 
 /**
@@ -38,6 +38,28 @@ export const loadUserData = (
   }
 };
 
+/**
+ * To update editable socials
+ * @param social social to be updated
+ * @param value username of social to be updated
+ */
+export const updateSocial = (
+  social: string,
+  value: string,
+): ThunkAction<Promise<void>, RootState, unknown, Action<string>> => async (
+  dispatch,
+) => {
+  try {
+    console.log(social);
+    dispatch({
+      type: socialEdited.type,
+      payload: {social, value},
+    });
+  } catch (error) {
+    console.log(error);
+  }
+};
+
 export const logout = (): ThunkAction<
   Promise<void>,
   RootState,
diff --git a/src/store/initialStates.ts b/src/store/initialStates.ts
index 4087b97c..817af86b 100644
--- a/src/store/initialStates.ts
+++ b/src/store/initialStates.ts
@@ -14,6 +14,8 @@ export const NO_PROFILE: ProfileType = {
   name: '',
   gender: '',
   birthday: undefined,
+  snapchat: '',
+  tiktok: '',
 };
 
 export const EMPTY_MOMENTS_LIST = <MomentType[]>[];
diff --git a/src/store/reducers/userReducer.ts b/src/store/reducers/userReducer.ts
index f43bd0bc..2fd5c462 100644
--- a/src/store/reducers/userReducer.ts
+++ b/src/store/reducers/userReducer.ts
@@ -29,8 +29,24 @@ const userDataSlice = createSlice({
       state.avatar = action.payload.avatar;
       state.cover = action.payload.cover;
     },
+
+    socialEdited: (state, action) => {
+      const {social, value} = action.payload;
+      switch (social) {
+        case 'Snapchat':
+          state.profile.snapchat = value;
+          break;
+        case 'TikTok':
+          state.profile.tiktok = value;
+          break;
+      }
+    },
   },
 });
 
-export const {userLoggedIn, userDetailsFetched} = userDataSlice.actions;
+export const {
+  userLoggedIn,
+  userDetailsFetched,
+  socialEdited,
+} = userDataSlice.actions;
 export const userDataReducer = userDataSlice.reducer;