Dev

task-01/src/App.js

@@ -3,23 +3,17 @@ 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>

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}
                 >

task-01/src/containers/ClassForm.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { deleteContactData as deleteContactData, submitContact } from '../libs/dataFlow';
+import { setContactData, deleteContactData } from '../libs/contactAPI';
 import { Text, Input, TextArea } from '../libs/language';
 import './ClassForm.css';
 
@@ -15,36 +15,30 @@ 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);
+        setContactData(this.state.contactData, 1);
     }
 
     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() {
-        deleteContactData();
+        deleteContactData(1);
     }
 
     render() {
-        return (
-            <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>
-            </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
         )
     }
 }

task-01/src/containers/Form.js

@@ -1,37 +1,39 @@
 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 ( isloading ? <div>Loading...</div> : (
-    <div {...props}>
+  return (props.isActive ? (isloading ? <div>Loading...</div> : (
+    <div>
       <div className="form">
         <form onSubmit={handleSubmit}>
           <div className="fields">
@@ -42,20 +44,20 @@ 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>
-          <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)
+
 
 
 }

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>  
     )

task-01/src/containers/Static.js

@@ -9,11 +9,11 @@ function Static(props) {
         arr.push(text);
     }
 
-    return (
-        <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>
+        </div>) : null
     )
 }
 

task-01/src/containers/TabContent.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import Form from "./Form";
+import Static from "./Static";
+import ClassForm from "./ClassForm";
+import '../App.css'
+
+export default function TabContent(props) {
+    return (
+        <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>
+    )
+}

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 handleClick(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={handleClick}>
+            {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>
     )
 }

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})
+}

task-01/src/libs/fetchAPI.js

@@ -0,0 +1,20 @@
+export default async function fetchAPI(method, url, body = null) {
+
+    const requestOptions = {
+        method: method,
+        headers: { 'Content-Type': 'application/json' },
+        body: body ? JSON.stringify(body) : null
+    }
+
+    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;
+
+
+}