diff --git a/components/molecules/InsightRow/insight-row.tsx b/components/molecules/InsightRow/insight-row.tsx index e31a2318dd..293a920408 100644 --- a/components/molecules/InsightRow/insight-row.tsx +++ b/components/molecules/InsightRow/insight-row.tsx @@ -75,11 +75,14 @@ const InsightRow = ({ insight, user }: InsightRowProps) => {
- - - - - + {(user?.user_metadata.sub && Number(user?.user_metadata.sub) === Number(insight.user_id)) || + (!insight.is_featured && ( + + + + + + ))} diff --git a/interfaces/global-state-types.ts b/interfaces/global-state-types.ts index ae8e6c7c54..865c72de32 100644 --- 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 index 7beeabc61a..c6059aec23 100644 --- 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()((set) => ({ @@ -54,7 +56,8 @@ const store = create()((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 index 32c25bee7f..2d2db97377 100644 --- 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 index 7593dc7937..a7dd79d666 100644 --- 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: ( +
+
+ + We've included a featured Insight Page for you to test out. You can also create your own to get + insights on repositories. + +
+
+ + +
+
+ ), + }); + + store.setDismissFeaturedInsights(); + } + + useEffect(() => { + if (session && session.insights_count === 0 && !dismissFeaturedInsights) { + openInsightToast(); + } + }, [session, user]); + return ( <>