Merge pull request #4 from OneRandom1509/feat-migration-to-app-router

Issue #1 - Migration from pages router to app router
ThEditor · Oct 31, 2023 · 9e53fde · 9e53fde
2 parents e4cbcfe + bbe1db6
commit 9e53fde
Show file tree

Hide file tree

Showing 21 changed files with 99 additions and 237 deletions.
diff --git a/src/__tests__/pages/404.test.tsx b/src/__tests__/pages/404.test.tsx
@@ -1,8 +1,8 @@
 import { render, screen } from '@testing-library/react';
 
-import NotFoundPage from '@/pages/404';
+import NotFoundPage from '@/app/not-found';
 
-describe('404', () => {
+describe('not-found', () => {
   it('renders a heading', () => {
     render(<NotFoundPage />);
 

diff --git a/src/pages/account.tsx → src/app/account/page.tsx b/src/pages/account.tsx → src/app/account/page.tsx
@@ -1,11 +1,12 @@
-import * as React from 'react';
+import { Metadata } from 'next';
 
-import Seo from '@/components/Seo';
+export const metadata: Metadata = {
+  title: 'Account',
+};
 
 export default function AccountPage() {
   return (
     <>
-      <Seo />
       <main className='flex items-center justify-center'>
         <h1>Account Settings Here</h1>
       </main>

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -0,0 +1,35 @@
+import { Metadata } from 'next';
+import * as React from 'react';
+
+import '../styles/globals.css';
+
+import Player from '../components/Player';
+import Sidebar from '../components/sidebar/Sidebar';
+
+export const metadata: Metadata = {
+  title: {
+    default: 'Nex | Music Player',
+    template: '%s | Nex',
+  },
+  applicationName: 'Nex | Music Player',
+  description: 'A spotify inspired music players for communities and groups',
+  authors: { name: 'ThEditor', url: 'https://nex.theditor.xyz' },
+  robots: 'follow, index',
+  icons: { icon: 'https://theditor.xyz/assets/img/profile-img.jpg' },
+};
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <html>
+      <body>
+        <div className='text-alt bg-dark flex h-screen flex-col'>
+          <div className='flex h-[87%]'>
+            <Sidebar className='w-[5%]' />
+            <div className='h-full flex-grow overflow-y-auto'>{children}</div>
+          </div>
+          <Player className='h-[13%]' />
+        </div>
+      </body>
+    </html>
+  );
+}
diff --git a/src/pages/login.tsx → src/app/login/page.tsx b/src/pages/login.tsx → src/app/login/page.tsx
@@ -1,20 +1,17 @@
-import { useRouter } from 'next/router';
-import { useEffect } from 'react';
+import { Metadata } from 'next';
+import { redirect } from 'next/navigation';
 
 import Button from '@/components/buttons/Button';
 import UnderlineLink from '@/components/links/UnderlineLink';
 
+export const metadata: Metadata = {
+  title: 'Login',
+};
+
 export default function LoginPage() {
-  const router = useRouter();
   const signedin = false;
-
-  useEffect(() => {
-    if (signedin) router.push('/');
-  }, [router, signedin]);
-
   if (signedin) {
-    router.push('/');
-    return <></>;
+    redirect('/');
   }
 
   return !signedin ? (

diff --git a/src/app/logout/page.tsx b/src/app/logout/page.tsx
@@ -0,0 +1,12 @@
+import { Metadata } from 'next';
+import { redirect } from 'next/navigation';
+
+export const metadata: Metadata = {
+  title: 'Logout',
+};
+
+export default function LogoutPage() {
+  const signedin = true;
+
+  return signedin ? redirect('/') : <></>;
+}
diff --git a/src/pages/404.tsx → src/app/not-found.tsx b/src/pages/404.tsx → src/app/not-found.tsx
@@ -2,13 +2,10 @@ import * as React from 'react';
 import { RiAlarmWarningFill } from 'react-icons/ri';
 
 import ArrowLink from '@/components/links/ArrowLink';
-import Seo from '@/components/Seo';
 
 export default function NotFoundPage() {
   return (
     <div className='h-full'>
-      <Seo templateTitle='Not Found' />
-
       <main className='h-full'>
         <section className='h-full bg-white'>
           <div className='layout flex h-full flex-col items-center justify-center text-center text-black'>

diff --git a/src/pages/index.tsx → src/app/page.tsx b/src/pages/index.tsx → src/app/page.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 
 import Carousel, { CarouselProps } from '@/components/carousel/Carousel';
@@ -14,17 +15,13 @@ export default function HomePage() {
         {
           title: 'Life in a bubble',
           subtitle: 'The van',
-          clickAction: () => {
-            return;
-          },
+          link: '/',
           imgSrc: '/images/test.png',
         },
         {
           title: 'Life in a bubble',
           subtitle: 'The van',
-          clickAction: () => {
-            return;
-          },
+          link: '/',
           imgSrc: '/images/test.png',
         },
       ],
@@ -35,17 +32,13 @@ export default function HomePage() {
         {
           title: 'Life in a bubble',
           subtitle: 'The van',
-          clickAction: () => {
-            return;
-          },
+          link: '/',
           imgSrc: '/images/test.png',
         },
         {
           title: 'Life in a bubble',
           subtitle: 'The van',
-          clickAction: () => {
-            return;
-          },
+          link: '/',
           imgSrc: '/images/test.png',
         },
       ],

diff --git a/src/pages/search.tsx → src/app/search/page.tsx b/src/pages/search.tsx → src/app/search/page.tsx
@@ -1,11 +1,11 @@
-import * as React from 'react';
-
-import Seo from '@/components/Seo';
+import { Metadata } from 'next';
 
+export const metadata: Metadata = {
+  title: 'Search',
+};
 export default function Search() {
   return (
     <>
-      <Seo />
       <main className='flex items-center justify-center'>
         <h1>Searching...</h1>
       </main>

diff --git a/src/components/NextImage.tsx b/src/components/NextImage.tsx
@@ -1,3 +1,4 @@
+'use client';
 import Image, { ImageProps } from 'next/image';
 import * as React from 'react';
 

diff --git a/src/components/layout/Player.tsx → src/components/Player.tsx b/src/components/layout/Player.tsx → src/components/Player.tsx
@@ -7,12 +7,13 @@ import {
   ImVolumeHigh,
 } from 'react-icons/im';
 
+import '@/styles/globals.css';
+
 import clsxm from '@/lib/clsxm';
 
 import IconButton from '@/components/buttons/IconButton';
 import NextImage from '@/components/NextImage';
 import Slider from '@/components/Slider';
-
 interface PlayerProps {
   className?: string;
 }

diff --git a/src/components/Seo.tsx b/src/components/Seo.tsx
diff --git a/src/components/carousel/Carousel.tsx b/src/components/carousel/Carousel.tsx
@@ -15,7 +15,7 @@ export default function Carousel({ data }: CarouselProps) {
           title={v.title}
           subtitle={v.subtitle}
           imgSrc={v.imgSrc}
-          clickAction={v.clickAction}
+          link={v.link}
         />
       ))}
     </div>

diff --git a/src/components/carousel/CarouselItem.tsx b/src/components/carousel/CarouselItem.tsx
@@ -1,19 +1,22 @@
+'use client';
+import { redirect } from 'next/navigation';
+
 import clsxm from '@/lib/clsxm';
 
 import NextImage from '@/components/NextImage';
 
 export interface CarouselItemProps {
   title: string;
   subtitle: string;
-  clickAction: () => void;
+  link: string;
   imgSrc: string;
   className?: string;
 }
 
 export default function CarouselItem({
   title,
   subtitle,
-  clickAction,
+  link,
   imgSrc,
   className,
 }: CarouselItemProps) {
@@ -23,7 +26,7 @@ export default function CarouselItem({
         className,
         'text-light font-quicksand hover:bg-light flex w-fit cursor-pointer select-none flex-col gap-1 rounded-3xl p-3 transition-all ease-linear hover:bg-opacity-10'
       )}
-      onClick={() => clickAction()}
+      onClick={() => redirect(link)}
     >
       <NextImage
         style={{ borderRadius: '20%' }}

diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx