From ef985ae0626b463e3b785357df834d04fc8cedc4 Mon Sep 17 00:00:00 2001
From: Konrad Zapotoczny <Konrad_Zapotoczny@epam.com>
Date: Fri, 29 Oct 2021 14:46:01 +0200
Subject: [PATCH 1/5] TabContent component created, changed the way tabs work

---
 task-01/src/App.js                   | 16 ++++------
 task-01/src/containers/ClassForm.js  |  6 ++--
 task-01/src/containers/Form.js       |  4 +--
 task-01/src/containers/NavBar.js     |  2 +-
 task-01/src/containers/Static.js     |  4 +--
 task-01/src/containers/TabContent.js | 15 ++++++++++
 task-01/src/containers/Tabs.js       | 45 +++++++---------------------
 7 files changed, 38 insertions(+), 54 deletions(-)
 create mode 100644 task-01/src/containers/TabContent.js

diff --git a/task-01/src/App.js b/task-01/src/App.js
index c8a2968..dec8e30 100644
--- a/task-01/src/App.js
+++ b/task-01/src/App.js
@@ -1,25 +1,19 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { LanguageProvider } from './libs/language';
 import './App.css';
 import ErrorBoundary from './components/ErrorBoundary';
 import NavBar from './containers/NavBar';
-import Form from './containers/Form';
-import Static from './containers/Static';
-import ClassForm from './containers/ClassForm';
+import TabContent from './containers/TabContent';
 
 function App() {
-  const [tabContentClassName, setTabContentClassName] = useState({form: "tab-content active", static: "tab-content", classForm: "tab-content"});
+  const [activeTab, setActiveTab] = useState("form");
   
   return (
     <div className="App">
       <ErrorBoundary>
         <LanguageProvider>
-          <NavBar className="NavBar" setTabContentClassName={setTabContentClassName} />
-          <div className="App-content">
-            <Form id="form-content" className={tabContentClassName["form"]} />
-            <Static id="static-content" className={tabContentClassName["static"]} />
-            <ClassForm id="classform-content" className={tabContentClassName["classForm"]}/>
-          </div>
+          <NavBar className="NavBar" activeTab={activeTab} setActiveTab={setActiveTab} />
+          <TabContent className="App-content" activetab={activeTab}/>
         </LanguageProvider>
       </ErrorBoundary>
     </div>
diff --git a/task-01/src/containers/ClassForm.js b/task-01/src/containers/ClassForm.js
index 90fba24..7a4aa7b 100644
--- a/task-01/src/containers/ClassForm.js
+++ b/task-01/src/containers/ClassForm.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { deleteContactData as deleteContactData, submitContact } from '../libs/dataFlow';
+import { deleteContactData, submitContact } from '../libs/dataFlow';
 import { Text, Input, TextArea } from '../libs/language';
 import './ClassForm.css';
 
@@ -33,7 +33,7 @@ export default class ClassForm extends Component {
     }
 
     render() {
-        return (
+        return (this.props.isactive ? (
             <div id={this.props.id} className={this.props.className}>
                 <div className="classForm">
                     <form onSubmit={this.onSubmit}>
@@ -44,7 +44,7 @@ export default class ClassForm extends Component {
                     </form>
                     <button id="deleteContactData" onClick={this.onDelete}><Text tid="deleteContactData" /></button>
                 </div>
-            </div>
+            </div>) : null
         )
     }
 }
diff --git a/task-01/src/containers/Form.js b/task-01/src/containers/Form.js
index a0a361a..f708088 100644
--- a/task-01/src/containers/Form.js
+++ b/task-01/src/containers/Form.js
@@ -30,7 +30,7 @@ export default function Form(props){
     dispatch(action);
   }
 
-  return ( isloading ? <div>Loading...</div> : (
+  return ( props.isactive ? (isloading ? <div>Loading...</div> : (
     <div {...props}>
       <div className="form">
         <form onSubmit={handleSubmit}>
@@ -54,7 +54,7 @@ export default function Form(props){
         <button id="loguserdata" onClick={() => console.log("userdata from click",userData)}>log userData</button>
       </div>
     </div>
-  ))
+  )) : null)
   
 
 
diff --git a/task-01/src/containers/NavBar.js b/task-01/src/containers/NavBar.js
index f67de0d..53f79d5 100644
--- a/task-01/src/containers/NavBar.js
+++ b/task-01/src/containers/NavBar.js
@@ -6,7 +6,7 @@ import "./NavBar.css";
 export default function NavBar(props){
     return (
         <div className="navBar">
-            <Tabs setTabContentClassName={props.setTabContentClassName}/>
+            <Tabs setTabContentClassName={props.setTabContentClassName} activeTab={props.activeTab} setActiveTab={props.setActiveTab}/>
             <LanguageSelector className="lang"/>
         </div>  
     )
diff --git a/task-01/src/containers/Static.js b/task-01/src/containers/Static.js
index ae7d0b5..806794d 100644
--- a/task-01/src/containers/Static.js
+++ b/task-01/src/containers/Static.js
@@ -9,11 +9,11 @@ function Static(props) {
         arr.push(text);
     }
 
-    return (
+    return ( props.isactive ? (
         <div {...props}>
             <Text tid="selectedLanguage"/><br/><br/>
             {Object.entries(arr).map(([id,text]) => <Text key={id} id={id} tid={text} />)}
-        </div>
+        </div>) : null
     )
 }
 
diff --git a/task-01/src/containers/TabContent.js b/task-01/src/containers/TabContent.js
new file mode 100644
index 0000000..d9f060e
--- /dev/null
+++ b/task-01/src/containers/TabContent.js
@@ -0,0 +1,15 @@
+import React, { useState } from 'react'
+import Form from "./Form";
+import Static from "./Static";
+import ClassForm from "./ClassForm";
+import '../App.css'
+
+export default function TabContent(props) {
+    return (
+        <div {...props}>
+            <Form isactive={props.activetab==="form" ? true : undefined}/>
+            <Static isactive={props.activetab==="static" ? true : undefined}/>
+            <ClassForm isactive={props.activetab==="classForm" ? true : undefined}/>
+        </div>
+    )
+}
diff --git a/task-01/src/containers/Tabs.js b/task-01/src/containers/Tabs.js
index 7ce914e..a71f94e 100644
--- a/task-01/src/containers/Tabs.js
+++ b/task-01/src/containers/Tabs.js
@@ -1,52 +1,27 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import './Tabs.css';
 
-function onClick(id, setActive) {
-    setActive(id);
-}
 
 function Tab(props) {
+
+    function onClick(e) {
+        props.setActiveTab(e.target.id);
+    }
+
     return (
-        <div className={props.className} id={props.id} onClick={() => onClick(props.id, props.setActive)}>
-            {props.name}
+        <div className={props.className} id={props.id} onClick={onClick}>
+            {props.id}
         </div>
     )
 }
 
 export default function Tabs(props) {
-    const [active, setActive] = useState("form");
-    const [className, setClassName] = useState({ form: "tab active", static: "tab", classForm: "tab" });
-    const setTabContentClassName = props.setTabContentClassName;
-
-    useEffect(() => {
-        switch (active) {
-            case "form":
-                setClassName({ form: "tab active", static: "tab", classForm: "tab" });
-                setTabContentClassName({ form: "tab-content active", static: "tab-content", classForm: "tab-content" });
-                break;
-            case "static":
-                setClassName({ form: "tab", static: "tab active", classForm: "tab" });
-                setTabContentClassName({ form: "tab-content", static: "tab-content active", classForm: "tab-content" });
-                break;
-            case "classForm":
-                setClassName({ form: "tab", static: "tab", classForm: "tab active" });
-                setTabContentClassName({ form: "tab-content", static: "tab-content", classForm: "tab-content active" });
-                break;
-            default:
-                setClassName({ form: "tab active", static: "tab", classForm: "tab" });
-                setTabContentClassName({ form: "tab-content active", static: "tab-content", classForm: "tab-content" });
-        }
-    }, [active, setTabContentClassName])
 
-    const tabList = {
-        form: { name: "form", className: "tab active" },
-        static: { name: "static", className: "tab" },
-        classForm: { name: "classForm", className: "tab" }
-    }
+    const TAB_ID = ["form", "static", "classForm"];
 
     return (
         <div className="tabs">
-            {Object.entries(tabList).map(([id, obj]) => <Tab key={id} className={className[id]} id={id} name={obj.name} setActive={setActive} />)}
+            {TAB_ID.map(id => <Tab key={id} className={`tab ${props.activeTab === id ? "active" : ""}`} id={id} setActiveTab={props.setActiveTab} />)}
         </div>
     )
 }
\ No newline at end of file

From a5c72b2e872eef35d6f4cf50a5b7d6e260d34c73 Mon Sep 17 00:00:00 2001
From: Konrad Zapotoczny <Konrad_Zapotoczny@epam.com>
Date: Fri, 29 Oct 2021 14:51:54 +0200
Subject: [PATCH 2/5] fixed console warnings

---
 task-01/src/App.js                   | 2 +-
 task-01/src/containers/TabContent.js | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/task-01/src/App.js b/task-01/src/App.js
index dec8e30..fdc2a75 100644
--- a/task-01/src/App.js
+++ b/task-01/src/App.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { LanguageProvider } from './libs/language';
 import './App.css';
 import ErrorBoundary from './components/ErrorBoundary';
diff --git a/task-01/src/containers/TabContent.js b/task-01/src/containers/TabContent.js
index d9f060e..1105bca 100644
--- a/task-01/src/containers/TabContent.js
+++ b/task-01/src/containers/TabContent.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React from 'react'
 import Form from "./Form";
 import Static from "./Static";
 import ClassForm from "./ClassForm";
@@ -7,9 +7,9 @@ import '../App.css'
 export default function TabContent(props) {
     return (
         <div {...props}>
-            <Form isactive={props.activetab==="form" ? true : undefined}/>
-            <Static isactive={props.activetab==="static" ? true : undefined}/>
-            <ClassForm isactive={props.activetab==="classForm" ? true : undefined}/>
+            <Form isactive={props.activetab==="form" ? "true" : undefined}/>
+            <Static isactive={props.activetab==="static" ? "true" : undefined}/>
+            <ClassForm isactive={props.activetab==="classForm" ? "true" : undefined}/>
         </div>
     )
 }

From b2f107b322cb27e3f44811721f0fe021169ce105 Mon Sep 17 00:00:00 2001
From: Konrad Zapotoczny <Konrad_Zapotoczny@epam.com>
Date: Fri, 29 Oct 2021 15:31:45 +0200
Subject: [PATCH 3/5] fixed accessibility warnings, removed useless props
 passing

---
 task-01/src/App.js                         |  2 +-
 task-01/src/components/LanguageSelector.js |  1 +
 task-01/src/containers/ClassForm.js        | 26 +++++++++-------------
 task-01/src/containers/Form.js             | 12 +++++-----
 task-01/src/containers/Static.js           |  4 ++--
 task-01/src/containers/TabContent.js       |  9 ++++----
 task-01/src/containers/Tabs.js             |  4 ++--
 7 files changed, 27 insertions(+), 31 deletions(-)

diff --git a/task-01/src/App.js b/task-01/src/App.js
index fdc2a75..79e1fb5 100644
--- a/task-01/src/App.js
+++ b/task-01/src/App.js
@@ -13,7 +13,7 @@ function App() {
       <ErrorBoundary>
         <LanguageProvider>
           <NavBar className="NavBar" activeTab={activeTab} setActiveTab={setActiveTab} />
-          <TabContent className="App-content" activetab={activeTab}/>
+          <TabContent className="App-content" activeTab={activeTab}/>
         </LanguageProvider>
       </ErrorBoundary>
     </div>
diff --git a/task-01/src/components/LanguageSelector.js b/task-01/src/components/LanguageSelector.js
index 5a130d1..06cc1ff 100644
--- a/task-01/src/components/LanguageSelector.js
+++ b/task-01/src/components/LanguageSelector.js
@@ -13,6 +13,7 @@ export default function LanguageSelector(props){
         <div {...props}>
             <div className="langtext"><Text tid="language"/></div>
             <select
+                aria-label="Language Selector"
                 onChange={handleLanguageChange}
                 value={userLanguage}
                 >
diff --git a/task-01/src/containers/ClassForm.js b/task-01/src/containers/ClassForm.js
index 7a4aa7b..f3575d3 100644
--- a/task-01/src/containers/ClassForm.js
+++ b/task-01/src/containers/ClassForm.js
@@ -15,17 +15,13 @@ export default class ClassForm extends Component {
         this.onDelete = this.onDelete.bind(this);
     }
 
-    componentDidUpdate(){
-        console.log("state: ", this.state.contactData);
-    }
-
     onSubmit(e) {
         e.preventDefault();
         submitContact(e, this.state.contactData);
     }
 
     onChange(e) {
-        this.setState({contactData: {...this.state.contactData, [e.target.name]: e.target.value}});
+        this.setState({ contactData: { ...this.state.contactData, [e.target.name]: e.target.value } });
     }
 
     onDelete() {
@@ -33,17 +29,15 @@ export default class ClassForm extends Component {
     }
 
     render() {
-        return (this.props.isactive ? (
-            <div id={this.props.id} className={this.props.className}>
-                <div className="classForm">
-                    <form onSubmit={this.onSubmit}>
-                        <Input id="contactName" name="name" tid="contactName" onChange={this.onChange}/><br/>
-                        <Input id="contactEmail" name="email" tid="contactEmail" onChange={this.onChange}/><br/>
-                        <TextArea type="text" id="contactContent" name="content" tid="contactContent" onChange={this.onChange}/><br/>
-                        <button id="contactButton" onClick={onsubmit}><Text tid="submit" /></button>
-                    </form>
-                    <button id="deleteContactData" onClick={this.onDelete}><Text tid="deleteContactData" /></button>
-                </div>
+        return (this.props.isActive ? (
+            <div className="classForm">
+                <form onSubmit={this.onSubmit}>
+                    <Input id="contactName" name="name" tid="contactName" onChange={this.onChange} /><br />
+                    <Input id="contactEmail" name="email" tid="contactEmail" onChange={this.onChange} /><br />
+                    <TextArea type="text" id="contactContent" name="content" tid="contactContent" onChange={this.onChange} /><br />
+                    <button id="contactButton" onClick={onsubmit}><Text tid="submit" /></button>
+                </form>
+                <button id="deleteContactData" onClick={this.onDelete}><Text tid="deleteContactData" /></button>
             </div>) : null
         )
     }
diff --git a/task-01/src/containers/Form.js b/task-01/src/containers/Form.js
index f708088..2e6616e 100644
--- a/task-01/src/containers/Form.js
+++ b/task-01/src/containers/Form.js
@@ -30,8 +30,8 @@ export default function Form(props){
     dispatch(action);
   }
 
-  return ( props.isactive ? (isloading ? <div>Loading...</div> : (
-    <div {...props}>
+  return ( props.isActive ? (isloading ? <div>Loading...</div> : (
+    <div>
       <div className="form">
         <form onSubmit={handleSubmit}>
           <div className="fields">
@@ -42,10 +42,10 @@ export default function Form(props){
               <label><Text tid="eyeColor" /></label><br />
             </div>
             <div className="inputs">
-              <input type="text" id="firstName" defaultValue={userData.firstName} onChange={handleChange}/><br />
-              <input type="text" id="lastName" defaultValue={userData.lastName} onChange={handleChange}/><br />
-              <input type="text" id="birthDate" defaultValue={userData.birthDate} onChange={handleChange}/><br />
-              <input type="text" id="eyeColor" defaultValue={userData.eyeColor} onChange={handleChange}/><br />
+              <input aria-label="First Name" type="text" id="firstName" defaultValue={userData.firstName} onChange={handleChange}/><br />
+              <input aria-label="Last Name" type="text" id="lastName" defaultValue={userData.lastName} onChange={handleChange}/><br />
+              <input aria-label="Birth Date" type="text" id="birthDate" defaultValue={userData.birthDate} onChange={handleChange}/><br />
+              <input aria-label="Eye Color" type="text" id="eyeColor" defaultValue={userData.eyeColor} onChange={handleChange}/><br />
             </div>
           </div>
           <button id="submit" type="submit"><Text tid="submit" /></button>
diff --git a/task-01/src/containers/Static.js b/task-01/src/containers/Static.js
index 806794d..2228600 100644
--- a/task-01/src/containers/Static.js
+++ b/task-01/src/containers/Static.js
@@ -9,8 +9,8 @@ function Static(props) {
         arr.push(text);
     }
 
-    return ( props.isactive ? (
-        <div {...props}>
+    return ( props.isActive ? (
+        <div>
             <Text tid="selectedLanguage"/><br/><br/>
             {Object.entries(arr).map(([id,text]) => <Text key={id} id={id} tid={text} />)}
         </div>) : null
diff --git a/task-01/src/containers/TabContent.js b/task-01/src/containers/TabContent.js
index 1105bca..464410c 100644
--- a/task-01/src/containers/TabContent.js
+++ b/task-01/src/containers/TabContent.js
@@ -6,10 +6,11 @@ import '../App.css'
 
 export default function TabContent(props) {
     return (
-        <div {...props}>
-            <Form isactive={props.activetab==="form" ? "true" : undefined}/>
-            <Static isactive={props.activetab==="static" ? "true" : undefined}/>
-            <ClassForm isactive={props.activetab==="classForm" ? "true" : undefined}/>
+        <div className={props.className}>
+            <Form isActive={props.activeTab==="form" ? "true" : undefined}/>
+            <Static isActive={props.activeTab==="static" ? "true" : undefined}/>
+            <ClassForm isActive={props.activeTab==="classForm" ? "true" : undefined}/>
+            
         </div>
     )
 }
diff --git a/task-01/src/containers/Tabs.js b/task-01/src/containers/Tabs.js
index a71f94e..bda7c33 100644
--- a/task-01/src/containers/Tabs.js
+++ b/task-01/src/containers/Tabs.js
@@ -4,12 +4,12 @@ import './Tabs.css';
 
 function Tab(props) {
 
-    function onClick(e) {
+    function handleClick(e) {
         props.setActiveTab(e.target.id);
     }
 
     return (
-        <div className={props.className} id={props.id} onClick={onClick}>
+        <div className={props.className} id={props.id} onClick={handleClick}>
             {props.id}
         </div>
     )

From c04d883671440654497ffce2e8ef005fb325f31f Mon Sep 17 00:00:00 2001
From: Konrad Zapotoczny <Konrad_Zapotoczny@epam.com>
Date: Sat, 30 Oct 2021 15:27:05 +0200
Subject: [PATCH 4/5] created fetchAPI, separated formAPI, next will have to
 separate contactAPI

---
 task-01/src/containers/Form.js | 42 +++++++++++----------
 task-01/src/libs/dataFlow.js   | 67 +++++++++++++++++-----------------
 task-01/src/libs/fetchAPI.js   | 24 ++++++++++++
 task-01/src/libs/formAPI.js    | 14 +++++++
 4 files changed, 94 insertions(+), 53 deletions(-)
 create mode 100644 task-01/src/libs/fetchAPI.js
 create mode 100644 task-01/src/libs/formAPI.js

diff --git a/task-01/src/containers/Form.js b/task-01/src/containers/Form.js
index 2e6616e..2d1b702 100644
--- a/task-01/src/containers/Form.js
+++ b/task-01/src/containers/Form.js
@@ -1,36 +1,38 @@
 import React, { useState, useReducer, useEffect } from "react";
 import { Text } from "../libs/language";
 import { reducer } from "../libs/reducer";
-import { loadData, submitData } from "../libs/dataFlow";
 import './Form.css';
+import { editUser, loadUser } from "../libs/formAPI";
 
-export default function Form(props){
+export default function Form(props) {
   const [userData, dispatch] = useReducer(reducer, {
-      firstName: "",
-      lastName: "",
-      birthDate: "",
-      eyeColor: ""
+    firstName: "",
+    lastName: "",
+    birthDate: "",
+    eyeColor: ""
   });
   const [isloading, setIsLoading] = useState(true);
 
   useEffect(() => {
-    loadData(setIsLoading).then(d => dispatch({type: "setData", payload: d}));
-  },[])
+    loadUser()
+    .then(d => { dispatch({type: "setData", payload: d})})
+    .finally(setIsLoading(false));
+  }, [])
 
-  function handleSubmit(ev){
-    submitData(ev, userData);
+  function handleSubmit(e) {
+    editUser(e, userData, 1);
   }
 
-  function handleChange(ev){
+  function handleChange(ev) {
     console.log("change made in: " + ev.target.id + ". Value: " + ev.target.value);
     const action = {
       type: "fieldChange",
-      payload: {name: [ev.target.id], value: [ev.target.value]},
+      payload: { name: [ev.target.id], value: [ev.target.value] },
     }
     dispatch(action);
   }
 
-  return ( props.isActive ? (isloading ? <div>Loading...</div> : (
+  return (props.isActive ? (isloading ? <div>Loading...</div> : (
     <div>
       <div className="form">
         <form onSubmit={handleSubmit}>
@@ -42,20 +44,20 @@ export default function Form(props){
               <label><Text tid="eyeColor" /></label><br />
             </div>
             <div className="inputs">
-              <input aria-label="First Name" type="text" id="firstName" defaultValue={userData.firstName} onChange={handleChange}/><br />
-              <input aria-label="Last Name" type="text" id="lastName" defaultValue={userData.lastName} onChange={handleChange}/><br />
-              <input aria-label="Birth Date" type="text" id="birthDate" defaultValue={userData.birthDate} onChange={handleChange}/><br />
-              <input aria-label="Eye Color" type="text" id="eyeColor" defaultValue={userData.eyeColor} onChange={handleChange}/><br />
+              <input aria-label="First Name" type="text" id="firstName" defaultValue={userData.firstName} onChange={handleChange} /><br />
+              <input aria-label="Last Name" type="text" id="lastName" defaultValue={userData.lastName} onChange={handleChange} /><br />
+              <input aria-label="Birth Date" type="text" id="birthDate" defaultValue={userData.birthDate} onChange={handleChange} /><br />
+              <input aria-label="Eye Color" type="text" id="eyeColor" defaultValue={userData.eyeColor} onChange={handleChange} /><br />
             </div>
           </div>
           <button id="submit" type="submit"><Text tid="submit" /></button>
-          <p>{}</p>
+          <p>{ }</p>
         </form>
-        <button id="loguserdata" onClick={() => console.log("userdata from click",userData)}>log userData</button>
+        <button id="loguserdata" onClick={() => console.log("userdata from click", userData)}>log userData</button>
       </div>
     </div>
   )) : null)
-  
+
 
 
 }
\ No newline at end of file
diff --git a/task-01/src/libs/dataFlow.js b/task-01/src/libs/dataFlow.js
index f7bbfaf..4a715e9 100644
--- a/task-01/src/libs/dataFlow.js
+++ b/task-01/src/libs/dataFlow.js
@@ -1,40 +1,41 @@
-export async function loadData(setIsLoading){
-  const response = await fetch('http://localhost:3000/user')
-  .then(response =>{
-    if(response.ok) {
-      return response.json();
-    }
-  })
-  .then(data => {
-    if(data){
-      let d = data[0];
-      return d;
-    }
-  })
-  .catch(error => {
-    console.log("Error fetching data: ",error);
-  })
-  .finally(() => {
-    setIsLoading(false);
-  });
-  return response;
-}
+// export async function loadData(setIsLoading){
+//   const response = await fetch('http://localhost:3000/user')
+//   .then(response =>{
+//     if(response.ok) {
+//       return response.json();
+//     }
+//   })
+//   .then(data => {
+//     if(data){
+//       let d = data[0];
+//       return d;
+//     }
+//   })
+//   .catch(error => {
+//     console.log("Error fetching data: ",error);
+//   })
+//   .finally(() => {
+//     setIsLoading(false);
+//   });
+//   return response[0];
+// }
 
-export async function submitData(e, userData){
-  e.preventDefault();
+// export async function submitData(e, userData){
+//   e.preventDefault();
   
-  const requestOptions = {
-    method: 'PUT',
-    headers: { 'Content-Type': 'application/json' },
-    body: Array(JSON.stringify(userData))
-  };
+//   const requestOptions = {
+//     method: 'PUT',
+//     headers: { 'Content-Type': 'application/json' },
+//     body: Array(JSON.stringify(userData))
+//   };
   
-  fetch('http://localhost:3000/user/1', requestOptions)
-  .then(response => {
-    return response.json();
-  });
+//   fetch('http://localhost:3000/user/1', requestOptions)
+//   .then(response => {
+//     console.log("response uD: ", response);
+//     return response.json();
+//   });
 
-}
+// }
 
 export async function submitContact(e, contactData){
   e.preventDefault();
diff --git a/task-01/src/libs/fetchAPI.js b/task-01/src/libs/fetchAPI.js
new file mode 100644
index 0000000..7c2e96d
--- /dev/null
+++ b/task-01/src/libs/fetchAPI.js
@@ -0,0 +1,24 @@
+export default async function fetchAPI(method, url, body = null) {
+    const requestOptions = {
+        method: method,
+        headers: { 'Content-Type': 'application/json' },
+        body: Array(JSON.stringify(body))
+    }
+
+    if (method !== "GET") {
+        fetch(url, requestOptions)
+            .then(response => {
+                console.log("fetchAPI response: ", response);
+                return response.json();
+            });
+    } else {
+        const response = await fetch(url)
+            .then(response => { return response.json() })
+            .then(data => { if (data) { return data[0] } })
+            .catch(error => {
+                console.log("Error fetching data: ", error);
+            })
+        return response;
+    }
+
+}
\ No newline at end of file
diff --git a/task-01/src/libs/formAPI.js b/task-01/src/libs/formAPI.js
new file mode 100644
index 0000000..a72664b
--- /dev/null
+++ b/task-01/src/libs/formAPI.js
@@ -0,0 +1,14 @@
+import fetchAPI from "./fetchAPI";
+
+const baseUrl = 'http://localhost:3000/user';
+
+export function editUser(e, userData, userID) {
+    e.preventDefault();
+    const url = `${baseUrl}/${userID}`;
+    return fetchAPI("PUT", url, userData);
+}
+
+export async function loadUser(){
+    const url = baseUrl;
+    return fetchAPI("GET", url);
+}
\ No newline at end of file

From 11b3d44557e3b4187fce20109c2b6b20cc346abb Mon Sep 17 00:00:00 2001
From: Konrad Zapotoczny <Konrad_Zapotoczny@epam.com>
Date: Sun, 31 Oct 2021 11:28:01 +0100
Subject: [PATCH 5/5] contactAPI separated, dataFlow deleted (obsolete), still
 have to change deleteContactData in contactAPI

---
 task-01/src/containers/ClassForm.js |  6 +--
 task-01/src/libs/contactAPI.js      | 14 ++++++
 task-01/src/libs/dataFlow.js        | 67 -----------------------------
 task-01/src/libs/fetchAPI.js        | 28 ++++++------
 4 files changed, 29 insertions(+), 86 deletions(-)
 create mode 100644 task-01/src/libs/contactAPI.js
 delete mode 100644 task-01/src/libs/dataFlow.js

diff --git a/task-01/src/containers/ClassForm.js b/task-01/src/containers/ClassForm.js
index f3575d3..67bccda 100644
--- a/task-01/src/containers/ClassForm.js
+++ b/task-01/src/containers/ClassForm.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { deleteContactData, submitContact } from '../libs/dataFlow';
+import { setContactData, deleteContactData } from '../libs/contactAPI';
 import { Text, Input, TextArea } from '../libs/language';
 import './ClassForm.css';
 
@@ -17,7 +17,7 @@ export default class ClassForm extends Component {
 
     onSubmit(e) {
         e.preventDefault();
-        submitContact(e, this.state.contactData);
+        setContactData(this.state.contactData, 1);
     }
 
     onChange(e) {
@@ -25,7 +25,7 @@ export default class ClassForm extends Component {
     }
 
     onDelete() {
-        deleteContactData();
+        deleteContactData(1);
     }
 
     render() {
diff --git a/task-01/src/libs/contactAPI.js b/task-01/src/libs/contactAPI.js
new file mode 100644
index 0000000..cdabdfa
--- /dev/null
+++ b/task-01/src/libs/contactAPI.js
@@ -0,0 +1,14 @@
+import fetchAPI from "./fetchAPI";
+
+const baseUrl = 'http://localhost:3000/contact';
+
+export function setContactData(contactData, userID) {
+    const url = `${baseUrl}/${userID}`;
+    console.log("url", url);
+    return fetchAPI("PUT", url, contactData);
+}
+
+export function deleteContactData(userID) {
+    const url=`${baseUrl}/${userID}`;
+    return fetchAPI("PUT", url, {id: userID})
+}
\ No newline at end of file
diff --git a/task-01/src/libs/dataFlow.js b/task-01/src/libs/dataFlow.js
deleted file mode 100644
index 4a715e9..0000000
--- a/task-01/src/libs/dataFlow.js
+++ /dev/null
@@ -1,67 +0,0 @@
-// export async function loadData(setIsLoading){
-//   const response = await fetch('http://localhost:3000/user')
-//   .then(response =>{
-//     if(response.ok) {
-//       return response.json();
-//     }
-//   })
-//   .then(data => {
-//     if(data){
-//       let d = data[0];
-//       return d;
-//     }
-//   })
-//   .catch(error => {
-//     console.log("Error fetching data: ",error);
-//   })
-//   .finally(() => {
-//     setIsLoading(false);
-//   });
-//   return response[0];
-// }
-
-// export async function submitData(e, userData){
-//   e.preventDefault();
-  
-//   const requestOptions = {
-//     method: 'PUT',
-//     headers: { 'Content-Type': 'application/json' },
-//     body: Array(JSON.stringify(userData))
-//   };
-  
-//   fetch('http://localhost:3000/user/1', requestOptions)
-//   .then(response => {
-//     console.log("response uD: ", response);
-//     return response.json();
-//   });
-
-// }
-
-export async function submitContact(e, contactData){
-  e.preventDefault();
-
-  const requestOptions = {
-    method: 'PUT',
-    headers: { 'Content-Type': 'application/json' },
-    body: Array(JSON.stringify(contactData))
-  };
-
-  fetch('http://localhost:3000/contact/1', requestOptions)
-  .then(response => {
-    return response.json();
-  });
-}
-
-export async function deleteContactData(){
-
-  const requestOptions = {
-    method: 'PUT',
-    headers: { 'Content-Type': 'application/json' },
-    body: Array(JSON.stringify({id: 1}))
-  }
-
-  fetch('http://localhost:3000/contact/1', requestOptions)
-  .then(response => {
-    return response.json();
-  });
-}
\ No newline at end of file
diff --git a/task-01/src/libs/fetchAPI.js b/task-01/src/libs/fetchAPI.js
index 7c2e96d..64ade20 100644
--- a/task-01/src/libs/fetchAPI.js
+++ b/task-01/src/libs/fetchAPI.js
@@ -1,24 +1,20 @@
 export default async function fetchAPI(method, url, body = null) {
+
     const requestOptions = {
         method: method,
         headers: { 'Content-Type': 'application/json' },
-        body: Array(JSON.stringify(body))
+        body: body ? JSON.stringify(body) : null
     }
 
-    if (method !== "GET") {
-        fetch(url, requestOptions)
-            .then(response => {
-                console.log("fetchAPI response: ", response);
-                return response.json();
-            });
-    } else {
-        const response = await fetch(url)
-            .then(response => { return response.json() })
-            .then(data => { if (data) { return data[0] } })
-            .catch(error => {
-                console.log("Error fetching data: ", error);
-            })
-        return response;
-    }
+    console.log("requestOptions", requestOptions);
+    const response = await fetch(url, requestOptions)
+        .then(response => { return response.json() })
+        .then(data => { if (data) { return data[0] } })
+        .catch(error => {
+            console.log("Error fetching data: ", error);
+        })
+
+    return response;
+
 
 }
\ No newline at end of file