feat: seperated mock data into its own file, generated staticParams f…

…or articles
hackerspace-ntnu · Jan 26, 2024 · 0950bdb · 0950bdb
1 parent 8996a36
commit 0950bdb
Show file tree

Hide file tree

Showing 8 changed files with 213 additions and 190 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -38,6 +38,7 @@
     "nuqs": "^1.15.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "sharp": "^0.33.2",
     "tailwind-merge": "^2.2.0",
     "tailwind-scrollbar": "^3.0.5",
     "tailwindcss-animate": "^1.0.7",

diff --git a/src/app/[locale]/(dashboard)/news/[article]/page.tsx b/src/app/[locale]/(dashboard)/news/[article]/page.tsx
@@ -1,9 +1,42 @@
-export function generateMetadata() {
+import { articleMockData as articleData } from '@/mock-data/article';
+import { unstable_setRequestLocale } from 'next-intl/server';
+import { notFound } from 'next/navigation';
+
+export async function generateStaticParams() {
+  return articleData.map((article) => ({
+    article: String(article.id),
+  }));
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: { article: string };
+}) {
+  const article = articleData.find(
+    (article) => article.id === Number(params.article),
+  );
+
   return {
-    title: 'Test',
+    title: article?.title,
   };
 }
 
-export default function Article() {
-  return null;
+export default function Article({
+  params,
+}: {
+  params: { locale: string; article: string };
+}) {
+  unstable_setRequestLocale(params.locale);
+  const article = articleData.find(
+    (article) => article.id === Number(params.article),
+  );
+  if (!article) {
+    return notFound();
+  }
+  return (
+    <>
+      <h2 className='first:my-4'>{article.title}</h2>
+    </>
+  );
 }
diff --git a/src/app/[locale]/(dashboard)/news/page.tsx b/src/app/[locale]/(dashboard)/news/page.tsx
@@ -26,170 +26,6 @@ export default function News({
 }: {
   params: { locale: string };
 }) {
-  const mockData = [
-    {
-      id: 1,
-      internal: true,
-      title: 'Gruppe status: prosjekt spill',
-      date: '22. oktober 2023',
-      photoUrl: 'mock.jpg',
-    },
-    {
-      id: 2,
-      internal: false,
-      title: 'DevOps Møtet',
-      date: '69. oktober 6969',
-      photoUrl: 'mock.jpg',
-    },
-    {
-      id: 3,
-      internal: false,
-      title: 'Jonas er kul',
-      date: '42. november 2023',
-      photoUrl: 'mock.jpg',
-    },
-    {
-      id: 4,
-      internal: true,
-      title: 'Iskrem er godt',
-      date: '18. februar 1942',
-      photoUrl: 'mock.jpg',
-    },
-    {
-      id: 5,
-      internal: false,
-      title: 'Hvorfor er jeg her?',
-      date: '22. oktober 2023',
-      photoUrl: 'mock.jpg',
-    },
-    {
-      id: 6,
-      internal: true,
-      title: 'Hvorfor er jeg her?',
-      date: '22. oktober 2023',
-      photoUrl: 'mock.jpg',
-    },
-    {
-      id: 7,
-      internal: false,
-      title: 'Hvorfor er jeg her?',
-      date: '22. oktober 2023',
-      photoUrl: 'mock.jpg',
-    },
-    {
-      id: 8,
-      internal: false,
-      title: 'Dette er en veeeeldig lang overskrift som skal testes',
-      date: '22. oktober 2023',
-      photoUrl: 'mock.jpg',
-    },
-    {
-      id: 9,
-      internal: true,
-      title: 'Hvorfor er jeg her?',
-      date: '22. oktober 2023',
-      photoUrl: 'mock.jpg',
-    },
-    {
-      id: 10,
-      internal: true,
-      title: 'Hvorfor er jeg her?',
-      date: '22. oktober 2023',
-      photoUrl: 'mock.jpg',
-    },
-    {
-      id: 11,
-      internal: false,
-      title: 'Hvorfor er jeg her?',
-      date: '22. oktober 2023',
-      photoUrl: 'mock.jpg',
-    },
-    {
-      id: 12,
-      internal: false,
-      title: 'Hvorfor er jeg her?',
-      date: '22. oktober 2023',
-      photoUrl: 'mock.jpg',
-    },
-    {
-      id: 13,
-      internal: true,
-      title: 'Hvorfor er jeg her?',
-      date: '22. oktober 2023',
-      photoUrl: 'mock.jpg',
-    },
-    {
-      id: 14,
-      internal: false,
-      title: 'Hvorfor er jeg her?',
-      date: '22. oktober 2023',
-      photoUrl: 'mock.jpg',
-    },
-    {
-      id: 15,
-      internal: true,
-      title: 'Hvorfor er jeg her?',
-      date: '22. oktober 2023',
-      photoUrl: 'mock.jpg',
-    },
-    {
-      id: 16,
-      internal: false,
-      title: 'Hvorfor er jeg her?',
-      date: '22. oktober 2023',
-      photoUrl: 'mock.jpg',
-    },
-    {
-      id: 17,
-      internal: false,
-      title: 'Hvorfor er jeg her?',
-      date: '22. oktober 2023',
-      photoUrl: 'mock.jpg',
-    },
-    {
-      id: 18,
-      internal: false,
-      title: '18',
-      date: '22. oktober 2023',
-      photoUrl: 'mock.jpg',
-    },
-
-    {
-      id: 19,
-      internal: false,
-      title: 'Hvorfor er jeg her?',
-      date: '22. oktober 2023',
-      photoUrl: 'mock.jpg',
-    },
-    {
-      id: 20,
-      internal: false,
-      title: 'Hvorfor er jeg her?',
-      date: '22. oktober 2023',
-      photoUrl: 'mock.jpg',
-    },
-    {
-      id: 21,
-      internal: false,
-      title: 'Hvorfor er jeg her?',
-      date: '22. oktober 2023',
-      photoUrl: 'mock.jpg',
-    },
-    {
-      id: 22,
-      internal: true,
-      title: 'Hvorfor er jeg her?',
-      date: '22. oktober 2023',
-      photoUrl: 'mock.jpg',
-    },
-    {
-      id: 23,
-      internal: false,
-      title: '23',
-      date: '22. oktober 2023',
-      photoUrl: 'mock.jpg',
-    },
-  ];
   unstable_setRequestLocale(locale);
   const t = useTranslations('news');
   // TODO: Button to create new article should only be visible when logged in
@@ -205,14 +41,12 @@ export default function News({
         </Button>
       </div>
       <CardGridSuspense
-        newsData={mockData}
         t={{
           internalArticle: t('internalArticle'),
         }}
       />
       <Separator className='my-6' />
       <ItemGridSuspense
-        newsData={mockData}
         t={{
           morePages: useTranslations('ui')('morePages'),
           goToPreviousPage: useTranslations('ui')('goToPreviousPage'),

diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx
@@ -36,7 +36,7 @@ export async function generateMetadata({
 
   return {
     title: {
-      template: 'Hackerspace NTNU | %s',
+      template: '%s | Hackerspace NTNU',
       default: 'Hackerspace NTNU',
     },
     description: t('description'),

diff --git a/src/components/news/CardGrid.tsx b/src/components/news/CardGrid.tsx
@@ -1,24 +1,19 @@
+import { articleMockData as articleData } from '@/mock-data/article';
+
 import { cx } from '@/lib/utils';
 
 import { ArticleCard } from '@/components/news/ArticleCard';
 
 type CardGridProps = {
-  newsData: {
-    id: number;
-    internal: boolean;
-    title: string;
-    date: string;
-    photoUrl: string;
-  }[];
   t: {
     internalArticle: string;
   };
 };
 
-function CardGrid({ newsData, t }: CardGridProps) {
+function CardGrid({ t }: CardGridProps) {
   return (
     <div className='grid h-192 grid-rows-4 gap-4 xs:h-96 xs:grid-cols-3 xs:grid-rows-2 md:grid-cols-4 lg:h-112'>
-      {newsData.slice(0, 4).map((data, index) => (
+      {articleData.slice(0, 4).map((data, index) => (
         <ArticleCard
           className={cx(
             index === 0 && 'row-span-1 xs:col-span-2 md:row-span-2',

diff --git a/src/components/news/ItemGrid.tsx b/src/components/news/ItemGrid.tsx
@@ -1,18 +1,12 @@
 'use client';
 
+import { articleMockData as articleData } from '@/mock-data/article';
 import { parseAsInteger, useQueryState } from 'nuqs';
 
 import { PaginationCarousel } from '@/components/layout/PaginationCarousel';
 import { ArticleItem } from '@/components/news/ArticleItem';
 
 type ItemGridProps = {
-  newsData: {
-    id: number;
-    internal: boolean;
-    title: string;
-    date: string;
-    photoUrl: string;
-  }[];
   t: {
     morePages: string;
     goToPreviousPage: string;
@@ -24,17 +18,17 @@ type ItemGridProps = {
   };
 };
 
-function ItemGrid({ newsData, t }: ItemGridProps) {
+function ItemGrid({ t }: ItemGridProps) {
   const itemsDisplayedAsCards = 4;
   const itemsPerPage = 6;
   const [page, setPage] = useQueryState(t.page, parseAsInteger.withDefault(1));
 
   const start = (page - 1) * itemsPerPage + itemsDisplayedAsCards;
   const end = start + itemsPerPage;
-  const currentData = newsData.slice(start, end);
+  const currentData = articleData.slice(start, end);
 
   const totalPages = Math.ceil(
-    (newsData.length - itemsDisplayedAsCards) / itemsPerPage,
+    (articleData.length - itemsDisplayedAsCards) / itemsPerPage,
   );
 
   return (