Add Graph component

client/src/App.js

@@ -1,13 +1,15 @@
 import React , { useState, Fragment } from 'react';
-import { Info } from './Info/Info'
-import { Form } from './Form/Form'
+import { Content } from './Content/Content'
 import './App.css';
 
 function useView() {
   const [ view, setView ] = useState('Info');
 
   const changeView = (e) => {
     const newValue = e.target.value;
+    if( newValue === view) {
+      return
+    }
     setView(newValue);
   }
   return [ view, changeView ]
@@ -16,33 +18,34 @@ function useView() {
 function App() {
   const [ view, chageView ] = useView();
 
-  const currentView = (view) => {
-    if(view === 'Info')
-      return <Info />;
-    if(view === 'Home')
-      return <Form />;
-  }
-
   return (
     <Fragment>
-      <div className="space-x-4">
-        <ul>
-          <li className="shadow-sm">
-            <input type="button"
+      <div className="flex flex-row h-screen w-screen">
+        <ul className="flex flex-col bg-gray-100 h-1/2 w-1/6">
+          <li className="bg-green-100 p-1 hover:bg-green-300 text-center cursor-pointer">
+            <input id="Home"
+                   className="bg-transparent"
+                   type="button"
                    onClick={chageView}
                    value="Home"/>
           </li>
-          <li className="shadow-lg">
-            <input type="button"
+          <li className="bg-green-100 p-1 hover:bg-green-300 text-center cursor-pointer">
+            <input id="Info"
+                   className="bg-transparent"
+                   type="button"
                    onClick={chageView}
                    value="Info"/>
           </li>
+          <li className="bg-green-100 p-1 hover:bg-green-300 text-center cursor-pointer">
+            <input id="Graph"
+                   className="bg-transparent"
+                   type="button"
+                   onClick={chageView}
+                   value="Graph"/>
+          </li>
         </ul>
-      </div>
-      <div className="w-20 h-10 bg-red">
-        <form />
-        <div>
-          {currentView(view)}
+        <div className="bg-gray-200 flex-auto h-1/2 p-10">
+          <Content view={view} />
         </div>
       </div>
     </Fragment>

client/src/Content/Content.jsx

@@ -0,0 +1,23 @@
+import React  from 'react';
+import { Info } from '../Info/Info'
+import { Form } from '../Form/Form'
+import { Graph } from '../Graph/Graph'
+
+function Content(props) {
+  const currentView = ({view}) => {
+    if(view === 'Info')
+      return <Info />;
+    if(view === 'Home')
+      return <Form />;
+    if(view === 'Graph')
+      return <Graph />;
+  }
+
+  return (
+    <div className="w-60">
+        {currentView(props)}
+    </div>
+  )
+
+}
+export { Content };

client/src/Form/Form.jsx

@@ -2,20 +2,19 @@ import React from 'react';
 
 function Form(){
     return (
-        <div class="container">
-            <form method="#" class="container--form">
+        <div>
+            <form method="POST">
                 <div>
-                    <label for="upgrade_file">
-                        Select the file to send
+                    <label htmlFor="upgrade_file">
+                      Select the file to send:
+                        <input type="file"
+                            id="upgrade_file"
+                            name="upgrade_file"
+                            accept=".csv, .json, .xml"/>
                     </label>
-                    <input type="file"
-                        id="upgrade_file"
-                        name="upgrade_file"
-                        className="upgrade_file"
-                        accept=".csv, .json, .xml"/>
                 </div>
                 <div>
-                    <button class="container--submit">Submit</button>
+                    <button>Submit</button>
                 </div>
             </form>
         </div>

client/src/Graph/Graph.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+async function fetchData(host) {
+  const headers = new Headers({
+    'Access-Control-Allow-Origin': host
+  });
+
+  const init = {
+    method: 'GET',
+    headers: headers,
+    mode: 'cors'
+  };
+
+  const response = await fetch(host,init);
+
+  if(!response.ok) {
+    const message = `An error has occured: ${response.status}`;
+    throw new Error(message);
+  }
+
+  const data = await response.json();
+
+  return data;
+}
+
+function Graph(){
+  return (
+    <p>
+      Graph is work!
+    </p>
+  )
+}
+
+export { Graph };

client/src/Info/Info.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
-class Info extends React.Component {
-  render() {
+function Info() {
     return (
       <p>
         RAIN es una aplicaión que desea ayudar a personas que
@@ -11,7 +10,6 @@ class Info extends React.Component {
         hace usando Machine Learning.
       </p>
     );
-  }
 }
 
 export { Info };