[submit] more input checks

Topic: more-input-checks
Relative: address-from-submit

src/components/Forms.tsx

@@ -1,59 +1,47 @@
 import React from "react";
 
-import { Typography, FormGroup, TextField } from "@mui/material";
+import { Typography, FormGroup, FormControl, TextField } from "@mui/material";
 import { inputLabelClasses } from "@mui/material/InputLabel";
 
 interface TextInputProps {
   text: string;
   id: string;
   isValid: boolean;
+  didSubmit: boolean;
   handleInput: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  title?: string;
   helperText?: string;
   defaultValue?: string | undefined;
 }
 
-interface TextInputWithTitleProps extends TextInputProps {
-  title: string;
-}
+const TextInput = (props: TextInputProps) => {
+  const [value, setValue] = React.useState<string>("");
 
-const TextInputWithTitle = (props: TextInputWithTitleProps) => {
-  return (
-    <FormGroup>
-      <Typography
-        variant="h6"
-        gutterBottom
-        className="Input-text"
-        color="text.primary"
-      >
-        {props.title}
-      </Typography>
-      <TextField
-        sx={{ input: { color: "white" } }}
-        InputLabelProps={{
-          sx: {
-            color: "white",
-            [`&.${inputLabelClasses.shrink}`]: {
-              color: "grey",
-            },
-          },
-        }}
-        id={props.id}
-        label={props.text}
-        defaultValue={props?.defaultValue || ""}
-        variant="outlined"
-        onChange={props.handleInput}
-        error={!props.isValid}
-        helperText={props?.helperText || ""}
-      />
-    </FormGroup>
-  );
-};
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+    props.handleInput(event);
+  };
+
+  if (props.didSubmit) {
+    setValue("");
+  }
+
+  const hasTitle = !!props?.title || false;
 
-const TextInput = (props: TextInputProps) => {
   return (
     <FormGroup>
+      {hasTitle && (
+        <Typography
+          variant="h6"
+          gutterBottom
+          className="Input-text"
+          color="text.primary"
+        >
+          {props.title}
+        </Typography>
+      )}
       <TextField
-        sx={{ mt: 5, input: { color: "white" } }}
+        sx={{ input: { color: "white" } }}
         InputLabelProps={{
           sx: {
             color: "white",
@@ -66,12 +54,13 @@ const TextInput = (props: TextInputProps) => {
         label={props.text}
         defaultValue={props?.defaultValue || ""}
         variant="outlined"
-        onChange={props.handleInput}
+        value={value}
+        onChange={handleChange}
         error={!props.isValid}
         helperText={props?.helperText || ""}
       />
     </FormGroup>
   );
 };
 
-export { TextInputWithTitle, TextInput };
+export { TextInput };

src/components/InputDashboard.tsx

@@ -5,35 +5,35 @@ import "./Styles.css";
 import { Box, CssBaseline, Divider } from "@mui/material";
 import SelectUSState from "./SelectUSState";
 
-import { TextInput, TextInputWithTitle } from "./Forms";
+import { TextInput } from "./Forms";
 import { isValidAddress, isValidEmail, isValidZip } from "../utils/validators";
 import Submit from "./Submit";
 import { propertyFactory, Property } from "./Property";
+import PropertyList from "./PropertyList";
 
 interface FormInputs {
   [x: string]: string;
 }
 
 const InputDashboard = () => {
+  const [didSubmit, setDidSubmit] = React.useState<boolean>(false);
   const [formInputs, setformInputs] = React.useState<FormInputs>();
   const [properties, setProperties] = React.useState<Property[]>([]);
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const value = event.target.value;
     const name = event.target.id;
     setformInputs({ ...formInputs, [name]: value });
-    console.log(formInputs, name, value);
   };
 
   const handleSelectChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
     const value = event.target.value;
     const name = event.target.id;
     setformInputs({ ...formInputs, [name]: value });
-    console.log(formInputs, name, value);
   };
 
-  const handleSubmit = () => {
-    if (formInputs) {
+  const handleSubmit = (event: React.ChangeEvent<HTMLAnchorElement>) => {
+    if (!!formInputs?.address) {
       const property: Property = propertyFactory(formInputs);
       setProperties([...properties, property]);
       setformInputs({});
@@ -42,49 +42,51 @@ const InputDashboard = () => {
     console.log("Button Submit");
   };
 
+  const addressInputFields = [
+    {
+      id: "email",
+      text: "Email",
+      title: "",
+      isValid: isValidEmail(formInputs?.email || ""),
+      helperText: !isValidEmail(formInputs?.email || "")
+        ? "Please enter a valid email"
+        : "",
+    },
+    {
+      id: "address",
+      title: "Property Details",
+      text: "Address",
+      isValid: isValidAddress(formInputs?.address || ""),
+      helperText: !isValidAddress(formInputs?.address || "")
+        ? "Please enter a valid address"
+        : "",
+    },
+    {
+      id: "address2",
+      text: "Address 2",
+      isValid: !!formInputs?.address2,
+      helperText: !formInputs?.address2 ? "Additional address information" : "",
+    },
+    {
+      id: "city",
+      text: "City",
+      isValid: !!formInputs?.city,
+      helperText: !formInputs?.city ? "Please enter city" : "",
+    },
+  ];
+
   return (
     <Box sx={{ width: "75%" }}>
       <CssBaseline />
-      <TextInput
-        id="email"
-        text="Email"
-        handleInput={handleChange}
-        isValid={isValidEmail(formInputs?.email || "")}
-        helperText={
-          !isValidEmail(formInputs?.email || "")
-            ? "Please enter a valid email"
-            : ""
-        }
-      />
-      <Divider sx={{ marginTop: 2, marginBottom: 4 }} />
-      <TextInputWithTitle
-        id="address"
-        title="Property Details"
-        text="Address"
-        handleInput={handleChange}
-        isValid={isValidAddress(formInputs?.address || "")}
-        helperText={
-          !isValidAddress(formInputs?.address || "")
-            ? "Please enter a valid address"
-            : ""
-        }
-      />
-      <TextInput
-        id="address2"
-        text="Address 2"
-        handleInput={handleChange}
-        isValid={!!formInputs?.address2}
-        helperText={
-          !!!formInputs?.address2 ? "Additional address information" : ""
-        }
-      />
-      <TextInput
-        id="city"
-        text="City"
-        handleInput={handleChange}
-        isValid={!!formInputs?.city}
-        helperText={!!!formInputs?.city ? "Please enter city" : ""}
-      />
+      {addressInputFields.map((inputField) => {
+        return (
+          <TextInput
+            {...inputField}
+            didSubmit={didSubmit}
+            handleInput={handleChange}
+          />
+        );
+      })}
       <Box sx={{ display: "flex", justifyContent: "space-between" }}>
         <div className="Dropdown">
           <SelectUSState
@@ -96,14 +98,17 @@ const InputDashboard = () => {
         <TextInput
           id="zipcode"
           text="Zip"
+          didSubmit={didSubmit}
           handleInput={handleChange}
           isValid={isValidZip(formInputs?.zipcode || "")}
           helperText="Enter a valid zip code"
         />
       </Box>
       <Box sx={{ display: "flex", justifyContent: "center" }}>
-        <Submit sx={{ mt: 5 }} handleClick={handleSubmit} />
+        <Submit sx={{ mt: 5 }} handleSubmit={handleSubmit} />
       </Box>
+      <Divider sx={{ marginTop: 4, marginBottom: 4 }} />
+      <PropertyList properties={properties} setProperties={setProperties} />
     </Box>
   );
 };

src/components/Property.tsx

@@ -1,5 +1,5 @@
 export interface Property {
-  id: number;
+  key: string;
   address: string;
   address2: string;
   city: string;
@@ -35,7 +35,7 @@ export interface Property {
 
 export function propertyFactory(props: any): Property {
   return {
-    id: props.id,
+    key: props.address,
     address: props?.address || "",
     address2: props?.address2 || "",
     city: props?.city || "",

src/components/Styles.css

@@ -33,3 +33,15 @@
     flex-wrap: wrap;
     font-family: 'Roboto', sans-serif;
   }
+
+  .PropertyList {
+    border-radius: 5px;
+    display: flex;
+    flex-direction: column;
+    width: 47.5%;
+    padding: 15px;
+    background-color: #ffffff;
+    font-family: 'Roboto', sans-serif;
+    font-size: 20px;
+    color: #000000;
+  }

src/components/Submit.tsx

@@ -3,9 +3,10 @@ import Button from "@mui/material/Button";
 import "./Styles.css";
 
 const Submit: React.FC<any> = (props: any) => {
+  const { handleSubmit, ...additionalProps } = props;
   return (
     <Button
-      onClick={props.handleClick}
+      onClick={handleSubmit}
       variant="text"
       color="secondary"
       style={{
@@ -15,7 +16,7 @@ const Submit: React.FC<any> = (props: any) => {
         fontSize: "1em",
         fontWeight: "bold",
       }}
-      {...props}
+      {...additionalProps}
     >
       Submit Deal
     </Button>