From a301874f2cae3f8b474715ceb5e45197efc5a845 Mon Sep 17 00:00:00 2001 From: OGBONNA SUNDAY <62995161+OgDev-01@users.noreply.github.com> Date: Wed, 1 Feb 2023 16:28:19 +0100 Subject: [PATCH] feat: add user location and bio details to profile page (#797) * refactor: create profile info component * chore: update Dbuser type * chore: update user type * refactor: update contributor info props * chore: cleanups and finishing touches * chore: set twitter as coming soon and type infersion * chore: add interest field from api * refactor: cleanup on eslint error ignore --- .../contributor-profile-info.tsx | 100 ++++++++++++++++++ .../contributor-profile-page.tsx | 23 ++-- next-types.d.ts | 8 +- pages/user/[username].tsx | 4 +- 4 files changed, 121 insertions(+), 14 deletions(-) create mode 100644 components/molecules/ContributorProfileInfo/contributor-profile-info.tsx diff --git a/components/molecules/ContributorProfileInfo/contributor-profile-info.tsx b/components/molecules/ContributorProfileInfo/contributor-profile-info.tsx new file mode 100644 index 000000000..60b68c3dc --- /dev/null +++ b/components/molecules/ContributorProfileInfo/contributor-profile-info.tsx @@ -0,0 +1,100 @@ +/* eslint-disable react/jsx-no-undef */ +import Link from "next/link"; + +import { AiOutlineGift } from "react-icons/ai"; +import { FiClock, FiTwitter } from "react-icons/fi"; +import { HiOutlineMail } from "react-icons/hi"; + +import LanguagePill from "components/atoms/LanguagePill/LanguagePill"; +import Title from "components/atoms/Typography/title"; + +interface ContributorProfileInfoProps { + githubName: string; + bio?: string; + portfolio?: string; + twitterUsername?: string; + interests?: string; + isConnected?: boolean; +} + +const ContributorProfileInfo = ({ + githubName, + twitterUsername, + bio, + interests, + isConnected +}: ContributorProfileInfoProps) => { + const interestArray = interests?.split(","); + + return ( +
+
+ + {githubName} + +
+ {`@${githubName}`} + + {isConnected && ( + <> + + + UTC +1 + + + + June 2022 + + + )} +
+
+ {isConnected && ( + <> +
+ + About + +

+ {bio || + "I am an open source developer with a passion for music and video games. I strive to improve the open source community and am always looking for new ways to contribute."} +

+
+ + Local time: 12:32 PM + + + + + + coming soon... + + + + {/* + + + Send a collaboration request + + */} +
+
+ {interestArray && interestArray.length > 0 && ( +
+ + Current Interests + +
+ {interestArray.map((interest, index) => ( + + ))} +
+
+ )}{" "} + + )} +
+ ); +}; + +export default ContributorProfileInfo; diff --git a/components/organisms/ContributorProfilePage/contributor-profile-page.tsx b/components/organisms/ContributorProfilePage/contributor-profile-page.tsx index 98db368ea..1f49d6457 100644 --- a/components/organisms/ContributorProfilePage/contributor-profile-page.tsx +++ b/components/organisms/ContributorProfilePage/contributor-profile-page.tsx @@ -12,6 +12,7 @@ import { useTopicContributorCommits } from "lib/hooks/useTopicContributorCommits import { getRelativeDays } from "lib/utils/date-utils"; import Pill from "components/atoms/Pill/pill"; import getPercent from "lib/utils/get-percent"; +import ContributorProfileInfo from "components/molecules/ContributorProfileInfo/contributor-profile-info"; const colorKeys = Object.keys(color); interface PrObjectType { @@ -73,6 +74,9 @@ const ContributorProfilePage = ({ const prsMergedPercentage = getPercent(prTotal, prMerged || 0); const isLoaded = !loading && !error; + // eslint-disable-next-line camelcase + const { bio, location, interests, name, twitter_username } = user || {}; + return (
{loading && <>Loading...} @@ -80,14 +84,17 @@ const ContributorProfilePage = ({ {isLoaded && ( <> -
-
-
- - {githubName} - - {`@${githubName}`} -
+
+
+ +

Languages

diff --git a/next-types.d.ts b/next-types.d.ts index b1d9aed7d..a35dc8775 100644 --- a/next-types.d.ts +++ b/next-types.d.ts @@ -121,12 +121,14 @@ interface DbUser { readonly is_onboarded: boolean; readonly is_waitlisted: boolean; readonly role: number; - readonly name: string; - readonly location: string; + readonly bio: string; readonly twitter_username: string; readonly company: string; - readonly bio: string; + readonly location: string; + readonly display_local_time: boolean; + readonly name: string; readonly interests: string; readonly receive_collaboration: boolean; readonly display_email: boolean; + } diff --git a/pages/user/[username].tsx b/pages/user/[username].tsx index 3a09f9506..5e1c5f120 100644 --- a/pages/user/[username].tsx +++ b/pages/user/[username].tsx @@ -5,12 +5,10 @@ import { useSingleContributor } from "lib/hooks/useSingleContributor"; import ContributorProfilePage from "components/organisms/ContributorProfilePage/contributor-profile-page"; import { ContributorsProfileType } from "components/molecules/ContributorHoverCard/contributor-hover-card"; -import HubPageLayout from "layouts/hub-page"; -import HubLayout from "layouts/hub"; import ProfileLayout from "layouts/profile"; import { useFetchUser } from "lib/hooks/useFetchUser"; -const Contributor = () => { +const Contributor = (): JSX.Element => { const router = useRouter(); const { username } = router.query; const contributorLogin = username as string;