feat: implement 'no interest' state to /explore Recommendation Section

pages/explore/index.tsx

@@ -1,15 +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 { getInterestOptions } from "lib/utils/getInterestOptions";
 import useUserRepoRecommendations from "lib/hooks/useUserRepoRecommendations";
-import { SearchDialogTrigger } from "components/organisms/SearchDialog/search-dialog";
+import useFetchTrendingRepositories from "lib/hooks/useFetchTrendingRepositories";
 
 export const FEATURED_WORKSPACES = [
   "b355ecef-76a5-4451-972a-281e16ccf2e4", // Brandon's "Angular"
@@ -34,6 +43,7 @@ export default function ExploreHomePage() {
     data: recommendationsData,
     isLoading: isRecommendationsLoading,
     isError: isRecommendationsError,
+    mutate: recommendationsMutate,
   } = useUserRepoRecommendations();
 
   const recommendations = recommendationsData
@@ -83,7 +93,7 @@ export default function ExploreHomePage() {
           </Carousel>
         </section>
 
-        <section className="flex flex-col gap-8">
+        <section className="flex flex-col gap-8 pb-8">
           <div className="flex flex-col gap-4">
             <Title>Recommended for You</Title>
             <p>
@@ -92,36 +102,16 @@ export default function ExploreHomePage() {
                 : "Log in to get personalized recommendations on repositories to contribute to!"}
             </p>
           </div>
-          {session ? (
-            <Carousel opts={{ slidesToScroll: "auto" }} className="flex flex-col gap-8">
-              <CarouselContent className="justify-items-stretch pr-8">
-                {recommendations &&
-                  recommendations.map((repo) => (
-                    <CarouselItem
-                      key={`recommendation_${repo.full_name}`}
-                      className="lg:!basis-1/3 min-w-[24rem] h-full"
-                    >
-                      <RecommendedRepoCard fullName={repo.full_name} className="h-56" />
-                    </CarouselItem>
-                  ))}
-              </CarouselContent>
-
-              <div className="relative flex gap-4 self-end">
-                <CarouselPrevious className="relative !border !border-slate-300 !text-black !left-0 bg-white rounded-full !w-8 h-8 pl-[0.425rem]" />
-                <CarouselNext className="relative !border !border-slate-300 !text-black !right-0 bg-white rounded-full !w-8 h-8 pl-[0.425rem]" />
-              </div>
-            </Carousel>
-          ) : (
-            <Button
-              variant="primary"
-              onClick={() => {
-                signIn({ provider: "github" });
-              }}
-              className="w-fit"
-            >
-              Connect with GitHub
-            </Button>
-          )}
+          <RecommendationSection
+            recommendations={recommendations}
+            isLoading={isRecommendationsLoading}
+            isError={isRecommendationsError}
+            session={session}
+            recommendationsMutate={recommendationsMutate}
+            loginOnClick={() => {
+              signIn({ provider: "github" });
+            }}
+          />
         </section>
 
         <section className="flex flex-col lg:flex-row gap-8 w-full">
@@ -178,3 +168,106 @@ export default function ExploreHomePage() {
     </WorkspaceLayout>
   );
 }
+
+type RecommendationSectionProps = {
+  recommendations: DbRepo[];
+  isLoading: boolean;
+  isError: boolean;
+  session: DbUser | false;
+  recommendationsMutate: () => void;
+  loginOnClick?: () => void;
+};
+
+function RecommendationSection({
+  recommendations,
+  isLoading,
+  isError,
+  session,
+  recommendationsMutate,
+  loginOnClick,
+}: RecommendationSectionProps) {
+  const interestArray = getInterestOptions();
+  const [selectedInterest, setSelectedInterest] = useState<string[]>([]);
+  const [updating, setUpdating] = useState(false);
+  const { toast } = useToast();
+
+  const { data: user, mutate } = useFetchUser((session && session.user_name) || null, {
+    revalidateOnFocus: false,
+  });
+
+  if (isLoading) {
+    return <Spinner />;
+  } else if (!session) {
+    return (
+      <Button variant="primary" onClick={loginOnClick} className="w-fit">
+        Connect with GitHub
+      </Button>
+    );
+  } else if (isError) {
+    return <Text type="danger">There has been an error. Try reloading the page!</Text>;
+  } else if (user && !user.interests) {
+    return (
+      <div className="flex flex-col gap-4">
+        <Text type="danger">Add some interests to get recommended repositories to contribute to!</Text>
+        <div className="flex flex-wrap gap-4">
+          {interestArray.map((topic, index) => (
+            <LanguageSwitch
+              checked={selectedInterest.includes(topic)}
+              onClick={() => {
+                if (selectedInterest.length > 0 && selectedInterest.includes(topic)) {
+                  setSelectedInterest((prev) => prev.filter((t) => topic !== t));
+                } else {
+                  setSelectedInterest((prev) => [...prev, topic]);
+                }
+              }}
+              topic={topic}
+              key={index}
+            />
+          ))}
+        </div>
+        <Button
+          variant="primary"
+          disabled={selectedInterest.length === 0 || updating}
+          onClick={async () => {
+            setUpdating(true);
+            const data = await updateUser({
+              data: { interests: selectedInterest },
+              params: "interests",
+            });
+
+            if (data) {
+              toast({ description: "Updated successfully", variant: "success" });
+              mutate();
+              recommendationsMutate();
+            } else {
+              toast({ description: "An error occurred!", variant: "danger" });
+            }
+            setUpdating(false);
+          }}
+          className="w-fit"
+          loading={updating}
+        >
+          Update Interests
+        </Button>
+      </div>
+    );
+  } else {
+    return (
+      <Carousel opts={{ slidesToScroll: "auto" }} className="flex flex-col gap-8">
+        <CarouselContent className="justify-items-stretch pr-8">
+          {recommendations &&
+            recommendations.map((repo, index) => (
+              <CarouselItem key={`recommendation_${index}`} className="lg:!basis-1/3 min-w-[24rem] h-full">
+                <RecommendedRepoCard fullName={repo.full_name} className="h-56" />
+              </CarouselItem>
+            ))}
+        </CarouselContent>
+
+        <div className="relative flex gap-4 self-end">
+          <CarouselPrevious className="relative !border !border-slate-300 !text-black !left-0 bg-white rounded-full !w-8 h-8 pl-[0.425rem]" />
+          <CarouselNext className="relative !border !border-slate-300 !text-black !right-0 bg-white rounded-full !w-8 h-8 pl-[0.425rem]" />
+        </div>
+      </Carousel>
+    );
+  }
+}