init communication and path logic

package-lock.json

@@ -17,6 +17,8 @@
         "@types/react-dom": "^18.0.9",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-router": "^6.4.3",
+        "react-router-dom": "^6.4.3",
         "react-scripts": "5.0.1",
         "typescript": "^4.9.3",
         "web-vitals": "^2.1.4"
@@ -3071,6 +3073,14 @@
         }
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.3.tgz",
+      "integrity": "sha512-ceuyTSs7PZ/tQqi19YZNBc5X7kj1f8p+4DIyrcIYFY9h+hd1OKm4RqtiWldR9eGEvIiJfsqwM4BsuCtRIuEw6Q==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -13937,6 +13947,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.4.3",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.3.tgz",
+      "integrity": "sha512-BT6DoGn6aV1FVP5yfODMOiieakp3z46P1Fk0RNzJMACzE7C339sFuHebfvWtnB4pzBvXXkHP2vscJzWRuUjTtA==",
+      "dependencies": {
+        "@remix-run/router": "1.0.3"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.4.3",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.3.tgz",
+      "integrity": "sha512-MiaYQU8CwVCaOfJdYvt84KQNjT78VF0TJrA17SIQgNHRvLnXDJO6qsFqq8F/zzB1BWZjCFIrQpu4QxcshitziQ==",
+      "dependencies": {
+        "@remix-run/router": "1.0.3",
+        "react-router": "6.4.3"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -18809,6 +18849,11 @@
         "source-map": "^0.7.3"
       }
     },
+    "@remix-run/router": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.3.tgz",
+      "integrity": "sha512-ceuyTSs7PZ/tQqi19YZNBc5X7kj1f8p+4DIyrcIYFY9h+hd1OKm4RqtiWldR9eGEvIiJfsqwM4BsuCtRIuEw6Q=="
+    },
     "@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -26547,6 +26592,23 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
     },
+    "react-router": {
+      "version": "6.4.3",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.3.tgz",
+      "integrity": "sha512-BT6DoGn6aV1FVP5yfODMOiieakp3z46P1Fk0RNzJMACzE7C339sFuHebfvWtnB4pzBvXXkHP2vscJzWRuUjTtA==",
+      "requires": {
+        "@remix-run/router": "1.0.3"
+      }
+    },
+    "react-router-dom": {
+      "version": "6.4.3",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.3.tgz",
+      "integrity": "sha512-MiaYQU8CwVCaOfJdYvt84KQNjT78VF0TJrA17SIQgNHRvLnXDJO6qsFqq8F/zzB1BWZjCFIrQpu4QxcshitziQ==",
+      "requires": {
+        "@remix-run/router": "1.0.3",
+        "react-router": "6.4.3"
+      }
+    },
     "react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",

package.json

@@ -12,6 +12,8 @@
     "@types/react-dom": "^18.0.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router": "^6.4.3",
+    "react-router-dom": "^6.4.3",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.3",
     "web-vitals": "^2.1.4"

src/App.tsx

@@ -1,26 +1,48 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import { Routes, Route, Outlet, Link } from "react-router-dom";
+import { CheckName } from './pages/CheckName';
+import { Home } from './pages/Home';
 
-function App() {
+export default function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <Routes>
+        <Route path="/" element={<Layout />}>
+          <Route index element={<Home />} />
+          <Route path="check-name" element={<CheckName />} />
+          <Route path="*" element={<NoMatch />} />
+        </Route>
+      </Routes>
+  );
+}
+
+function Layout() {
+  return (
+    <div>
+      <nav>
+        <ul>
+          <li>
+            <Link to="/">Home</Link>
+          </li>
+          <li>
+            <Link to="/check-name">Check Name</Link>
+          </li>
+        </ul>
+      </nav>
+      <hr />
+      <Outlet />
     </div>
   );
 }
 
-export default App;
+
+
+
+function NoMatch() {
+  return (
+    <div>
+      <h2>Nothing to see here!</h2>
+      <p>
+        <Link to="/">Go to the home page</Link>
+      </p>
+    </div>
+  );
+}

src/index.tsx

@@ -1,17 +1,13 @@
-import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import { BrowserRouter } from "react-router-dom";
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
+root.render(<BrowserRouter><App /></BrowserRouter>);
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))

src/interfaces/index.ts

@@ -0,0 +1,33 @@
+interface ValidationError {
+  target?: object;
+  property: string;
+  value?: any;
+  constraints?: {
+      [type: string]: string;
+  };
+  children?: ValidationError[];
+  contexts?: {
+  };
+}
+
+export interface UpdateInfoRequest {
+  name: string;
+}
+
+interface BaseResponseInteface {
+  success: boolean;
+  data?: any;
+  errors?: ValidationError[];
+}
+
+interface BaseResponseSuccess extends BaseResponseInteface {
+  success: true;
+  data: any;
+}
+
+interface BaseResponseError extends BaseResponseInteface {
+  success: false;
+  errors: ValidationError[];
+}
+
+export type BaseResponse = BaseResponseSuccess | BaseResponseError;

src/pages/CheckName.tsx

@@ -0,0 +1,73 @@
+import { useEffect, useState } from 'react';
+import { BaseResponse } from '../interfaces';
+
+export function CheckName() {
+  const [status, setStatus] = useState<'INITIAL' | 'SEND_DATA' | 'SENDING_DATA' | 'DATA_SENDED' | 'ERROR_SENDING_DATA'>();
+  const [value, setValue] = useState<string>('');
+  const [data , setData] = useState<BaseResponse>();
+
+  useEffect(() => {
+    if(status === 'SEND_DATA') {
+      setStatus('SENDING_DATA');
+      fetch('http://localhost:3001/info/validate', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          name: value,
+        })
+      })
+      .then((rawResponse) => {
+        if([200, 201].includes(rawResponse.status)) {
+          return rawResponse.json();
+        } else {
+          throw new Error();
+        }        
+      })
+      .then((response: BaseResponse) => {
+        setStatus('DATA_SENDED');
+        setData(response);
+      })
+      .catch(e => {
+        setStatus('ERROR_SENDING_DATA');
+      })
+    }
+  }, [status, value]);
+
+  if (status === 'ERROR_SENDING_DATA') {
+    return (
+      <div>
+        <h1>ERRORE INVIO DATI</h1>
+        <button onClick={() => setStatus('INITIAL')}>RIPROVA</button>
+      </div>
+    );
+  }
+
+  if(status === 'SEND_DATA' || status === 'SENDING_DATA') {
+    return (
+      <div>
+        <h1>INVIO IN CORSO</h1>
+        <button onClick={() => setStatus('INITIAL')}>ANNULLA</button>
+      </div>
+    );
+  }
+
+  if(status === 'DATA_SENDED') {
+    return (<div>
+        {data?.success === true && <h1>DATI INVIATI VALIDI</h1>}
+        {data?.success === false && <h1>DATI INVIATI NON VALIDI</h1>}
+        <button onClick={() => setStatus('INITIAL')}>INVIA UN ALTRO VOLORE</button>
+    </div>)
+  }
+
+  return (
+    <div>
+      <h1>INSERISCI IL NOME</h1>
+      <input type="text" value={value} onChange={(e) => {
+        setValue(e.target.value);
+      }}></input>
+      <button onClick={() => setStatus('SEND_DATA')}>VALIDA</button>
+    </div>
+  );
+}

src/pages/Home.tsx

@@ -0,0 +1,7 @@
+export function Home() {
+  return (
+    <div>
+      <h2>Home</h2>
+    </div>
+  );
+}