-
-
Notifications
You must be signed in to change notification settings - Fork 409
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
f792a90
commit 9c8bb45
Showing
16 changed files
with
343 additions
and
338 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,137 +1,84 @@ | ||
| import { useEffect, useState } from 'react' | ||
| import { useParams } from '@remix-run/react' | ||
| import { useMemo } from 'react' | ||
| import { observer } from 'mobx-react-lite' | ||
| import { Button, InternalLink, Loader } from 'oa-components' | ||
| import { Button, InternalLink } from 'oa-components' | ||
| import { ProfileTypeList } from 'oa-shared' | ||
| // eslint-disable-next-line import/no-unresolved | ||
| import { ClientOnly } from 'remix-utils/client-only' | ||
| import { useCommonStores } from 'src/common/hooks/useCommonStores' | ||
| import { incrementViewCount } from 'src/utils/incrementViewCount' | ||
| import { seoTagsUpdate } from 'src/utils/seo' | ||
| import { Flex, Text } from 'theme-ui' | ||
| import { Flex } from 'theme-ui' | ||
|
|
||
| import { logger } from '../../../logger' | ||
| import { MemberProfile } from './MemberProfile' | ||
| import { SpaceProfile } from './SpaceProfile' | ||
|
|
||
| import type { IUserDB } from 'oa-shared' | ||
| import type { UserCreatedDocs } from '../types' | ||
|
|
||
| type UserProfileProps = { | ||
| profile: IUserDB | ||
| userCreatedDocs: UserCreatedDocs | ||
| } | ||
|
|
||
| /** | ||
| * High level wrapper which loads state, then determines | ||
| * whether to render a MemberProfile or SpaceProfile. | ||
| */ | ||
| export const UserProfile = observer(() => { | ||
| const { id } = useParams() | ||
| const { userStore } = useCommonStores().stores | ||
| const [user, setUser] = useState<IUserDB | undefined>() | ||
| const [userCreatedDocs, setUserCreatedDocs] = useState< | ||
| UserCreatedDocs | undefined | ||
| >() | ||
| const [isLoading, setIsLoading] = useState<boolean>(true) | ||
|
|
||
| useEffect(() => { | ||
| const userId = id | ||
|
|
||
| if (userId) { | ||
| const fetchUserData = async () => { | ||
| try { | ||
| const userData = await userStore.getUserProfile(userId) | ||
| if (userData as IUserDB) { | ||
| setUser(userData) | ||
|
|
||
| incrementViewCount({ | ||
| document: userData, | ||
| documentType: 'user', | ||
| store: userStore, | ||
| }) | ||
|
|
||
| seoTagsUpdate({ | ||
| title: `${userData.displayName} - Profile`, | ||
| }) | ||
| } | ||
| } catch (error) { | ||
| logger.error('Error getting user profile', error) | ||
| } | ||
| } | ||
|
|
||
| const fetchUserDocs = async () => { | ||
| try { | ||
| const docs = await userStore.getUserCreatedDocs(userId) | ||
| setUserCreatedDocs(docs) | ||
| setIsLoading(false) | ||
| } catch (error) { | ||
| logger.error('Error getting user created docs', error) | ||
| } | ||
| } | ||
|
|
||
| fetchUserData() | ||
| fetchUserDocs() | ||
| } | ||
| }, [id]) | ||
|
|
||
| if (isLoading) { | ||
| return <Loader /> | ||
| } | ||
| export const UserProfile = observer( | ||
| ({ profile, userCreatedDocs }: UserProfileProps) => { | ||
| const { userStore } = useCommonStores().stores | ||
| const isViewingOwnProfile = useMemo( | ||
| () => userStore.activeUser?._id === profile?._id, | ||
| [userStore.activeUser?._id], | ||
| ) | ||
| const showMemberProfile = | ||
| profile?.profileType === ProfileTypeList.MEMBER || | ||
| profile?.profileType === undefined | ||
|
|
||
| if (!user) { | ||
| return ( | ||
| <Text | ||
| <Flex | ||
| sx={{ | ||
| alignSelf: 'center', | ||
| maxWidth: showMemberProfile ? '42em' : '60em', | ||
| flexDirection: 'column', | ||
| width: '100%', | ||
| textAlign: 'center', | ||
| display: 'block', | ||
| marginTop: 10, | ||
| marginTop: isViewingOwnProfile ? 4 : [6, 8], | ||
| gap: 4, | ||
| }} | ||
| > | ||
| User not found | ||
| </Text> | ||
| ) | ||
| } | ||
| {isViewingOwnProfile && ( | ||
| <InternalLink | ||
| sx={{ | ||
| alignSelf: ['center', 'flex-end'], | ||
| marginBottom: showMemberProfile ? [2, 0] : 0, | ||
| zIndex: 2, | ||
| }} | ||
| to="/settings" | ||
| > | ||
| <Button type="button" data-cy="EditYourProfile"> | ||
| Edit Your Profile | ||
| </Button> | ||
| </InternalLink> | ||
| )} | ||
|
|
||
| const isViewingOwnProfile = | ||
| userStore.activeUser && user && userStore.activeUser._id === user._id | ||
| const showMemberProfile = | ||
| user.profileType === ProfileTypeList.MEMBER || | ||
| user.profileType === undefined | ||
|
|
||
| return ( | ||
| <Flex | ||
| sx={{ | ||
| alignSelf: 'center', | ||
| maxWidth: showMemberProfile ? '42em' : '60em', | ||
| flexDirection: 'column', | ||
| width: '100%', | ||
| marginTop: isViewingOwnProfile ? 4 : [6, 8], | ||
| gap: 4, | ||
| }} | ||
| > | ||
| {isViewingOwnProfile && ( | ||
| <InternalLink | ||
| sx={{ | ||
| alignSelf: ['center', 'flex-end'], | ||
| marginBottom: showMemberProfile ? [2, 0] : 0, | ||
| zIndex: 2, | ||
| }} | ||
| to="/settings" | ||
| > | ||
| <Button type="button" data-cy="EditYourProfile"> | ||
| Edit Your Profile | ||
| </Button> | ||
| </InternalLink> | ||
| )} | ||
|
|
||
| {showMemberProfile ? ( | ||
| <MemberProfile | ||
| data-cy="memberProfile" | ||
| user={user} | ||
| docs={userCreatedDocs} | ||
| /> | ||
| ) : ( | ||
| <SpaceProfile | ||
| data-cy="spaceProfile" | ||
| user={user} | ||
| docs={userCreatedDocs} | ||
| /> | ||
| )} | ||
| </Flex> | ||
| ) | ||
| }) | ||
| <ClientOnly fallback={<></>}> | ||
| {() => ( | ||
| <> | ||
| {showMemberProfile ? ( | ||
| <MemberProfile | ||
| data-cy="memberProfile" | ||
| user={profile} | ||
| docs={userCreatedDocs} | ||
| /> | ||
| ) : ( | ||
| <SpaceProfile | ||
| data-cy="spaceProfile" | ||
| user={profile} | ||
| docs={userCreatedDocs} | ||
| /> | ||
| )} | ||
| </> | ||
| )} | ||
| </ClientOnly> | ||
| </Flex> | ||
| ) | ||
| }, | ||
| ) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,6 @@ | ||
| import type { IHowtoDB, IResearchDB } from 'oa-shared' | ||
|
|
||
| export interface UserCreatedDocs { | ||
| howtos: any | ||
| research: any | ||
| howtos: IHowtoDB[] | ||
| research: IResearchDB[] | ||
| } |
Oops, something went wrong.