refactor: improve news and email handling, style, folder structure (#16)

app/page.tsx

@@ -1,46 +1,35 @@
 'use client';
+import { Button } from '@components/Button';
+import { CardDescription } from '@components/Card';
+import CustomCard from '@components/CustomCard';
+import ErrorMessage from '@components/ErrorMessage';
+import { FormControl } from '@components/form/FormControl';
+import { FormMessage } from '@components/form/FormMessage';
+import { Input } from '@components/Input';
+import { FormField } from '@contexts/FormField/FormFieldProvider';
+import { FormItem } from '@contexts/FormItem/FormItemProvider';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useEffect, useRef, useState } from 'react';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-import { Card } from '../components/custom/card';
-import ErrorMessage from '../components/custom/error';
-import { Button } from '../components/ui/button';
 import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormMessage
-} from '../components/ui/form';
-import { Input } from '../components/ui/input';
-import { ResponseSchema, SubscribeFormSchema } from '../utils/schemas';
+  ResponseType,
+  SubscribeFormSchema,
+  SubscribeFormType
+} from '@utils/validationSchemas';
+import { useState } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
 
 export default function Home() {
   const [completed, setCompleted] = useState(false);
   const [message, setMessage] = useState('');
   const [error, setError] = useState(false);
-  const honeypotRef = useRef<HTMLInputElement | null>(null);
 
-  const form = useForm<z.infer<typeof SubscribeFormSchema>>({
+  const form = useForm<SubscribeFormType>({
     resolver: zodResolver(SubscribeFormSchema),
     defaultValues: {
-      email: '',
-      name: ''
+      email: ''
     }
   });
 
-  useEffect(() => {
-    if (honeypotRef.current) {
-      honeypotRef.current.style.display = 'none';
-    }
-  }, []);
-
-  async function handleSubmit(values: z.infer<typeof SubscribeFormSchema>) {
-    if (values.name) {
-      return;
-    }
-
+  async function handleSubmit(values: SubscribeFormType) {
     try {
       const response = await fetch('/api/subscribe', {
         method: 'POST',
@@ -56,8 +45,7 @@ export default function Home() {
         throw new Error(`Invalid response: ${response.status}`);
       }
 
-      const formResponse: z.infer<typeof ResponseSchema> =
-        await response.json();
+      const formResponse: ResponseType = await response.json();
 
       if (!formResponse.success) {
         throw Error(formResponse.message);
@@ -76,12 +64,14 @@ export default function Home() {
     }
 
     if (completed) {
-      return message;
+      return (
+        <CardDescription className='text-center'>{message}</CardDescription>
+      );
     }
 
     return (
       <div className='mx-2 h-44'>
-        <Form {...form}>
+        <FormProvider {...form}>
           <form
             onSubmit={form.handleSubmit(handleSubmit)}
             className='flex flex-col space-y-4'
@@ -91,7 +81,7 @@ export default function Home() {
               name='email'
               render={({ field }) => (
                 <FormItem>
-                  <div className='h-4'>
+                  <div className='h-6'>
                     <FormMessage className='text-center' />
                   </div>
                   <FormControl>
@@ -108,7 +98,7 @@ export default function Home() {
               <Button type='submit'>Submit</Button>
             </div>
           </form>
-        </Form>
+        </FormProvider>
         <p className='py-1 text-center text-xs text-gray-600'>
           You can rest assured that we will fill your inbox with spam. We
           don&apos;t like it either! 🙂
@@ -118,8 +108,8 @@ export default function Home() {
   }
 
   return (
-    <Card
-      style='text-center max-w-96'
+    <CustomCard
+      className='max-90vw w-96'
       title='Interested in keeping up with the latest from the tech world? 👩‍💻'
       description='Subscribe to our newsletter! The top stories from Hackernews for you. Once a day. Every day.'
       content={render()}