feat: added pagination and NewsItemGrid to the news page + fixed clie…

…nt component translations
hackerspace-ntnu · Jan 25, 2024 · 88c35c0 · 88c35c0
1 parent 58f4524
commit 88c35c0
Show file tree

Hide file tree

Showing 19 changed files with 481 additions and 69 deletions.
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -3,6 +3,7 @@
     "esbenp.prettier-vscode",
     "bradlc.vscode-tailwindcss",
     "lokalise.i18n-ally",
-    "vivaxy.vscode-conventional-commits"
+    "vivaxy.vscode-conventional-commits",
+    "oven.bun-vscode"
   ]
 }
diff --git a/bun.lockb b/bun.lockb
diff --git a/messages/en.json b/messages/en.json
@@ -2,6 +2,14 @@
   "meta": {
     "description": "Hackerspace NTNU, a student-led project open to all students, offers access to new technology like 3D printers and VR equipment. Our members provide varied expertise to help with your projects, from making an LED light blink to creating a 3D model. Visit our workshop or join our Slack channel for assistance or a friendly chat."
   },
+  "ui": {
+    "close": "Close",
+    "previous": "Previous",
+    "goToPreviousPage": "Go to previous page",
+    "next": "Next",
+    "goToNextPage": "Go to next page",
+    "morePages": "More pages"
+  },
   "layout": {
     "hackerspaceHome": "Hackerspace homepage",
     "news": "News",

diff --git a/messages/no.json b/messages/no.json
@@ -2,6 +2,14 @@
   "meta": {
     "description": "Hackerspace NTNU, et studentledet prosjekt åpent for alle studenter, tilbyr tilgang til ny teknologi som 3D-printere og VR-utstyr. Våre medlemmer gir variert ekspertise for å hjelpe med prosjektene dine, fra å få en LED-lys til å blinke til å lage en 3D-modell. Besøk vårt verksted eller bli med i vår Slack-kanal for assistanse eller en vennlig prat."
   },
+  "ui": {
+    "close": "Lukk",
+    "previous": "Forrige",
+    "goToPreviousPage": "Gå til forrige side",
+    "next": "Neste",
+    "goToNextPage": "Gå til neste side",
+    "morePages": "Flere sider"
+  },
   "layout": {
     "hackerspaceHome": "Hackerspace hjemmeside",
     "news": "Nyheter",

diff --git a/package.json b/package.json
@@ -34,6 +34,7 @@
     "next-intl": "^3.4.4",
     "next-sitemap": "^4.2.3",
     "next-themes": "^0.2.1",
+    "nuqs": "^1.15.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "tailwind-merge": "^2.2.0",

diff --git a/src/app/[locale]/(dashboard)/news/page.tsx b/src/app/[locale]/(dashboard)/news/page.tsx
@@ -4,6 +4,7 @@ import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
 import { cx } from '@/lib/utils';
 
 import { NewsCard } from '@/components/news/NewsCard';
+import { NewsItemGrid } from '@/components/news/NewsItemGrid';
 import { Separator } from '@/components/ui/Separator';
 
 export async function generateMetadata({
@@ -68,7 +69,7 @@ export default function News({
     },
     {
       id: 8,
-      title: 'Hvorfor er jeg her?',
+      title: 'Dette er en veeeeldig lang overskrift som skal testes',
       date: '22. oktober 2023',
       photoUrl: 'mock.jpg',
     },
@@ -90,52 +91,45 @@ export default function News({
       date: '22. oktober 2023',
       photoUrl: 'mock.jpg',
     },
-
     {
       id: 12,
       title: 'Hvorfor er jeg her?',
       date: '22. oktober 2023',
       photoUrl: 'mock.jpg',
     },
-
     {
       id: 13,
       title: 'Hvorfor er jeg her?',
       date: '22. oktober 2023',
       photoUrl: 'mock.jpg',
     },
-
     {
       id: 14,
       title: 'Hvorfor er jeg her?',
       date: '22. oktober 2023',
       photoUrl: 'mock.jpg',
     },
-
     {
       id: 15,
       title: 'Hvorfor er jeg her?',
       date: '22. oktober 2023',
       photoUrl: 'mock.jpg',
     },
-
     {
       id: 16,
       title: 'Hvorfor er jeg her?',
       date: '22. oktober 2023',
       photoUrl: 'mock.jpg',
     },
-
     {
       id: 17,
       title: 'Hvorfor er jeg her?',
       date: '22. oktober 2023',
       photoUrl: 'mock.jpg',
     },
-
     {
       id: 18,
-      title: 'Hvorfor er jeg her?',
+      title: '18',
       date: '22. oktober 2023',
       photoUrl: 'mock.jpg',
     },
@@ -146,27 +140,30 @@ export default function News({
       date: '22. oktober 2023',
       photoUrl: 'mock.jpg',
     },
-
     {
       id: 20,
       title: 'Hvorfor er jeg her?',
       date: '22. oktober 2023',
       photoUrl: 'mock.jpg',
     },
-
     {
       id: 21,
       title: 'Hvorfor er jeg her?',
       date: '22. oktober 2023',
       photoUrl: 'mock.jpg',
     },
-
     {
       id: 22,
       title: 'Hvorfor er jeg her?',
       date: '22. oktober 2023',
       photoUrl: 'mock.jpg',
     },
+    {
+      id: 23,
+      title: '23',
+      date: '22. oktober 2023',
+      photoUrl: 'mock.jpg',
+    },
   ];
   unstable_setRequestLocale(locale);
   const t = useTranslations('news');
@@ -190,6 +187,17 @@ export default function News({
         ))}
       </div>
       <Separator className='my-6' />
+      <NewsItemGrid
+        pageQueryName={locale === 'en' ? 'page' : 'side'}
+        newsData={mockData}
+        t={{
+          morePages: useTranslations('ui')('morePages'),
+          goToPreviousPage: useTranslations('ui')('goToPreviousPage'),
+          goToNextPage: useTranslations('ui')('goToNextPage'),
+          previous: useTranslations('ui')('previous'),
+          next: useTranslations('ui')('next'),
+        }}
+      />
     </>
   );
 }
diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
@@ -115,9 +115,11 @@ function Footer() {
             <h4>{t('links')}</h4>
             <Nav
               className='ml-2 mt-2 space-y-1.5'
-              news={t('news')}
-              events={t('events')}
-              about={t('about')}
+              t={{
+                news: t('news'),
+                events: t('events'),
+                about: t('about'),
+              }}
             />
           </div>
           <div>

diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
@@ -14,27 +14,43 @@ function Header() {
       <div className='flex h-14 w-full max-w-screen-2xl items-center justify-between'>
         <MobileSheet
           className='flex md:hidden'
-          news={t('news')}
-          events={t('events')}
-          about={t('about')}
+          t={{
+            news: t('news'),
+            events: t('events'),
+            about: t('about'),
+            close: useTranslations('ui')('close'),
+          }}
         />
         <LogoLink />
         <div className='flex gap-10'>
           <Nav
             className='hidden items-center gap-6 text-sm md:flex'
-            news={t('news')}
-            events={t('events')}
-            about={t('about')}
+            t={{
+              news: t('news'),
+              events: t('events'),
+              about: t('about'),
+            }}
           />
           <div className='flex'>
-            <LocaleMenu changeLocale={t('changeLocale')} />
+            <LocaleMenu
+              t={{
+                changeLocale: t('changeLocale'),
+              }}
+            />
             <DarkModeMenu
-              toggleTheme={t('toggleTheme')}
-              light={t('light')}
-              dark={t('dark')}
-              system={t('system')}
+              t={{
+                toggleTheme: t('toggleTheme'),
+                light: t('light'),
+                dark: t('dark'),
+                system: t('system'),
+              }}
+            />
+            <ProfileMenu
+              t={{
+                profile: t('profile'),
+                signIn: t('signIn'),
+              }}
             />
-            <ProfileMenu profile={t('profile')} signIn={t('signIn')} />
           </div>
         </div>
       </div>

diff --git a/src/components/layout/MobileSheet.tsx b/src/components/layout/MobileSheet.tsx
@@ -16,12 +16,15 @@ import {
 
 type MobileSheetProps = {
   className?: string;
-  news: string;
-  events: string;
-  about: string;
+  t: {
+    news: string;
+    events: string;
+    about: string;
+    close: string;
+  };
 };
 
-function MobileSheet({ className, news, events, about }: MobileSheetProps) {
+function MobileSheet({ className, t }: MobileSheetProps) {
   const [open, setOpen] = React.useState(false);
   return (
     <Sheet open={open} onOpenChange={setOpen}>
@@ -30,7 +33,7 @@ function MobileSheet({ className, news, events, about }: MobileSheetProps) {
           <Menu className='h-5 w-5' />
         </Button>
       </SheetTrigger>
-      <SheetContent side='left'>
+      <SheetContent side='left' close={t.close}>
         <SheetHeader>
           <SheetTitle className='flex'>
             <LogoLink onClick={() => setOpen(false)} />
@@ -39,9 +42,11 @@ function MobileSheet({ className, news, events, about }: MobileSheetProps) {
         <Nav
           className='flex flex-col space-y-3 pt-6'
           onClick={() => setOpen(false)}
-          news={news}
-          events={events}
-          about={about}
+          t={{
+            news: t.news,
+            events: t.events,
+            about: t.about,
+          }}
         />
       </SheetContent>
     </Sheet>

diff --git a/src/components/layout/Nav.tsx b/src/components/layout/Nav.tsx
@@ -5,33 +5,35 @@ import { Button } from '@/components/ui/Button';
 type NavProps = {
   className?: string;
   onClick?: () => void;
-  news: string;
-  events: string;
-  about: string;
+  t: {
+    news: string;
+    events: string;
+    about: string;
+  };
 };
 
-function Nav({ className, onClick, news, events, about }: NavProps) {
+function Nav({ className, onClick, t }: NavProps) {
   return (
     <nav className='flex items-center'>
       <ul className={className}>
         <li>
           <Button asChild variant='nav' size='none'>
             <Link href='/news' onClick={onClick}>
-              {news}
+              {t.news}
             </Link>
           </Button>
         </li>
         <li>
           <Button asChild variant='nav' size='none'>
             <Link href='/events' onClick={onClick}>
-              {events}
+              {t.events}
             </Link>
           </Button>
         </li>
         <li>
           <Button asChild variant='nav' size='none'>
             <Link href='/about' onClick={onClick}>
-              {about}
+              {t.about}
             </Link>
           </Button>
         </li>

diff --git a/src/components/news/NewsCard.tsx b/src/components/news/NewsCard.tsx
@@ -27,20 +27,20 @@ function NewsCard({ className, id, title, date, photoUrl }: NewsCardProps) {
       variant='none'
       size='none'
     >
-      <Link href={`/news/${id}`}>
-        <Card
-          className={cx(
-            'relative flex h-full min-h-32 w-full overflow-hidden bg-cover bg-center',
-            className,
-          )}
-        >
+      <Link
+        href={{
+          pathname: '/news/[articleId]',
+          params: { articleId: id },
+        }}
+      >
+        <Card className='relative flex h-full min-h-32 w-full overflow-hidden'>
           <Image
             className='rounded-lg object-cover object-center transition-transform duration-300 group-hover:scale-105'
             src={`/${photoUrl}`}
             alt={title}
             fill
           />
-          <CardHeader className='mt-auto w-full bg-background/95 p-4 backdrop-blur supports-[backdrop-filter]:bg-background/80 dark:supports-[backdrop-filter]:bg-background/60 lg:p-6'>
+          <CardHeader className='mt-auto w-full bg-background/95 p-4 backdrop-blur supports-[backdrop-filter]:bg-background/60 lg:p-6'>
             <CardTitle className='line-clamp-1 text-lg transition-colors group-hover:text-primary sm:text-xl lg:text-2xl'>
               {title}
             </CardTitle>