feat: display featured insight pages to new contributors (#1859)

open-sauced · Oct 11, 2023 · 5344c59 · 5344c59
1 parent 9cc8aeb
commit 5344c59
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 7 deletions.
diff --git a/components/molecules/InsightRow/insight-row.tsx b/components/molecules/InsightRow/insight-row.tsx
@@ -75,11 +75,14 @@ const InsightRow = ({ insight, user }: InsightRowProps) => {
             </div>
           </div>
           <div className="flex-1 hidden md:flex  justify-end">
-            <Link href={`/hub/insights/${insight.id}/edit`}>
-              <span className=" bg-light-slate-1 inline-block rounded-lg p-2.5 border mr-2 cursor-pointer">
-                <BsPencilFill title="Edit Insight Page" className="text-light-slate-10 text-lg" />
-              </span>
-            </Link>
+            {(user?.user_metadata.sub && Number(user?.user_metadata.sub) === Number(insight.user_id)) ||
+              (!insight.is_featured && (
+                <Link href={`/hub/insights/${insight.id}/edit`}>
+                  <span className=" bg-light-slate-1 inline-block rounded-lg p-2.5 border mr-2 cursor-pointer">
+                    <BsPencilFill title="Edit Insight Page" className="text-light-slate-10 text-lg" />
+                  </span>
+                </Link>
+              ))}
             <Link href={`/pages/${user?.user_metadata.user_name}/${insight.id}/dashboard`}>
               <span className=" bg-light-slate-1 inline-block rounded-lg p-2.5 border cursor-pointer">
                 <MdOutlineArrowForwardIos title="Go To Insight Page" className="text-light-slate-10 text-lg" />

diff --git a/interfaces/global-state-types.ts b/interfaces/global-state-types.ts
@@ -11,4 +11,5 @@ export interface GlobalStateInterface {
   userId?: number | null;
   hasReports?: boolean;
   openSearch?: boolean;
+  dismissFeaturedInsights?: boolean;
 }
diff --git a/lib/store/index.ts b/lib/store/index.ts
@@ -12,6 +12,7 @@ const initialState: GlobalStateInterface = {
   userId: null,
   hasReports: false,
   openSearch: false,
+  dismissFeaturedInsights: false,
 };
 
 interface AppStore extends GlobalStateInterface {
@@ -33,6 +34,7 @@ interface AppStore extends GlobalStateInterface {
   setUserId: (userId?: number | null) => void;
   setHasReports: (hasReports: boolean) => void;
   setOpenSearch: (openSearch: boolean) => void;
+  setDismissFeaturedInsights: () => void;
 }
 
 const store = create<AppStore>()((set) => ({
@@ -54,7 +56,8 @@ const store = create<AppStore>()((set) => ({
   setProviderToken: (providerToken?: string | null) => set((state) => ({ ...state, providerToken })),
   setUserId: (userId?: number | null) => set((state) => ({ ...state, userId })),
   setHasReports: (hasReports: boolean) => set((state) => ({ ...state, hasReports })),
-  setOpenSearch: (openSearch: boolean) => set(() => ({ openSearch: openSearch })),
+  setOpenSearch: (openSearch: boolean) => set((state) => ({ ...state, openSearch: openSearch })),
+  setDismissFeaturedInsights: () => set((state) => ({ ...state, dismissFeaturedInsights: true })),
 }));
 
 export default store;
diff --git a/next-types.d.ts b/next-types.d.ts
@@ -190,6 +190,7 @@ interface DbUserInsight {
   readonly name: string;
   readonly is_public: boolean;
   readonly is_favorite: boolean;
+  readonly is_featured: boolean;
   readonly short_code: string;
   readonly created_at: string;
   readonly updated_at: string;
@@ -231,6 +232,7 @@ interface DbUser {
   readonly linkedin_url: string;
   readonly discord_url: string;
   readonly notification_count: number;
+  readonly insights_count: number;
   readonly languages: { [lang]: number };
   readonly first_opened_pr_at: string;
   readonly followers_count: number;

diff --git a/pages/hub/insights/index.tsx b/pages/hub/insights/index.tsx
@@ -1,4 +1,6 @@
+import { useEffect } from "react";
 import Link from "next/link";
+import { useRouter } from "next/router";
 import clsx from "clsx";
 
 import InsightRow from "components/molecules/InsightRow/insight-row";
@@ -10,12 +12,67 @@ import HubLayout from "layouts/hub";
 import { WithPageLayout } from "interfaces/with-page-layout";
 import useUserInsights from "lib/hooks/useUserInsights";
 import useSupabaseAuth from "lib/hooks/useSupabaseAuth";
+import useStore from "lib/store";
+import useSession from "lib/hooks/useSession";
+import { useToast } from "lib/hooks/useToast";
+import Text from "components/atoms/Typography/text";
 
 const InsightsHub: WithPageLayout = () => {
+  const router = useRouter();
   const { user } = useSupabaseAuth();
-
+  const store = useStore();
+  const dismissFeaturedInsights = useStore((store) => store.dismissFeaturedInsights);
+  const { toast } = useToast();
+  const { session } = useSession(true);
   const { data, meta, isError, isLoading, setPage } = useUserInsights();
 
+  function handleView() {
+    const insight = data.slice(0, 1).shift();
+    router.push(`/pages/${user?.user_metadata.user_name}/${insight!.id}/dashboard`);
+  }
+
+  function openInsightToast() {
+    const toaster = toast({
+      description: "Welcome to your Insights Hub!",
+      variant: "success",
+      action: (
+        <div className="flex flex-col">
+          <div className="flex align-middle">
+            <Text>
+              We&apos;ve included a featured Insight Page for you to test out. You can also create your own to get
+              insights on repositories.
+            </Text>
+          </div>
+          <div className="flex flex-start">
+            <button
+              onClick={() => {
+                toaster && toaster.dismiss();
+              }}
+            >
+              <Text className="pr-2 cursor-pointer">Dismiss</Text>
+            </button>
+            <button
+              onClick={() => {
+                toaster && toaster.dismiss();
+                handleView();
+              }}
+            >
+              <Text className="text-orange-500 cursor-pointer">Open Insight Page</Text>
+            </button>
+          </div>
+        </div>
+      ),
+    });
+
+    store.setDismissFeaturedInsights();
+  }
+
+  useEffect(() => {
+    if (session && session.insights_count === 0 && !dismissFeaturedInsights) {
+      openInsightToast();
+    }
+  }, [session, user]);
+
   return (
     <>
       <section className="flex flex-col gap-4">