chore: clean codes

Author: hantsy

ui/src/ErrorPage.tsx

@@ -0,0 +1,18 @@
+import { useRouteError } from "react-router-dom";
+
+const ErrorPage = () => {
+  const error = useRouteError() as any;
+  console.error(error);
+
+  return (
+    <div id="error-page">
+      <h1>Oops!</h1>
+      <p>Sorry, an unexpected error has occurred.</p>
+      <p>
+        <i>{error.statusText || error.message}</i>
+      </p>
+    </div>
+  );
+};
+
+export default ErrorPage;

ui/src/contacts/AppNavbar.tsx

@@ -0,0 +1,27 @@
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { Collapse, Nav, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } from 'reactstrap';
+
+const AppNavbar = () => {
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <Navbar color="dark" dark expand="md" className='mb-3'>
+      <NavbarBrand tag={Link} to="/">Address Book</NavbarBrand>
+      <NavbarToggler onClick={() => { setIsOpen(!isOpen) }}/>
+      <Collapse isOpen={isOpen} navbar>
+        <Nav className="justify-content-end" style={{width: "100%"}} navbar>
+          <NavItem>
+            <NavLink href="https://twitter.com/hantsy">@hantsy</NavLink>
+          </NavItem>
+          <NavItem>
+            <NavLink href="https://github.com/hantsy/react-spring-mongo-kotlin">GitHub</NavLink>
+          </NavItem>
+        </Nav>
+      </Collapse>
+    </Navbar>
+  );
+};
+
+export default AppNavbar;

ui/src/contacts/ContactEditPage.tsx

@@ -0,0 +1,234 @@
+import { useEffect, useState } from "react";
+import { Link, useNavigate, useParams } from "react-router-dom";
+import { Button, Form, FormGroup, Input, Label } from "reactstrap";
+
+const ContactEditPage = () => {
+  type AddressForm = {
+    line1: string;
+    line2: string;
+    street: string;
+    city: string;
+    zipCode: string;
+  };
+  type PersonForm = {
+    id: string;
+    firstName: string;
+    lastName: string;
+    birthOfDate: string;
+    email: string;
+    phoneNumber: string;
+    address: AddressForm;
+  };
+
+  const initialFormState: PersonForm = {
+    id: "",
+    firstName: "",
+    lastName: "",
+    email: "",
+    birthOfDate: "",
+    phoneNumber: "",
+    address: {
+      line1: "",
+      line2: "",
+      street: "",
+      city: "",
+      zipCode: "",
+    },
+  };
+  const [person, setPerson] = useState<PersonForm>(initialFormState);
+  const navigate = useNavigate();
+  const { id } = useParams();
+
+  useEffect(() => {
+    if (id !== "new") {
+      fetch(`/persons/${id}`)
+        .then((response) => response.json())
+        .then((data) => setPerson(data));
+    }
+  }, [id, setPerson]);
+
+  const handleChange = (event: any) => {
+    const { name, value } = event.target;
+    console.log(`handling event:${name}->${value}`);
+    setPerson({ ...person, [name]: value });
+  };
+
+  const handleAddressLine1 = (event: any) => {
+    const line1 = {
+      address: { ...person.address, line1: event.target.value },
+    } as PersonForm;
+    setPerson({ ...person, ...line1 });
+  };
+
+  const handleAddressLine2 = (event: any) => {
+    const line2 = {
+      address: { ...person.address, line2: event.target.value },
+    } as PersonForm;
+    setPerson({ ...person, ...line2 });
+  };
+  const handleAddressStreet = (event: any) => {
+    const street = {
+      address: { ...person.address, street: event.target.value },
+    } as PersonForm;
+    setPerson({ ...person, ...street });
+  };
+
+  const handleAddressCity = (event: any) => {
+    const city = {
+      address: { ...person.address, city: event.target.value },
+    } as PersonForm;
+    setPerson({ ...person, ...city });
+  };
+
+  const handleAddressZipCode = (event: any) => {
+    const zipCode = {
+      address: { ...person.address, zipCode: event.target.value },
+    } as PersonForm;
+    setPerson({ ...person, ...zipCode });
+  };
+
+  const handleSubmit = async (event: any) => {
+    event.preventDefault();
+
+    const url = person.id ? `/persons/${person.id}` : "/persons";
+    await fetch(url, {
+      method: person.id ? "PUT" : "POST",
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(person),
+    });
+
+    setPerson(initialFormState);
+    navigate("/persons");
+  };
+
+  const title = <h2>{person.id ? "Edit Contact" : "Add Contact"}</h2>;
+
+  return (
+    <>
+      <h2>{title}</h2>
+      <Form autoComplete="false" onSubmit={handleSubmit}>
+        <div className="row mb-1">
+          <FormGroup className="col-md-6 col-12">
+            <Label for="lastName">First Name</Label>
+            <Input
+              type="text"
+              name="firstName"
+              id="firstName"
+              required={true}
+              value={person.firstName || ""}
+              onChange={handleChange}
+            />
+          </FormGroup>
+          <FormGroup className="col-md-6 col-12">
+            <Label for="lastName">Last Name</Label>
+            <Input
+              type="text"
+              name="lastName"
+              id="lastName"
+              required={true}
+              value={person.lastName || ""}
+              onChange={handleChange}
+            />
+          </FormGroup>
+        </div>
+        <div className="row mb-3">
+          <FormGroup className="col-md-4 col-12">
+            <Label for="birthOfDate">Birth Of Date</Label>
+            <Input
+              type="date"
+              name="birthOfDate"
+              id="birthOfDate"
+              value={person.birthOfDate || ""}
+              onChange={handleChange}
+            />
+          </FormGroup>
+          <FormGroup className="col-md-5 col-12">
+            <Label for="email">Email</Label>
+            <Input
+              type="email"
+              name="email"
+              id="email"
+              value={person.email || ""}
+              onChange={handleChange}
+            />
+          </FormGroup>
+          <FormGroup className="col-md-3 col-12">
+            <Label for="phoneNumber">PhoneNumber</Label>
+            <Input
+              type="text"
+              name="phoneNumber"
+              id="phoneNumber"
+              value={person.phoneNumber || ""}
+              onChange={handleChange}
+            />
+          </FormGroup>
+        </div>
+        <FormGroup>
+          <Label for="line1">Address Line1</Label>
+          <Input
+            type="text"
+            name="address.line1"
+            id="line1"
+            value={person.address.line1}
+            onChange={handleAddressLine1}
+          />
+        </FormGroup>
+        <FormGroup>
+          <Label for="line2">Address Line2</Label>
+          <Input
+            type="text"
+            name="address.line2"
+            id="line2"
+            value={person.address.line2 || ""}
+            onChange={handleAddressLine2}
+          />
+        </FormGroup>
+        <div className="row mb-3">
+          <FormGroup className="col-md-4 col-12">
+            <Label for="street">Street</Label>
+            <Input
+              type="text"
+              name="address.street"
+              id="street"
+              value={person.address.street || ""}
+              onChange={handleAddressStreet}
+            />
+          </FormGroup>
+          <FormGroup className="col-md-5 col-12">
+            <Label for="city">City</Label>
+            <Input
+              type="text"
+              name="address.city"
+              id="city"
+              value={person.address.city || ""}
+              onChange={handleAddressCity}
+            />
+          </FormGroup>
+          <FormGroup className="col-md-3 col-12">
+            <Label for="country">Zip Code</Label>
+            <Input
+              type="text"
+              name="address.zipCode"
+              id="zipCode"
+              value={person.address.zipCode || ""}
+              onChange={handleAddressZipCode}
+            />
+          </FormGroup>
+        </div>
+        <FormGroup>
+          <Button color="primary" type="submit">
+            Save
+          </Button>{" "}
+          <Button color="secondary" tag={Link} to="/groups">
+            Cancel
+          </Button>
+        </FormGroup>
+      </Form>
+    </>
+  );
+};
+
+export default ContactEditPage;

ui/src/contacts/ContactList.tsx

@@ -0,0 +1,68 @@
+import { Button, ButtonGroup, Table } from "reactstrap";
+import { PersonSummary } from "./Model";
+import { Link } from "react-router-dom";
+import moment from "moment";
+
+interface ContactListProps {
+  persons: PersonSummary[];
+  setPersons: (data: PersonSummary[]) => void;
+}
+
+const ContactListLines = ({ persons, setPersons }: ContactListProps) => {
+  const remove = async (id: string) => {
+    await fetch(`/persons/${id}`, {
+      method: "DELETE",
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+      },
+    }).then(() => {
+      let updatedGroups = [...persons].filter((i) => i.id !== id);
+      setPersons(updatedGroups);
+    });
+  };
+
+  return persons.map((person) => {
+    return (
+      <tr key={person.id}>
+        <td style={{ whiteSpace: "nowrap" }}>{person.name}</td>
+        <td>{person.email}</td>
+        <td>{moment(person.birthOfDate).format("YYYY/MM/DD")}</td>
+        <td>
+          <ButtonGroup>
+            <Button
+              size="sm"
+              color="primary"
+              tag={Link}
+              to={"/contacts/" + person.id}
+            >
+              Edit
+            </Button>
+            <Button size="sm" color="danger" onClick={() => remove(person.id)}>
+              Delete
+            </Button>
+          </ButtonGroup>
+        </td>
+      </tr>
+    );
+  });
+};
+
+export const ContactList: React.FC<ContactListProps> = ({
+  persons,
+  setPersons,
+}: ContactListProps) => {
+  return (
+    <Table className="mt-4">
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Email</th>
+          <th>Birth Of Date</th>
+          <th>Actions</th>
+        </tr>
+      </thead>
+      <tbody>{ContactListLines({persons, setPersons})}</tbody>
+    </Table>
+  );
+};