edit person page. remove invoicedItems on logout

media-store/app/src/components/Header.js

@@ -24,7 +24,14 @@ const RELOAD_LOCATION_NUMBER = 0;
 const Header = () => {
   const history = useHistory();
   const location = useLocation();
-  const { user, invoicedItems, locale, setLocale, loading } = useAppState();
+  const {
+    user,
+    invoicedItems,
+    setInvoicedItems,
+    locale,
+    setLocale,
+    loading,
+  } = useAppState();
   const currentKey = [keys.find((key) => key === location.pathname)];
   const haveInvoicedItems = !isEmpty(invoicedItems);
   const invoicedItemsLength = invoicedItems.length;
@@ -48,7 +55,7 @@ const Header = () => {
 
   const onUserLogout = () => {
     emitter.emit("UPDATE_USER", undefined);
-    history.push("/");
+    history.go(0);
   };
 
   return (

media-store/app/src/pages/Login.js

@@ -29,7 +29,6 @@ const Login = () => {
   const { handleError } = useErrors();
 
   const onFinish = (values) => {
-    console.log("Validation Success:", values);
     setLoading(true);
     login({ email: values.email, password: values.password })
       .then((response) => {

media-store/app/src/pages/PersonPage.js

@@ -1,10 +1,9 @@
-import React, { useState, useMemo } from "react";
-import { Card, Button, message } from "antd";
-import { omit } from "lodash";
+import React, { useState } from "react";
+import { Form, Button, message, Input } from "antd";
+import { omit, map } from "lodash";
 import { fetchPerson, confirmPerson } from "../api/calls";
 import { useErrors } from "../hooks/useErrors";
 import { useAppState } from "../hooks/useAppState";
-import { Editable } from "../components/Editable";
 import { MESSAGE_TIMEOUT } from "../util/constants";
 import { useAbortableEffect } from "../hooks/useAbortableEffect";
 
@@ -25,7 +24,7 @@ const PERSON_PROP = {
 const PersonPage = () => {
   const { setLoading } = useAppState();
   const { handleError } = useErrors();
-  const [initialPerson, setInitialPerson] = useState({});
+  const [form] = Form.useForm();
   const [person, setPerson] = useState({
     lastName: "",
     firstName: "",
@@ -47,7 +46,6 @@ const PersonPage = () => {
       .then(({ data: personData }) => {
         personData = omit(personData, "@odata.context", "ID");
         if (!status.aborted) {
-          setInitialPerson(personData);
           setPerson(personData);
         }
       })
@@ -55,67 +53,58 @@ const PersonPage = () => {
       .finally(() => setLoading(false));
   }, []);
 
-  const onConfirmChanges = () => {
+  const onConfirmChanges = (newPerson) => {
     setLoading(true);
-    confirmPerson(person)
+    confirmPerson(newPerson)
       .then(() => {
-        setInitialPerson(person);
         message.success("Person successfully updated", MESSAGE_TIMEOUT);
       })
       .catch(handleError)
       .finally(() => setLoading(false));
   };
-  const isPersonChanged = useMemo(() => {
-    const keysOne = Object.keys(initialPerson);
-    const keysTwo = Object.keys(person);
-    if (keysOne.length !== keysTwo.length) {
-      return true;
-    }
 
-    for (let key of keysOne) {
-      if (initialPerson[key] !== person[key]) {
-        return true;
-      }
-    }
+  const personProperties = map(Object.keys(person), (currentKey) => (
+    <Form.Item
+      key={currentKey}
+      label={PERSON_PROP[currentKey]}
+      name={currentKey}
+    >
+      <Input />
+    </Form.Item>
+  ));
 
-    return false;
-  }, [person, initialPerson]);
-
-  const personProperties = Object.keys(person).reduce((acc, currentKey) => {
-    if (currentKey === "email") {
-      return acc;
-    }
-    return acc.concat([
-      <div key={currentKey}>
-        {PERSON_PROP[currentKey]}
-        <Editable
-          type="text"
-          value={person[currentKey]}
-          onChange={(value) =>
-            setPerson({ ...person, [`${currentKey}`]: value })
-          }
-        />
-      </div>,
-    ]);
-  }, []);
+  console.log(person, "person");
 
   return (
     <>
-      <Card title={`${person.lastName} ${person.firstName}`}>
-        {personProperties}
-        <div>
-          Email: <span style={{ fontWeight: 600 }}>{person.email}</span>
-        </div>
-        {isPersonChanged && (
-          <Button
+      {person.lastName !== "" && (
+        <Form
+          form={form}
+          labelCol={{
+            span: 4,
+          }}
+          wrapperCol={{
+            span: 14,
+          }}
+          layout="horizontal"
+          onFinish={onConfirmChanges}
+          onFinishFailed={() => console.log("Not valid params provided")}
+          initialValues={{
+            ...person,
+          }}
+        >
+          {personProperties}
+          <Form.Item
             type="primary"
-            style={{ margin: 10 }}
-            onClick={onConfirmChanges}
+            wrapperCol={{
+              span: 14,
+              offset: 4,
+            }}
           >
-            Confirm changes
-          </Button>
-        )}
-      </Card>
+            <Button onClick={() => form.submit()}>Confirm changes</Button>
+          </Form.Item>
+        </Form>
+      )}
     </>
   );
 };

media-store/app/src/pages/manage-store/TrackForm.js

@@ -13,10 +13,6 @@ const REQUIRED = [
     message: "This filed is required!",
   },
 ];
-const PRICE_INPUT_RULE = {
-  pattern: /^(?:\d*\.\d\d)$/,
-  message: "Price should have precision 2 and dot separator!",
-};
 
 const getAlbums = function (value) {
   return fetchAlbumsByName(value, ALBUMS_LIMIT)