Remove unnecessary layer of indirection

kscalelabs · Jul 31, 2024 · 3b25180 · 3b25180
1 parent b2975db
commit 3b25180
Showing 1 changed file with 28 additions and 53 deletions.
diff --git a/frontend/src/pages/NewListing.tsx b/frontend/src/pages/NewListing.tsx
@@ -5,22 +5,38 @@ import { Dispatch, FormEvent, SetStateAction, useState } from "react";
 import { Col, Form } from "react-bootstrap";
 import { useNavigate } from "react-router-dom";
 
-interface ListingFormProps {
-  title: string;
-  name: string;
-  setName: Dispatch<SetStateAction<string>>;
-  description: string;
-  setDescription: Dispatch<SetStateAction<string>>;
-  handleSubmit: (event: FormEvent<HTMLFormElement>) => void;
-}
+const NewListing = () => {
+  const auth = useAuthentication();
+  const [name, setName] = useState<string>("");
+  const [description, setDescription] = useState<string>("");
+
+  const { addAlert, addErrorAlert } = useAlertQueue();
+  const navigate = useNavigate();
+
+  // On submit, add the listing to the database and navigate to the
+  // newly-created listing.
+  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    const { data, error } = await auth.client.POST("/listings/add", {
+      body: {
+        name,
+        description,
+        child_ids: [],
+      },
+    });
 
-const ListingForm = (props: ListingFormProps) => {
-  const { title, name, setName, description, setDescription, handleSubmit } =
-    props;
+    if (error) {
+      addErrorAlert(error);
+    } else {
+      addAlert("Listing added successfully", "success");
+      navigate(`/listing/${data.listing_id}`);
+    }
+  };
 
   return (
     <>
-      <h1>{title}</h1>
+      <h1 className="display-6">Create Listing</h1>
       <Form onSubmit={handleSubmit} className="mb-3">
         {/* Name */}
         <Col md={12} className="mb-4">
@@ -60,45 +76,4 @@ const ListingForm = (props: ListingFormProps) => {
   );
 };
 
-const NewListing = () => {
-  const auth = useAuthentication();
-  const [name, setName] = useState<string>("");
-  const [description, setDescription] = useState<string>("");
-
-  const { addAlert, addErrorAlert } = useAlertQueue();
-  const navigate = useNavigate();
-
-  // On submit, add the listing to the database and navigate to the
-  // newly-created listing.
-  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-
-    const { data, error } = await auth.client.POST("/listings/add", {
-      body: {
-        name,
-        description,
-        child_ids: [],
-      },
-    });
-
-    if (error) {
-      addErrorAlert(error);
-    } else {
-      addAlert("Listing added successfully", "success");
-      navigate(`/listing/${data.listing_id}`);
-    }
-  };
-
-  return (
-    <ListingForm
-      title="Create Listing"
-      name={name}
-      setName={setName}
-      description={description}
-      setDescription={setDescription}
-      handleSubmit={handleSubmit}
-    />
-  );
-};
-
 export default NewListing;