From 20288192756ff65590e5bb5bbec6875cb367ac75 Mon Sep 17 00:00:00 2001 From: Zeu Capua Date: Mon, 30 Sep 2024 11:23:32 -0700 Subject: [PATCH 1/6] add no interest state, silo RecommendationSection into separate component --- pages/explore/index.tsx | 97 ++++++++++++++++++++++++++++------------- 1 file changed, 66 insertions(+), 31 deletions(-) diff --git a/pages/explore/index.tsx b/pages/explore/index.tsx index 06c791373b..bd1cdc687d 100644 --- a/pages/explore/index.tsx +++ b/pages/explore/index.tsx @@ -10,6 +10,8 @@ import useSession from "lib/hooks/useSession"; import useSupabaseAuth from "lib/hooks/useSupabaseAuth"; import useUserRepoRecommendations from "lib/hooks/useUserRepoRecommendations"; import { SearchDialogTrigger } from "components/organisms/SearchDialog/search-dialog"; +import { Spinner } from "components/atoms/SpinLoader/spin-loader"; +import Text from "components/atoms/Typography/text"; export const FEATURED_WORKSPACES = [ "b355ecef-76a5-4451-972a-281e16ccf2e4", // Brandon's "Angular" @@ -83,7 +85,7 @@ export default function ExploreHomePage() { -
+
Recommended for You

@@ -92,36 +94,15 @@ export default function ExploreHomePage() { : "Log in to get personalized recommendations on repositories to contribute to!"}

- {session ? ( - - - {recommendations && - recommendations.map((repo) => ( - - - - ))} - - -
- - -
- - ) : ( - - )} + { + signIn({ provider: "github" }); + }} + />
@@ -178,3 +159,57 @@ export default function ExploreHomePage() { ); } + +type RecommendationSectionProps = { + recommendations: DbRepo[]; + isLoading: boolean; + isError: boolean; + session: DbUser | false; + loginOnClick?: () => void; +}; + +function RecommendationSection({ + recommendations, + isLoading, + isError, + session, + loginOnClick, +}: RecommendationSectionProps) { + if (!session) { + return ( + + ); + } else if (isLoading) { + return ; + } else if (!session.interests) { + return ( +
+ Add some interests to get recommended repositories to contribute to! + +
+ ); + } else if (isError) { + return There has been an error. Try reloading the page!; + } else + return ( + + + {recommendations && + recommendations.map((repo) => ( + + + + ))} + + +
+ + +
+ + ); +} From b845986a4ba5f4979a52317af0f4312048155b82 Mon Sep 17 00:00:00 2001 From: Zeu Capua Date: Mon, 30 Sep 2024 12:54:57 -0700 Subject: [PATCH 2/6] add interests language switches --- pages/explore/index.tsx | 26 ++++++++++++++++++++++---- 1 file changed, 22 insertions(+), 4 deletions(-) diff --git a/pages/explore/index.tsx b/pages/explore/index.tsx index bd1cdc687d..5248eb794e 100644 --- a/pages/explore/index.tsx +++ b/pages/explore/index.tsx @@ -1,4 +1,5 @@ import { TbFileDescription } from "react-icons/tb"; +import { useState } from "react"; import WorkspaceCard from "components/Workspaces/WorkspaceCard"; import { WorkspaceLayout } from "components/Workspaces/WorkspaceLayout"; import Title from "components/atoms/Typography/title"; @@ -12,6 +13,8 @@ import useUserRepoRecommendations from "lib/hooks/useUserRepoRecommendations"; import { SearchDialogTrigger } from "components/organisms/SearchDialog/search-dialog"; import { Spinner } from "components/atoms/SpinLoader/spin-loader"; import Text from "components/atoms/Typography/text"; +import { getInterestOptions } from "lib/utils/getInterestOptions"; +import { LanguageSwitch } from "components/shared/LanguageSwitch/language-switch"; export const FEATURED_WORKSPACES = [ "b355ecef-76a5-4451-972a-281e16ccf2e4", // Brandon's "Angular" @@ -175,6 +178,9 @@ function RecommendationSection({ session, loginOnClick, }: RecommendationSectionProps) { + const interestArray = getInterestOptions(); + const [selectedInterest, setSelectedInterest] = useState([]); + if (!session) { return ( ); } else if (isError) { return There has been an error. Try reloading the page!; - } else + } else { return ( @@ -212,4 +229,5 @@ function RecommendationSection({ ); + } } From 1ceefca3fd744ee9e8263b7132bc4879108043d3 Mon Sep 17 00:00:00 2001 From: Zeu Capua Date: Mon, 30 Sep 2024 13:10:09 -0700 Subject: [PATCH 3/6] update selectedInterests on click --- pages/explore/index.tsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/pages/explore/index.tsx b/pages/explore/index.tsx index 5248eb794e..40cef3ec52 100644 --- a/pages/explore/index.tsx +++ b/pages/explore/index.tsx @@ -195,7 +195,18 @@ function RecommendationSection({ Add some interests to get recommended repositories to contribute to!
{interestArray.map((topic, index) => ( - {}} topic={topic} key={index} /> + { + if (selectedInterest.length > 0 && selectedInterest.includes(topic)) { + setSelectedInterest((prev) => prev.filter((t) => topic !== t)); + } else { + setSelectedInterest((prev) => [...prev, topic]); + } + }} + topic={topic} + key={index} + /> ))}
); - } else if (isError) { - return There has been an error. Try reloading the page!; } else { return ( {recommendations && - recommendations.map((repo) => ( - + recommendations.map((repo, index) => ( + ))} From a9fd036b6d295a07c4021df109afd263b3895763 Mon Sep 17 00:00:00 2001 From: Zeu Capua Date: Mon, 30 Sep 2024 17:55:11 -0700 Subject: [PATCH 5/6] mutate on update interests --- pages/explore/index.tsx | 40 +++++++++++++++++++++++----------------- 1 file changed, 23 insertions(+), 17 deletions(-) diff --git a/pages/explore/index.tsx b/pages/explore/index.tsx index 8b0e93cc5e..4316fa0939 100644 --- a/pages/explore/index.tsx +++ b/pages/explore/index.tsx @@ -1,22 +1,24 @@ import { TbFileDescription } from "react-icons/tb"; import { useState } from "react"; +import Text from "components/atoms/Typography/text"; +import Button from "components/shared/Button/button"; +import Title from "components/atoms/Typography/title"; import WorkspaceCard from "components/Workspaces/WorkspaceCard"; +import { Spinner } from "components/atoms/SpinLoader/spin-loader"; import { WorkspaceLayout } from "components/Workspaces/WorkspaceLayout"; -import Title from "components/atoms/Typography/title"; +import { LanguageSwitch } from "components/shared/LanguageSwitch/language-switch"; +import { SearchDialogTrigger } from "components/organisms/SearchDialog/search-dialog"; import RecommendedRepoCard from "components/molecules/RecommendedRepoCard/recommended-repo-card"; -import Button from "components/shared/Button/button"; import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "components/shared/Carousel"; -import useFetchTrendingRepositories from "lib/hooks/useFetchTrendingRepositories"; + import useSession from "lib/hooks/useSession"; +import { useToast } from "lib/hooks/useToast"; +import { updateUser } from "lib/hooks/update-user"; +import { useFetchUser } from "lib/hooks/useFetchUser"; import useSupabaseAuth from "lib/hooks/useSupabaseAuth"; -import useUserRepoRecommendations from "lib/hooks/useUserRepoRecommendations"; -import { SearchDialogTrigger } from "components/organisms/SearchDialog/search-dialog"; -import { Spinner } from "components/atoms/SpinLoader/spin-loader"; -import Text from "components/atoms/Typography/text"; import { getInterestOptions } from "lib/utils/getInterestOptions"; -import { LanguageSwitch } from "components/shared/LanguageSwitch/language-switch"; -import { updateUser } from "lib/hooks/update-user"; -import { useToast } from "lib/hooks/useToast"; +import useUserRepoRecommendations from "lib/hooks/useUserRepoRecommendations"; +import useFetchTrendingRepositories from "lib/hooks/useFetchTrendingRepositories"; export const FEATURED_WORKSPACES = [ "b355ecef-76a5-4451-972a-281e16ccf2e4", // Brandon's "Angular" @@ -105,7 +107,7 @@ export default function ExploreHomePage() { isLoading={isRecommendationsLoading} isError={isRecommendationsError} session={session} - mutate={recommendationsMutate} + recommendationsMutate={recommendationsMutate} loginOnClick={() => { signIn({ provider: "github" }); }} @@ -172,7 +174,7 @@ type RecommendationSectionProps = { isLoading: boolean; isError: boolean; session: DbUser | false; - mutate: () => void; + recommendationsMutate: () => void; loginOnClick?: () => void; }; @@ -181,7 +183,7 @@ function RecommendationSection({ isLoading, isError, session, - mutate, + recommendationsMutate, loginOnClick, }: RecommendationSectionProps) { const interestArray = getInterestOptions(); @@ -189,6 +191,10 @@ function RecommendationSection({ const [updating, setUpdating] = useState(false); const { toast } = useToast(); + const { data: user, mutate } = useFetchUser((session && session.user_name) || null, { + revalidateOnFocus: false, + }); + if (!session) { return ( ); - } else if (isLoading) { - return ; } else if (isError) { return There has been an error. Try reloading the page!; } else if (user && !user.interests) {