fix: proposals list pagination & added: proposals slice and proposal …

…screen

package.json

@@ -72,6 +72,7 @@
     "prism-react-renderer": "^2.3.1",
     "proxy-memoize": "^3.0.1",
     "query-string": "^9.1.0",
+    "rc-pagination": "^4.3.0",
     "react": "18.3.1",
     "react-copy-to-clipboard": "^5.1.0",
     "react-countup": "^6.5.3",
@@ -83,6 +84,7 @@
     "react-markdown": "^9.0.1",
     "react-paginate": "^8.2.0",
     "react-syntax-highlighter": "^15.5.0",
+    "react-timer-hook": "^3.0.8",
     "remark-gemoji": "^8.0.0",
     "remark-gfm": "^4.0.0",
     "superjson": "^2.2.1",

src/app/[activePage]/page.page.tsx

@@ -1,7 +1,7 @@
 import { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 
-import { ProposalsList } from '../../components/ProposalsList/ProposalsList';
+import { ProposalsListInitialize } from '../../components/ProposalsList/ProposalsListInitialize';
 import { PAGE_SIZE } from '../../configs/configs';
 import { metaTexts } from '../../helpers/texts/metaTexts';
 import { api } from '../../trpc/server';
@@ -25,16 +25,16 @@ export async function generateStaticParams() {
   }));
 }
 
+export const revalidate = 3600;
+
 export default async function Page({
   params,
-  searchParams,
 }: {
   params: { activePage: string };
-  searchParams: Record<string, string | undefined>;
 }) {
   const activePage = +params.activePage;
   if (isNaN(activePage)) {
     notFound();
   }
-  return <ProposalsList activePage={activePage} searchParams={searchParams} />;
+  return <ProposalsListInitialize activePage={activePage} />;
 }

src/app/loading.page.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { useEffect } from 'react';
+
+import { Container } from '../components/primitives/Container';
+import { Loading } from '../components/ProposalsList/Loading';
+import { ProposalListItemWrapper } from '../components/ProposalsList/ProposalListItemWrapper';
+import { PAGE_SIZE } from '../configs/configs';
+
+export default function LoadingPage() {
+  useEffect(() => {
+    window.scroll(0, 0);
+  }, []);
+  return (
+    <Container>
+      {Array.from({ length: PAGE_SIZE }).map((_, index) => (
+        <ProposalListItemWrapper key={index}>
+          <Loading />
+        </ProposalListItemWrapper>
+      ))}
+    </Container>
+  );
+}

src/app/page.page.tsx

@@ -1,6 +1,6 @@
 import { Metadata } from 'next';
 
-import { ProposalsList } from '../components/ProposalsList/ProposalsList';
+import { ProposalsListInitialize } from '../components/ProposalsList/ProposalsListInitialize';
 import { metaTexts } from '../helpers/texts/metaTexts';
 
 export const metadata: Metadata = {
@@ -13,10 +13,8 @@ export const metadata: Metadata = {
   },
 };
 
-export default async function Page({
-  searchParams,
-}: {
-  searchParams: Record<string, string | undefined>;
-}) {
-  return <ProposalsList activePage={1} searchParams={searchParams} />;
+export const revalidate = 3600;
+
+export default async function Page() {
+  return <ProposalsListInitialize activePage={1} />;
 }

src/app/proposal/[proposalId]/page.page.tsx

@@ -0,0 +1,34 @@
+import { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+import React from 'react';
+
+import { metaTexts } from '../../../helpers/texts/metaTexts';
+import { api } from '../../../trpc/server';
+
+export const metadata: Metadata = {
+  title: metaTexts.ipfsTitle,
+  description: metaTexts.ipfsDescription,
+  openGraph: {
+    images: ['/metaLogo.jpg'],
+    title: metaTexts.ipfsTitle,
+    description: metaTexts.ipfsDescription,
+  },
+};
+
+export async function generateStaticParams() {
+  const proposalsCount = await api.configs.getProposalsCount();
+  return [...Array(Number(proposalsCount)).keys()].map((proposalId) => ({
+    proposalId: String(proposalId),
+    fallback: false,
+  }));
+}
+
+export const revalidate = 3600;
+
+export default function Page({ params }: { params: { proposalId: string } }) {
+  const proposalId = +params.proposalId;
+  if (isNaN(proposalId)) {
+    notFound(); // TODO: should be dynamic proposal page
+  }
+  return <h1>Proposal id {proposalId}</h1>;
+}