first commit

src/App.css

@@ -0,0 +1,38 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

src/App.js

@@ -0,0 +1,47 @@
+import { useDisclosure } from '@mantine/hooks';
+import {AppShell} from '@mantine/core';
+import './App.css';
+import NavBar from './components/NavBar';
+import Header from './components/Header';
+import RouterSwitcher from './components/RouterSwitcher';
+import { Link } from 'react-router-dom';
+import { useEffect } from 'react';
+import { http } from './middleware/axiosConfig';
+
+function App() {  
+  const [opened, {toggle}] = useDisclosure();
+
+  useEffect(()=>{
+    getCSRF()
+  },[])
+
+  const getCSRF = async ()=>{
+    try {
+      await http.get('/sanctum/csrf-cookie')
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  return (
+    <div className='App' style={{marginTop: '20px' }}>  
+    <AppShell
+      header={{height: 50}}
+      navbar={{width: 300, breakpoint: 'sm', collapsed: {mobile: !opened}}}
+      padding="md">
+        <Header toggle={toggle} opened={opened}/>
+        <NavBar />
+        <AppShell.Main>
+        <Link to="/home"></Link>
+          <RouterSwitcher>
+            </RouterSwitcher>
+        </ AppShell.Main>
+        <AppShell.Footer zIndex={opened ? 'auto': 201}>
+            Built by Maritoni V. Benjamin
+        </AppShell.Footer>
+    </AppShell>
+    </ div>
+  );
+}
+
+export default App;

src/App.test.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

src/components/Edit.js

@@ -0,0 +1,131 @@
+import React,{ useEffect,useState } from 'react';
+import {Button, TextInput, rem, PasswordInput} from '@mantine/core';
+import { IconAt } from '@tabler/icons-react';
+import { useParams,useNavigate } from 'react-router-dom';
+import axios from 'axios';
+import {http} from "../middleware/axiosConfig";
+
+const Edit = () => {
+    //"@"" icon on Email Input Field
+    const icon = <IconAt style={{ width: rem(16), height: rem(16) }} />;
+
+    //Back to List Button
+    const clickToBackHandler=()=>{navigate("/lists");}
+
+    //Initialize state for navigate
+    const navigate= useNavigate();
+
+     //Parameter Hook for the 'id' value
+    const {id}=useParams()
+
+    //Initializes state for User Field
+    const [userField, setUserField] = useState({
+        name: "",
+        email:"",
+    });
+
+    //useEffect hook to run fetchUser function if 'id' state changes
+    useEffect(()=>{
+        fetchUser();
+    },[id])
+
+    // Event handler function for updating user field state with the new input value
+    const changeUserFieldHandler = (e) => {
+        setUserField({
+          ...userField,
+          [e.target.name]: e.target.value
+        });
+        console.log(userField);
+    }
+
+    //MAIN FUNCTION: Fetch user detail based on the ID number
+    const fetchUser=async()=>{
+        try{
+            const result=await http.get("/api/users/" + id);
+            setUserField(result.data);
+        }catch(err){
+            console.log("Something's Wrong!");
+        }
+    }
+
+    //MAIN FUNCTION: Handles form submission to update the user data for the selected ID number using the provided userField
+    const onSubmitChange = async (e) => {
+        e.preventDefault();
+        try {
+            await http.put("/api/userupdate/"+id, userField);
+            navigate('/lists');
+        }catch (err){
+            console.log("Something's Wrong!");
+        }
+    }
+ 
+    //EDIT MODAL
+        return(
+            <div className='container'>
+                <h1>EDIT</h1>
+                <div>
+                    {/* ID Number Input field */}
+                    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
+                    <TextInput
+                    disabled
+                    variant="filled"
+                    label="ID Number:"
+                    withAsterisk
+                    placeholder="Enter Your ID Number" 
+                    name='name'
+                    value={id}
+                    style={{width: '400px', marginBottom: '10px' }}/></div>
+                    {/* Name Input field */}
+                    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
+                    <TextInput
+                    label="Full Name:"
+                    variant="filled"
+                    withAsterisk
+                    placeholder="Enter Your Full Name" 
+                    name='name'
+                    id = "name"
+                    value={userField.name}
+                    onChange={e => changeUserFieldHandler(e)}
+                    style={{ width: '400px', marginBottom: '10px' }}/></div>
+                    {/* Email Input field */}
+                    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
+                    <TextInput
+                    leftSectionPointerEvents="none"
+                    leftSection={icon}
+                    label="E-mail:"
+                    variant="filled"
+                    id="email"
+                    withAsterisk
+                    placeholder="Enter Your Email"
+                    name='email'
+                    value={userField.email}
+                    onChange={e => changeUserFieldHandler(e)}
+                    style={{ width: '400px', marginBottom: '10px' }}/>
+                    </div>
+                    {/* Password Input Field */}
+                    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
+                    <TextInput
+                    leftSectionPointerEvents="none"
+                    label="Password:"
+                    variant="filled"
+                    withAsterisk
+                    id = "password"
+                    placeholder="Enter Your Password"
+                    name='password'
+                    value={userField.password}
+                    onChange={e => changeUserFieldHandler(e)}
+                    style={{ width: '400px', marginBottom: '10px' }}/>
+                    </div>
+                    {/* Update Button - triggers the onSubmitChange function */}
+                    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
+                    <Button style={{ marginTop: '25px' }} variant="filled" color="rgba(0, 25, 138, 1)" size="sm" radius="xl" onClick={e=>onSubmitChange(e)}>Update</Button></div>
+                    {/* Back to List Button - triggers the clickToBackHandler function */}
+                    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
+                    <Button onClick={clickToBackHandler} style={{ marginTop: '25px' }}>Back to List</Button>
+                    </div>
+                </div>
+
+            </div>)
+}
+
+export default Edit;

src/components/Header.js

@@ -0,0 +1,31 @@
+import { Flex, AppShell, Burger, Button, Paper, useMantineColorScheme, useComputedColorScheme} from '@mantine/core';
+import {FaSun, FaMoon} from 'react-icons/fa';
+import { Text } from '@mantine/core';
+import List from './Lists';
+
+const Header = ({toggle, opened}) => {
+    const {setColorScheme} = useMantineColorScheme();
+    const computedColorScheme = useComputedColorScheme('light');
+
+    const toggleColorScheme = () => {
+        setColorScheme(computedColorScheme === "dark" ? "light" : "dark")}
+
+    return(
+    <AppShell.Header>
+        <Flex justify="space-between" align="center" style={{padding: '10px 20px'}}>
+            <Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
+            <div><Text
+                size="xl"
+                fw={900}
+                variant="gradient"
+                gradient={{ from: 'violet', to: 'cyan', deg: 113 }}
+                >
+                 ADMIN MANAGEMENT
+                </Text></div>
+            <Button size="sm" variant="link" onClick={toggleColorScheme}>{computedColorScheme === "dark" ? <FaSun/> : <FaMoon/>}</Button>
+        </Flex>
+    </AppShell.Header>
+    );
+};
+
+export default Header;

src/components/Home.js

@@ -0,0 +1,97 @@
+import {Button, TextInput, rem, PasswordInput} from '@mantine/core';
+import { IconAt } from '@tabler/icons-react';
+import {useState} from 'react';
+import {http} from "../middleware/axiosConfig";
+
+function Home() {
+  //"@"" icon on Email Input Field
+  const icon = <IconAt style={{ width: rem(16), height: rem(16) }} />;
+  
+  // Initialize state for user fields
+  const [userField, setUserField] = useState({
+    name: "",
+    email:"",
+    password:""
+  });
+
+  // Event handler function for updating user field state with the new input value
+  const changeUserFieldHandler = (e) => {
+      setUserField({
+        ...userField,
+        [e.target.name]: e.target.value
+      });
+  }
+
+  // Initialize state to handle loading state
+  const [loading,setLoading]=useState()
+
+  //Inserts new account to the Database{reactapp.users}.post
+  const onSubmitChange = async (e) => {
+    e.preventDefault();
+    try{
+      const response= await http.post("/api/addnew", userField);
+      console.log(response)
+      setLoading(true);
+    } catch(err){
+      console.error(err)
+    console.log("Something's Wrong!");
+    }
+  }
+
+  //If loading is true, return to <Home />
+  if(loading){
+    return <Home/>
+  }
+
+  //REGISTRATION MODAL
+  return (
+    <div className="container">
+        <h2 className='w-100 d-flex justify-content-center p-3'> ADD ACCOUNT </h2>
+        <form>
+          <div>
+            {/* Name Input */}
+            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
+            <TextInput
+            label="Full Name:"
+            withAsterisk
+            placeholder="Enter Your Full Name" 
+            name='name'
+            id='name'
+            onChange={e => changeUserFieldHandler(e)}
+            style={{ width: '400px', marginBottom: '10px' }}/></div>
+            {/* E-mail Input */}
+            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
+            <TextInput
+            required
+            leftSectionPointerEvents="none"
+            leftSection={icon}
+            label="E-mail:"
+            withAsterisk
+            placeholder="Enter Your Email"
+            name='email'
+            id='email'
+            onChange={e => changeUserFieldHandler(e)}
+            style={{ width: '400px', marginBottom: '10px' }}/>
+            </div>
+            {/* Password Input */}
+            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
+            <PasswordInput
+            required
+            label="Password"
+            withAsterisk
+            description="Please ensure that no special characters are included."
+            placeholder="Enter Your Password"
+            onChange={e => changeUserFieldHandler(e)}
+            style={{ width: '400px', marginBottom: '10px' }}/>
+            </div>
+            {/* Submit Button - triggers the onSubmitChange function*/}
+            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
+            <Button style={{ margin: 25 }} variant="filled" color="rgba(30, 128, 10, 1)" size="sm" radius="xl" onClick={e => onSubmitChange(e)}>Sign Up</Button>
+            </div>
+          </div>
+        </form>
+        </div>
+  );
+}
+
+export default Home;

src/components/Lists.js

@@ -0,0 +1,81 @@
+import React, { useState,useEffect } from 'react';
+import { Button, Table } from '@mantine/core';
+import { Link } from 'react-router-dom';
+import {http} from "../middleware/axiosConfig";
+
+const List = () => {
+
+  // Initialize state for user data
+  const [ userData, setUserData] = useState([]);
+  
+  //useEffect hook - 
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  //MAIN FUNCTION: fetch all users data from database
+  const fetchData = async () => {
+    try{
+      const result = await http.get("/api/users");
+      setUserData(result.data)
+    }catch (err) {
+      console.log("Something's Wrong!");
+    }
+    };
+
+    //MAIN FUNCTION: deletes all user detail of the selected id number
+    const handleDelete=async(id)=>{
+      console.log(id);
+      await http.delete("/api/userdelete/"+id);
+      const newUserData=userData.filter((item)=>{
+        return(
+          item.id !==id
+        )
+      })
+      setUserData(newUserData);
+    }
+
+  //LIST MODAL with Action {View, Edit & Delete}
+  return (
+    <div className="container">
+        <h2>List of Accounts</h2>
+        <Table horizontalSpacing="sm" verticalSpacing="sm" withTableBorder withColumnBorders>
+            <Table.Thead>
+            <Table.Tr>
+              <Table.Th  ta="center">ID</Table.Th>
+              <Table.Th ta="center">Name</Table.Th>
+              <Table.Th ta="center">Email</Table.Th>
+              <Table.Th ta="center">Action</Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>
+            {/* Calls user data info of each ID number listed */}
+            {
+              userData.map((users, i) => {
+                return (
+                    <Table.Tr key={`${i}`}>
+                      <Table.Td>{users.id}</Table.Td>
+                      <Table.Td>{users.name}</Table.Td>
+                      <Table.Td>{users.email || 'No email Available'}</Table.Td>
+                      <Table.Td>
+                        {/* Action.View Button - triggers the View module */}
+                        <Link to={`/view/${users.id}`}>
+                        <Button style={{ marginRight: '10px' }} variant="filled" color="rgba(81, 194, 52, 1)">View</Button>
+                        </Link>
+                        {/* Action.Edit Button - triggers the Edit module */}
+                        <Link to={`/edit/${users.id}`}>
+                        <Button style={{ marginRight: '10px' }} variant="filled">Edit</Button>
+                        </Link>
+                        {/* Delete Button - triggers the handleDelete function */}
+                        <Button onClick={()=>handleDelete(users.id)} style={{ marginRight: '10px' }} variant="filled" color="rgba(227, 9, 9, 1)">Delete</Button>
+                        </Table.Td>
+                      </Table.Tr>
+                  )})
+            }
+            </Table.Tbody>
+        </Table>
+    </div>
+  );
+};
+
+export default List;

src/components/Login.js

@@ -0,0 +1,80 @@
+import { useDisclosure } from '@mantine/hooks';
+import { IconAt } from '@tabler/icons-react';
+import { Paper, Text, TextInput, PasswordInput, Button, rem} from "@mantine/core";
+import {useState} from 'react';
+import {http} from "../middleware/axiosConfig";
+import { useNavigate } from 'react-router-dom';
+
+
+const Login = () => { 
+
+    const navigate = useNavigate();
+
+    const [userField, setUserField] = useState({
+        email:"",
+        password:""
+      });
+
+    const changeFieldHandler = (e) => {
+        setUserField({
+          ...userField,
+          [e.target.email]: e.target.value
+        });
+    }
+
+    const onLogin = async (e) => {
+        try {
+            await http.get("/sanctum/csrf-cookie");
+            const res = await http.post("/api/login", {
+                email: e.email,
+                password: e.password,
+            });
+            if (res.status === 200){
+                navigate("/lists"); 
+            }
+        }
+        catch (err) {
+            console.error(err)
+            console.log("Something's Wrong!");
+        }
+    };
+
+    const icon = <IconAt style={{ width: rem(16), height: rem(16) }} />;
+    const [visible, { toggle }] = useDisclosure(false);
+
+        return (
+            <div>
+            <Paper radius="md" p="xl" withBorder>
+                <Text size="xl" fw={900} variant="gradient"
+            gradient={{ from: 'red', to: 'rgba(227, 0, 0, 1)', deg: 227 }}>WELCOME ADMIN!</Text>
+                <Text size="sm">Please login to access the Admin Account Management Site</Text>
+                    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
+                        <TextInput
+                            style={{ width: '400px', marginBottom: '10px', marginTop: '15px' }}
+                            label="Email"
+                            leftSectionPointerEvents="none"
+                            leftSection={icon}
+                            withAsterisk
+                            onChange={e => changeFieldHandler(e)}
+                            placeholder="Enter your work email address"
+                    /></div>
+                    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
+                        <PasswordInput
+                            style={{ width: '400px', marginBottom: '10px' }}
+                            label="Password"
+                            placeholder="Enter your Password"
+                            withAsterisk
+                            onChange={e => changeFieldHandler(e)}
+                            visible={visible}
+                            onVisibilityChange={toggle}
+                    /></div>
+                    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
+                        <Button variant="filled" color="lime" style={{ margin: 25 }} onClick={e => onLogin(e)}>Log In
+                        </Button>
+                    </div>     
+            </Paper>
+            </div>
+        );
+};
+
+export default Login;

src/components/NavBar.js

@@ -0,0 +1,19 @@
+import {AppShell, NavLink} from '@mantine/core';
+import { useNavigate } from 'react-router-dom';
+
+const NavBar = () => {
+    const navigate = useNavigate();
+
+    return(
+        <AppShell.Navbar p="md" style={{gap: "10px"}}>
+          <NavLink label = "Home"
+           onClick={() => navigate('/home')} style={{margin: "5px"}} />
+           <NavLink label="Lists"
+           onClick={() => navigate('/lists')} 
+           style={{margin: "5px"}} />
+          
+        </AppShell.Navbar>
+    );    
+};
+
+export default NavBar;

src/components/NotFound.js

@@ -0,0 +1,10 @@
+const NotFound = () => {
+    return(
+        <div>
+            <h1>404 Not Found</h1>
+            <p>The page you are looking for doesn't exist!</p>
+        </div>
+    );
+};
+
+export default NotFound;

src/components/Registration.js

@@ -0,0 +1,18 @@
+// import { Paper, Text, TextInput } from "@mantine/core";
+
+// const Registration = () => { 
+//   return (
+//     <div>
+//       <Paper radius="md" p="xl" withBorder>
+//           <Text size="xl" fw={900} variant="gradient"
+//       gradient={{ from: 'orange', to: 'yellow', deg: 102 }}>WELCOME ADMIN!</Text>
+//           <Text size="sm">Please login to access the Admin Account Management Site</Text>
+//           <TextInput>
+
+//           </TextInput>
+//       </Paper>
+//     </div>
+//   );
+// };
+
+// export default Registration;

src/components/RouterSwitcher.js

@@ -0,0 +1,25 @@
+import {Route, Routes, Link} from "react-router-dom";
+import Home from "./Home";
+import NotFound from "./NotFound";
+import List from "./Lists";
+import View from './View';
+import Edit from "./Edit";
+// import Registration from "./Registration";
+// import Login from "./Login";
+
+
+const RouterSwitcher = () => {
+    return(
+        <Routes>
+            {/* <Route path="/*" element={<Registration />} /> */}
+            {/* <Route path="/*" element={<Login />} /> */}
+            <Route path="/home" element={<Home />} />
+            <Route path="/lists" element={<List />} />
+            <Route path="/view/:id" element={<View />} />
+            <Route path="/edit/:id" element={<Edit />} />
+            <Route path="/not-found" element={<NotFound />} />
+        </Routes>
+    );
+};
+
+export default RouterSwitcher;

src/components/View.js

@@ -0,0 +1,78 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Table } from '@mantine/core';
+import axios from 'axios';
+import { useParams,useNavigate } from 'react-router-dom';
+import List from "./Lists";
+import {http} from "../middleware/axiosConfig";
+
+const View = () => {
+
+    //Parameter Hook for the 'id' value
+    const {id}=useParams();
+
+    //Initialize state for navigate
+    const navigate= useNavigate();
+
+    // Initialize state for user details
+    const[users,setUsers]=useState([]);
+
+    //useEffect hook to run fetchUser function, when parameter "id" changes
+    useEffect(() => {
+        fetchUser();
+      },[id]);
+
+    //MAIN FUNCTION: Fetch user detail based on the ID number
+    const fetchUser = async() =>{
+        try{
+            //console.log(id);
+            const result= await http.get("/api/users/" + id);
+            //console.log(result.data);
+            setUsers(result.data);
+        }catch (err) {
+          console.log(err);
+        }
+        }
+    
+    //Button link back to the list page
+    const clickToBackHandler=()=>{
+        navigate("/lists");
+    }
+
+    //USER DETAILS MODAL
+    return <div>
+        
+        <div className='container'>
+            <div className='row'>
+                <h1>USER DETAILS</h1>
+                <Table horizontalSpacing="sm" verticalSpacing="sm" withTableBorder withColumnBorders>
+            <Table.Thead>
+            <Table.Tr>
+              <Table.Th  ta="center">ID</Table.Th>
+              <Table.Th ta="center">Name</Table.Th>
+              <Table.Th ta="center">Email</Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>
+            {/* Conditional rendering block to determine wheter 'users' data is available, if not it will only display Loading */}
+                  {users ? (
+                        <Table.Tr>
+                          <Table.Td>{users.id}</Table.Td>
+                          <Table.Td>{users.name}</Table.Td>
+                          <Table.Td>{users.email}</Table.Td>
+                        </Table.Tr>
+                      ) : (
+                <Table.Tr>
+                  <Table.Td colSpan={3} ta="center">Loading...</Table.Td>
+                </Table.Tr>)}
+          </Table.Tbody>
+        </Table>
+            </div>
+            {/* Back to List Button - triggers clickToBackHandler function */}
+            <div className="container d-flex justify-content-center">
+                <Button onClick={clickToBackHandler} style={{ marginTop: '20px' }}>Back to List</Button>
+            </div>
+        </div>
+    </div>
+}
+
+export default View;

src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

src/index.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+import { createTheme, MantineProvider } from '@mantine/core';
+import {BrowserRouter} from 'react-router-dom';
+import '@mantine/core/styles.css'
+
+const theme = createTheme({
+  /** Put your mantine theme override here */
+});
+
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+
+root.render(
+  <React.StrictMode>
+    <MantineProvider theme={theme} defaultColorScheme='dark'>
+    <BrowserRouter>
+    <App />
+    </BrowserRouter>
+  </MantineProvider></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();

src/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>

src/middleware/axiosConfig.js

@@ -0,0 +1,7 @@
+import axios from "axios";
+
+export const http = axios.create({
+    baseURL: "http://172.17.20.52:8000",
+    withCredentials: true,
+    withXSRFToken: true,
+})

src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

src/reportWebVitals.ts

@@ -0,0 +1,15 @@
+import { ReportHandler } from 'web-vitals';
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

src/setupTests.ts

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';

src/states/userState.js

@@ -0,0 +1,7 @@
+import { nanoid } from "nanoid"
+import { atom } from "recoil"
+
+export const userState = atom({
+  key: `${nanoid()}-userState`,
+  default: null,
+})