MP-33 member tracks in settings

Author: kkartunov

src/apps/accounts/src/settings/tabs/config/account-settings-tabs-config.ts

@@ -44,7 +44,7 @@ export function getHashFromTabId(tabId: string): string {
 
 export function getTabIdFromHash(hash: string): string {
     switch (hash) {
-        case '#tcandyu': return AccountSettingsTabViews.tcandyou
+        case '#tcandyou': return AccountSettingsTabViews.tcandyou
         case '#tools': return AccountSettingsTabViews.tools
         case '#account': return AccountSettingsTabViews.account
         case '#preferences': return AccountSettingsTabViews.preferences

src/apps/accounts/src/settings/tabs/tcandyou/TCandYouTab.tsx

@@ -7,6 +7,7 @@ import styles from './TCandYouTab.module.scss'
 
 interface TCandYouTabProps {
     profile: UserProfile
+    // eslint-disable-next-line react/no-unused-prop-types
     memberTraits: UserTraits[] | undefined
 }
 

src/apps/accounts/src/settings/tabs/tcandyou/tracks/Tracks.tsx

@@ -1,7 +1,8 @@
-import { Dispatch, FC, useState } from 'react'
+import { Dispatch, FC, useContext, useEffect, useState } from 'react'
 import { bind } from 'lodash'
+import { toast } from 'react-toastify'
 
-import { TC_TRACKS, UserProfile } from '~/libs/core'
+import { profileContext, ProfileContextData, TC_TRACKS, updateMemberProfileAsync, UserProfile } from '~/libs/core'
 import { Collapsible, FormToggleSwitch } from '~/libs/ui'
 import { DataScienceTrackIcon, DesignTrackIcon, DevelopmentTrackIcon, SettingSection } from '~/apps/accounts/src/lib'
 
@@ -12,20 +13,46 @@ interface TracksProps {
 }
 
 const Tracks: FC<TracksProps> = (props: TracksProps) => {
-    const [devTrack, setDevTrack]: [boolean, Dispatch<boolean>]
-        = useState<boolean>(!!props.profile.tracks?.includes('DEVELOP'))
+    const [memberTracks, setMemberTracks]: [TC_TRACKS[], Dispatch<TC_TRACKS[]>]
+        = useState<TC_TRACKS[]>(props.profile.tracks || [])
 
-    const [designTrack, setDesignTrack]: [boolean, Dispatch<boolean>]
-        = useState<boolean>(!!props.profile.tracks?.includes('DESIGN'))
+    const memberProfileContext: ProfileContextData = useContext(profileContext)
 
-    const [dsTrack, setDSTrack]: [boolean, Dispatch<boolean>]
-        = useState<boolean>(!!props.profile.tracks?.includes('DATA_SCIENCE'))
+    useEffect(() => {
+        setMemberTracks(props.profile.tracks || [])
+    }, [props.profile])
 
     function handleTracksChange(type: TC_TRACKS): void {
-        
-    }
+        const hasTrack: boolean = memberTracks.includes(type)
+        let updatedTracks: TC_TRACKS[]
+
+        if (hasTrack) {
+            // remove track
+            updatedTracks = memberTracks.filter((track: TC_TRACKS) => track !== type)
+        } else {
+            // add track
+            updatedTracks = memberTracks.concat(type)
+        }
 
-    console.log('devTrack', props)
+        updateMemberProfileAsync(
+            props.profile.handle,
+            { tracks: updatedTracks },
+        )
+            .then(() => {
+                setMemberTracks(updatedTracks)
+                memberProfileContext.updateProfileContext({
+                    ...memberProfileContext,
+                    profile: {
+                        ...memberProfileContext.profile,
+                        tracks: updatedTracks,
+                    } as any,
+                })
+                toast.success('Your profile has been updated.')
+            })
+            .catch(() => {
+                toast.error('Failed to update your profile.')
+            })
+    }
 
     return (
         <Collapsible
@@ -48,7 +75,7 @@ const Tracks: FC<TracksProps> = (props: TracksProps) => {
                     <FormToggleSwitch
                         name='designTrack'
                         onChange={bind(handleTracksChange, this, 'DESIGN')}
-                        value={designTrack}
+                        value={!!memberTracks.includes('DESIGN')}
                     />
                 )}
             />
@@ -63,7 +90,7 @@ const Tracks: FC<TracksProps> = (props: TracksProps) => {
                     <FormToggleSwitch
                         name='devTrack'
                         onChange={bind(handleTracksChange, this, 'DEVELOP')}
-                        value={devTrack}
+                        value={!!memberTracks.includes('DEVELOP')}
                     />
                 )}
             />
@@ -78,7 +105,7 @@ const Tracks: FC<TracksProps> = (props: TracksProps) => {
                     <FormToggleSwitch
                         name='dsTrack'
                         onChange={bind(handleTracksChange, this, 'DATA_SCIENCE')}
-                        value={dsTrack}
+                        value={!!memberTracks.includes('DATA_SCIENCE')}
                     />
                 )}
             />

src/libs/core/lib/profile/index.ts

@@ -14,3 +14,4 @@ export * from './modify-user-email-preferences.model'
 export * from './modify-user-mfa.model'
 export * from './user-traits.model'
 export * from './modify-tracks.request'
+export * from './modify-user-profile.model'

src/libs/core/lib/profile/modify-user-profile.model.ts

@@ -0,0 +1,7 @@
+import { TC_TRACKS } from './user-profile.model'
+
+export interface UpdateProfileRequest {
+    firstName?: string
+    lastName?: string
+    tracks?: TC_TRACKS[]
+}

src/libs/core/lib/profile/profile-context/profile-context-data.model.ts

@@ -7,4 +7,5 @@ export interface ProfileContextData {
     isLoggedIn: boolean
     profile?: UserProfile
     updateProfile: (updatedProfileContext: ProfileContextData) => Promise<void>
+    updateProfileContext: (updatedProfileContext: ProfileContextData) => void
 }

src/libs/core/lib/profile/profile-context/profile.context-provider.tsx

@@ -31,6 +31,7 @@ export const ProfileProvider: FC<ProfileProviderProps> = (props: ProfileProvider
             isLoggedIn: !!profile,
             profile,
             updateProfile,
+            updateProfileContext,
         }
         setProfileContextData(contextData)
     }
@@ -52,6 +53,17 @@ export const ProfileProvider: FC<ProfileProviderProps> = (props: ProfileProvider
             .then(() => setProfileContextData(updatedContext))
     }
 
+    function updateProfileContext(updatedContext: ProfileContextData): void {
+
+        const { profile }: ProfileContextData = updatedContext
+
+        if (!profile) {
+            throw new Error('Cannot update an undefined profile')
+        }
+
+        setProfileContextData(updatedContext)
+    }
+
     useEffect(() => {
 
         // if our profile is already initialized, no need to continue

src/libs/core/lib/profile/profile-context/profile.context.tsx

@@ -7,6 +7,7 @@ export const defaultProfileContextData: ProfileContextData = {
     initialized: false,
     isLoggedIn: false,
     updateProfile: () => Promise.resolve(undefined),
+    updateProfileContext: () => undefined,
 }
 
 const profileContext: Context<ProfileContextData> = createContext(defaultProfileContextData)

src/libs/core/lib/profile/profile-functions/index.ts

@@ -13,6 +13,7 @@ export {
     updateMemberTraitsAsync,
     createMemberTraitsAsync,
     modifyTracksAsync,
+    updateMemberProfileAsync,
 } from './profile.functions'
 export * from './profile-store'
 export * from './rating.functions'

src/libs/core/lib/profile/profile-functions/profile-store/profile-xhr.store.ts

@@ -4,6 +4,7 @@ import { EditNameRequest } from '../../edit-name-request.model'
 import { ModifyTracksRequest } from '../../modify-tracks.request'
 import { ModifyMemberEmailPreferencesRequest } from '../../modify-user-email-preferences.model'
 import { ModifyUserMFARequest, ModifyUserMFAResponse } from '../../modify-user-mfa.model'
+import { UpdateProfileRequest } from '../../modify-user-profile.model'
 import { ModifyUserPropertyRequest, ModifyUserPropertyResponse } from '../../modify-user-role.model'
 import { UserEmailPreferences } from '../../user-email-preference.model'
 import { UserProfile } from '../../user-profile.model'
@@ -94,6 +95,10 @@ export async function createMemberTraits(
     return xhrPostAsync<UserTraits[], UserTraits[]>(`${profileUrl(handle)}/traits`, traits)
 }
 
-export function modifyTracks(handle: string, request: ModifyTracksRequest): Promise<UserProfile> {
+export async function modifyTracks(handle: string, request: ModifyTracksRequest): Promise<UserProfile> {
     return xhrPutAsync<ModifyTracksRequest, UserProfile>(profileUrl(handle), request)
 }
+
+export async function updateMemberProfile(handle: string, profile: UpdateProfileRequest): Promise<UserProfile> {
+    return xhrPutAsync<UpdateProfileRequest, UserProfile>(profileUrl(handle), profile)
+}