Merge pull request #5 from ZHIFA-CHIU/238-MergeFrontBack

238- Merging front and back end with axios handling
ZHIFA-CHIU · Apr 13, 2022 · 08112c1 · 08112c1
2 parents cb86a3d + a23f326
commit 08112c1
Show file tree

Hide file tree

Showing 25 changed files with 29,291 additions and 12 deletions.
diff --git a/FrontEnd/.gitignore b/FrontEnd/.gitignore
@@ -0,0 +1,2 @@
+node_modules/
+HELP.md
diff --git a/FrontEnd/package-lock.json b/FrontEnd/package-lock.json
diff --git a/FrontEnd/package.json b/FrontEnd/package.json
@@ -0,0 +1,46 @@
+{
+  "name": "roadside",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
+    "@mui/material": "^5.6.1",
+    "@testing-library/jest-dom": "^5.16.3",
+    "@testing-library/react": "^12.1.4",
+    "@testing-library/user-event": "^13.5.0",
+    "axios": "^0.26.1",
+    "bootstrap": "^5.1.3",
+    "react": "^17.0.2",
+    "react-bootstrap": "^2.2.2",
+    "react-dom": "^17.0.2",
+    "react-router-dom": "^6.3.0",
+    "react-scripts": "5.0.0",
+    "styled-components": "^5.3.5",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/FrontEnd/public/favicon.ico b/FrontEnd/public/favicon.ico
diff --git a/FrontEnd/public/index.html b/FrontEnd/public/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Roadside Assitant Service</title>
+</head>
+<body>
+  <div id="root"></div>
+</body>
+</html>
diff --git a/FrontEnd/public/logo192.png b/FrontEnd/public/logo192.png
diff --git a/FrontEnd/public/logo512.png b/FrontEnd/public/logo512.png
diff --git a/FrontEnd/src/App.js b/FrontEnd/src/App.js
@@ -0,0 +1,46 @@
+import React, {Component} from 'react';
+import {BrowserRouter, Route, Routes} from 'react-router-dom';
+
+import Home from './components/Home';
+import About from './components/About';
+import Contact from './components/Contact';
+import ViewIncompleteRequest from './components/ViewIncompleteRequest';
+import ViewCompleteRequest from './components/ViewCompleteRequest';
+import Qualifications from './components/Qualifications';
+import PaymentInfo from './components/PaymentInfo';
+import Dashboard from './components/Dashboard';
+import Login from './components/Login';
+import CreateAccount from './components/CreateAccount';
+import CustomerExample from "./components/CustomerExample";
+
+
+import Error from './components/Error';
+import Navigation from './components/navigation/Navigation';
+
+class App extends Component {
+    render() {
+        return (
+            <BrowserRouter>
+                <div>
+                    <Navigation/>
+                    <Routes>
+                        <Route path="/" element={<Home/>} exact/>
+                        <Route path="/about" element={<About/>}/>
+                        <Route path="/contact" element={<Contact/>}/>
+                        <Route path="/ViewIncompleteRequest" element={<ViewIncompleteRequest/>}/>
+                        <Route path="/ViewCompleteRequest" element={<ViewCompleteRequest/>}/>
+                        <Route path="/Qualifications" element={<Qualifications/>}/>
+                        <Route path="/PaymentInfo" element={<PaymentInfo/>}/>
+                        <Route path="/Dashboard" element={<Dashboard/>}/>
+                        <Route path="/Login" element={<Login/>}/>
+                        <Route path="/CreateAccount" element={<CreateAccount/>}/>
+                        <Route path="/CustomerExample" element={<CustomerExample/>}/>
+                        <Route component={Error}/>
+                    </Routes>
+                </div>
+            </BrowserRouter>
+        );
+    }
+}
+
+export default App;
diff --git a/FrontEnd/src/components/About.js b/FrontEnd/src/components/About.js
@@ -0,0 +1,12 @@
+import React from 'react';
+
+const About = () => {
+    return (
+       <div>
+          <h1>About</h1>
+          <p>Contact US page body content</p>
+       </div>
+    );
+}
+
+export default About;
diff --git a/FrontEnd/src/components/Contact.js b/FrontEnd/src/components/Contact.js
@@ -0,0 +1,12 @@
+import React from 'react';
+
+const Contact = () => {
+    return (
+       <div>
+          <h1>Contact US</h1>
+          <p>Contact US page body content</p>
+       </div>
+    );
+}
+
+export default Contact;
diff --git a/FrontEnd/src/components/CreateAccount.js b/FrontEnd/src/components/CreateAccount.js
@@ -0,0 +1,12 @@
+import React from 'react';
+
+const CreateAccount = () => {
+    return (
+       <div>
+          <h1>Create Account</h1>
+          <p>Contact US page body content</p>
+       </div>
+    );
+}
+
+export default CreateAccount;
diff --git a/FrontEnd/src/components/CustomerExample.js b/FrontEnd/src/components/CustomerExample.js
@@ -0,0 +1,54 @@
+import React, {useEffect, useState} from 'react';
+import CustomerService from "../services/customerService";
+import {Button, Paper, Typography} from "@mui/material";
+
+/**
+ * CustomerExample component used to demonstrate backend call from frontend
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const CustomerExample = () => {
+    const [response, setResponse] = useState([]);
+
+    useEffect(() => {
+        getCustomers();
+    }, []);
+
+    const getCustomers = () => {
+        CustomerService.getCustomerList()
+            .then(res => {
+                setResponse(res.data)
+            })
+            .catch((err) => {
+                console.error(err);
+            });
+    }
+
+    const deleteCustomer = (id) => {
+        CustomerService.deleteCustomer(id)
+            .then((res) => {
+                getCustomers();
+            })
+            .catch((err) => {
+                console.error(err);
+            });
+    }
+
+    return (<Paper>
+        <Typography variant={'h2'}>Customer List (Example)</Typography>
+        <div>
+            {response.map(customer => <div key={customer.id}>
+                <Typography variant={'h3'}>{customer.name}</Typography>
+                <div>Age: {customer.age}</div>
+                <div>Email: {customer.email}</div>
+                <Button onClick={() => {
+                    deleteCustomer(customer.id);
+                    getCustomers();
+                }}>Delete customer
+                </Button>
+            </div>)}
+        </div>
+    </Paper>);
+}
+
+export default CustomerExample;
diff --git a/FrontEnd/src/components/Dashboard.js b/FrontEnd/src/components/Dashboard.js
@@ -0,0 +1,12 @@
+import React from 'react';
+
+const Dashboard = () => {
+    return (
+       <div>
+          <h1>Dashboard</h1>
+          <p>Contact US page body content</p>
+       </div>
+    );
+}
+
+export default Dashboard;
diff --git a/FrontEnd/src/components/Error.js b/FrontEnd/src/components/Error.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Error = () => {
+    return (
+       <div>
+          <p>Error: Page does not exist!</p>
+       </div>
+    );
+}
+
+export default Error;
diff --git a/FrontEnd/src/components/Home.js b/FrontEnd/src/components/Home.js
@@ -0,0 +1,12 @@
+import React from 'react';
+
+const home = () => {
+    return (
+       <div>
+          <h1>Welcome to Roadside Assitance</h1>
+           <p>Home page body content</p>
+       </div>
+    );
+}
+
+export default home;
diff --git a/FrontEnd/src/components/Login.js b/FrontEnd/src/components/Login.js
@@ -0,0 +1,12 @@
+import React from 'react';
+
+const Login = () => {
+    return (
+       <div>
+          <h1>Login</h1>
+          <p>Contact US page body content</p>
+       </div>
+    );
+}
+
+export default Login;
diff --git a/FrontEnd/src/components/PaymentInfo.js b/FrontEnd/src/components/PaymentInfo.js
@@ -0,0 +1,12 @@
+import React from 'react';
+
+const PaymentInfo = () => {
+    return (
+       <div>
+          <h1>Payment Info</h1>
+          <p>Contact US page body content</p>
+       </div>
+    );
+}
+
+export default PaymentInfo;
diff --git a/FrontEnd/src/components/Qualifications.js b/FrontEnd/src/components/Qualifications.js
@@ -0,0 +1,12 @@
+import React from 'react';
+
+const Qualifications = () => {
+    return (
+       <div>
+          <h1>Qualifications</h1>
+          <p>Contact US page body content</p>
+       </div>
+    );
+}
+
+export default Qualifications;
diff --git a/FrontEnd/src/components/ViewCompleteRequest.js b/FrontEnd/src/components/ViewCompleteRequest.js
@@ -0,0 +1,12 @@
+import React from 'react';
+
+const ViewCompleteRequest = () => {
+    return (
+       <div>
+          <h1>View Complete Requests</h1>
+          <p>Contact US page body content</p>
+       </div>
+    );
+}
+
+export default ViewCompleteRequest;
diff --git a/FrontEnd/src/components/ViewIncompleteRequest.js b/FrontEnd/src/components/ViewIncompleteRequest.js
@@ -0,0 +1,12 @@
+import React from 'react';
+
+const ViewIncompleteRequest = () => {
+    return (
+       <div>
+          <h1>View Incomplete Requests</h1>
+          <p>Contact US page body content</p>
+       </div>
+    );
+}
+
+export default ViewIncompleteRequest;
diff --git a/FrontEnd/src/components/navigation/Navigation.js b/FrontEnd/src/components/navigation/Navigation.js
@@ -0,0 +1,39 @@
+import React from 'react';
+
+import {Link} from 'react-router-dom';
+import styled from 'styled-components';
+
+
+const StyledLink = styled(Link)`
+   color: Black;
+   text-decoration: none;
+   font-weight: Bold;
+   font-size: x-large;
+   margin: 0 10px;
+ `;
+
+const CenterDiv = styled.div`
+ 
+  text-align:center;
+ 
+ `;
+
+const Navigation = () => {
+    return (<CenterDiv>
+            <StyledLink to="/">Home</StyledLink>
+            <StyledLink to="/about">About</StyledLink>
+            <StyledLink to="/contact">Contact</StyledLink>
+            <StyledLink to="/ViewIncompleteRequest">ViewIncompleteRequest</StyledLink>
+            <StyledLink to="/ViewCompleteRequest">ViewCompleteRequest</StyledLink>
+            <StyledLink to="/Qualifications">Qualifications</StyledLink>
+            <StyledLink to="/PaymentInfo">PaymentInfo</StyledLink>
+            <StyledLink to="/Dashboard">Dashboard</StyledLink>
+            <StyledLink to="/Login">Login</StyledLink>
+            <StyledLink to="/CreateAccount">CreateAccount</StyledLink>
+            <StyledLink to="/CustomerExample">CustomerExample</StyledLink>
+
+            <hr></hr>
+        </CenterDiv>);
+}
+
+export default Navigation;
diff --git a/FrontEnd/src/index.js b/FrontEnd/src/index.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+ReactDOM.render(
+<React.StrictMode>
+    <App />
+</React.StrictMode>,
+document.getElementById('root')
+);