fix: fixed suspense with query params, added loading and layout

README.md

@@ -63,22 +63,14 @@ Then to serve the build locally, run:
 bun run start
 ```
 
-## Check linting, formatting and types
+## Check linting and formatting
 
-To check linting, formatting or types you run the respective command:
-
-Check linting and formatting:
+To check linting and formatting you run the respective command:
 
 ```bash
 bun lint
 ```
 
-Check types:
-
-```bash
-bun type-check
-```
-
 If you are using vscode and are experiencing issues with types, you can restart the typescript server by pressing `cmd + shift + p` and then type `TypeScript: Restart TS Server` (You need to have a typescript file open for this to work).
 
 You can also try restarting the whole editor by pressing `cmd + shift + p` and then type `Developer: Reload Window`.

messages/en.json

@@ -8,7 +8,8 @@
     "goToPreviousPage": "Go to previous page",
     "next": "Next",
     "goToNextPage": "Go to next page",
-    "morePages": "More pages"
+    "morePages": "More pages",
+    "page": "Page"
   },
   "layout": {
     "hackerspaceHome": "Hackerspace homepage",
@@ -42,7 +43,6 @@
   },
   "news": {
     "title": "News",
-    "page": "Page",
     "internalArticle": "This is an internal article",
     "newArticle": "New article"
   }

messages/no.json

@@ -8,7 +8,8 @@
     "goToPreviousPage": "Gå til forrige side",
     "next": "Neste",
     "goToNextPage": "Gå til neste side",
-    "morePages": "Flere sider"
+    "morePages": "Flere sider",
+    "page": "Side"
   },
   "layout": {
     "hackerspaceHome": "Hackerspace hjemmeside",
@@ -42,7 +43,6 @@
   },
   "news": {
     "title": "Nyheter",
-    "page": "Side",
     "internalArticle": "Dette er en intern artikkel",
     "newArticle": "Ny artikkel"
   }

package.json

@@ -9,7 +9,6 @@
     "build": "next build",
     "dev": "next dev",
     "lint": "next lint",
-    "type-check": "tsc --noEmit",
     "start": "next start"
   },
   "lint-staged": {

src/app/[locale]/(dashboard)/layout.tsx

@@ -5,13 +5,15 @@ import { Footer } from '@/components/layout/Footer';
 import { Header } from '@/components/layout/Header';
 import { Main } from '@/components/layout/Main';
 
-export default function Dashboardlayout({
-  children,
-  params: { locale },
-}: {
+type DashboardProps = {
   children: ReactNode;
   params: { locale: string };
-}) {
+};
+
+export default function Dashboard({
+  children,
+  params: { locale },
+}: DashboardProps) {
   unstable_setRequestLocale(locale);
   return (
     <>

src/app/[locale]/(dashboard)/news/(header)/layout.tsx

@@ -0,0 +1,35 @@
+import { SquarePen } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { unstable_setRequestLocale } from 'next-intl/server';
+import { type ReactNode } from 'react';
+
+import { Link } from '@/lib/navigation';
+
+import { Button } from '@/components/ui/Button';
+
+type NewsHeaderProps = {
+  children: ReactNode;
+  params: { locale: string };
+};
+
+export default function NewsHeader({
+  children,
+  params: { locale },
+}: NewsHeaderProps) {
+  unstable_setRequestLocale(locale);
+  const t = useTranslations('news');
+  return (
+    <>
+      <div className='flex items-center justify-between'>
+        <h1 className='my-4'>{t('title')}</h1>
+        <Button asChild size='sm'>
+          <Link href='/news/new'>
+            <SquarePen className='mr-2 h-4 w-4' />
+            {t('newArticle')}
+          </Link>
+        </Button>
+      </div>
+      {children}
+    </>
+  );
+}

src/app/[locale]/(dashboard)/news/(header)/loading.tsx

@@ -0,0 +1,15 @@
+import { PaginationCarouselSkeleton } from '@/components/layout/PaginationCarouselSkeleton';
+import { CardGridSkeleton } from '@/components/news/CardGridSkeleton';
+import { ItemGridSkeleton } from '@/components/news/ItemGridSkeleton';
+import { Separator } from '@/components/ui/Separator';
+
+export default function NewsSkeleton() {
+  return (
+    <>
+      <CardGridSkeleton />
+      <Separator className='my-6' />
+      <ItemGridSkeleton />
+      <PaginationCarouselSkeleton className='my-6' />
+    </>
+  );
+}

src/app/[locale]/(dashboard)/news/(header)/page.tsx

@@ -0,0 +1,61 @@
+import { articleMockData as articleData } from '@/mock-data/article';
+import { useTranslations } from 'next-intl';
+import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
+import { createSearchParamsCache, parseAsInteger } from 'nuqs/parsers';
+import { Suspense } from 'react';
+
+import { PaginationCarousel } from '@/components/layout/PaginationCarousel';
+import { CardGrid } from '@/components/news/CardGrid';
+import { ItemGrid } from '@/components/news/ItemGrid';
+import { ItemGridSkeleton } from '@/components/news/ItemGridSkeleton';
+import { Separator } from '@/components/ui/Separator';
+
+export async function generateMetadata({
+  params: { locale },
+}: {
+  params: { locale: string };
+}) {
+  const t = await getTranslations({ locale, namespace: 'layout' });
+
+  return {
+    title: t('news'),
+  };
+}
+
+const searchParamsCache = createSearchParamsCache({
+  page: parseAsInteger.withDefault(1),
+});
+
+export default function News({
+  params: { locale },
+  searchParams,
+}: {
+  params: { locale: string };
+  searchParams: Record<string, string | string[] | undefined>;
+}) {
+  unstable_setRequestLocale(locale);
+  const t = useTranslations('ui');
+  const { page } = searchParamsCache.parse(searchParams);
+  // TODO: Button to create new article should only be visible when logged in
+  return (
+    <>
+      <CardGrid topArticles={articleData.slice(0, 4)} />
+      <Separator className='my-6' />
+      <Suspense key={page} fallback={<ItemGridSkeleton />}>
+        <ItemGrid page={page} />
+      </Suspense>
+      <PaginationCarousel
+        className='my-6'
+        totalPages={Math.ceil(articleData.length / 6)}
+        t={{
+          goToPreviousPage: t('goToPreviousPage'),
+          previous: t('previous'),
+          morePages: t('morePages'),
+          goToNextPage: t('goToNextPage'),
+          next: t('next'),
+          page: t('page'),
+        }}
+      />
+    </>
+  );
+}

src/app/[locale]/layout.tsx

@@ -8,7 +8,7 @@ import { cx } from '@/lib/utils';
 
 import { RootProviders } from '@/components/providers/RootProviders';
 
-type Props = {
+type LocalelayoutProps = {
   children: ReactNode;
   params: { locale: string };
 };
@@ -31,7 +31,7 @@ export function generateStaticParams() {
 
 export async function generateMetadata({
   params: { locale },
-}: Omit<Props, 'children'>) {
+}: Omit<LocalelayoutProps, 'children'>) {
   const t = await getTranslations({ locale, namespace: 'meta' });
 
   return {
@@ -72,7 +72,10 @@ export async function generateMetadata({
   };
 }
 
-export default function Localelayout({ children, params: { locale } }: Props) {
+export default function Localelayout({
+  children,
+  params: { locale },
+}: LocalelayoutProps) {
   if (!locales.includes(locale)) notFound();
   unstable_setRequestLocale(locale);
   return (

src/app/layout.tsx

@@ -2,10 +2,10 @@ import { type ReactNode } from 'react';
 
 import '@/styles/globals.css';
 
-type Props = {
+type RootlayoutProps = {
   children: ReactNode;
 };
 
-export default function Rootlayout({ children }: Props) {
+export default function Rootlayout({ children }: RootlayoutProps) {
   return children;
 }

src/components/layout/PaginationCarousel.tsx

@@ -1,3 +1,7 @@
+'use client';
+
+import { parseAsInteger, useQueryState } from 'nuqs';
+
 import { cx } from '@/lib/utils';
 
 import {
@@ -12,45 +16,44 @@ import {
 
 type PaginationCarouselProps = {
   className?: string;
-  page: number;
-  setPage: (page: number) => void;
   totalPages: number;
   t: {
     goToPreviousPage: string;
     previous: string;
     morePages: string;
     goToNextPage: string;
     next: string;
+    page: string;
   };
 };
 
 function PaginationCarousel({
   className,
-  page,
-  setPage,
   totalPages,
   t,
 }: PaginationCarouselProps) {
-  async function handlePrevious(e: React.MouseEvent<HTMLAnchorElement>) {
+  const [page, setPage] = useQueryState(t.page, parseAsInteger.withDefault(1));
+
+  function handlePrevious(e: React.MouseEvent<HTMLAnchorElement>) {
     e.preventDefault();
     if (page > 1) {
-      setPage(page - 1);
+      void setPage(page - 1);
     }
   }
 
-  async function handleNext(e: React.MouseEvent<HTMLAnchorElement>) {
+  function handleNext(e: React.MouseEvent<HTMLAnchorElement>) {
     e.preventDefault();
     if (page < totalPages) {
-      setPage(page + 1);
+      void setPage(page + 1);
     }
   }
 
-  async function handlePageClick(
+  function handlePageClick(
     e: React.MouseEvent<HTMLAnchorElement>,
     pageNum: number,
   ) {
     e.preventDefault();
-    setPage(pageNum);
+    void setPage(pageNum);
   }
 
   let pagesToDisplay = [];