Merge pull request #94 from websitesieutoc/make-post-crud

Make Posts crud
getsieutoc · Sep 17, 2023 · 0c09ff5 · 0c09ff5
2 parents b12daa1 + 3ad80b7
commit 0c09ff5
Show file tree

Hide file tree

Showing 21 changed files with 699 additions and 206 deletions.
diff --git a/app/[locale]/(auth)/login/LoginForm/index.tsx b/app/[locale]/(auth)/login/LoginForm/index.tsx
@@ -1,9 +1,16 @@
 'use client';
 
-import { Input, Button, FormLabel, FormControl } from '@/components/chakra';
+import {
+  Input,
+  Button,
+  FormLabel,
+  FormControl,
+  Stack,
+  Flex,
+} from '@/components/chakra';
 import { useAuth, useEffect, useState, useRouter } from '@/hooks';
-import { signIn } from 'next-auth/react';
 import { NextLink } from '@/components/client';
+import { signIn } from 'next-auth/react';
 
 export default function LoginForm() {
   const router = useRouter();
@@ -29,7 +36,7 @@ export default function LoginForm() {
   }, [isAuthenticated, router]);
 
   return (
-    <>
+    <Stack spacing={4}>
       <FormControl
         isRequired
         isInvalid={credentials.email.length > 0 && !validEmail}
@@ -54,26 +61,28 @@ export default function LoginForm() {
         />
       </FormControl>
 
-      <Button
-        width="100%"
-        size="lg"
-        marginTop={2}
-        colorScheme={colorScheme}
-        // isLoading={!!router.query.callback}
-        onClick={() => {
-          signIn('credentials', {
-            ...credentials,
-            redirect: true,
-            callbackUrl: getCallbackUrl(),
-          });
-        }}
-      >
-        Login
-      </Button>
+      <Flex direction="column" gap={2}>
+        <Button
+          width="100%"
+          size="lg"
+          marginTop={2}
+          colorScheme={colorScheme}
+          // isLoading={!!router.query.callback}
+          onClick={() => {
+            signIn('credentials', {
+              ...credentials,
+              redirect: true,
+              callbackUrl: getCallbackUrl(),
+            });
+          }}
+        >
+          Login
+        </Button>
 
-      <Button size="lg" variant="outline" as={NextLink} href="/signup">
-        Sign up
-      </Button>
-    </>
+        <Button size="lg" variant="ghost" as={NextLink} href="/signup">
+          Sign up
+        </Button>
+      </Flex>
+    </Stack>
   );
 }
diff --git a/app/[locale]/(auth)/login/page.tsx b/app/[locale]/(auth)/login/page.tsx
@@ -3,10 +3,11 @@ import LoginForm from './LoginForm';
 
 export default function Login() {
   return (
-    <Stack gap={4} maxWidth="sm" marginX="auto" paddingTop="10vh">
+    <Stack spacing={8} maxWidth="sm" marginX="auto" paddingTop="10vh">
       <Heading as="h1" size="lg">
         Login
       </Heading>
+
       <LoginForm />
     </Stack>
   );

diff --git a/app/[locale]/(auth)/signup/SignUpForm/index.tsx b/app/[locale]/(auth)/signup/SignUpForm/index.tsx
@@ -7,17 +7,15 @@ import {
   FormLabel,
   FormControl,
   FormErrorMessage,
+  Stack,
+  Flex,
 } from '@/components/chakra';
 import { MIN_PASSWORD_LENGTH } from '@/utils/constants';
 import { httpClient } from '@/utils/httpClient';
-import { useEffect, useRouter, useState } from '@/hooks';
-import type { Session } from 'next-auth';
+import { useRouter, useState } from '@/hooks';
 import { NextLink } from '@/components/client';
 
-type PropTypes = {
-  session?: Session | null;
-};
-export default function SignUpForm({ session }: PropTypes) {
+export default function SignUpForm() {
   const router = useRouter();
   const [isLoading, setLoading] = useState(false);
   const [agreed, setAgreed] = useState(false);
@@ -33,12 +31,6 @@ export default function SignUpForm({ session }: PropTypes) {
   const validForm = validEmail && isPasswordStrong && isConfirmMatched;
   const colorScheme = validForm ? 'brand' : 'gray';
 
-  useEffect(() => {
-    if (session?.user?.id) {
-      router.push('/protected');
-    }
-  }, [session?.user?.id, router]);
-
   const handleSignUp = async () => {
     setLoading(true);
     await httpClient.post('/api/users', credentials);
@@ -47,7 +39,7 @@ export default function SignUpForm({ session }: PropTypes) {
   };
 
   return (
-    <>
+    <Stack spacing={4}>
       <FormControl>
         <FormLabel>Name</FormLabel>
         <Input
@@ -119,21 +111,23 @@ export default function SignUpForm({ session }: PropTypes) {
         </Checkbox>
       </FormControl>
 
-      <Button
-        width="100%"
-        size="lg"
-        marginTop={1}
-        isLoading={isLoading}
-        colorScheme={colorScheme}
-        isDisabled={!validForm || !agreed}
-        onClick={() => handleSignUp()}
-      >
-        Sign Up
-      </Button>
+      <Flex direction="column" gap={2}>
+        <Button
+          width="100%"
+          size="lg"
+          marginTop={1}
+          isLoading={isLoading}
+          colorScheme={colorScheme}
+          isDisabled={!validForm || !agreed}
+          onClick={() => handleSignUp()}
+        >
+          Sign Up
+        </Button>
 
-      <Button size="lg" variant="outline" as={NextLink} href="/login">
-        Login
-      </Button>
-    </>
+        <Button size="lg" variant="ghost" as={NextLink} href="/login">
+          Login
+        </Button>
+      </Flex>
+    </Stack>
   );
 }
diff --git a/app/[locale]/(auth)/signup/page.tsx b/app/[locale]/(auth)/signup/page.tsx
@@ -1,16 +1,21 @@
 import { Heading, Stack } from '@/components/chakra';
 import SignUpForm from './SignUpForm';
 import { getSession } from '@/utils/auth';
+import { redirect } from 'next/navigation';
 
 export default async function SignUp() {
   const session = await getSession();
 
+  if (session) {
+    redirect('/');
+  }
+
   return (
-    <Stack gap={4} maxWidth="sm" marginX="auto" paddingTop="10vh">
+    <Stack spacing={8} maxWidth="sm" marginX="auto" paddingTop="10vh">
       <Heading as="h1" size="lg">
         Sign Up
       </Heading>
-      <SignUpForm session={session} />
+      <SignUpForm />
     </Stack>
   );
 }
diff --git a/app/[locale]/(custom)/layout.tsx b/app/[locale]/(custom)/layout.tsx
@@ -1,5 +1,5 @@
 import { LocaleSwitcher, Navbar } from '@/components/client';
-import { Box, Flex } from '@/components/chakra';
+import { Box, Container, Flex } from '@/components/chakra';
 import { ProfileMenu } from '@/components/server';
 import type { ReactNode } from '@/types';
 import type { Locale } from '@/configs/i18n.config';
@@ -14,15 +14,23 @@ export default function CustomLayout({
   return (
     <Flex direction="column">
       <Navbar>
-        <Flex gap={1}>
+        <Flex gap={1} align="center">
           <LocaleSwitcher locale={params.locale} />
           <ProfileMenu />
         </Flex>
       </Navbar>
 
-      <Box padding={6} width="100%" height="100vh" overflowY="scroll">
+      <Container
+        as={Box}
+        maxW={{
+          lg: 'container.lg',
+          md: 'container.m',
+          sm: 'container.sm',
+          xl: 'container.xl',
+        }}
+      >
         {children}
-      </Box>
+      </Container>
     </Flex>
   );
 }
diff --git a/app/[locale]/(default)/dashboard/pages/[id]/page.tsx b/app/[locale]/(default)/dashboard/pages/[id]/page.tsx
@@ -1,7 +1,4 @@
-import { Flex, Heading, Spinner, Stack } from '@/components/chakra';
-import { GoBackButton } from '@/components/client';
 import { prisma } from '@/utils/prisma';
-import { Suspense } from 'react';
 
 import { PageForm } from '../components';
 
@@ -14,19 +11,5 @@ export default async function EditPage({ params }: EditPageProps) {
 
   const data = await prisma.page.findUnique({ where: { id } });
 
-  return (
-    <Flex direction="column">
-      <Stack direction="row" align="center">
-        <GoBackButton path="/dashboard/pages" />
-
-        <Heading as="h3" size="lg" alignItems="center" color="gray">
-          Edit Page
-        </Heading>
-      </Stack>
-
-      <Suspense fallback={<Spinner />}>
-        {data && <PageForm data={data} />}
-      </Suspense>
-    </Flex>
-  );
+  return <PageForm backPath="/dashboard/pages" title="Edit Page" data={data} />;
 }