feat: proposal form save-as-draft button

tulsawebdevs · Apr 27, 2024 · 2c435a4 · 2c435a4
1 parent b3e7700
commit 2c435a4
Showing 1 changed file with 66 additions and 46 deletions.
diff --git a/src/components/ProposalForm.tsx b/src/components/ProposalForm.tsx
@@ -3,7 +3,7 @@
  * @see https://v0.dev/t/G4ftnlAGIX0
  * Documentation: https://v0.dev/docs#integrating-generated-code-into-your-nextjs-app
  */
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 import {
   CardTitle,
   CardDescription,
@@ -24,7 +24,7 @@ import { Textarea } from './ui/textarea.tsx';
 import { Button } from './ui/button.tsx';
 
 export type Proposal = {
-  // status: 'draft' | 'open'; // | 'rfc'
+  status: 'draft' | 'open'; // | 'rfc'
   authorId: string;
   authorName: string;
   authorEmail: string;
@@ -35,46 +35,60 @@ export type Proposal = {
 };
 
 export default function ProposalForm() {
-  const onSubmit = useCallback((event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
+  const [isDraft, setIsDraft] = useState(false);
 
-    const url = 'https://api.tulsawebdevs.org/proposals/proposals';
-    const formElement = event.currentTarget;
-    const formData = new FormData(formElement);
+  const onDraftButtonClick = useCallback(() => {
+    setIsDraft(true);
+  }, [setIsDraft]);
 
-    // const isDraft = formData.get('status') === 'draft';
+  const onSubmitButtonClick = useCallback(() => {
+    setIsDraft(false);
+  }, [setIsDraft]);
 
-    const proposal: Proposal = {
-      //      status: isDraft ? 'draft' : 'open',
-      authorId: '1',
-      authorName: formData.get('authorName') as string,
-      authorEmail: formData.get('authorEmail') as string,
-      title: formData.get('title') as string,
-      summary: formData.get('summary') as string,
-      description: formData.get('description') as string,
-      type: formData.get('type') as Proposal['type'],
-    };
+  const onSubmit = useCallback(
+    (event: React.FormEvent<HTMLFormElement>) => {
+      event.preventDefault();
 
-    fetch(url, {
-      method: 'POST',
-      body: JSON.stringify(proposal),
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    })
-      .then((response) => {
-        // eslint-disable-next-line no-console
-        console.log('response:', response);
-        if (response.status === 201) return formElement.reset();
-        if (response.status === 401) throw new Error('Unauthorized');
-        if (response.status === 500) throw new Error('Server Error');
-        throw new Error('Unknown Error');
+      const url = 'https://api.tulsawebdevs.org/proposals/proposals';
+      const formElement = event.currentTarget;
+      const formData = new FormData(formElement);
+
+      const proposal: Proposal = {
+        status: isDraft ? 'draft' : 'open',
+        authorId: '1',
+        authorName: formData.get('authorName') as string,
+        authorEmail: formData.get('authorEmail') as string,
+        title: formData.get('title') as string,
+        summary: formData.get('summary') as string,
+        description: formData.get('description') as string,
+        type: formData.get('type') as Proposal['type'],
+      };
+
+      fetch(url, {
+        method: 'POST',
+        body: JSON.stringify(proposal),
+        headers: {
+          'Content-Type': 'application/json',
+        },
       })
-      .catch((error) => {
-        // eslint-disable-next-line no-console
-        console.error('There was a problem with your fetch operation:', error);
-      });
-  }, []);
+        .then((response) => {
+          // eslint-disable-next-line no-console
+          console.log('response:', response);
+          if (response.status === 201) return formElement.reset();
+          if (response.status === 401) throw new Error('Unauthorized');
+          if (response.status === 500) throw new Error('Server Error');
+          throw new Error('Unknown Error');
+        })
+        .catch((error) => {
+          // eslint-disable-next-line no-console
+          console.error(
+            'There was a problem with your fetch operation:',
+            error,
+          );
+        });
+    },
+    [isDraft],
+  );
 
   return (
     <div key="1" className="container mx-auto max-w-2xl py-12">
@@ -159,15 +173,21 @@ export default function ProposalForm() {
               />
             </div>
             <div className="flex justify-end">
-              {/* //              <Button
-//                className="mr-2"
-//                type="submit"
-//                name="status-draft"
-//                variant="outline"
-//              >
-//                Save Draft
-//              </Button> */}
-              <Button name="status-open" type="submit" variant="default">
+              <Button
+                className="mr-2"
+                type="submit"
+                name="status-draft"
+                variant="outline"
+                onClick={onDraftButtonClick}
+              >
+                Save Draft
+              </Button>
+              <Button
+                name="status-open"
+                type="submit"
+                variant="default"
+                onClick={onSubmitButtonClick}
+              >
                 Submit Proposal
               </Button>
             </div>