Merge branch 'main'

jobstash · Aug 15, 2024 · 4b1b179 · 4b1b179
2 parents 8bddebe + 585cd67
commit 4b1b179
Show file tree

Hide file tree

Showing 14 changed files with 305 additions and 94 deletions.
diff --git a/public/app.png b/public/app.png
diff --git a/public/space.jpg b/public/space.jpg
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -3,49 +3,92 @@
 @tailwind utilities;
 
 @layer base {
-	:root {
-		/* TODO: review values of the variables primary/secondary */
-		--color-base-dark: 13 13 13; /* #0D0D0D */
-		--color-dark-gray: 25 25 25; /* #191919 */
-		--color-medium-gray: 32 32 32; /* #202020 */
-		--color-light-gray: 153 153 153; /*  #999999 */
-		--color-cool-gray: 156 163 175; /* #9CA3AF */
-		--color-white: 255 255 255;	/* #FFFFFF */
-		--color-primary: 65 54 241; /* #4136F1 */
-		--color-secondary: 135 67 255; /* #8743FF */
-		--color-labels: 239 239 239; /* #EFEFEF */
-		--color-border: 240 238 237; /* #F0EEED */
-		--color-tertiary: 219 217 251; /* #DBD9FB */
-		--color-grantee-item: 117 112 141; 	
-
-		/* HP variables to rearrange */
-		--color-gradient-1: 117 117 117; /* #757575 */
-		--color-gradient-2: 117 112 141; /* #75708D */
-		--color-innovate: 31 31 38; /* #1F1F26 */
-	}
-}
+  :root {
+    /* TODO: review values of the variables primary/secondary */
+    --color-base-dark: 13 13 13; /* #0D0D0D */
+    --color-dark-gray: 25 25 25; /* #191919 */
+    --color-medium-gray: 32 32 32; /* #202020 */
+    --color-light-gray: 153 153 153; /*  #999999 */
+    --color-cool-gray: 156 163 175; /* #9CA3AF */
+    --color-white: 255 255 255; /* #FFFFFF */
+    --color-primary: 65 54 241; /* #4136F1 */
+    --color-secondary: 135 67 255; /* #8743FF */
+    --color-labels: 239 239 239; /* #EFEFEF */
+    --color-border: 240 238 237; /* #F0EEED */
+    --color-tertiary: 219 217 251; /* #DBD9FB */
+    --color-grantee-item: 117 112 141;
 
+    /* HP variables to rearrange */
+    --color-gradient-1: 117 117 117; /* #757575 */
+    --color-gradient-2: 117 112 141; /* #75708D */
+    --color-innovate: 31 31 38; /* #1F1F26 */
+  }
+}
 
 html {
-	overflow-y: scroll;
-	scrollbar-gutter: stable;
+  overflow-y: scroll;
+  scrollbar-gutter: stable;
 }
 
-
 .hide-scrollbar {
-	-ms-overflow-style: none;
-	scrollbar-width: none;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
 }
 
 .hide-scrollbar::-webkit-scrollbar {
-	display: none;
+  display: none;
 }
 
 .is-active {
-	@apply bg-gradient-to-r from-white/100 text-black to-light-gray
+  @apply bg-gradient-to-r from-white/100 text-black to-light-gray;
 }
 
 /* remove padding in storybook to easily work on the homepage */
 .sb-main-padded {
-    padding: 0 !important; 
+  padding: 0 !important;
+}
+
+/* Marquee styles */
+.marquee {
+  --gap: 1px;
+  position: relative;
+  display: flex;
+  overflow: hidden;
+  user-select: none;
+  gap: var(--gap);
+}
+
+.marquee__content {
+  flex-shrink: 0;
+  display: flex;
+  gap: var(--gap);
+  justify-content: space-around;
+  min-width: 100%;
+}
+.marquee__item {
+	width: 115px;
+}
+@screen md {
+  .marquee__item {
+	width: 170px;
+  }
+}
+@screen lg {
+	.marquee__item {
+	  width: 228px;
+	}
+  }
+/* marquee amimation */
+@keyframes scroll {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(calc(-100% - var(--gap)));
+  }
+}
+
+/* Enable animation */
+.enable-animation .marquee__content {
+	animation: scroll 30s linear infinite;
 }
diff --git a/src/app/grants/[grantId]/@list/page.tsx b/src/app/grants/[grantId]/@list/page.tsx
@@ -1,13 +1,59 @@
+import { dehydrate, HydrationBoundary } from '@tanstack/react-query';
+
+import { getQueryClient } from '@/shared/utils/get-query-client';
+
+import { grantQueryKeys } from '@/grants/core/query-keys';
+import { getGranteeDetails } from '@/grants/data/get-grantee-details';
+import { getGranteeProject } from '@/grants/data/get-grantee-project';
+import { getGranteesList } from '@/grants/data/get-grantees-list';
 import { GranteeList } from '@/grants/components/grantee-list';
 
 interface Props {
   params: { grantId: string };
 }
 
-const ParallelGranteeList = ({}: Props) => {
-  // TODO: React-Query SSR grantee list
+const ParallelGranteeList = async ({ params: { grantId } }: Props) => {
+  const queryClient = getQueryClient();
+
+  const [granteeListResult] = await Promise.all([
+    // Prefetch list
+    queryClient.fetchInfiniteQuery({
+      queryKey: grantQueryKeys.grantees(grantId, ''),
+      queryFn: async ({ pageParam: page }) =>
+        getGranteesList({ page, grantId }),
+      initialPageParam: 1,
+    }),
+  ]);
+
+  // Prefetch data for first item only (default for the page enough for seo)
+  const grantee = granteeListResult.pages.flatMap((page) => page.data).at(0);
+  if (grantee) {
+    // Prefetch grantee details
+    const promises = [
+      queryClient.prefetchQuery({
+        queryKey: grantQueryKeys.grantee(grantee.id),
+        queryFn: () => getGranteeDetails(grantee.id),
+      }),
+    ];
+
+    // Prefetch first project details
+    if (grantee.projects.length > 0) {
+      promises.push(
+        queryClient.prefetchQuery({
+          queryKey: grantQueryKeys.project(grantee.projects[0]),
+          queryFn: () => getGranteeProject(grantee.projects[0]),
+        }),
+      );
+    }
+
+    await Promise.all(promises);
+  }
 
-  return <GranteeList />;
+  return (
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      <GranteeList />
+    </HydrationBoundary>
+  );
 };
 
 export default ParallelGranteeList;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -29,7 +29,7 @@ interface RootLayoutProps {
 const RootLayout: React.FC<RootLayoutProps> = ({ children }) => (
   <html
     lang="en"
-    className={`bg-[#0D0D0D] ${interTight.variable} ${grotesk.variable}`}
+    className={`bg-[#070708] ${interTight.variable} ${grotesk.variable}`}
   >
     <body className={inter.className}>
       <NextUIProvider>

diff --git a/src/grants/components/grant-list/use-grant-list.ts b/src/grants/components/grant-list/use-grant-list.ts
@@ -1,10 +1,24 @@
+import { useEffect } from 'react';
 import { useInView } from 'react-intersection-observer';
 
+import { getQueryClient } from '@/shared/utils/get-query-client';
+
+import { grantQueryKeys } from '@/grants/core/query-keys';
+import { getGrantDetails } from '@/grants/data/get-grant-details';
 import { useGrantListQuery } from '@/grants/hooks/use-grant-list-query';
 
 export const useGrantList = () => {
-  const { data, error, fetchNextPage, hasNextPage, isPending, isFetching } =
-    useGrantListQuery();
+  const queryClient = getQueryClient();
+
+  const {
+    data,
+    error,
+    fetchNextPage,
+    hasNextPage,
+    isPending,
+    isFetching,
+    isSuccess,
+  } = useGrantListQuery();
 
   // Next page fetch on scroll
   const { ref: inViewRef } = useInView({
@@ -14,6 +28,20 @@ export const useGrantList = () => {
     },
   });
 
+  // Prefetch grant details
+  useEffect(() => {
+    if (isSuccess && data) {
+      const items = data.pages.flatMap((d) => d.data);
+      for (const item of items) {
+        const { id } = item;
+        queryClient.prefetchQuery({
+          queryKey: grantQueryKeys.details(id),
+          queryFn: () => getGrantDetails(id),
+        });
+      }
+    }
+  });
+
   return {
     grants: data?.pages.flatMap((d) => d.data) ?? [],
     error,

diff --git a/src/grants/pages/grant-list-page.tsx b/src/grants/pages/grant-list-page.tsx
@@ -1,11 +1,43 @@
+import { dehydrate, HydrationBoundary } from '@tanstack/react-query';
+
+import { getQueryClient } from '@/shared/utils/get-query-client';
+
+import { grantQueryKeys } from '@/grants/core/query-keys';
+import { getGrantDetails } from '@/grants/data/get-grant-details';
+import { getGrantList } from '@/grants/data/get-grant-list';
 import { GrantList } from '@/grants/components/grant-list/grant-list';
 
-export const GrantListPage = () => {
-  // TODO: React-Query SSR grant list
+// TODO: Check if need to use search params(filter related), if so need to force dynamic
+
+export const GrantListPage = async () => {
+  const queryClient = getQueryClient();
+
+  const [grantListResult] = await Promise.all([
+    // Prefetch list
+    queryClient.fetchInfiniteQuery({
+      queryKey: grantQueryKeys.list(''),
+      queryFn: async ({ pageParam }) => getGrantList(pageParam),
+      initialPageParam: 1,
+    }),
+  ]);
+
+  // Prefetch details for each grant item
+  await Promise.all(
+    grantListResult.pages
+      .flatMap((page) => page.data)
+      .map(({ id }) =>
+        queryClient.prefetchQuery({
+          queryKey: grantQueryKeys.details(id),
+          queryFn: () => getGrantDetails(id),
+        }),
+      ),
+  );
 
   return (
-    <div className="p-8">
-      <GrantList />
-    </div>
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      <div className="p-8">
+        <GrantList />
+      </div>
+    </HydrationBoundary>
   );
 };
diff --git a/src/home/components/marquee.tsx b/src/home/components/marquee.tsx
@@ -0,0 +1,26 @@
+export const Marquee = () => {
+  return (
+    <div className="enable-animation">
+
+      <div className="marquee">
+        <div className="marquee__content">
+          <div className="marquee__item">ecosystem.vision&nbsp;•&nbsp;</div>
+          <div className="marquee__item">ecosystem.vision&nbsp;•&nbsp;</div>
+          <div className="marquee__item">ecosystem.vision&nbsp;•&nbsp;</div>
+          <div className="marquee__item">ecosystem.vision&nbsp;•&nbsp;</div>
+          <div className="marquee__item">ecosystem.vision&nbsp;•&nbsp;</div>
+          <div className="marquee__item">ecosystem.vision&nbsp;•&nbsp;</div>
+        </div>
+
+        <div aria-hidden="true" className="marquee__content">
+          <div className="marquee__item">ecosystem.vision&nbsp;•&nbsp;</div>
+          <div className="marquee__item">ecosystem.vision&nbsp;•&nbsp;</div>
+          <div className="marquee__item">ecosystem.vision&nbsp;•&nbsp;</div>
+          <div className="marquee__item">ecosystem.vision&nbsp;•&nbsp;</div>
+          <div className="marquee__item">ecosystem.vision&nbsp;•&nbsp;</div>
+          <div className="marquee__item">ecosystem.vision&nbsp;•&nbsp;</div>
+        </div>
+      </div>
+    </div>
+  );
+};