feat: fetch insight repos in parallel on insight pages

lib/hooks/useInsightRepositories.ts

@@ -0,0 +1,21 @@
+import useSWR, { Fetcher } from "swr";
+import publicApiFetcher from "lib/utils/public-api-fetcher";
+
+const useInsightRepositories = (id: number) => {
+  const baseEndpoint = `insights/${id}/repos`;
+  const endpointString = `${baseEndpoint}`;
+
+  const { data, error, mutate } = useSWR<DbUserInsightRepo[], Error>(
+    id ? endpointString : null,
+    publicApiFetcher as Fetcher<DbUserInsightRepo[], Error>
+  );
+
+  return {
+    data: data ?? [],
+    isLoading: !error && !data,
+    isError: !!error && Object.keys(error).length > 0,
+    mutate,
+  };
+};
+
+export default useInsightRepositories;

pages/pages/[userOrg]/[pageId]/[toolName].tsx

@@ -11,6 +11,7 @@ import SEO from "layouts/SEO/SEO";
 import fetchSocialCard from "lib/utils/fetch-social-card";
 import getInsightTeamMemberAccess from "lib/utils/get-insight-team-member";
 import { MemberAccess } from "components/molecules/TeamMembersConfig/team-members-config";
+import useInsightRepositories from "lib/hooks/useInsightRepositories";
 
 interface InsightPageProps {
   insight: DbUserInsight;
@@ -19,7 +20,8 @@ interface InsightPageProps {
 }
 
 const HubPage: WithPageLayout<InsightPageProps> = ({ insight, pageName, ogImage }: InsightPageProps) => {
-  const repositories = insight.repos.map((repo) => repo.repo_id);
+  const { data: insightRepos } = useInsightRepositories(insight.id);
+  const repositories = insightRepos.map((repo) => repo.repo_id);
   const [hydrated, setHydrated] = useState(false);
 
   useEffect(() => {
@@ -61,7 +63,7 @@ export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
   const bearerToken = session ? session.access_token : "";
   const insightId = ctx.params!["pageId"] as string;
   const pageName = ctx.params!["toolName"] as string;
-  const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/insights/${insightId}`);
+  const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/insights/${insightId}?include=none`);
   const insight = response.ok ? ((await response.json()) as DbUserInsight) : null;
 
   if (!insight) {

pages/pages/[userOrg]/[pageId]/[toolName]/filter/[...selectedFilter].tsx

@@ -9,14 +9,16 @@ import { WithPageLayout } from "interfaces/with-page-layout";
 import changeCapitalization from "lib/utils/change-capitalization";
 import getInsightTeamMemberAccess from "lib/utils/get-insight-team-member";
 import { MemberAccess } from "components/molecules/TeamMembersConfig/team-members-config";
+import useInsightRepositories from "lib/hooks/useInsightRepositories";
 
 interface InsightFilterPageProps {
   insight: DbUserInsight;
   pageName: string;
 }
 
 const HubPage: WithPageLayout<InsightFilterPageProps> = ({ insight, pageName }: InsightFilterPageProps) => {
-  const repositories = insight.repos.map((repo) => repo.repo_id);
+  const { data: insightRepos } = useInsightRepositories(insight.id);
+  const repositories = insightRepos.map((repo) => repo.repo_id);
 
   const title = `${insight.name} | Open Sauced Insights Hub`;
 
@@ -38,7 +40,7 @@ export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
   const bearerToken = session ? session.access_token : "";
   const insightId = ctx.params!["pageId"] as string;
   const pageName = ctx.params!["toolName"] as string;
-  const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/insights/${insightId}`);
+  const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/insights/${insightId}?include=none`);
   const insight = response.ok ? ((await response.json()) as DbUserInsight) : null;
 
   if (!insight) {