feature: simplifies template

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "idea-creator",
+  "name": "thing-creator",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
@@ -27,7 +27,7 @@
   "scripts": {
     "dev": "pnpm start",
     "start": "react-scripts start",
-    "build": "react-scripts build && cp -rf build dist && rm -rf build",
+    "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },

src/components/Container.tsx

@@ -2,7 +2,7 @@ import { Box } from "@chakra-ui/react";
 
 const Container: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   return (
-    <Box w="100%" display="flex" flexDirection="column" alignItems="center">
+    <Box w="100%" display="flex" flexDirection="column" alignItems="left" mt={2}>
       {children}
     </Box>
   );

src/components/CreatorForm.jsx

@@ -0,0 +1,66 @@
+import {
+  Button,
+  Flex,
+  Input,
+  Textarea
+} from "@chakra-ui/react";
+import { useState } from "react";
+import createThing from "../services/createThing";
+
+const CreatorForm = ({ setIsLoading, handleError, handleSuccess }) => {
+  // UPDATE STATE TO HANDLE YOUR TYPE
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+
+  // UPDATE HANDLE METHODS TO MATCH YOUR STATE
+  const handleTitleChange = (event) => {
+    setTitle(event.target.value);
+  };
+
+  const handleDescriptionChange = (event) => {
+    setDescription(event.target.value);
+  };
+
+  const handleSubmit = async () => {
+    setIsLoading(true);
+    // UPDATE OBJECT TO MATCH YOUR TYPE
+    const response = await createThing({
+      title,
+      description,
+    });
+    if (response.error) {
+      handleError(response.error);
+    } else {
+      handleSuccess();
+      setTitle("");
+      setDescription("");
+    }
+    setIsLoading(false);
+  };
+
+  return (
+    <Flex flexDirection="column" alignItems="left" mt={2}>
+      {/* ADD YOUR INPUTS HERE */}
+      <Input
+        placeholder="Title"
+        value={title}
+        onChange={handleTitleChange}
+        mb={2}
+      />
+      <Textarea
+        placeholder="Description"
+        value={description}
+        onChange={handleDescriptionChange}
+        mb={4}
+      />
+      <Button
+        onClick={handleSubmit}
+        isDisabled={title.length < 1 || description.length < 1}
+      >
+        Submit
+      </Button>
+    </Flex>
+  );
+};
+
+export default CreatorForm;

src/screens/Home.tsx

@@ -1,11 +1,59 @@
-import { Box } from "@chakra-ui/react";
-import { PreHomeScreenProps } from "../routes/NavigationProps";
+import {
+  Box, Button, Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay, useDisclosure
+} from "@chakra-ui/react";
+import { useState } from "react";
+import Container from "../components/Container";
 import CreatorForm from "../components/CreatorForm";
+import { PreHomeScreenProps } from "../routes/NavigationProps";
+import Loading from "../components/Loading";
 
 const Home: React.FC<PreHomeScreenProps> = ({ navigation }) => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const [message, setMessage] = useState<string>("");
+  const [isLoading, setIsLoading] = useState(false);
+
+  const SUCCESSFULLY_CREATED = "successfully created";
+
+  const handleError = (errors: any) => {
+    setMessage(errors);
+    onOpen();
+  }
+
+  const handleSuccess = () => {
+    setMessage(SUCCESSFULLY_CREATED);
+    onOpen();
+  }
+
+  if (isLoading) {
+    return <Loading />;
+  }
   return (
     <Box maxWidth={500} margin={"auto"}>
-      <CreatorForm />
+      <Container>
+
+        <CreatorForm setIsLoading={setIsLoading} handleError={handleError} handleSuccess={handleSuccess} />
+        <Modal isOpen={isOpen} onClose={onClose}>
+          <ModalOverlay />
+          <ModalContent>
+            <ModalHeader>
+              {message === SUCCESSFULLY_CREATED ? "Success" : "Error"}
+            </ModalHeader>
+            <ModalBody>
+              <p>{message}</p>
+            </ModalBody>
+            <ModalFooter>
+              <Button colorScheme="blue" mr={3} onClick={onClose}>
+                Close
+              </Button>
+            </ModalFooter>
+          </ModalContent>
+        </Modal>
+      </Container>
     </Box>
   );
 };