started approvals table task

Author: ste3ve3

.babelrc

@@ -1,3 +1,4 @@
 {
-  "presets": ["@babel/preset-env", "@babel/preset-react"]
+  "presets": ["@babel/preset-env", "@babel/preset-react"],
+  "plugins": [["@babel/plugin-transform-runtime"]]
 }

package.json

@@ -13,20 +13,25 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@reduxjs/toolkit": "^1.8.1",
+    "@babel/plugin-transform-runtime": "^7.18.2",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@mui/material": "^5.8.0",
     "@mui/styled-engine-sc": "^5.8.0",
+    "@mui/x-data-grid": "^5.11.1",
+    "@reduxjs/toolkit": "^1.8.1",
+    "axios": "^0.27.2",
     "prop-types": "^15.8.1",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-redux": "^8.0.1",
     "react-router-dom": "^6.3.0",
+    "react-test-renderer": "^18.1.0",
+    "react-toastify": "^9.0.1",
     "redux": "^4.2.0",
     "redux-persist": "^6.0.0",
-    "react-test-renderer": "^18.1.0",
     "sass": "^1.51.0",
+    "save-dev": "^0.0.1-security",
     "styled-components": "^5.3.5"
   },
   "devDependencies": {

src/App.jsx

@@ -1,16 +1,23 @@
 import React from 'react';
 import { Route, Routes } from 'react-router-dom';
 import Home from './pages/index';
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css'
 import Welcome from './components/Welcome';
 import AboutPage from './components/about/About';
+import TripApproval from './components/tripApproval/tripApproval'
 
 function App() {
   return (
+    <>
     <Routes>
       <Route path="/" element={<Home />} />
       <Route path="welcome" element={<Welcome />} />
       <Route path="about" element={<AboutPage />} />
+      <Route path="tripApproval" element={<TripApproval />} />
     </Routes>
+    <ToastContainer/>
+    </>
   );
 }
 

src/components/tripApproval/trip.jsx

@@ -0,0 +1,46 @@
+import axios from 'axios';
+
+const token =
+  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkIjo0LCJlbWFpbCI6Im5kaWN1bmd1eWVzdGV2ZTRAZ21haWwuY29tIiwicm9sZUlkIjoyfSwidG9rZW5JZCI6MTY1MzkyMTAyNzQ4MywiaWF0IjoxNjUzOTIxMDI3LCJleHAiOjExNjUzOTIxMDI3fQ.77CQpRirhvPUhkNBBxs4XBmZ3rPRjs8M-2kLt0d1w-0';
+const config = {
+  headers: { Authorization: `Bearer ${token}` },
+};
+
+const tripId = 8;
+
+export const approveRequest = async () => {
+  try {
+    const res = await axios.patch(
+      `http://localhost:3000/api/trip/request/approve/${tripId}`,
+      { status: 'approved' },
+      config
+    );
+    console.log('In the response');
+    console.log(res.data.data.response);
+    return res.data;
+  } catch (error) {
+    return error;
+  }
+};
+export const rejectRequest = async (tripId) => {
+  console.log('In the req');
+  try {
+    const res = await axios.patch(
+      `http://localhost:3000/api/trip/request/approve/${tripId}`,
+      { status: 'rejected' },
+      config
+    );
+    return res.data;
+  } catch (error) {
+    return error;
+  }
+};
+
+
+
+
+
+
+
+
+

src/components/tripApproval/tripApproval.jsx

@@ -0,0 +1,107 @@
+import React, {useState, useEffect} from 'react'
+import './tripApproval.scss'
+import { toast } from 'react-toastify'
+import { useNavigate } from 'react-router-dom'
+import axios from 'axios';
+import { approveRequest, rejectRequest } from '../tripApproval/trip'
+
+
+function Approval() {
+    const [data, setData] = useState([]);
+    const [myStatus, setmyStatus] = useState('pending');
+    const [hasApproved, setHasApproved] = useState(false);
+    const [hasRejected, setHasRejected] = useState(false);
+    const [stat, setStat] = useState();
+    const [message, setMessage] = useState('');
+    const tripId = 10;
+
+  const approve = async () => {
+      const res = await approveRequest(tripId);
+      setHasApproved(true);
+      setMessage(res.data);
+      if (res.status === 200) {
+        setHasApproved(true);
+        setMessage(res.data);
+        setTimeout(() => {
+          setMessage('');
+          setStat('approved');
+        }, 3000);
+  
+      }
+    };
+  
+  const reject = async () => {
+      const res = await rejectRequest(tripId);
+      setHasRejected(true);
+      setMessage(res.data);
+      if (res.status === 200) {
+        setHasRejected(true);
+        setMessage(res.data);
+        setTimeout(() => {
+          setMessage('');
+          setStat('rejected');
+        }, 3000);
+
+      }
+
+    }
+
+    useEffect(() => {
+      const renderState = async () => {
+        const config = {
+          headers: {
+            authorization:
+              'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkIjo0LCJlbWFpbCI6Im5kaWN1bmd1eWVzdGV2ZTRAZ21haWwuY29tIiwicm9sZUlkIjoyfSwidG9rZW5JZCI6MTY1MzkyMTAyNzQ4MywiaWF0IjoxNjUzOTIxMDI3LCJleHAiOjExNjUzOTIxMDI3fQ.77CQpRirhvPUhkNBBxs4XBmZ3rPRjs8M-2kLt0d1w-0',
+          },
+        };
+        const response = await axios.get(
+          `http://localhost:3000/api/trip/request/${tripId}/manager`,
+          config
+        );
+        setData([response.data.response]);
+      };
+      renderState();
+    }, []);
+
+   
+    console.log('This is response ---->>>>>>', data);
+
+ const navigate = useNavigate() 
+
+
+  return (
+
+    
+  
+    <div className='approvalPage'>
+    
+      { data.map((trips) => {
+        { 
+        return (
+          <div key={ trips.id }>
+      <h1>Trip Request Approval</h1>
+      <h2 className='requesterInformation'>Requester Information</h2>
+      <p>Names: {trips.requester.firstName} {trips.requester.lastName} </p>
+      <p>Email: {trips.requester.email}</p>
+      <h2 className='tripInformation'>Trip Information</h2>
+      <p>Accommodation: { trips.Accommodation.name }</p>
+      <p>Departure place: { trips.departurePlace.city } , { trips.departurePlace.Country.name }</p>
+      <p>Destination place: { trips.Destination.city } , { trips.Destination.Country.name }</p>
+      <p>Departure date: {trips.departureDate}</p>
+      <p>Return date: {trips.returnDate}</p>
+      <p>Travel reason: { trips.travel_reason }</p>
+      <div className="decide">
+        <button className="approve"  onClick={approve}>Approve</button>
+        <button className="reject" onClick={reject}>Reject</button>
+      </div>
+      
+       </div>
+      );}
+     })}
+    </div>
+    )
+}
+export default Approval;
+
+
+

src/components/tripApproval/tripApproval.scss

@@ -0,0 +1,62 @@
+@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100;300;400;500;700;900&display=swap");
+
+$mainColor: #64b2bc;
+
+div.approvalPage{
+  background-color: rgb(124, 122, 122);
+  font-family: "Outfit", sans-serif;
+  text-align: center;
+  color: black;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin: auto;
+  width: 500px;
+  border-radius: 5px;
+
+  h1{
+      border-bottom: 10px solid $mainColor;
+      padding-bottom: 20px;
+      font-weight: bolder;
+  }
+
+  button{
+      background-color: $mainColor;
+      padding: 10px 40px 10px;
+      border: 1px solid $mainColor;
+      border-radius: 5px;
+      transition: all 1s;
+  }
+
+  button:hover{
+      color: white;
+      transform: scale(1.2,1.2);
+      cursor: pointer;
+      font-weight: bolder;
+  }
+
+  button.reject{
+      background-color: rgb(192, 18, 18);
+      border: 1px solid rgb(192, 18, 18);
+  }
+
+  button.viewProfile{
+    margin: 30px 150px 30px;
+  }
+
+  div.decide{
+      display: flex;
+      justify-content: space-around;
+      margin-top: 30px;
+      padding-bottom: 30px;
+  }
+
+  p{
+      line-height: 5px;
+  }
+
+  h2.tripInformation{
+    border-top: 10px solid $mainColor;
+    padding-top: 20px;
+  }
+}