Second version

Author: pH-7

.gitignore

@@ -21,3 +21,7 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+
+# IDE
+.idea

package-lock.json

@@ -6,9 +6,15 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^0.27.2",
+    "bootstrap": "^5.1.3",
     "react": "^18.2.0",
+    "react-bootstrap": "^2.4.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
+    "react-toastify": "^9.0.5",
+    "styled-components": "^5.3.5",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

package.json

@@ -1,25 +1,33 @@
-import logo from './logo.svg';
-import './App.css';
+import CreateUser from "./components/CreateUser";
+import RetrieveUser from "./components/RetrieveUser";
+import UsersList from "./components/UsersList";
+import "bootstrap/dist/css/bootstrap.min.css";
+import { Container } from "react-bootstrap";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.min.css";
+import { createGlobalStyle } from "styled-components";
 
-function App() {
+const BackgroundColor = createGlobalStyle`
+    body {
+        background-color: ${(props) => (props?.light ? "#f2f2f2" : "white")};
+    }
+`;
+
+export default () => {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <>
+      <BackgroundColor light />
+      <ToastContainer />
+      <Container fluid className="mt-4 mt-3">
+        <BrowserRouter>
+          <Routes>
+            <Route path="/" element={<UsersList />} />
+            <Route path="/create" element={<CreateUser />} />
+            <Route path="/profile/:id" element={<RetrieveUser />} />
+          </Routes>
+        </BrowserRouter>
+      </Container>
+    </>
   );
-}
-
-export default App;
+};

src/App.js

@@ -0,0 +1,86 @@
+import axios from "axios";
+import React, { useState } from "react";
+import { Button, Col, Container, Form, Row } from "react-bootstrap";
+import { toast } from "react-toastify";
+
+const CreateUser = () => {
+  const createUsersUrl = "http://localhost:4000/v1/user";
+
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [city, setCity] = useState("");
+  const [country, setCountry] = useState("");
+
+  const submitForm = async (event) => {
+    event.preventDefault();
+
+    const payload = {
+      name,
+      email,
+      city,
+      country,
+    };
+
+    try {
+      const res = await axios.post(`${createUsersUrl}`, payload);
+
+      res.data.status
+        ? toast.success("User added!")
+        : toast.warn(`User couldn't be added`);
+    } catch (err) {
+      toast.error("Snap, an error has occurred...");
+    }
+  };
+
+  return (
+    <Container className="mb-5">
+      <Row className="justify-content-center">
+        <Col lg={6}>
+          <Form>
+            <Form.Group className="mb-3">
+              <Form.Label>Name</Form.Label>
+              <Form.Control
+                type="text"
+                placeholder="Name"
+                onChange={(elName) => setName(elName.target.value)}
+              />
+            </Form.Group>
+
+            <Form.Group className="mb-3">
+              <Form.Label>Email</Form.Label>
+              <Form.Control
+                type="email"
+                placeholder="Email"
+                onChange={(elEmail) => setEmail(elEmail.target.value)}
+              />
+            </Form.Group>
+
+            <Form.Group className="mb-3">
+              <Form.Label>City</Form.Label>
+              <Form.Control
+                type="text"
+                placeholder="City"
+                onChange={(elCity) => setCity(elCity.target.value)}
+              />
+            </Form.Group>
+
+            <Form.Group className="mb-3">
+              <Form.Label>Country</Form.Label>
+              <Form.Control
+                type="text"
+                placeholder="Country"
+                onChange={(elCountry) => setCountry(elCountry.target.value)}
+              />
+            </Form.Group>
+
+            <Button variant="primary" type="submit" onClick={submitForm}>
+              Add User
+            </Button>
+          </Form>
+        </Col>
+      </Row>
+    </Container>
+  );
+};
+
+export default CreateUser;

src/components/CreateUser.jsx

@@ -0,0 +1,47 @@
+import axios from "axios";
+import React, { useEffect, useState } from "react";
+import { Col, Container, Row } from "react-bootstrap";
+import { useParams } from "react-router-dom";
+import { toast } from "react-toastify";
+
+const RetrieveUser = () => {
+  const getAllUserUrl = "http://localhost:4000/v1/user";
+
+  const [user, setUser] = useState({});
+  const { id } = useParams();
+
+  const fetchUsers = async () => {
+    const {
+      data: { user },
+    } = await axios.get(`${getAllUserUrl}/${id}`);
+
+    if (user) {
+      setUser(user);
+    } else {
+      toast.warn("User not found");
+    }
+  };
+
+  useEffect(() => {
+    fetchUsers();
+  }, [id]);
+
+  return (
+    <Container className="mt-5 mb-5">
+      <h3 className="text-center mb-3"></h3>
+      <Row className="justify-content-center">
+        <Col lg={4}>
+          <h4>{user.name}</h4>
+          <p>{user.email}</p>
+          {user.city && user.country && (
+            <p>
+              {user.city} - {user.country}
+            </p>
+          )}
+        </Col>
+      </Row>
+    </Container>
+  );
+};
+
+export default RetrieveUser;

src/components/RetrieveUser.jsx

@@ -0,0 +1,45 @@
+import React, {useEffect, useState} from 'react';
+import { Card, Col, Container, Row } from 'react-bootstrap';
+import axios from 'axios';
+
+const UsersList = () => {
+    const getAllUsersUrl = 'http://localhost:4000/v1/user/all';
+
+    const [users, setUsers] = useState({}); // important, default need to be empty object
+
+    const fetchUsers = async () => {
+        const res = await axios.get(`${getAllUsersUrl}`);
+        console.log(res.data);
+
+        setUsers(res.data);
+    }
+
+    useEffect(() => {
+        fetchUsers();
+    }, []);
+
+    return (
+        <Container className='mt-5 mb-5'>
+            <h3 className='text-center mb-3'>
+                Users
+            </h3>
+            {Object.values(users).map(user => (
+                <Row className='justify-content-center'>
+                    <Col lg={4}>
+                        <Card>
+                            <Card.Body>
+                                <h4>{user.name}</h4>
+                                <p>{user.email}</p>
+                                {user.city && user.country && (
+                                    <p>{user.city} - {user.country}</p>
+                                )}
+                            </Card.Body>
+                        </Card>
+                    </Col>
+                </Row>
+            ))}
+        </Container>
+    )
+}
+
+export default UsersList;

src/components/UsersList.jsx

@@ -2,16 +2,10 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
-import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+);