Merge pull request #646 from topcoder-platform/accounts-app

MP-33 & MP-34 member tracks & communities -> dev

Author: kkartunov

src/apps/accounts/src/lib/assets/index.ts

@@ -2,3 +2,4 @@ export * from './security'
 export * from './preferences'
 export * from './payments'
 export * from './tools'
+export * from './tcandyou'

src/apps/accounts/src/lib/assets/tcandyou/data_science.svg

@@ -0,0 +1,15 @@
+import { ReactComponent as DevelopmentTrackIcon } from './develop.svg'
+import { ReactComponent as DesignTrackIcon } from './design.svg'
+import { ReactComponent as DataScienceTrackIcon } from './data_science.svg'
+import ethereumCommunityImage from './ico-ethereum.png'
+import ibmCommunityImage from './ico-ibmcloud.png'
+import veteransCommunityImage from './ico-veteran.png'
+
+export {
+    ethereumCommunityImage,
+    ibmCommunityImage,
+    veteransCommunityImage,
+    DesignTrackIcon,
+    DataScienceTrackIcon,
+    DevelopmentTrackIcon,
+}

src/apps/accounts/src/lib/assets/tcandyou/design.svg

@@ -9,6 +9,7 @@ import { AccountTab } from './account'
 import { PreferencesTab } from './preferences'
 import { PaymentsTab } from './payments'
 import { ToolsTab } from './tools'
+import { TCandYouTab } from './tcandyou'
 import styles from './AccountSettingsTabs.module.scss'
 
 interface AccountSettingsTabsProps {
@@ -23,7 +24,9 @@ const AccountSettingsTabs: FC<AccountSettingsTabsProps> = (props: AccountSetting
     const [activeTab, setActiveTab]: [string, Dispatch<SetStateAction<string>>]
         = useState<string>(activeTabHash)
 
-    const memberTraits: UserTraits[] | undefined = useMemberTraits(props.profile.handle)
+    const { data: memberTraits }: {
+        data: UserTraits[] | undefined
+    } = useMemberTraits(props.profile.handle)
 
     function handleTabChange(tabId: string): void {
         setActiveTab(tabId)
@@ -45,6 +48,10 @@ const AccountSettingsTabs: FC<AccountSettingsTabsProps> = (props: AccountSetting
                     'Topcoder'].join(' | ')}
             </PageTitle>
 
+            {activeTab === AccountSettingsTabViews.tcandyou && (
+                <TCandYouTab profile={props.profile} memberTraits={memberTraits} />
+            )}
+
             {activeTab === AccountSettingsTabViews.tools && (
                 <ToolsTab profile={props.profile} memberTraits={memberTraits} />
             )}

src/apps/accounts/src/lib/assets/tcandyou/develop.svg

@@ -1,14 +1,22 @@
 import { Dispatch, FC, useCallback, useEffect, useMemo, useState } from 'react'
 import { has, trim } from 'lodash'
 import { toast } from 'react-toastify'
+import { KeyedMutator } from 'swr'
 
 import {
     Collapsible,
     Form,
     FormInputModel,
     FormToggleSwitch,
 } from '~/libs/ui'
-import { updateMemberPasswordAsync, updateMemberTraitsAsync, UserProfile, UserTrait, UserTraits } from '~/libs/core'
+import {
+    updateMemberPasswordAsync,
+    updateMemberTraitsAsync,
+    useMemberTraits,
+    UserProfile,
+    UserTrait,
+    UserTraits,
+} from '~/libs/core'
 import { SettingSection } from '~/apps/accounts/src/lib'
 
 import { UserAndPassFromConfig } from './user-and-pass.form.config'
@@ -30,6 +38,8 @@ const UserAndPassword: FC<UserAndPasswordProps> = (props: UserAndPasswordProps)
         [props.memberTraits],
     )
 
+    const { mutate: mutateTraits }: { mutate: KeyedMutator<any> } = useMemberTraits(props.profile.handle)
+
     const [userConsent, setUserConsent]: [boolean, Dispatch<boolean>] = useState(false)
 
     const requestGenerator: (inputs: ReadonlyArray<FormInputModel>) => any
@@ -70,6 +80,7 @@ const UserAndPassword: FC<UserAndPasswordProps> = (props: UserAndPasswordProps)
         }])
             .then(() => {
                 setUserConsent(!userConsent)
+                mutateTraits()
                 toast.success('User consent updated successfully.')
             })
             .catch(() => {