Implement react router

package.json

@@ -10,8 +10,10 @@
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "@types/react-router-dom": "^5.1.7",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.2",
     "typescript": "^4.1.2",
     "web-vitals": "^1.0.1"

src/App.css

@@ -24,10 +24,29 @@
   color: white;
 }
 
+.App-navbar li {
+  display: inline;
+  margin: 1em;
+}
+
+.activeNavLink {
+  font-weight: bold;
+}
+
+.Topics-list li {
+  list-style-type: none;
+}
+
 .App-link {
   color: #61dafb;
 }
 
+.Users-table {
+  margin-left: auto;
+  margin-right: auto;
+  text-align: left;
+}
+
 @keyframes App-logo-spin {
   from {
     transform: rotate(0deg);

src/App.tsx

@@ -1,15 +1,35 @@
 import React from 'react';
 import logo from './logo.svg';
 import './App.css';
-import { UserList } from './components/UserList';
+import { Users } from './components/users/Users';
+import { Home } from './components/Home';
+import { About } from './components/About';
+import { Subroutes } from './components/Subroutes';
+import { Switch, Route } from 'react-router-dom';
+import { PageNotFound } from './components/PageNotFound';
+import { NavBar } from './components/NavBar';
+import { Props } from './components/Props';
 
 function App() {
     return (
         <div className="App">
             <header className="App-header">
                 <img src={logo} className="App-logo" alt="logo" />
             </header>
-            <UserList />
+            <NavBar />
+            <Switch>
+                <Route path="/" component={Home} exact />
+                <Route path="/about" component={About} />
+                <Route path="/crud" component={Users} />
+                <Route path="/subroutes" component={Subroutes} />
+                <Route
+                    path="/props"
+                    render={() => {
+                        return <Props text="This text is passed as a property when routing to this component" />;
+                    }}
+                />
+                <Route component={PageNotFound} />
+            </Switch>
         </div>
     );
 }

src/components/About.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const About = () => {
+    return <h2>THIS IS THE ABOUT PAGE</h2>;
+};

src/components/Home.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+export const Home = () => {
+    return (
+        <>
+            <h2>THIS IS THE HOME PAGE</h2>
+            <p>
+                This React project is meant to be able to be used as a startup template when creating new React
+                projects.
+                <br />
+                It contains a basic implementation of some technologies that you would likely want to use.
+            </p>
+            <p></p>
+        </>
+    );
+};

src/components/NavBar.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+
+export const NavBar = () => {
+    return (
+        <nav className="App-navbar">
+            <ul>
+                <li>
+                    <NavLink to="/" activeClassName="activeNavLink" exact>
+                        Home
+                    </NavLink>
+                </li>
+                <li>
+                    <NavLink to="/about" activeClassName="activeNavLink">
+                        About
+                    </NavLink>
+                </li>
+                <li>
+                    <NavLink to="/crud" activeClassName="activeNavLink">
+                        CRUD
+                    </NavLink>
+                </li>
+                <li>
+                    <NavLink to="/subroutes" activeClassName="activeNavLink">
+                        Subroutes
+                    </NavLink>
+                </li>
+                <li>
+                    <NavLink to="/props" activeClassName="activeNavLink">
+                        Props
+                    </NavLink>
+                </li>
+            </ul>
+        </nav>
+    );
+};

src/components/PageNotFound.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export const PageNotFound = () => {
+    return (
+        <>
+            <h2>PAGE NOT FOUND</h2>
+            <h2>404</h2>
+        </>
+    );
+};

src/components/Props.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { withRouter } from 'react-router-dom';
+
+export const Props = (props: { text: string }): JSX.Element => {
+    return (
+        <>
+            <h2>THIS IS THE PROPS PAGE</h2>
+            <p>{props.text}</p>
+        </>
+    );
+};

src/components/Subroute.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+
+export const Subroute = () => {
+    const { subrouteId } = useParams<{ subrouteId: string }>();
+
+    return <h3>Requested subroute: {subrouteId}</h3>;
+};

src/components/Subroutes.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { NavLink, Route, Switch, useRouteMatch } from 'react-router-dom';
+import { Subroute } from './Subroute';
+
+export const Subroutes = () => {
+    const match = useRouteMatch();
+
+    return (
+        <>
+            <h2>THIS IS THE SUBROUTES PAGE</h2>
+            <p>
+                Select a subroute bellow and it will be passed as a <b>route parameter</b> to the child component
+            </p>
+            <ul className="Topics-list">
+                <li>
+                    <NavLink to={`${match.url}/Subroute One`} activeClassName="activeNavLink">
+                        Subroute One
+                    </NavLink>
+                </li>
+                <li>
+                    <NavLink to={`${match.url}/Subroute Two`} activeClassName="activeNavLink">
+                        Subroute Two
+                    </NavLink>
+                </li>
+            </ul>
+
+            <Switch>
+                <Route path={`${match.path}/:subrouteId`}>
+                    <Subroute />
+                </Route>
+            </Switch>
+        </>
+    );
+};

src/components/users/AddUser.tsx

@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import { Prompt } from 'react-router-dom';
+import { createUser } from '../../api/user';
+import { IUser } from '../../interface/interface';
+
+export const AddUser = (props: { updateUserList(): void }) => {
+    const [user, setUser] = useState<IUser>({ id: '', name: '' });
+
+    const onChange = async (e: any) => {
+        setUser((userToCreate) => ({ ...userToCreate, [e.target.name]: e.target.value }));
+    };
+
+    const onSubmit = async (e: any) => {
+        e.preventDefault();
+        await createUser(user);
+        props.updateUserList();
+    };
+
+    return (
+        <>
+            <Prompt
+                when={user.id != '' || user.name != ''}
+                message="If you leave this page without submiting Add User data, the data will be lost"
+            />
+            <h3>Add user</h3>
+            <form onSubmit={onSubmit}>
+                <label>
+                    Id:
+                    <input type="text" name="id" value={user.id} onChange={onChange} />
+                </label>
+                <label>
+                    Name:
+                    <input type="text" name="name" value={user.name} onChange={onChange} />
+                </label>
+                <input type="submit" value="Submit" />
+                <button>Cancel</button>
+            </form>
+        </>
+    );
+};

src/components/users/UpdateUser.tsx

@@ -0,0 +1,41 @@
+import React, { useEffect, useState } from 'react';
+import { IUser } from '../../interface/interface';
+import { getUserById, updateUser } from '../../api/user';
+
+export const UpdateUser = (props: { userId: string; updateUserList(): void }): JSX.Element => {
+    const [user, setUser] = useState<IUser>({ id: '', name: '' });
+
+    useEffect(() => {
+        init();
+    }, []);
+
+    const init = async () => {
+        setUser(await getUserById(props.userId));
+    };
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setUser((user) => ({ ...user, [e.target.name]: e.target.value }));
+        console.log(user.name);
+    };
+
+    const handleSubmit = async (e: any) => {
+        e.preventDefault();
+        await updateUser(user);
+        props.updateUserList();
+    };
+
+    return (
+        <>
+            <h3>Update user</h3>
+            <form onSubmit={handleSubmit}>
+                <label>
+                    Name:
+                    <input type="text" name="name" value={user.name} onChange={handleChange} />
+                </label>
+                <input type="submit" value="Submit" />
+                {/* TODO Fix cancel buttons */}
+                <button>Cancel</button>
+            </form>
+        </>
+    );
+};