Eric Doering Take Home Submission

frontend/constants.js

@@ -0,0 +1 @@
+export const API_URL = "http://localhost:3000";

frontend/yodlr_frontend/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/yodlr_frontend/components/Admin.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+import UserList from "./UserList";
+
+function Admin() {
+    return (
+      <div className="App">
+        <h1>Users</h1>
+        <UserList />
+      </div>
+    )
+  };
+
+  export default Admin;

frontend/yodlr_frontend/components/Home.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+function Home() {
+    return (
+      <div className="App">
+        <h1>Welcome to the User Interface</h1>
+      </div>
+    )
+  }
+
+  export default Home;
+

frontend/yodlr_frontend/components/Navbar.jsx

@@ -0,0 +1,18 @@
+import { Container, Nav, Navbar as NavbarBs } from "react-bootstrap"
+import { NavLink } from "react-router-dom";
+
+function Navbar() {
+    return (
+            <NavbarBs sticky="top" className="bg-white shadow-sm mb-3">
+                <Container>
+                    <Nav className="me-auto">
+                        <Nav.Link to="/Home" as={NavLink}>Home</Nav.Link>
+                        <Nav.Link to="/Admin" as={NavLink}>Admin</Nav.Link>
+                        <Nav.Link to="/Register" as={NavLink}>Register</Nav.Link>
+                    </Nav>
+                </Container>
+            </NavbarBs>
+        )
+    };
+
+    export default Navbar;

frontend/yodlr_frontend/components/Register.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+import RegisterForm from "./RegisterForm";
+
+function Register() {
+    return (
+      <div className="App">
+        <h1>Register New User</h1>
+        <RegisterForm />
+      </div>
+    )
+  }
+
+  export default Register;

frontend/yodlr_frontend/components/RegisterForm.jsx

@@ -0,0 +1,101 @@
+import React, { useState } from "react";
+import { v4 as uuidv4 } from 'uuid';
+import axios from "axios";
+import { API_URL } from "../../constants";
+import Form from 'react-bootstrap/Form'
+import Button from "react-bootstrap/Button"
+import Col from 'react-bootstrap/Col';
+import Row from 'react-bootstrap/Row';
+
+function RegisterForm() {
+  const [email, setEmail] = useState("");
+  const [firstName, setFirstName] = useState("");
+  const [lastName, setLastName] = useState("");
+  const [state, setState] = useState("");
+
+  const handleEmailChange = evt => {
+    setEmail(evt.target.value);
+  };
+
+  const handleFirstNameChange = evt => {
+    setFirstName(evt.target.value);
+  };
+
+  const handleLastNameChange = evt => {
+    setLastName(evt.target.value);
+  };
+
+  const handleStateChange = evt => {
+    setState(evt.target.value);
+  };
+
+  const handleSubmit = async evt => {
+    evt.preventDefault();
+    const userPayload ={ 
+        id : uuidv4(),
+        "email" : email,
+        "firstName" : firstName,
+        "lastName" : lastName,
+        "state" : state
+     };
+
+     try {
+      const response = await axios.post(`${API_URL}/users`, userPayload);
+      console.log(response.data);
+    } catch (error) {
+      console.error(error);
+    }
+
+    setEmail("")
+    setFirstName("");
+    setLastName("");
+    setState("");
+  };
+
+  return (
+    <div>
+      <Form onSubmit={handleSubmit}>
+        <Form.Group as={Col}>
+        <Form.Label htmlFor="email">Email:</Form.Label>
+        <Form.Control
+          id="email"
+          name="email"
+          type="email"
+          onChange={handleEmailChange}
+          value={email}
+        />
+        </Form.Group>
+        <Form.Group as={Col}>
+        <Form.Label htmlFor="firstName">First Name:</Form.Label>
+        <Form.Control
+          id="firstName"
+          name="firstName"
+          type="text"
+          onChange={handleFirstNameChange}
+          value={firstName}
+        />
+        </Form.Group>
+        <Form.Group>
+        <Form.Label htmlFor="lastName">Last Name:</Form.Label>
+        <Form.Control
+          id="lastName"
+          name="lastName"
+          type="text"
+          onChange={handleLastNameChange}
+          value={lastName}
+        />
+        </Form.Group>
+        <Form.Group>
+        <Form.Label htmlFor="state"></Form.Label>
+        <div onChange={handleStateChange}>
+            <input type="radio" value={state} name="state" /> Active
+            <input type="radio" value={state} name="state" /> Pending
+        </div>
+        <Button type="submit">Add User</Button>
+        </Form.Group>
+      </Form>
+    </div>
+  );
+}
+
+export default RegisterForm;

frontend/yodlr_frontend/components/User.jsx

@@ -0,0 +1,19 @@
+import React, { useState } from "react";
+import { Card } from "react-bootstrap";
+
+
+function User( {user} ) {
+    return(
+        <Card className="h-100">
+            <Card.Body>
+                <h3>
+                {user.firstName} {user.lastName} 
+                </h3>
+                <p>{user.email}</p>
+                <h6>{user.state}</h6>
+            </Card.Body>
+        </Card>
+    )
+};
+
+export default User;

frontend/yodlr_frontend/components/UserList.jsx

@@ -0,0 +1,28 @@
+import React, { useState, useEffect } from "react";
+import User from "./User";
+import axios from "axios";
+import { API_URL } from "../../constants";
+
+function UserList() {
+    const [users, setUsers] = useState([]);
+    useEffect(() => {
+      let result = [];
+      const getUsers = async () => {
+        const result = await axios.get(`${API_URL}/users`);
+        return result.data;
+      }
+      getUsers().then((res) => setUsers(res))
+    },[]);
+    console.log(users)
+    const userComponents = users.map(user => (
+    <User user={user}/>
+  ));
+
+  return (
+    <div>
+      <ul>{userComponents}</ul>
+    </div>
+  );
+}
+
+export default UserList;

frontend/yodlr_frontend/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>
+    <link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+  integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
+  crossorigin="anonymous"
+/>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>