From f76c4a9ab90b5cd7a41d14d4f9cbd00399aa4132 Mon Sep 17 00:00:00 2001 From: Brandon Roberts Date: Wed, 12 Jul 2023 09:53:36 -0500 Subject: [PATCH 01/14] fix: use OpenGraph URL directly in highlight meta tags --- pages/feed/[id].tsx | 18 +++++++----------- pages/feed/index.tsx | 9 +++++---- 2 files changed, 12 insertions(+), 15 deletions(-) diff --git a/pages/feed/[id].tsx b/pages/feed/[id].tsx index 44c4b5d7e7..de73215e8c 100644 --- a/pages/feed/[id].tsx +++ b/pages/feed/[id].tsx @@ -1,7 +1,6 @@ import { GetServerSidePropsContext } from "next"; -import fetchSocialCard from "lib/utils/fetch-social-card"; -import Feed from "../feed"; +import Feed from "./index"; export default Feed; @@ -13,10 +12,8 @@ export type HighlightSSRPropsContext = GetServerSidePropsContext<{ id: string }> export async function handleHighlightSSR({ params }: GetServerSidePropsContext<{ id: string }>) { const { id } = params!; - let highlight: DbHighlight | null = null; - let ogImage; - async function fetchUserData() { + async function fetchHighlight() { const req = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/user/highlights/${id}`, { headers: { accept: "application/json", @@ -24,16 +21,15 @@ export async function handleHighlightSSR({ params }: GetServerSidePropsContext<{ }); if (req.ok) { - highlight = (await req.json()) as DbHighlight; + return (await req.json()) as DbHighlight; } - } - // Runs the data fetching in parallel. Decreases the loading time by 50%. - const [, ogData] = await Promise.allSettled([fetchUserData(), fetchSocialCard(`highlights/${id}`)]); + return null; + } - ogImage = ogData.status === "fulfilled" ? ogData.value : ""; + const highlight = await fetchHighlight(); return { - props: { highlight, ogImage }, + props: { highlight }, }; } diff --git a/pages/feed/index.tsx b/pages/feed/index.tsx index 48be54f280..a34c032121 100644 --- a/pages/feed/index.tsx +++ b/pages/feed/index.tsx @@ -35,7 +35,6 @@ type highlightReposType = { repoName: string; repoIcon: string; full_name: strin interface HighlightSSRProps { highlight: DbHighlight | null; - ogImage?: string; } const Feeds: WithPageLayout = (props: HighlightSSRProps) => { @@ -53,7 +52,9 @@ const Feeds: WithPageLayout = (props: HighlightSSRProps) => { const { id } = router.query; const singleHighlight = props.highlight; - const highlightId = props.highlight?.id as string; + const ogImage = props?.highlight + ? `${process.env.NEXT_PUBLIC_OPENGRAPH_URL}/highlights/${props.highlight.id}` + : undefined; const { data: followersRepo } = useFetchFollowersHighlightRepos(); @@ -113,7 +114,7 @@ const Feeds: WithPageLayout = (props: HighlightSSRProps) => { @@ -124,7 +125,7 @@ const Feeds: WithPageLayout = (props: HighlightSSRProps) => {
From 6029c9a46407dfe8f048defa5875768a12f9bf4d Mon Sep 17 00:00:00 2001 From: Brandon Roberts Date: Wed, 12 Jul 2023 13:46:07 -0500 Subject: [PATCH 02/14] fix: use highlight id from server side props --- pages/feed/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/feed/index.tsx b/pages/feed/index.tsx index a34c032121..136ab990e3 100644 --- a/pages/feed/index.tsx +++ b/pages/feed/index.tsx @@ -50,8 +50,8 @@ const Feeds: WithPageLayout = (props: HighlightSSRProps) => { const [activeTab, setActiveTab] = useState("home"); const [repoList, setRepoList] = useState(repos as highlightReposType[]); - const { id } = router.query; const singleHighlight = props.highlight; + const id = props.highlight?.id; const ogImage = props?.highlight ? `${process.env.NEXT_PUBLIC_OPENGRAPH_URL}/highlights/${props.highlight.id}` : undefined; From b26c9afb30601ff05933bce3b888e2620a82b4df Mon Sep 17 00:00:00 2001 From: Brandon Roberts Date: Wed, 12 Jul 2023 14:47:05 -0500 Subject: [PATCH 03/14] fix: ensure repolist data is consistent --- pages/feed/index.tsx | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/pages/feed/index.tsx b/pages/feed/index.tsx index 136ab990e3..5a7102b450 100644 --- a/pages/feed/index.tsx +++ b/pages/feed/index.tsx @@ -43,12 +43,21 @@ const Feeds: WithPageLayout = (props: HighlightSSRProps) => { const { data: featuredHighlights } = useFetchFeaturedHighlights(); + const repoTofilterList = (repos: { full_name: string }[]): highlightReposType[] => { + const filtersArray = repos.map(({ full_name }) => { + const [orgName, repo] = full_name.split("/"); + return { repoName: repo, repoIcon: `https://www.github.com/${orgName}.png?size=300`, full_name }; + }); + + return filtersArray; + }; + const router = useRouter(); - const [hydrated, setHydrated] = useState(false); const [openSingleHighlight, setOpenSingleHighlight] = useState(false); const [selectedRepo, setSelectedRepo] = useState(""); const [activeTab, setActiveTab] = useState("home"); - const [repoList, setRepoList] = useState(repos as highlightReposType[]); + const [repoList, setRepoList] = useState(repoTofilterList(repos as highlightReposType[])); + const [hydrated, setHydrated] = useState(false); const singleHighlight = props.highlight; const id = props.highlight?.id; @@ -70,15 +79,6 @@ const Feeds: WithPageLayout = (props: HighlightSSRProps) => { { name: "Highlights", count: highlights_count ?? 0 }, ]; - const repoTofilterList = (repos: { full_name: string }[]): highlightReposType[] => { - const filtersArray = repos.map(({ full_name }) => { - const [orgName, repo] = full_name.split("/"); - return { repoName: repo, repoIcon: `https://www.github.com/${orgName}.png?size=300`, full_name }; - }); - - return filtersArray; - }; - useEffect(() => { setSelectedRepo(""); if (activeTab === "home") { From e1a1ef0aa18d6ef51d542c00daa22b6fbb9492ce Mon Sep 17 00:00:00 2001 From: Brandon Roberts Date: Wed, 12 Jul 2023 15:13:23 -0500 Subject: [PATCH 04/14] chore: add highlight id to useEffect --- pages/feed/index.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/pages/feed/index.tsx b/pages/feed/index.tsx index 5a7102b450..ad84d35e06 100644 --- a/pages/feed/index.tsx +++ b/pages/feed/index.tsx @@ -60,7 +60,6 @@ const Feeds: WithPageLayout = (props: HighlightSSRProps) => { const [hydrated, setHydrated] = useState(false); const singleHighlight = props.highlight; - const id = props.highlight?.id; const ogImage = props?.highlight ? `${process.env.NEXT_PUBLIC_OPENGRAPH_URL}/highlights/${props.highlight.id}` : undefined; @@ -89,20 +88,21 @@ const Feeds: WithPageLayout = (props: HighlightSSRProps) => { }, [activeTab, followersRepo, repos]); useEffect(() => { + console.log("id", props.highlight?.id); if (selectedRepo) { router.push(`/feed?repo=${selectedRepo}`); setPage(1); } - if (id) { + if (props.highlight?.id) { setOpenSingleHighlight(true); - router.push(`/feed/${id}`); + router.push(`/feed/${props.highlight?.id}`); } - if (!selectedRepo && !id) { + if (!selectedRepo && !props.highlight?.id) { router.push("/feed"); setPage(1); } - }, [selectedRepo, id]); + }, [selectedRepo, props.highlight?.id]); useEffect(() => { setHydrated(true); From 7d0fd7fcfb7b94436c0eb88864145ddbdf49a99d Mon Sep 17 00:00:00 2001 From: Brandon Roberts Date: Wed, 12 Jul 2023 15:39:42 -0500 Subject: [PATCH 05/14] refactor: move highlights feed into organism component --- components/organisms/HighlightsFeed/feed.tsx | 270 +++++++++++++++++++ pages/feed/[id].tsx | 10 +- pages/feed/index.tsx | 268 +----------------- 3 files changed, 278 insertions(+), 270 deletions(-) create mode 100644 components/organisms/HighlightsFeed/feed.tsx diff --git a/components/organisms/HighlightsFeed/feed.tsx b/components/organisms/HighlightsFeed/feed.tsx new file mode 100644 index 0000000000..ad84d35e06 --- /dev/null +++ b/components/organisms/HighlightsFeed/feed.tsx @@ -0,0 +1,270 @@ +import { useEffect, useState } from "react"; +import { useRouter } from "next/router"; +import Link from "next/link"; +import formatDistanceToNowStrict from "date-fns/formatDistanceToNowStrict"; +import clsx from "clsx"; + +import useSupabaseAuth from "lib/hooks/useSupabaseAuth"; +import { useFetchAllHighlights } from "lib/hooks/useFetchAllHighlights"; +import { useFetchHighlightRepos } from "lib/hooks/useFetchHiglightRepos"; +import useFetchAllEmojis from "lib/hooks/useFetchAllEmojis"; +import { useFetchFollowersHighlightRepos } from "lib/hooks/useFetchFollowingHighlightRepos"; +import { useFetchUser } from "lib/hooks/useFetchUser"; + +import { WithPageLayout } from "interfaces/with-page-layout"; +import ProfileLayout from "layouts/profile"; +import SEO from "layouts/SEO/SEO"; + +import { Dialog, DialogCloseButton, DialogContent } from "components/molecules/Dialog/dialog"; +import Avatar from "components/atoms/Avatar/avatar"; +import { Tabs, TabsContent, TabsList, TabsTrigger } from "components/atoms/Tabs/tabs"; +import ContributorHighlightCard from "components/molecules/ContributorHighlight/contributor-highlight-card"; +import HighlightInputForm from "components/molecules/HighlightInput/highlight-input-form"; +import HighlightsFilterCard from "components/molecules/HighlightsFeedCard/highlights-filter-card"; +import Pagination from "components/molecules/Pagination/pagination"; +import PaginationResults from "components/molecules/PaginationResults/pagination-result"; +import FollowingHighlightWrapper from "components/organisms/FollowersHighlightWrapper/following-highlight-wrapper"; +import HomeHighlightsWrapper from "components/organisms/HomeHighlightsWrapper/home-highlights-wrapper"; +import NewsletterForm from "components/molecules/NewsletterForm/newsletter-form"; +import UserCard, { MetaObj } from "components/atoms/UserCard/user-card"; +import FeaturedHighlightsPanel from "components/molecules/FeaturedHighlightsPanel/featured-highlights-panel"; +import { useFetchFeaturedHighlights } from "lib/hooks/useFetchFeaturedHighlights"; + +type activeTabType = "home" | "following"; +type highlightReposType = { repoName: string; repoIcon: string; full_name: string }; + +interface HighlightSSRProps { + highlight: DbHighlight | null; +} + +const Feeds: WithPageLayout = (props: HighlightSSRProps) => { + const { user } = useSupabaseAuth(); + const { data: repos } = useFetchHighlightRepos(); + + const { data: featuredHighlights } = useFetchFeaturedHighlights(); + + const repoTofilterList = (repos: { full_name: string }[]): highlightReposType[] => { + const filtersArray = repos.map(({ full_name }) => { + const [orgName, repo] = full_name.split("/"); + return { repoName: repo, repoIcon: `https://www.github.com/${orgName}.png?size=300`, full_name }; + }); + + return filtersArray; + }; + + const router = useRouter(); + const [openSingleHighlight, setOpenSingleHighlight] = useState(false); + const [selectedRepo, setSelectedRepo] = useState(""); + const [activeTab, setActiveTab] = useState("home"); + const [repoList, setRepoList] = useState(repoTofilterList(repos as highlightReposType[])); + const [hydrated, setHydrated] = useState(false); + + const singleHighlight = props.highlight; + const ogImage = props?.highlight + ? `${process.env.NEXT_PUBLIC_OPENGRAPH_URL}/highlights/${props.highlight.id}` + : undefined; + + const { data: followersRepo } = useFetchFollowersHighlightRepos(); + + const { data, mutate, setPage, isLoading, meta } = useFetchAllHighlights(selectedRepo); + const { data: emojis } = useFetchAllEmojis(); + const { data: loggedInUser, isLoading: loggedInUserLoading } = useFetchUser(user?.user_metadata.user_name as string); + + const { followers_count, following_count, highlights_count } = loggedInUser || {}; + + const userMetaArray = [ + { name: "Followers", count: followers_count ?? 0 }, + { name: "Following", count: following_count ?? 0 }, + { name: "Highlights", count: highlights_count ?? 0 }, + ]; + + useEffect(() => { + setSelectedRepo(""); + if (activeTab === "home") { + setRepoList(repoTofilterList(repos)); + } else if (activeTab === "following") { + setRepoList(repoTofilterList(followersRepo)); + } + }, [activeTab, followersRepo, repos]); + + useEffect(() => { + console.log("id", props.highlight?.id); + if (selectedRepo) { + router.push(`/feed?repo=${selectedRepo}`); + setPage(1); + } + if (props.highlight?.id) { + setOpenSingleHighlight(true); + router.push(`/feed/${props.highlight?.id}`); + } + + if (!selectedRepo && !props.highlight?.id) { + router.push("/feed"); + setPage(1); + } + }, [selectedRepo, props.highlight?.id]); + + useEffect(() => { + setHydrated(true); + }, []); + + if (!hydrated) + return ( + <> + + + ); + + return ( + <> + +
+
+ {user && ( +
+ +
+ )} +
+ {singleHighlight && ( + { + if (!open) { + setOpenSingleHighlight(false); + router.push("/feed"); + } + }} + > + +
+
+
+ + + {singleHighlight.login} + + + {formatDistanceToNowStrict(new Date(singleHighlight.created_at), { + addSuffix: true, + })} + + router.push("/feed")} /> +
+ +
+ +
+
+
+ + + )} + { + setActiveTab(value as activeTabType); + }} + defaultValue="home" + className="md:flex-[2] " + > + + + Home + + + Following + + + + {user && ( +
+
+ +
+ + +
+ )} + + + {meta.pageCount > 1 && ( +
+
+ +
+ +
+ )} + + + + + +
+ {repoList && repoList.length > 0 && ( + + )} + + {featuredHighlights && featuredHighlights.length > 0 && ( + + )} + +
+
+ + ); +}; + +Feeds.PageLayout = ProfileLayout; +export default Feeds; diff --git a/pages/feed/[id].tsx b/pages/feed/[id].tsx index de73215e8c..c90207cbb9 100644 --- a/pages/feed/[id].tsx +++ b/pages/feed/[id].tsx @@ -1,8 +1,6 @@ import { GetServerSidePropsContext } from "next"; - -import Feed from "./index"; - -export default Feed; +import Feeds from "components/organisms/HighlightsFeed/feed"; +import ProfileLayout from "layouts/profile"; export const getServerSideProps = async (context: HighlightSSRPropsContext) => { return await handleHighlightSSR(context); @@ -33,3 +31,7 @@ export async function handleHighlightSSR({ params }: GetServerSidePropsContext<{ props: { highlight }, }; } + +Feeds.PageLayout = ProfileLayout; + +export default Feeds; diff --git a/pages/feed/index.tsx b/pages/feed/index.tsx index ad84d35e06..a69ace0f49 100644 --- a/pages/feed/index.tsx +++ b/pages/feed/index.tsx @@ -1,270 +1,6 @@ -import { useEffect, useState } from "react"; -import { useRouter } from "next/router"; -import Link from "next/link"; -import formatDistanceToNowStrict from "date-fns/formatDistanceToNowStrict"; -import clsx from "clsx"; - -import useSupabaseAuth from "lib/hooks/useSupabaseAuth"; -import { useFetchAllHighlights } from "lib/hooks/useFetchAllHighlights"; -import { useFetchHighlightRepos } from "lib/hooks/useFetchHiglightRepos"; -import useFetchAllEmojis from "lib/hooks/useFetchAllEmojis"; -import { useFetchFollowersHighlightRepos } from "lib/hooks/useFetchFollowingHighlightRepos"; -import { useFetchUser } from "lib/hooks/useFetchUser"; - -import { WithPageLayout } from "interfaces/with-page-layout"; +import Feeds from "components/organisms/HighlightsFeed/feed"; import ProfileLayout from "layouts/profile"; -import SEO from "layouts/SEO/SEO"; - -import { Dialog, DialogCloseButton, DialogContent } from "components/molecules/Dialog/dialog"; -import Avatar from "components/atoms/Avatar/avatar"; -import { Tabs, TabsContent, TabsList, TabsTrigger } from "components/atoms/Tabs/tabs"; -import ContributorHighlightCard from "components/molecules/ContributorHighlight/contributor-highlight-card"; -import HighlightInputForm from "components/molecules/HighlightInput/highlight-input-form"; -import HighlightsFilterCard from "components/molecules/HighlightsFeedCard/highlights-filter-card"; -import Pagination from "components/molecules/Pagination/pagination"; -import PaginationResults from "components/molecules/PaginationResults/pagination-result"; -import FollowingHighlightWrapper from "components/organisms/FollowersHighlightWrapper/following-highlight-wrapper"; -import HomeHighlightsWrapper from "components/organisms/HomeHighlightsWrapper/home-highlights-wrapper"; -import NewsletterForm from "components/molecules/NewsletterForm/newsletter-form"; -import UserCard, { MetaObj } from "components/atoms/UserCard/user-card"; -import FeaturedHighlightsPanel from "components/molecules/FeaturedHighlightsPanel/featured-highlights-panel"; -import { useFetchFeaturedHighlights } from "lib/hooks/useFetchFeaturedHighlights"; - -type activeTabType = "home" | "following"; -type highlightReposType = { repoName: string; repoIcon: string; full_name: string }; - -interface HighlightSSRProps { - highlight: DbHighlight | null; -} - -const Feeds: WithPageLayout = (props: HighlightSSRProps) => { - const { user } = useSupabaseAuth(); - const { data: repos } = useFetchHighlightRepos(); - - const { data: featuredHighlights } = useFetchFeaturedHighlights(); - - const repoTofilterList = (repos: { full_name: string }[]): highlightReposType[] => { - const filtersArray = repos.map(({ full_name }) => { - const [orgName, repo] = full_name.split("/"); - return { repoName: repo, repoIcon: `https://www.github.com/${orgName}.png?size=300`, full_name }; - }); - - return filtersArray; - }; - - const router = useRouter(); - const [openSingleHighlight, setOpenSingleHighlight] = useState(false); - const [selectedRepo, setSelectedRepo] = useState(""); - const [activeTab, setActiveTab] = useState("home"); - const [repoList, setRepoList] = useState(repoTofilterList(repos as highlightReposType[])); - const [hydrated, setHydrated] = useState(false); - - const singleHighlight = props.highlight; - const ogImage = props?.highlight - ? `${process.env.NEXT_PUBLIC_OPENGRAPH_URL}/highlights/${props.highlight.id}` - : undefined; - - const { data: followersRepo } = useFetchFollowersHighlightRepos(); - - const { data, mutate, setPage, isLoading, meta } = useFetchAllHighlights(selectedRepo); - const { data: emojis } = useFetchAllEmojis(); - const { data: loggedInUser, isLoading: loggedInUserLoading } = useFetchUser(user?.user_metadata.user_name as string); - - const { followers_count, following_count, highlights_count } = loggedInUser || {}; - - const userMetaArray = [ - { name: "Followers", count: followers_count ?? 0 }, - { name: "Following", count: following_count ?? 0 }, - { name: "Highlights", count: highlights_count ?? 0 }, - ]; - - useEffect(() => { - setSelectedRepo(""); - if (activeTab === "home") { - setRepoList(repoTofilterList(repos)); - } else if (activeTab === "following") { - setRepoList(repoTofilterList(followersRepo)); - } - }, [activeTab, followersRepo, repos]); - - useEffect(() => { - console.log("id", props.highlight?.id); - if (selectedRepo) { - router.push(`/feed?repo=${selectedRepo}`); - setPage(1); - } - if (props.highlight?.id) { - setOpenSingleHighlight(true); - router.push(`/feed/${props.highlight?.id}`); - } - - if (!selectedRepo && !props.highlight?.id) { - router.push("/feed"); - setPage(1); - } - }, [selectedRepo, props.highlight?.id]); - - useEffect(() => { - setHydrated(true); - }, []); - - if (!hydrated) - return ( - <> - - - ); - - return ( - <> - -
-
- {user && ( -
- -
- )} -
- {singleHighlight && ( - { - if (!open) { - setOpenSingleHighlight(false); - router.push("/feed"); - } - }} - > - -
-
-
- - - {singleHighlight.login} - - - {formatDistanceToNowStrict(new Date(singleHighlight.created_at), { - addSuffix: true, - })} - - router.push("/feed")} /> -
- -
- -
-
-
- - - )} - { - setActiveTab(value as activeTabType); - }} - defaultValue="home" - className="md:flex-[2] " - > - - - Home - - - Following - - - - {user && ( -
-
- -
- - -
- )} - - - {meta.pageCount > 1 && ( -
-
- -
- -
- )} - - - - - -
- {repoList && repoList.length > 0 && ( - - )} - - {featuredHighlights && featuredHighlights.length > 0 && ( - - )} - -
-
- - ); -}; Feeds.PageLayout = ProfileLayout; + export default Feeds; From 3eee566d52129cde752521d3514eb09ce63977be Mon Sep 17 00:00:00 2001 From: Brandon Roberts Date: Wed, 12 Jul 2023 16:25:16 -0500 Subject: [PATCH 06/14] Revert "refactor: move highlights feed into organism component" This reverts commit 7d0fd7fcfb7b94436c0eb88864145ddbdf49a99d. --- components/organisms/HighlightsFeed/feed.tsx | 270 ------------------- pages/feed/[id].tsx | 10 +- pages/feed/index.tsx | 268 +++++++++++++++++- 3 files changed, 270 insertions(+), 278 deletions(-) delete mode 100644 components/organisms/HighlightsFeed/feed.tsx diff --git a/components/organisms/HighlightsFeed/feed.tsx b/components/organisms/HighlightsFeed/feed.tsx deleted file mode 100644 index ad84d35e06..0000000000 --- a/components/organisms/HighlightsFeed/feed.tsx +++ /dev/null @@ -1,270 +0,0 @@ -import { useEffect, useState } from "react"; -import { useRouter } from "next/router"; -import Link from "next/link"; -import formatDistanceToNowStrict from "date-fns/formatDistanceToNowStrict"; -import clsx from "clsx"; - -import useSupabaseAuth from "lib/hooks/useSupabaseAuth"; -import { useFetchAllHighlights } from "lib/hooks/useFetchAllHighlights"; -import { useFetchHighlightRepos } from "lib/hooks/useFetchHiglightRepos"; -import useFetchAllEmojis from "lib/hooks/useFetchAllEmojis"; -import { useFetchFollowersHighlightRepos } from "lib/hooks/useFetchFollowingHighlightRepos"; -import { useFetchUser } from "lib/hooks/useFetchUser"; - -import { WithPageLayout } from "interfaces/with-page-layout"; -import ProfileLayout from "layouts/profile"; -import SEO from "layouts/SEO/SEO"; - -import { Dialog, DialogCloseButton, DialogContent } from "components/molecules/Dialog/dialog"; -import Avatar from "components/atoms/Avatar/avatar"; -import { Tabs, TabsContent, TabsList, TabsTrigger } from "components/atoms/Tabs/tabs"; -import ContributorHighlightCard from "components/molecules/ContributorHighlight/contributor-highlight-card"; -import HighlightInputForm from "components/molecules/HighlightInput/highlight-input-form"; -import HighlightsFilterCard from "components/molecules/HighlightsFeedCard/highlights-filter-card"; -import Pagination from "components/molecules/Pagination/pagination"; -import PaginationResults from "components/molecules/PaginationResults/pagination-result"; -import FollowingHighlightWrapper from "components/organisms/FollowersHighlightWrapper/following-highlight-wrapper"; -import HomeHighlightsWrapper from "components/organisms/HomeHighlightsWrapper/home-highlights-wrapper"; -import NewsletterForm from "components/molecules/NewsletterForm/newsletter-form"; -import UserCard, { MetaObj } from "components/atoms/UserCard/user-card"; -import FeaturedHighlightsPanel from "components/molecules/FeaturedHighlightsPanel/featured-highlights-panel"; -import { useFetchFeaturedHighlights } from "lib/hooks/useFetchFeaturedHighlights"; - -type activeTabType = "home" | "following"; -type highlightReposType = { repoName: string; repoIcon: string; full_name: string }; - -interface HighlightSSRProps { - highlight: DbHighlight | null; -} - -const Feeds: WithPageLayout = (props: HighlightSSRProps) => { - const { user } = useSupabaseAuth(); - const { data: repos } = useFetchHighlightRepos(); - - const { data: featuredHighlights } = useFetchFeaturedHighlights(); - - const repoTofilterList = (repos: { full_name: string }[]): highlightReposType[] => { - const filtersArray = repos.map(({ full_name }) => { - const [orgName, repo] = full_name.split("/"); - return { repoName: repo, repoIcon: `https://www.github.com/${orgName}.png?size=300`, full_name }; - }); - - return filtersArray; - }; - - const router = useRouter(); - const [openSingleHighlight, setOpenSingleHighlight] = useState(false); - const [selectedRepo, setSelectedRepo] = useState(""); - const [activeTab, setActiveTab] = useState("home"); - const [repoList, setRepoList] = useState(repoTofilterList(repos as highlightReposType[])); - const [hydrated, setHydrated] = useState(false); - - const singleHighlight = props.highlight; - const ogImage = props?.highlight - ? `${process.env.NEXT_PUBLIC_OPENGRAPH_URL}/highlights/${props.highlight.id}` - : undefined; - - const { data: followersRepo } = useFetchFollowersHighlightRepos(); - - const { data, mutate, setPage, isLoading, meta } = useFetchAllHighlights(selectedRepo); - const { data: emojis } = useFetchAllEmojis(); - const { data: loggedInUser, isLoading: loggedInUserLoading } = useFetchUser(user?.user_metadata.user_name as string); - - const { followers_count, following_count, highlights_count } = loggedInUser || {}; - - const userMetaArray = [ - { name: "Followers", count: followers_count ?? 0 }, - { name: "Following", count: following_count ?? 0 }, - { name: "Highlights", count: highlights_count ?? 0 }, - ]; - - useEffect(() => { - setSelectedRepo(""); - if (activeTab === "home") { - setRepoList(repoTofilterList(repos)); - } else if (activeTab === "following") { - setRepoList(repoTofilterList(followersRepo)); - } - }, [activeTab, followersRepo, repos]); - - useEffect(() => { - console.log("id", props.highlight?.id); - if (selectedRepo) { - router.push(`/feed?repo=${selectedRepo}`); - setPage(1); - } - if (props.highlight?.id) { - setOpenSingleHighlight(true); - router.push(`/feed/${props.highlight?.id}`); - } - - if (!selectedRepo && !props.highlight?.id) { - router.push("/feed"); - setPage(1); - } - }, [selectedRepo, props.highlight?.id]); - - useEffect(() => { - setHydrated(true); - }, []); - - if (!hydrated) - return ( - <> - - - ); - - return ( - <> - -
-
- {user && ( -
- -
- )} -
- {singleHighlight && ( - { - if (!open) { - setOpenSingleHighlight(false); - router.push("/feed"); - } - }} - > - -
-
-
- - - {singleHighlight.login} - - - {formatDistanceToNowStrict(new Date(singleHighlight.created_at), { - addSuffix: true, - })} - - router.push("/feed")} /> -
- -
- -
-
-
- - - )} - { - setActiveTab(value as activeTabType); - }} - defaultValue="home" - className="md:flex-[2] " - > - - - Home - - - Following - - - - {user && ( -
-
- -
- - -
- )} - - - {meta.pageCount > 1 && ( -
-
- -
- -
- )} - - - - - -
- {repoList && repoList.length > 0 && ( - - )} - - {featuredHighlights && featuredHighlights.length > 0 && ( - - )} - -
-
- - ); -}; - -Feeds.PageLayout = ProfileLayout; -export default Feeds; diff --git a/pages/feed/[id].tsx b/pages/feed/[id].tsx index c90207cbb9..de73215e8c 100644 --- a/pages/feed/[id].tsx +++ b/pages/feed/[id].tsx @@ -1,6 +1,8 @@ import { GetServerSidePropsContext } from "next"; -import Feeds from "components/organisms/HighlightsFeed/feed"; -import ProfileLayout from "layouts/profile"; + +import Feed from "./index"; + +export default Feed; export const getServerSideProps = async (context: HighlightSSRPropsContext) => { return await handleHighlightSSR(context); @@ -31,7 +33,3 @@ export async function handleHighlightSSR({ params }: GetServerSidePropsContext<{ props: { highlight }, }; } - -Feeds.PageLayout = ProfileLayout; - -export default Feeds; diff --git a/pages/feed/index.tsx b/pages/feed/index.tsx index a69ace0f49..ad84d35e06 100644 --- a/pages/feed/index.tsx +++ b/pages/feed/index.tsx @@ -1,6 +1,270 @@ -import Feeds from "components/organisms/HighlightsFeed/feed"; +import { useEffect, useState } from "react"; +import { useRouter } from "next/router"; +import Link from "next/link"; +import formatDistanceToNowStrict from "date-fns/formatDistanceToNowStrict"; +import clsx from "clsx"; + +import useSupabaseAuth from "lib/hooks/useSupabaseAuth"; +import { useFetchAllHighlights } from "lib/hooks/useFetchAllHighlights"; +import { useFetchHighlightRepos } from "lib/hooks/useFetchHiglightRepos"; +import useFetchAllEmojis from "lib/hooks/useFetchAllEmojis"; +import { useFetchFollowersHighlightRepos } from "lib/hooks/useFetchFollowingHighlightRepos"; +import { useFetchUser } from "lib/hooks/useFetchUser"; + +import { WithPageLayout } from "interfaces/with-page-layout"; import ProfileLayout from "layouts/profile"; +import SEO from "layouts/SEO/SEO"; -Feeds.PageLayout = ProfileLayout; +import { Dialog, DialogCloseButton, DialogContent } from "components/molecules/Dialog/dialog"; +import Avatar from "components/atoms/Avatar/avatar"; +import { Tabs, TabsContent, TabsList, TabsTrigger } from "components/atoms/Tabs/tabs"; +import ContributorHighlightCard from "components/molecules/ContributorHighlight/contributor-highlight-card"; +import HighlightInputForm from "components/molecules/HighlightInput/highlight-input-form"; +import HighlightsFilterCard from "components/molecules/HighlightsFeedCard/highlights-filter-card"; +import Pagination from "components/molecules/Pagination/pagination"; +import PaginationResults from "components/molecules/PaginationResults/pagination-result"; +import FollowingHighlightWrapper from "components/organisms/FollowersHighlightWrapper/following-highlight-wrapper"; +import HomeHighlightsWrapper from "components/organisms/HomeHighlightsWrapper/home-highlights-wrapper"; +import NewsletterForm from "components/molecules/NewsletterForm/newsletter-form"; +import UserCard, { MetaObj } from "components/atoms/UserCard/user-card"; +import FeaturedHighlightsPanel from "components/molecules/FeaturedHighlightsPanel/featured-highlights-panel"; +import { useFetchFeaturedHighlights } from "lib/hooks/useFetchFeaturedHighlights"; + +type activeTabType = "home" | "following"; +type highlightReposType = { repoName: string; repoIcon: string; full_name: string }; + +interface HighlightSSRProps { + highlight: DbHighlight | null; +} + +const Feeds: WithPageLayout = (props: HighlightSSRProps) => { + const { user } = useSupabaseAuth(); + const { data: repos } = useFetchHighlightRepos(); + + const { data: featuredHighlights } = useFetchFeaturedHighlights(); + + const repoTofilterList = (repos: { full_name: string }[]): highlightReposType[] => { + const filtersArray = repos.map(({ full_name }) => { + const [orgName, repo] = full_name.split("/"); + return { repoName: repo, repoIcon: `https://www.github.com/${orgName}.png?size=300`, full_name }; + }); + + return filtersArray; + }; + + const router = useRouter(); + const [openSingleHighlight, setOpenSingleHighlight] = useState(false); + const [selectedRepo, setSelectedRepo] = useState(""); + const [activeTab, setActiveTab] = useState("home"); + const [repoList, setRepoList] = useState(repoTofilterList(repos as highlightReposType[])); + const [hydrated, setHydrated] = useState(false); + + const singleHighlight = props.highlight; + const ogImage = props?.highlight + ? `${process.env.NEXT_PUBLIC_OPENGRAPH_URL}/highlights/${props.highlight.id}` + : undefined; + + const { data: followersRepo } = useFetchFollowersHighlightRepos(); + + const { data, mutate, setPage, isLoading, meta } = useFetchAllHighlights(selectedRepo); + const { data: emojis } = useFetchAllEmojis(); + const { data: loggedInUser, isLoading: loggedInUserLoading } = useFetchUser(user?.user_metadata.user_name as string); + const { followers_count, following_count, highlights_count } = loggedInUser || {}; + + const userMetaArray = [ + { name: "Followers", count: followers_count ?? 0 }, + { name: "Following", count: following_count ?? 0 }, + { name: "Highlights", count: highlights_count ?? 0 }, + ]; + + useEffect(() => { + setSelectedRepo(""); + if (activeTab === "home") { + setRepoList(repoTofilterList(repos)); + } else if (activeTab === "following") { + setRepoList(repoTofilterList(followersRepo)); + } + }, [activeTab, followersRepo, repos]); + + useEffect(() => { + console.log("id", props.highlight?.id); + if (selectedRepo) { + router.push(`/feed?repo=${selectedRepo}`); + setPage(1); + } + if (props.highlight?.id) { + setOpenSingleHighlight(true); + router.push(`/feed/${props.highlight?.id}`); + } + + if (!selectedRepo && !props.highlight?.id) { + router.push("/feed"); + setPage(1); + } + }, [selectedRepo, props.highlight?.id]); + + useEffect(() => { + setHydrated(true); + }, []); + + if (!hydrated) + return ( + <> + + + ); + + return ( + <> + +
+
+ {user && ( +
+ +
+ )} +
+ {singleHighlight && ( + { + if (!open) { + setOpenSingleHighlight(false); + router.push("/feed"); + } + }} + > + +
+
+
+ + + {singleHighlight.login} + + + {formatDistanceToNowStrict(new Date(singleHighlight.created_at), { + addSuffix: true, + })} + + router.push("/feed")} /> +
+ +
+ +
+
+
+ + + )} + { + setActiveTab(value as activeTabType); + }} + defaultValue="home" + className="md:flex-[2] " + > + + + Home + + + Following + + + + {user && ( +
+
+ +
+ + +
+ )} + + + {meta.pageCount > 1 && ( +
+
+ +
+ +
+ )} + + + + + +
+ {repoList && repoList.length > 0 && ( + + )} + + {featuredHighlights && featuredHighlights.length > 0 && ( + + )} + +
+
+ + ); +}; + +Feeds.PageLayout = ProfileLayout; export default Feeds; From 15994f8c34fdf40797507ce07dfd64a9771df0f4 Mon Sep 17 00:00:00 2001 From: Brandon Roberts Date: Wed, 12 Jul 2023 20:53:05 -0500 Subject: [PATCH 07/14] chore: remove console.log --- pages/feed/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/pages/feed/index.tsx b/pages/feed/index.tsx index ad84d35e06..15055b78b3 100644 --- a/pages/feed/index.tsx +++ b/pages/feed/index.tsx @@ -88,7 +88,6 @@ const Feeds: WithPageLayout = (props: HighlightSSRProps) => { }, [activeTab, followersRepo, repos]); useEffect(() => { - console.log("id", props.highlight?.id); if (selectedRepo) { router.push(`/feed?repo=${selectedRepo}`); setPage(1); From 2d06465ac3984274a5e319260880a9d33eb506ad Mon Sep 17 00:00:00 2001 From: Brandon Roberts Date: Thu, 13 Jul 2023 10:44:23 -0500 Subject: [PATCH 08/14] fix: move FollowUser into separate component --- .../contributor-highlight-card.tsx | 32 ++----------------- .../ContributorHighlight/follow-user.tsx | 29 +++++++++++++++++ pages/feed/index.tsx | 17 ++++++---- 3 files changed, 43 insertions(+), 35 deletions(-) create mode 100644 components/molecules/ContributorHighlight/follow-user.tsx diff --git a/components/molecules/ContributorHighlight/contributor-highlight-card.tsx b/components/molecules/ContributorHighlight/contributor-highlight-card.tsx index f91fe5d001..b48b556923 100644 --- a/components/molecules/ContributorHighlight/contributor-highlight-card.tsx +++ b/components/molecules/ContributorHighlight/contributor-highlight-card.tsx @@ -3,7 +3,6 @@ import { HiOutlineEmojiHappy } from "react-icons/hi"; import { TfiMoreAlt } from "react-icons/tfi"; import { FiEdit, FiLinkedin, FiTwitter } from "react-icons/fi"; import { BsCalendar2Event, BsLink45Deg } from "react-icons/bs"; -import { FaUserPlus } from "react-icons/fa"; import { GrFlag } from "react-icons/gr"; import Emoji from "react-emoji-render"; import { usePostHog } from "posthog-js/react"; @@ -26,7 +25,6 @@ import { fetchGithubPRInfo } from "lib/hooks/fetchGithubPRInfo"; import { updateHighlights } from "lib/hooks/updateHighlight"; import { deleteHighlight } from "lib/hooks/deleteHighlight"; import { useToast } from "lib/hooks/useToast"; -import useFollowUser from "lib/hooks/useFollowUser"; import useHighlightReactions from "lib/hooks/useHighlightReactions"; import useUserHighlightReactions from "lib/hooks/useUserHighlightReactions"; import Tooltip from "components/atoms/Tooltip/tooltip"; @@ -51,6 +49,7 @@ import { } from "../AlertDialog/alert-dialog"; import { Popover, PopoverContent, PopoverTrigger } from "../Popover/popover"; import { Calendar } from "../Calendar/calendar"; +import FollowUser from "./follow-user"; interface ContributorHighlightCardProps { title?: string; @@ -213,32 +212,7 @@ const ContributorHighlightCard = ({ if (window !== undefined) { setHost(window.location.origin as string); } - }, [highlight]); - - function FollowUser() { - const { follow, unFollow, isError } = useFollowUser(user); - - return loggedInUser ? ( - -
- - - {!isError ? "Unfollow" : "Follow"} {user} - -
- - ) : ( - -
await signIn({ provider: "github" })} - className="flex gap-2.5 py-1 items-center pl-3 pr-7" - > - - Follow {user} -
- - ); - } + }, []); return (
@@ -291,7 +265,7 @@ const ContributorHighlightCard = ({ Copy link
- + {loggedInUser && ( { + const { user, signIn } = useSupabaseAuth(); + const { follow, unFollow, isError } = useFollowUser(username); + + return user ? ( + +
+ + + {!isError ? "Unfollow" : "Follow"} {username} + +
+ + ) : ( + +
signIn({ provider: "github" })} className="flex gap-2.5 py-1 items-center pl-3 pr-7"> + + Follow {username} +
+ + ); +}; + +export default FollowUser; diff --git a/pages/feed/index.tsx b/pages/feed/index.tsx index 15055b78b3..3f636fe008 100644 --- a/pages/feed/index.tsx +++ b/pages/feed/index.tsx @@ -91,17 +91,22 @@ const Feeds: WithPageLayout = (props: HighlightSSRProps) => { if (selectedRepo) { router.push(`/feed?repo=${selectedRepo}`); setPage(1); - } - if (props.highlight?.id) { - setOpenSingleHighlight(true); - router.push(`/feed/${props.highlight?.id}`); + return; } - if (!selectedRepo && !props.highlight?.id) { + if (!selectedRepo) { router.push("/feed"); setPage(1); + return; + } + }, [selectedRepo]); + + useEffect(() => { + if (singleHighlight) { + router.push(`/feed/${props.highlight?.id}`); + setOpenSingleHighlight(true); } - }, [selectedRepo, props.highlight?.id]); + }, [singleHighlight]); useEffect(() => { setHydrated(true); From 18cb39de17495cf822d20d66b02686e1314dcbfb Mon Sep 17 00:00:00 2001 From: Brandon Roberts Date: Thu, 13 Jul 2023 11:09:55 -0500 Subject: [PATCH 09/14] fix: improve logic of opening single highlight --- pages/feed/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/feed/index.tsx b/pages/feed/index.tsx index 3f636fe008..0346d0b0b1 100644 --- a/pages/feed/index.tsx +++ b/pages/feed/index.tsx @@ -102,7 +102,7 @@ const Feeds: WithPageLayout = (props: HighlightSSRProps) => { }, [selectedRepo]); useEffect(() => { - if (singleHighlight) { + if (singleHighlight && !openSingleHighlight) { router.push(`/feed/${props.highlight?.id}`); setOpenSingleHighlight(true); } From 7cf5a790a95257e925f38ee70e918224fe745648 Mon Sep 17 00:00:00 2001 From: Brandon Roberts Date: Thu, 13 Jul 2023 11:13:10 -0500 Subject: [PATCH 10/14] fix: add back hidden newsletter form --- pages/feed/index.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/pages/feed/index.tsx b/pages/feed/index.tsx index 0346d0b0b1..45b800ec04 100644 --- a/pages/feed/index.tsx +++ b/pages/feed/index.tsx @@ -121,6 +121,9 @@ const Feeds: WithPageLayout = (props: HighlightSSRProps) => { image={ogImage} twitterCard="summary_large_image" /> +
+ +
); From 5ceb24c6a0f447ede6a3ba6f289c1f1ee8dfbd9d Mon Sep 17 00:00:00 2001 From: Brandon Roberts Date: Fri, 14 Jul 2023 12:37:15 -0500 Subject: [PATCH 11/14] fix: fix stability and logic issues with highlight dialog --- .../contributor-highlight-card.tsx | 32 +++++++++++++++++-- .../ContributorHighlight/follow-user.tsx | 29 ----------------- .../highlights-filter-card.tsx | 7 ++-- 3 files changed, 35 insertions(+), 33 deletions(-) delete mode 100644 components/molecules/ContributorHighlight/follow-user.tsx diff --git a/components/molecules/ContributorHighlight/contributor-highlight-card.tsx b/components/molecules/ContributorHighlight/contributor-highlight-card.tsx index b48b556923..9da236cfa5 100644 --- a/components/molecules/ContributorHighlight/contributor-highlight-card.tsx +++ b/components/molecules/ContributorHighlight/contributor-highlight-card.tsx @@ -49,7 +49,8 @@ import { } from "../AlertDialog/alert-dialog"; import { Popover, PopoverContent, PopoverTrigger } from "../Popover/popover"; import { Calendar } from "../Calendar/calendar"; -import FollowUser from "./follow-user"; +import useFollowUser from "lib/hooks/useFollowUser"; +import { FaUserPlus } from "react-icons/fa"; interface ContributorHighlightCardProps { title?: string; @@ -85,6 +86,9 @@ const ContributorHighlightCard = ({ const [alertOpen, setAlertOpen] = useState(false); const [deleteLoading, setDeleteLoading] = useState(false); const [host, setHost] = useState(""); + const { follow, unFollow, isError } = useFollowUser( + loggedInUser && loggedInUser?.user_metadata.username !== user ? user : "" + ); const [date, setDate] = useState(shipped_date ? new Date(shipped_date) : undefined); @@ -265,7 +269,31 @@ const ContributorHighlightCard = ({ Copy link - + {loggedInUser ? ( + +
+ + + {!isError ? "Unfollow" : "Follow"} {user} + +
+ + ) : ( + +
signIn({ provider: "github" })} + className="flex gap-2.5 py-1 items-center pl-3 pr-7" + > + + Follow {user} +
+ + )} {loggedInUser && ( { - const { user, signIn } = useSupabaseAuth(); - const { follow, unFollow, isError } = useFollowUser(username); - - return user ? ( - -
- - - {!isError ? "Unfollow" : "Follow"} {username} - -
- - ) : ( - -
signIn({ provider: "github" })} className="flex gap-2.5 py-1 items-center pl-3 pr-7"> - - Follow {username} -
- - ); -}; - -export default FollowUser; diff --git a/components/molecules/HighlightsFeedCard/highlights-filter-card.tsx b/components/molecules/HighlightsFeedCard/highlights-filter-card.tsx index 64967da837..a276368459 100644 --- a/components/molecules/HighlightsFeedCard/highlights-filter-card.tsx +++ b/components/molecules/HighlightsFeedCard/highlights-filter-card.tsx @@ -4,7 +4,7 @@ import Icon from "components/atoms/Icon/icon"; interface HighlightsFilterCardProps { repos: { repoName: string; repoIcon: string; full_name: string }[]; - setSelected?: React.Dispatch>; + setSelected?: (selected: string) => void; selectedFilter: string; } const HighlightsFilterCard = ({ repos, setSelected, selectedFilter }: HighlightsFilterCardProps): JSX.Element => { @@ -12,9 +12,12 @@ const HighlightsFilterCard = ({ repos, setSelected, selectedFilter }: Highlights const handleClick = (name: string) => { setSelectedRepo((prev) => (prev === name ? "" : name)); - setSelected?.((prev) => (prev === name ? "" : name)); }; + useEffect(() => { + setSelected?.(selected); + }, [selected]); + useEffect(() => { // This is to handle resetting the filter state when the tab is switched setSelectedRepo(selectedFilter); From 4b23d6a8ae9d496aef33eee0365927ad58eade9f Mon Sep 17 00:00:00 2001 From: Brandon Roberts Date: Fri, 14 Jul 2023 12:37:50 -0500 Subject: [PATCH 12/14] chore: remove dynamic [filter] from selected filter route --- .../[toolName]/{[filter] => filter}/[...selectedFilter].tsx | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename pages/[filterName]/[toolName]/{[filter] => filter}/[...selectedFilter].tsx (100%) diff --git a/pages/[filterName]/[toolName]/[filter]/[...selectedFilter].tsx b/pages/[filterName]/[toolName]/filter/[...selectedFilter].tsx similarity index 100% rename from pages/[filterName]/[toolName]/[filter]/[...selectedFilter].tsx rename to pages/[filterName]/[toolName]/filter/[...selectedFilter].tsx From 972377d3a44849a92cf52ed771a339fa291f82b2 Mon Sep 17 00:00:00 2001 From: Brandon Roberts Date: Fri, 14 Jul 2023 12:38:32 -0500 Subject: [PATCH 13/14] chore: update logic on feed page for selecting repos and highlights --- pages/feed/index.tsx | 29 ++++++++++++----------------- 1 file changed, 12 insertions(+), 17 deletions(-) diff --git a/pages/feed/index.tsx b/pages/feed/index.tsx index 45b800ec04..8b1e0dc2fe 100644 --- a/pages/feed/index.tsx +++ b/pages/feed/index.tsx @@ -79,27 +79,12 @@ const Feeds: WithPageLayout = (props: HighlightSSRProps) => { ]; useEffect(() => { - setSelectedRepo(""); if (activeTab === "home") { setRepoList(repoTofilterList(repos)); } else if (activeTab === "following") { setRepoList(repoTofilterList(followersRepo)); } - }, [activeTab, followersRepo, repos]); - - useEffect(() => { - if (selectedRepo) { - router.push(`/feed?repo=${selectedRepo}`); - setPage(1); - return; - } - - if (!selectedRepo) { - router.push("/feed"); - setPage(1); - return; - } - }, [selectedRepo]); + }, [activeTab]); useEffect(() => { if (singleHighlight && !openSingleHighlight) { @@ -260,7 +245,17 @@ const Feeds: WithPageLayout = (props: HighlightSSRProps) => {
{repoList && repoList.length > 0 && ( - + { + if (!openSingleHighlight) { + router.push(`/feed${repo ? `?repo=${repo}` : ""}`); + setPage(1); + setSelectedRepo(repo); + } + }} + repos={repoList} + /> )} {featuredHighlights && featuredHighlights.length > 0 && ( From 18f21ea0043819108b8e571de6488bfc64ad7c92 Mon Sep 17 00:00:00 2001 From: Brandon Roberts Date: Fri, 14 Jul 2023 12:39:07 -0500 Subject: [PATCH 14/14] chore: formatting --- .../ContributorHighlight/contributor-highlight-card.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/molecules/ContributorHighlight/contributor-highlight-card.tsx b/components/molecules/ContributorHighlight/contributor-highlight-card.tsx index 9da236cfa5..16db393b35 100644 --- a/components/molecules/ContributorHighlight/contributor-highlight-card.tsx +++ b/components/molecules/ContributorHighlight/contributor-highlight-card.tsx @@ -8,6 +8,7 @@ import Emoji from "react-emoji-render"; import { usePostHog } from "posthog-js/react"; import { MdError } from "react-icons/md"; import { format } from "date-fns"; +import { FaUserPlus } from "react-icons/fa"; import Title from "components/atoms/Typography/title"; import { Textarea } from "components/atoms/Textarea/text-area"; @@ -28,6 +29,7 @@ import { useToast } from "lib/hooks/useToast"; import useHighlightReactions from "lib/hooks/useHighlightReactions"; import useUserHighlightReactions from "lib/hooks/useUserHighlightReactions"; import Tooltip from "components/atoms/Tooltip/tooltip"; +import useFollowUser from "lib/hooks/useFollowUser"; import GhOpenGraphImg from "../GhOpenGraphImg/gh-open-graph-img"; import { Dialog, @@ -49,8 +51,6 @@ import { } from "../AlertDialog/alert-dialog"; import { Popover, PopoverContent, PopoverTrigger } from "../Popover/popover"; import { Calendar } from "../Calendar/calendar"; -import useFollowUser from "lib/hooks/useFollowUser"; -import { FaUserPlus } from "react-icons/fa"; interface ContributorHighlightCardProps { title?: string;