feat: add prev/next post functionality

regen-network · Jun 24, 2024 · 9149650 · 9149650
1 parent d2f91e6
commit 9149650
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 11 deletions.
diff --git a/...arketplace/src/lib/queries/react-query/registry-server/getPostQuery/getPostQuery.types.ts b/...arketplace/src/lib/queries/react-query/registry-server/getPostQuery/getPostQuery.types.ts
@@ -37,6 +37,8 @@ export type Post = {
       }
     | undefined;
   error?: string;
+  prevIri?: string;
+  nextIri?: string;
 };
 
 export type ReactQueryGetPostQueryResponse = QueryObserverOptions<Post | null>;

diff --git a/web-marketplace/src/pages/Post/Post.Footer.tsx b/web-marketplace/src/pages/Post/Post.Footer.tsx
@@ -1,21 +1,37 @@
+import { useNavigate } from 'react-router-dom';
+
 import OutlinedButton from 'web-components/src/components/buttons/OutlinedButton';
 import ArrowDownIcon from 'web-components/src/components/icons/ArrowDownIcon';
 import Section from 'web-components/src/components/section';
 
 import { NEXT, PREV } from './Post.constants';
 
-export const PostFooter = () => {
-  // TODO add button features (APP-23)
+type Props = {
+  prevIri?: string;
+  nextIri?: string;
+};
+export const PostFooter = ({ prevIri, nextIri }: Props) => {
+  const navigate = useNavigate();
   return (
     <Section className="flex justify-between sm:px-0 pb-[100px] py-0 max-w-[750px] m-auto">
-      <OutlinedButton className="text-sm">
-        <ArrowDownIcon className="w-[24px] h-[24px] mr-10" direction="prev" />
-        {PREV}
-      </OutlinedButton>
-      <OutlinedButton className="text-sm">
-        {NEXT}
-        <ArrowDownIcon className="w-[24px] h-[24px] ml-10" direction="next" />
-      </OutlinedButton>
+      {prevIri && (
+        <OutlinedButton
+          className="text-sm"
+          onClick={() => navigate(`/post/${prevIri}`)}
+        >
+          <ArrowDownIcon className="w-[24px] h-[24px] mr-10" direction="prev" />
+          {PREV}
+        </OutlinedButton>
+      )}
+      {nextIri && (
+        <OutlinedButton
+          className="text-sm"
+          onClick={() => navigate(`/post/${nextIri}`)}
+        >
+          {NEXT}
+          <ArrowDownIcon className="w-[24px] h-[24px] ml-10" direction="next" />
+        </OutlinedButton>
+      )}
     </Section>
   );
 };
diff --git a/web-marketplace/src/pages/Post/Post.tsx b/web-marketplace/src/pages/Post/Post.tsx
@@ -159,7 +159,7 @@ function Post(): JSX.Element {
                   }
                 />
 
-                <PostFooter />
+                <PostFooter prevIri={data?.prevIri} nextIri={data?.nextIri} />
               </>
             )}
         </>