From 0b7b7aebacb26387d9fe03ac65dcba2b5618adef Mon Sep 17 00:00:00 2001 From: Sunday Ogbonna Date: Mon, 20 Feb 2023 19:56:47 +0100 Subject: [PATCH 1/6] refactor: replace puul highlights with gh Og Image --- .../contributor-highlight-card.tsx | 3 +- .../GhOpenGraphImg/gh-open-graph-img.tsx | 24 +++++ .../pull-request-highlight-card.tsx | 101 ------------------ next.config.js | 3 +- 4 files changed, 28 insertions(+), 103 deletions(-) create mode 100644 components/molecules/GhOpenGraphImg/gh-open-graph-img.tsx delete mode 100644 components/molecules/PullRequestHighlightCard/pull-request-highlight-card.tsx diff --git a/components/molecules/ContributorHighlight/contributor-highlight-card.tsx b/components/molecules/ContributorHighlight/contributor-highlight-card.tsx index 4c9d5e001c..b492a6040c 100644 --- a/components/molecules/ContributorHighlight/contributor-highlight-card.tsx +++ b/components/molecules/ContributorHighlight/contributor-highlight-card.tsx @@ -17,6 +17,7 @@ import { FaUserPlus } from "react-icons/fa"; import { GrFlag } from "react-icons/gr"; import { ToastTrigger } from "lib/utils/toast-trigger"; +import GhOpenGraphImg from "../GhOpenGraphImg/gh-open-graph-img"; interface ContributorHighlightCardProps { title?: string; @@ -126,7 +127,7 @@ const ContributorHighlightCard = ({ title, desc, prLink, user }: ContributorHigh {/* Generated OG card section */} - + ); }; diff --git a/components/molecules/GhOpenGraphImg/gh-open-graph-img.tsx b/components/molecules/GhOpenGraphImg/gh-open-graph-img.tsx new file mode 100644 index 0000000000..ee597564cc --- /dev/null +++ b/components/molecules/GhOpenGraphImg/gh-open-graph-img.tsx @@ -0,0 +1,24 @@ +import { generateGhOgImage } from "lib/utils/github"; +import Image from "next/image"; +import InvalidImage from "img/404 Image.svg"; +import { useEffect, useState } from "react"; + +interface GhOpenGraphImgProps { + githubLink: string; +} + +const GhOpenGraphImg = ({ githubLink }: GhOpenGraphImgProps): JSX.Element => { + const { isValid, url } = generateGhOgImage(githubLink); + + return ( + <> + {url && ( +
+ {isValid +
+ )} + + ); +}; + +export default GhOpenGraphImg; diff --git a/components/molecules/PullRequestHighlightCard/pull-request-highlight-card.tsx b/components/molecules/PullRequestHighlightCard/pull-request-highlight-card.tsx deleted file mode 100644 index d4fc3f3bdf..0000000000 --- a/components/molecules/PullRequestHighlightCard/pull-request-highlight-card.tsx +++ /dev/null @@ -1,101 +0,0 @@ -import Image from "next/image"; - -import Avatar from "components/atoms/Avatar/avatar"; -import React, { useEffect, useState } from "react"; -import { AiOutlineGithub } from "react-icons/ai"; -import { TbMessages } from "react-icons/tb"; -import CardHorizontalBarChart from "../CardHorizontalBarChart/card-horizontal-bar-chart"; -import { getFormattedDate } from "lib/utils/date-utils"; -import { fetchGithubPRInfo } from "lib/hooks/fetchGithubPRInfo"; -import { generateApiPrUrl } from "lib/utils/github"; -import SkeletonWrapper from "components/atoms/SkeletonLoader/skeleton-wrapper"; - -import InvalidImage from "img/404 Image.svg"; - -interface PullRequestHighlightCardProps { - prLink: string; -} -const PullRequestHighlightCard = ({ prLink }: PullRequestHighlightCardProps) => { - const { isValidUrl, apiPaths } = generateApiPrUrl(prLink); - const [PRInfo, setPRInfo] = useState(); - const [isLoading, setLoading] = useState(false); - const [isError, setError] = useState(false); - - const fetchGhPullRequest = async (orgName: string | null, repoName: string | null, issueId: string | null) => { - setLoading(true); - const { data, isError } = await fetchGithubPRInfo(orgName, repoName, issueId); - setLoading(false); - if (data) { - setPRInfo(data); - } - if (isError) { - setError(true); - } - }; - - useEffect(() => { - const { orgName, repoName, issueId } = apiPaths; - fetchGhPullRequest(orgName, repoName, issueId); - }, []); - return ( - <> - {isLoading && } - {isValidUrl && isError && ( -
- invalid url image -
- )} - {PRInfo && ( -
-
-
- {`${PRInfo.head.user.login}/${PRInfo.head.repo.name}`} -

- {`#${PRInfo.number}`}

{PRInfo.title}

-

-
- - {PRInfo.comments} comment -
-
-
- -
-
- -
-
- -
-
-
- -

- {PRInfo.user.login} opened on{" "} - {getFormattedDate(PRInfo.created_at)} -

-
- -
-
-
- -
-
-

- {PRInfo?.title}· Issue {`#${PRInfo.number}`} · {`${PRInfo.head.user.login}/${PRInfo.head.repo.name}`} -

- GITHUB.COM -
-
-
-
- )} - - ); -}; - -export default React.memo(PullRequestHighlightCard); diff --git a/next.config.js b/next.config.js index 6524fa7cf8..8237fd3730 100644 --- a/next.config.js +++ b/next.config.js @@ -7,7 +7,8 @@ module.exports = { "images.unsplash.com", "www.github.com", "github.com", - "res.cloudinary.com" + "res.cloudinary.com", + "opengraph.githubassets.com" ] } }; From 526076f294ebebc532f7659ea46bae9f9592c135 Mon Sep 17 00:00:00 2001 From: Sunday Ogbonna Date: Mon, 20 Feb 2023 19:57:38 +0100 Subject: [PATCH 2/6] chore: add generate url utils and test --- .../HighlightInput/highlight-input-form.tsx | 4 ++-- lib/utils/github.ts | 20 +++++++++++++++++-- tests/lib/utils/github.test.ts | 18 ++++++++++++++--- 3 files changed, 35 insertions(+), 7 deletions(-) diff --git a/components/molecules/HighlightInput/highlight-input-form.tsx b/components/molecules/HighlightInput/highlight-input-form.tsx index 90d88aa842..3a4468c453 100644 --- a/components/molecules/HighlightInput/highlight-input-form.tsx +++ b/components/molecules/HighlightInput/highlight-input-form.tsx @@ -4,9 +4,9 @@ import { createHighlights } from "lib/hooks/createHighlights"; import { ToastTrigger } from "lib/utils/toast-trigger"; import { ChangeEvent, useEffect, useRef, useState } from "react"; -import PullRequestHighlightCard from "../PullRequestHighlightCard/pull-request-highlight-card"; import { useSWRConfig } from "swr"; import useSupabaseAuth from "lib/hooks/useSupabaseAuth"; +import GhOpenGraphImg from "../GhOpenGraphImg/gh-open-graph-img"; const HighlightInputForm = (): JSX.Element => { const { user } = useSupabaseAuth(); @@ -116,7 +116,7 @@ const HighlightInputForm = (): JSX.Element => { /> - {pullrequestLink && isDivFocused && } + {pullrequestLink && isDivFocused && } {isDivFocused && (