Merge pull request #118 from DuckyMomo20012/migrate-app-dir

refactor: migrate to app dir
DuckyMomo20012 · Dec 28, 2023 · 7401a4a · 7401a4a · vercel · Dec 28, 2023
2 parents 84cf207 + b1f8a64
commit 7401a4a
Show file tree

Hide file tree

Showing 30 changed files with 193 additions and 112 deletions.
diff --git a/src/app/api/auth/[...nextauth]/route.ts b/src/app/api/auth/[...nextauth]/route.ts
@@ -0,0 +1,6 @@
+import NextAuth from 'next-auth';
+import { authOptions } from '@/lib/auth';
+
+const handler = NextAuth(authOptions);
+
+export { handler as GET, handler as POST };
diff --git a/src/pages/auth/sign-in.tsx → src/app/auth/sign-in/page.tsx b/src/pages/auth/sign-in.tsx → src/app/auth/sign-in/page.tsx
diff --git a/src/pages/auth/sign-up.tsx → src/app/auth/sign-up/page.tsx b/src/pages/auth/sign-up.tsx → src/app/auth/sign-up/page.tsx
diff --git a/src/pages/500.tsx → src/app/error.tsx b/src/pages/500.tsx → src/app/error.tsx
@@ -1,18 +1,19 @@
-import { Button, Center, Group, Stack, Text, Title } from '@mantine/core';
-import Head from 'next/head';
-import Image from 'next/image';
+'use client';
 
-function ServerError() {
+import {
+  Button,
+  Center,
+  Group,
+  Image,
+  Stack,
+  Text,
+  Title,
+} from '@mantine/core';
+
+function Error() {
   return (
-    <Center className="h-screen">
-      <Head>
-        <title>Server Error</title>
-        <meta
-          content="Server Error - Something bad just happened..."
-          name="description"
-        ></meta>
-      </Head>
-      <Stack align="center" className="w-3/4 md:w-1/2 lg:w-1/3">
+    <Center className="@container h-full w-full flex-1">
+      <Stack align="center" className="min-w-4/5 @lg:w-full w-4/5 max-w-xl">
         <Image
           alt="500"
           className="aspect-[5/4]"
@@ -43,4 +44,4 @@ function ServerError() {
   );
 }
 
-export default ServerError;
+export default Error;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -0,0 +1,35 @@
+import '@mantine/core/styles.css';
+import { ColorSchemeScript } from '@mantine/core';
+import Providers from '@/app/providers';
+
+export const metadata = {
+  title: 'NextJS template',
+  description: 'A simple NextJS template',
+};
+
+const RootLayout = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <html lang="en">
+      <head>
+        <ColorSchemeScript />
+        <link href="/favicon.svg" rel="shortcut icon" />
+        <link href="/favicon.ico" rel="icon" />
+        <link href="https://fonts.googleapis.com" rel="preconnect" />
+        <link
+          crossOrigin=""
+          href="https://fonts.gstatic.com"
+          rel="preconnect"
+        />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Quicksand:wght@700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap"
+          rel="stylesheet"
+        />
+      </head>
+      <body>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+};
+
+export default RootLayout;
diff --git a/src/pages/404.tsx → src/app/not-found.tsx b/src/pages/404.tsx → src/app/not-found.tsx
@@ -1,16 +1,19 @@
-import { Button, Center, Group, Stack, Text, Title } from '@mantine/core';
-import Head from 'next/head';
-import Image from 'next/image';
+import {
+  Button,
+  Center,
+  Group,
+  Image,
+  Stack,
+  Text,
+  Title,
+} from '@mantine/core';
+
 import Link from 'next/link';
 
 const NotFound = () => {
   return (
-    <Center className="h-screen">
-      <Head>
-        <title>404 - Not Found</title>
-        <meta content="404 - Not Found" name="description"></meta>
-      </Head>
-      <Stack align="center" className="w-3/4 md:w-1/2 lg:w-1/3">
+    <Center className="@container h-full w-full flex-1">
+      <Stack align="center" className="min-w-4/5 @lg:w-full w-4/5 max-w-xl">
         <Image
           alt="404"
           className="aspect-[5/4]"
@@ -26,11 +29,9 @@ const NotFound = () => {
           address, or the page has been moved to another URL.
         </Text>
         <Group justify="center">
-          <Link href="/">
-            <Button size="md" variant="light">
-              Take me back to home page
-            </Button>
-          </Link>
+          <Button component={Link} href="/" size="md" variant="light">
+            Take me back to home page
+          </Button>
         </Group>
       </Stack>
     </Center>

diff --git a/src/pages/index.tsx → src/app/page.tsx b/src/pages/index.tsx → src/app/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { Icon } from '@iconify/react';
 import {
   ColorSwatch,

diff --git a/src/app/providers.tsx b/src/app/providers.tsx
@@ -0,0 +1,47 @@
+'use client';
+
+import '@/styles/globals.css';
+
+import { Notifications } from '@mantine/notifications';
+import { type GetServerSidePropsContext } from 'next';
+import { type Session } from 'next-auth';
+import NextNProgress from 'nextjs-progressbar';
+import {
+  MantineProvider,
+  QueryProvider,
+  ReduxProvider,
+  SessionProvider,
+} from '@/context/index';
+import { auth } from '@/lib/auth';
+
+const Providers = ({
+  children,
+  session,
+}: {
+  children?: React.ReactNode;
+  session?: Session;
+}) => {
+  return (
+    <ReduxProvider>
+      <SessionProvider session={session}>
+        <QueryProvider>
+          <MantineProvider>
+            <NextNProgress />
+            <Notifications />
+            {children}
+          </MantineProvider>
+        </QueryProvider>
+      </SessionProvider>
+    </ReduxProvider>
+  );
+};
+
+export async function getServerSideProps(context: GetServerSidePropsContext) {
+  const session = await auth(context.req, context.res);
+
+  return {
+    props: { session },
+  };
+}
+
+export default Providers;
diff --git a/src/components/elements/Feature.tsx b/src/components/elements/Feature.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { Card, Space, Stack, Text } from '@mantine/core';
 
 const Feature = ({

diff --git a/src/components/forms/SignInForm.tsx b/src/components/forms/SignInForm.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { zodResolver } from '@hookform/resolvers/zod';
 import {
   Button,

diff --git a/src/components/forms/SignUpForm.tsx b/src/components/forms/SignUpForm.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { zodResolver } from '@hookform/resolvers/zod';
 import {
   Button,

diff --git a/src/components/layouts/AppShell.tsx b/src/components/layouts/AppShell.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { Icon } from '@iconify/react/dist/iconify.js';
 import {
   ActionIcon,

diff --git a/src/components/modules/ButtonDemo.tsx b/src/components/modules/ButtonDemo.tsx
@@ -1,8 +1,10 @@
+'use client';
+
 import { Icon } from '@iconify/react';
 import { ActionIcon, Button } from '@mantine/core';
 import { memo } from 'react';
+import { type ControlledDemoProps } from '@/app/page';
 import { Feature } from '@/components/elements/Feature';
-import { type ControlledDemoProps } from '@/pages';
 
 const ButtonDemo = memo(function ButtonDemo({
   color,

diff --git a/src/components/modules/ComboboxDemo.tsx b/src/components/modules/ComboboxDemo.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   Autocomplete,
   Group,
@@ -6,8 +8,8 @@ import {
   TagsInput,
 } from '@mantine/core';
 import { memo } from 'react';
+import { type ControlledDemoProps } from '@/app/page';
 import { Feature } from '@/components/elements/Feature';
-import { type ControlledDemoProps } from '@/pages';
 
 const ComboboxDemo = memo(function ComboboxDemo({
   description,

diff --git a/src/components/modules/DataDisplayDemo.tsx b/src/components/modules/DataDisplayDemo.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { Icon } from '@iconify/react';
 import {
   Accordion,
@@ -8,8 +10,8 @@ import {
   ThemeIcon,
 } from '@mantine/core';
 import { memo } from 'react';
+import { type ControlledDemoProps } from '@/app/page';
 import { Feature } from '@/components/elements/Feature';
-import { type ControlledDemoProps } from '@/pages';
 
 const DataDisplayDemo = memo(function DataDisplayDemo({
   color,

diff --git a/src/components/modules/FeedbackDemo.tsx b/src/components/modules/FeedbackDemo.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import { Alert, Notification, Progress, Skeleton } from '@mantine/core';
 import { memo } from 'react';
+import { type ControlledDemoProps } from '@/app/page';
 import { Feature } from '@/components/elements/Feature';
-import { type ControlledDemoProps } from '@/pages';
 
 const FeedbackDemo = memo(function FeedbackDemo({
   color,

diff --git a/src/components/modules/InputDemo.tsx b/src/components/modules/InputDemo.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   Checkbox,
   Chip,
@@ -18,8 +20,8 @@ import {
   Textarea,
 } from '@mantine/core';
 import { memo } from 'react';
+import { type ControlledDemoProps } from '@/app/page';
 import { Feature } from '@/components/elements/Feature';
-import { type ControlledDemoProps } from '@/pages';
 
 const InputDemo = memo(function InputDemo({
   color,

diff --git a/src/components/modules/NavigationDemo.tsx b/src/components/modules/NavigationDemo.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import { NavLink, Pagination, Stepper, Tabs } from '@mantine/core';
 import { memo } from 'react';
+import { type ControlledDemoProps } from '@/app/page';
 import { Feature } from '@/components/elements/Feature';
-import { type ControlledDemoProps } from '@/pages';
 
 const NavigationDemo = memo(function NavigationDemo({
   color,

diff --git a/src/components/modules/OverlayDemo.tsx b/src/components/modules/OverlayDemo.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import { Button, Tooltip } from '@mantine/core';
 import { memo } from 'react';
+import { type ControlledDemoProps } from '@/app/page';
 import { Feature } from '@/components/elements/Feature';
-import { type ControlledDemoProps } from '@/pages';
 
 const OverlayDemo = memo(function OverlayDemo({
   color,

diff --git a/src/components/modules/TypographyDemo.tsx b/src/components/modules/TypographyDemo.tsx
@@ -1,8 +1,10 @@
+'use client';
+
 import { Icon } from '@iconify/react';
 import { Blockquote, Code, Highlight, Stack, Title } from '@mantine/core';
 import { memo } from 'react';
+import { type ControlledDemoProps } from '@/app/page';
 import { Feature } from '@/components/elements/Feature';
-import { type ControlledDemoProps } from '@/pages';
 
 const TypographyDemo = memo(function TypographyDemo({
   color,

diff --git a/src/context/AuthGuard.tsx b/src/context/AuthGuard.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { notifications } from '@mantine/notifications';
 import { useRouter } from 'next/navigation';
 import { useSession } from 'next-auth/react';

diff --git a/src/context/MantineProvider.tsx b/src/context/MantineProvider.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   MantineProvider as BaseMantineProvider,
   type MantineBreakpointsValues,

diff --git a/src/context/QueryProvider.tsx b/src/context/QueryProvider.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 

diff --git a/src/context/ReduxProvider.tsx b/src/context/ReduxProvider.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { Provider } from 'react-redux';
 import { store } from '@/store/store';
 

diff --git a/src/context/SessionProvider.tsx b/src/context/SessionProvider.tsx
@@ -0,0 +1,5 @@
+'use client';
+
+import { SessionProvider } from 'next-auth/react';
+
+export { SessionProvider };
diff --git a/src/context/index.ts b/src/context/index.ts
@@ -2,3 +2,4 @@ export * from './AuthGuard';
 export * from './MantineProvider';
 export * from './QueryProvider';
 export * from './ReduxProvider';
+export * from './SessionProvider';
diff --git a/src/pages/api/auth/[...nextauth].ts → src/lib/auth.ts b/src/pages/api/auth/[...nextauth].ts → src/lib/auth.ts
@@ -1,5 +1,10 @@
 import { bcryptVerify } from 'hash-wasm';
-import NextAuth from 'next-auth';
+import {
+  type GetServerSidePropsContext,
+  type NextApiRequest,
+  type NextApiResponse,
+} from 'next';
+import { type NextAuthOptions, getServerSession } from 'next-auth';
 import CredentialsProvider from 'next-auth/providers/credentials';
 
 function getOneUser(email: string) {
@@ -13,7 +18,9 @@ function getOneUser(email: string) {
   return Promise.resolve({ ...user, password: user.password });
 }
 
-export default NextAuth({
+// You'll need to import and pass this
+// to `NextAuth` in `app/api/auth/[...nextauth]/route.ts`
+export const authOptions = {
   providers: [
     CredentialsProvider({
       name: 'Credentials',
@@ -63,4 +70,14 @@ export default NextAuth({
       console.log(`User: ${name} signed in`);
     },
   },
-});
+} satisfies NextAuthOptions;
+
+// Use it in server contexts
+export function auth(
+  ...args:
+    | [GetServerSidePropsContext['req'], GetServerSidePropsContext['res']]
+    | [NextApiRequest, NextApiResponse]
+    | []
+) {
+  return getServerSession(...args, authOptions);
+}