MP-34 member communities

Author: kkartunov

src/apps/accounts/src/lib/assets/tcandyou/ico-ethereum.png

@@ -1,8 +1,14 @@
 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/ico-ibmcloud.png

@@ -24,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)

src/apps/accounts/src/lib/assets/tcandyou/ico-veteran.png

@@ -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(() => {

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

@@ -3,11 +3,11 @@ import { FC } from 'react'
 import { UserProfile, UserTraits } from '~/libs/core'
 
 import { Tracks } from './tracks'
+import { Communities } from './communities'
 import styles from './TCandYouTab.module.scss'
 
 interface TCandYouTabProps {
     profile: UserProfile
-    // eslint-disable-next-line react/no-unused-prop-types
     memberTraits: UserTraits[] | undefined
 }
 
@@ -16,6 +16,11 @@ const TCandYouTab: FC<TCandYouTabProps> = (props: TCandYouTabProps) => (
         <h3>You And Topcoder</h3>
 
         <Tracks profile={props.profile} />
+
+        <Communities
+            communityTraits={props.memberTraits?.find(trait => trait.traitId === 'communities')}
+            profile={props.profile}
+        />
     </div>
 )
 

src/apps/accounts/src/settings/tabs/AccountSettingsTabs.tsx

@@ -0,0 +1,50 @@
+@import '@libs/ui/styles/includes';
+
+.container {
+    margin: $sp-8 0;
+
+    .content {
+        display: flex;
+        flex-direction: column;
+        margin-bottom: 0;
+
+        .communityCard {
+            border: 1px solid #d4d4d4;
+            border-radius: 8px;
+            padding: $sp-4;
+            margin-bottom: $sp-4;
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+
+            .communityCardHeader {
+                display: flex;
+                align-items: flex-start;
+
+                @include ltelg {
+                    flex-direction: column;
+                }
+            }
+
+            img {
+                margin-right: $sp-4;
+                border-radius: 4px;
+
+                @include ltelg {
+                    margin-right: 0;
+                    margin-bottom: $sp-4;
+                }
+            }
+
+            .communityInfo {
+                flex: 1;
+
+                .infoText {
+                    padding-right: 74px;
+                    color: #767676;
+                    margin: $sp-3 0;
+                }
+            }
+        }
+    }
+}

src/apps/accounts/src/settings/tabs/account/user-and-pass/UserAndPassword.tsx

@@ -0,0 +1,95 @@
+import { Dispatch, FC, SetStateAction, useEffect, useState } from 'react'
+import { bind } from 'lodash'
+import { KeyedMutator } from 'swr'
+import { toast } from 'react-toastify'
+
+import { updateMemberTraitsAsync, useMemberTraits, UserProfile, UserTraits } from '~/libs/core'
+import { Button, Collapsible, FormToggleSwitch } from '~/libs/ui'
+
+import { communitiesConfig } from './communities-config'
+import styles from './Communities.module.scss'
+
+interface CommunitiesProps {
+    communityTraits: UserTraits | undefined
+    profile: UserProfile
+}
+
+interface CommunitiesDataStatus {
+    [key: string]: boolean
+}
+
+const Communities: FC<CommunitiesProps> = (props: CommunitiesProps) => {
+    const [memberCommunities, setMemberCommunities]: [
+        CommunitiesDataStatus | undefined,
+        Dispatch<SetStateAction<CommunitiesDataStatus | undefined>>
+    ]
+        = useState<CommunitiesDataStatus | undefined>()
+
+    const { mutate: mutateTraits }: { mutate: KeyedMutator<any> } = useMemberTraits(props.profile.handle)
+
+    useEffect(() => {
+        setMemberCommunities(props.communityTraits?.traits.data[0])
+    }, [props.communityTraits])
+
+    function handleCommunitiesChange(communityId: string): void {
+        const updatedCommunities: CommunitiesDataStatus = {
+            ...memberCommunities,
+            [communityId]: !memberCommunities?.[communityId],
+        }
+
+        updateMemberTraitsAsync(props.profile.handle, [{
+            categoryName: 'Communities',
+            traitId: 'communities',
+            traits: {
+                data: [updatedCommunities],
+            },
+        }])
+            .then(() => {
+                setMemberCommunities(updatedCommunities)
+                mutateTraits()
+                toast.success('Communities updated successfully.')
+            })
+            .catch(() => {
+                toast.error('Failed to update user Communities.')
+            })
+    }
+
+    function handleLearnMoreClick(link: string): void {
+        window.open(link, '_blank')
+    }
+
+    return (
+        <Collapsible
+            header={<h3>Your Communities</h3>}
+            containerClass={styles.container}
+            contentClass={styles.content}
+        >
+            {
+                communitiesConfig.map(community => (
+                    <div className={styles.communityCard} key={community.id}>
+                        <div className={styles.communityCardHeader}>
+                            <img src={community.icon} alt={community.name} />
+                            <div className={styles.communityInfo}>
+                                <p className='body-main-bold'>{community.name}</p>
+                                <p className={styles.infoText}>{community.description}</p>
+                                <Button
+                                    secondary
+                                    size='sm'
+                                    label='Learn More'
+                                    onClick={bind(handleLearnMoreClick, this, community.link)}
+                                />
+                            </div>
+                        </div>
+                        <FormToggleSwitch
+                            name={community.id}
+                            onChange={bind(handleCommunitiesChange, this, community.id)}
+                            value={memberCommunities?.[community.id] || false}
+                        />
+                    </div>
+                ))
+            }
+        </Collapsible>
+    )
+}
+
+export default Communities

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

@@ -0,0 +1,31 @@
+/* eslint-disable @typescript-eslint/typedef */
+/* eslint-disable max-len */
+/* eslint-disable sort-keys */
+import { ethereumCommunityImage, ibmCommunityImage, veteransCommunityImage } from '~/apps/accounts/src/lib'
+
+export const communitiesConfig = [
+    {
+        id: 'blockchain',
+        icon: ethereumCommunityImage,
+        programID: 20000010,
+        name: 'Topcoder Blockchain Community',
+        description: 'Meet like-minded peers from around the world, share tips and insights, and collaborate with customers to build cutting-edge solutions. The Topcoder Blockchain Community provides opportunities to learn from Ethereum experts and work with top companies that are embracing blockchain technology.',
+        link: 'https://blockchain.topcoder.com/',
+    },
+    {
+        id: 'cognitive',
+        icon: ibmCommunityImage,
+        programID: 3449,
+        name: 'Topcoder Cognitive Community',
+        description: 'By becoming a member of the Topcoder Community and registering for this specialized community, you can compete in fun cognitive challenges, access educational resources, and win money by solving real-life business problems for companies in need of cognitive expertise. ',
+        link: 'https://cognitive.topcoder.com/',
+    },
+    {
+        id: 'veteran',
+        icon: veteransCommunityImage,
+        programID: 3450,
+        name: 'Topcoder Veterans Community',
+        description: 'We help military service members and veterans transition to a career in technology with the world\'s premier crowdsourcing platform.',
+        link: 'https://veterans.topcoder.com/',
+    },
+]

src/apps/accounts/src/settings/tabs/tcandyou/communities/Communities.module.scss

@@ -0,0 +1 @@
+export { default as Communities } from './Communities'

src/apps/accounts/src/settings/tabs/tcandyou/communities/Communities.tsx

@@ -1,9 +1,10 @@
 import { Dispatch, FC, MutableRefObject, SetStateAction, useEffect, useRef, useState } from 'react'
 import { bind, isEmpty, reject, trim } from 'lodash'
 import { toast } from 'react-toastify'
+import { KeyedMutator } from 'swr'
 import classNames from 'classnames'
 
-import { createMemberTraitsAsync, updateMemberTraitsAsync, UserProfile, UserTrait } from '~/libs/core'
+import { createMemberTraitsAsync, updateMemberTraitsAsync, useMemberTraits, UserProfile, UserTrait } from '~/libs/core'
 import { Button, Collapsible, ConfirmModal, IconOutline, InputSelect, InputText } from '~/libs/ui'
 import {
     FinancialInstitutionIcon,
@@ -64,6 +65,8 @@ const ServiceProvider: FC<ServiceProviderProps> = (props: ServiceProviderProps)
     const [itemToRemove, setItemToRemove]: [UserTrait | undefined, Dispatch<SetStateAction<UserTrait | undefined>>]
         = useState<UserTrait | undefined>()
 
+    const { mutate: mutateTraits }: { mutate: KeyedMutator<any> } = useMemberTraits(props.profile.handle)
+
     useEffect(() => {
         setServiceProviderTypesData(props.serviceProviderTrait?.traits.data)
     }, [props.serviceProviderTrait])
@@ -155,6 +158,7 @@ const ServiceProvider: FC<ServiceProviderProps> = (props: ServiceProviderProps)
                             ...updatedServiceProviderTypesData || [],
                             serviceProviderTypeUpdate,
                         ])
+                        mutateTraits()
                     })
                     .catch(() => {
                         toast.error('Error updating Service Provider')
@@ -183,6 +187,7 @@ const ServiceProvider: FC<ServiceProviderProps> = (props: ServiceProviderProps)
                             ...serviceProviderTypesData || [],
                             serviceProviderTypeUpdate,
                         ])
+                        mutateTraits()
                     })
                     .catch(() => {
                         toast.error('Error adding new Service Provider')
@@ -222,6 +227,7 @@ const ServiceProvider: FC<ServiceProviderProps> = (props: ServiceProviderProps)
             .then(() => {
                 toast.success('Service Provider deleted successfully')
                 setServiceProviderTypesData(updatedServiceProviderTypesData)
+                mutateTraits()
             })
             .catch(() => {
                 toast.error('Error deleting Service Provider')

src/apps/accounts/src/settings/tabs/tcandyou/communities/communities-config.tsx

@@ -1,9 +1,10 @@
 import { Dispatch, FC, MutableRefObject, SetStateAction, useEffect, useRef, useState } from 'react'
 import { bind, isEmpty, reject, trim } from 'lodash'
 import { toast } from 'react-toastify'
+import { KeyedMutator } from 'swr'
 import classNames from 'classnames'
 
-import { createMemberTraitsAsync, updateMemberTraitsAsync, UserProfile, UserTrait } from '~/libs/core'
+import { createMemberTraitsAsync, updateMemberTraitsAsync, useMemberTraits, UserProfile, UserTrait } from '~/libs/core'
 import { Button, Collapsible, ConfirmModal, IconOutline, InputSelect, InputText } from '~/libs/ui'
 import { SettingSection, SoftwareIcon } from '~/apps/accounts/src/lib'
 
@@ -57,6 +58,8 @@ const Software: FC<SoftwareProps> = (props: SoftwareProps) => {
     const [itemToRemove, setItemToRemove]: [UserTrait | undefined, Dispatch<SetStateAction<UserTrait | undefined>>]
         = useState<UserTrait | undefined>()
 
+    const { mutate: mutateTraits }: { mutate: KeyedMutator<any> } = useMemberTraits(props.profile.handle)
+
     useEffect(() => {
         setSoftwareTypesData(props.softwareTrait?.traits.data)
     }, [props.softwareTrait])
@@ -144,6 +147,7 @@ const Software: FC<SoftwareProps> = (props: SoftwareProps) => {
                             ...updatedSoftwareTypesData || [],
                             softwareTypeUpdate,
                         ])
+                        mutateTraits()
                     })
                     .catch(() => {
                         toast.error('Error updating software')
@@ -172,6 +176,7 @@ const Software: FC<SoftwareProps> = (props: SoftwareProps) => {
                             ...softwareTypesData || [],
                             softwareTypeUpdate,
                         ])
+                        mutateTraits()
                     })
                     .catch(() => {
                         toast.error('Error adding new software')
@@ -211,6 +216,7 @@ const Software: FC<SoftwareProps> = (props: SoftwareProps) => {
             .then(() => {
                 toast.success('Software deleted successfully')
                 setSoftwareTypesData(updatedSoftwareTypesData)
+                mutateTraits()
             })
             .catch(() => {
                 toast.error('Error deleting software')