]
61 | }
62 | ```
63 | ## Cancel and Confirm Request:
64 |
65 | ### GET /requester/cancelRequest/:requestIDRelief Riders
28 |
29 |
30 | You need to enable JavaScript to run this app.
31 |
32 |
33 |
43 |
44 |
45 |
46 |
--------------------------------------------------------------------------------
/frontend/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon",
9 | "purpose":"any maskable"
10 | }
11 | ],
12 | "start_url": ".",
13 | "display": "standalone",
14 | "theme_color": "#000000",
15 | "background_color": "#ffffff"
16 | }
17 |
--------------------------------------------------------------------------------
/frontend/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/frontend/readme.md:
--------------------------------------------------------------------------------
1 | RidersRelief
2 |
3 | Description : WIP
4 |
5 | WIP
6 |
7 | WIP
8 |
9 | ***
10 |
11 | UI Components :
12 | Below are available in src/components/global_ui/
13 |
14 | 1.html button is globally styled
15 |
16 | 2.InputField - custom input field
17 |
18 | 3.Spinner - Loading component
19 |
20 | 4.Logo - RR logo component
21 |
22 |
23 | ***
24 | TODO :
25 | Loading component
26 | fetch API
--------------------------------------------------------------------------------
/frontend/src/App.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
2 |
3 | @media (min-resolution: 120dpi) {
4 | body {
5 | zoom:0.82;
6 | background-color:var(--tertiary);
7 | }
8 | }
9 |
10 | :root{
11 | --primary: #64778d;
12 | --secondary:#e25b4b;
13 | --tertiary:#ecfdff48;
14 | --textColor:white;
15 | --max-width:400px;
16 | --almost-transparent:rgba(0, 0, 0, 0.200);
17 | }
18 |
19 | body {
20 | font-family: "Poppins", sans-serif;
21 | margin: 0px;
22 | padding: 0px;
23 | }
24 |
25 | * {
26 | box-sizing: border-box;
27 | }
28 | button {
29 | align-self: center;
30 | background: var(--secondary);
31 | color: white;
32 | font-size: large;
33 | border-radius: 4px;
34 | font-weight: bold;
35 | padding: 0.7rem 1.25rem;
36 | cursor: pointer;
37 | border: none;
38 | transition: color 0.2s ease;
39 | }
40 | button:hover , button:focus{
41 | outline:none !important;
42 | box-shadow: rgba(100, 100, 111, 0.3) 0.5px 5px 6px 0px;
43 |
44 | }
45 |
46 |
--------------------------------------------------------------------------------
/frontend/src/App.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import "./App.css";
3 | import { AuthProvider } from "./components/context/auth/authProvider";
4 | import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
5 | import InitialHomeRouting from "./components/home/initial_home/initialHomeRouting";
6 | import About from "./components/about/about";
7 |
8 | function App() {
9 | return (
10 |
11 |
12 |
13 |
14 |
15 |
17 |
18 |
20 |
21 |
22 |
23 |
55 | {prop.children}
56 |
57 | );
58 | };
59 |
--------------------------------------------------------------------------------
/frontend/src/components/context/new_request/newRequestProvider.js:
--------------------------------------------------------------------------------
1 | import { useEffect } from "react";
2 | import { useReducer } from "react";
3 | import { React, createContext } from "react";
4 | import { useLocation } from "react-router-dom";
5 |
6 | const newRequestReducer = (state, action) => {
7 | switch (action.type) {
8 | case "REQUEST_TYPE":
9 | return { ...state, requestType: action.payload };
10 | case "ADD_CATEGORIES_IMAGES":
11 | return { ...state, uploadItemsList: true, categories: action.payload, };
12 | case "ENTER_ITEMS":
13 | return {
14 | ...state,
15 | uploadItemsList: false,
16 | categories: action.categories,
17 | itemsList: action.itemsList,
18 | };
19 | case "ADD_PICKUP_LOCATION_COORDINATES":
20 | return { ...state,pickupLocation:{
21 | address: "",
22 | city: "",
23 | area: "",
24 | }, pickupLocationCoordinates: action.payload };
25 |
26 | case "ADD_DROP_LOCATION_COORDINATES":
27 | return { ...state,dropLocation:{
28 | address: "",
29 | city: "",
30 | area: "",
31 | }, dropLocationCoordinates: action.payload };
32 | case "ADD_PICKUP_ADDRESS":
33 | return { ...state,pickupLocationCoordinates:[], pickupLocation: action.payload };
34 | case "ADD_DROP_ADDRESS":
35 | return { ...state,dropLocationCoordinates:[], dropLocation: action.payload};
36 |
37 | }
38 | };
39 | const initState = {
40 | requestType: "",
41 | categories: [],
42 | uploadItemsList: false,
43 | itemsList: [],
44 | pickupLocation: {
45 | address: "",
46 | city: "",
47 | area: "",
48 | },
49 | dropLocation: {
50 | address: "",
51 | city: "",
52 | area: "",
53 | },
54 | dropLocationCoordinates: [],
55 | pickupLocationCoordinates: [],
56 | };
57 |
58 | export const NewRequestContext = createContext();
59 |
60 | export const NewRequestProvider = (prop) => {
61 | const [state, dispatch] = useReducer(newRequestReducer, initState, () => {
62 | const data = localStorage.getItem("new_request");
63 | if (data) return JSON.parse(data);
64 | else return initState;
65 | });
66 | const location = useLocation()
67 | useEffect(()=>{
68 |
69 | localStorage.setItem('draft',location.pathname)
70 | },[location.pathname])
71 | useEffect(() => {
72 |
73 | localStorage.setItem("new_request", JSON.stringify(state));
74 | }, [state]);
75 | return (
76 |
82 | {prop.children}
83 |
84 | );
85 | };
86 |
--------------------------------------------------------------------------------
/frontend/src/components/context/new_request/place_request.js:
--------------------------------------------------------------------------------
1 | export const placeRequest = async (formData,token,type)=>{
2 |
3 | try {
4 | const imgsParsed = sessionStorage.getItem('uploaded_images')
5 | const imgs = JSON.parse(imgsParsed)
6 | console.log(formData);
7 | for(const src in imgs){
8 | console.log(imgs[src]);
9 | const res = await fetch(imgs[src])
10 | const blob = await res.blob()
11 | const file = new File([blob],"image",{type:'image/jpg'})
12 | formData.append('images',file)
13 | }
14 | const res = await fetch(process.env.REACT_APP_URL+`/requests/${type==='p&d'?"pd":"general"}/new`,{
15 | method:'POST',
16 | headers: {
17 | authorization: "Bearer " + token,
18 | },
19 | body:formData
20 | })
21 | const data = await res.json()
22 | console.log(data);
23 | if(data.status === 'success'){
24 | sessionStorage.clear()
25 | localStorage.removeItem('new_request')
26 | localStorage.setItem('draft','/new_request')
27 | return 1;
28 | }else{
29 | return data.message
30 | }
31 |
32 | } catch (error) {
33 |
34 | return "Unable to access the server right now! Please try after some time"
35 |
36 | }
37 |
38 | }
--------------------------------------------------------------------------------
/frontend/src/components/global_ui/Imginput/ImgInput.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import imageCompression from "browser-image-compression";
3 | import styles from "./ImgInput.module.css";
4 |
5 | const ImgInput = ({ imgHeader, imgText, setImages}) => {
6 |
7 | async function onInputChange(e) {
8 | var imageFile = e.target.files[0];
9 | var options = {
10 | maxSizeMB: 0.1,
11 | useWebWorker: true,
12 | };
13 | const compressed = await imageCompression(imageFile, options);
14 | let reader = new FileReader();
15 | reader.onload = function () {
16 | setImages((Image) => [...Image, reader.result]);
17 | };
18 | reader.readAsDataURL(compressed);
19 | document.getElementById(imgHeader).value = null;
20 | }
21 |
22 | return (
23 |
24 |
25 | {imgHeader}
26 |
36 |
37 |
35 | { text}
36 |
37 | )
38 | }
39 |
40 | export default Button
41 |
--------------------------------------------------------------------------------
/frontend/src/components/global_ui/carousel/carousel.js:
--------------------------------------------------------------------------------
1 | import React,{useState} from 'react'
2 | import styles from './carousel.module.css'
3 |
4 | function Carousel({list,title}) {
5 | const [current, setcurrent] = useState(0);
6 | function forward(){
7 | if(current!=list.length-1){
8 | setTimeout(() => {
9 | setcurrent(current+1)
10 | }, 100);
11 |
12 | }
13 | }
14 | function backward(){
15 | if(current!=0){
16 | setTimeout(() => {
17 | setcurrent(current-1)
18 | }, 100);
19 | }
20 | }
21 |
22 | return (
23 |
24 |
{title}
25 |
26 |
27 |
backward()}
30 | style={{color:current==0?'lightgray':'black'}}
31 | >
32 |
33 | {
34 | list.map((item)=>{
35 | return(
36 | list[current]==item &&
37 |
38 | )
39 | })
40 | }
41 |
42 |
43 |
forward()}
46 | style={{color:current==list.length-1?'lightgray':'black'}}
47 | >
48 |
49 |
18 |
19 |
35 |
36 |
37 |
15 |
16 |
{placeholder}
17 |
18 | {error &&
{error} }
19 | {error &&
}
20 |
10 |
11 |
28 | {back && (
29 | {
32 | if (onBackClick !== null) {
33 | onBackClick();
34 | } else route.replace(back);
35 | }}
36 | className="fas fa-chevron-left"
37 | >
38 | )}
39 | {title}
40 |
41 | );
42 | };
43 |
44 | export default Navbar;
45 |
--------------------------------------------------------------------------------
/frontend/src/components/global_ui/overlay.css:
--------------------------------------------------------------------------------
1 | .overlay{
2 | display: none;
3 | position: fixed;
4 |
5 | top:0;
6 | left:0;
7 | right:0;
8 | bottom:0;
9 |
10 | width: 100%;
11 | height: 100%;
12 | display: grid;
13 | justify-content: center;
14 | overflow:hidden;
15 | background-color: rgba(0,0,0,0.3); /* Black w/ opacity */
16 | }
17 |
18 | .overlay-content{
19 | font-size: medium;
20 | font-weight: 500;
21 | background-color: #fefefe;
22 | border: 1px solid grey;
23 | border-radius: 7px;
24 |
25 | padding: 10px 20px 30px;
26 | width:330px;
27 | height: 35%;
28 |
29 | text-align: center;
30 |
31 | position: absolute;
32 | top: 50%;
33 | left: 50%;
34 | transform: translate(-50%, -50%);
35 |
36 | display: grid;
37 | justify-content: center;
38 | align-content:space-around;
39 |
40 | box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
41 | transition: 0.3s;
42 | }
43 |
44 | /* .btn-container{
45 | display: flex;
46 | justify-content:flex-end;
47 | align-content: center;
48 | padding: 0px;
49 | margin: 0px;
50 | } */
51 |
52 | .btn{
53 | border:none;
54 | outline: none;
55 | background-color: green;
56 | color: white;
57 | padding: 8px 30px;
58 | }
59 |
60 | @media screen and (max-width: 450px) {
61 | .overlay-content{
62 | height: 25%;
63 | }
64 | }
65 |
66 |
--------------------------------------------------------------------------------
/frontend/src/components/global_ui/overlay.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | function Overlay({message,display,z_index,showOverlay}) {
4 | return (
5 |
6 |
7 | {/* Shows Dynamic Content for cancelling and confirmation */}
8 |
9 | {
10 | message
11 | }
12 |
13 |
14 | {/* Buttons Performing Operations */}
15 |
16 | showOverlay}>OK
17 |
18 |
19 |
Remarks
8 |
9 |
10 | {remarks}
11 |
12 |
13 |
14 | ):null;
15 | }
16 |
17 | export default Remarks;
--------------------------------------------------------------------------------
/frontend/src/components/global_ui/remarks/remarks.module.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@1,400&display=swap');
2 | .remarksContainer{
3 | width: min(90%,400px);
4 | min-height: 70px;
5 | overflow:auto;
6 | border-radius: 8px;
7 | padding: 8px;
8 | height: auto;
9 | font-style: italic;
10 | font-family: 'Lato', sans-serif;
11 | border: 2px solid rgba(128, 128, 128, 0.281);
12 |
13 | }
14 | .remarksText{
15 | text-align: center;
16 | }
--------------------------------------------------------------------------------
/frontend/src/components/global_ui/spinner.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import styles from './spinner.module.css'
3 | /**
4 | *
5 | * @param {string} radius radius of spinner
6 | * @returns Spinner component
7 | */
8 | const Spinner = ({radius}) => {
9 | return (
10 |
11 |
12 |
13 | );
14 | }
15 |
16 | const LoadingScreen = () => {
17 | return (
18 |
19 |
21 | );
22 | }
23 | export {Spinner,LoadingScreen};
--------------------------------------------------------------------------------
/frontend/src/components/global_ui/spinner.module.css:
--------------------------------------------------------------------------------
1 | .spinner{
2 |
3 | display: inline-block;
4 | border: 4px solid rgba(128, 128, 128, 0.459);
5 | border-radius: 50%;
6 | border-top-color: green;
7 | animation: spin 0.8s infinite cubic-bezier(.35,1.34,.87,.47) ;
8 | }
9 |
10 | @keyframes spin {
11 | to {
12 | transform: rotate(360deg);
13 | }
14 | }
15 |
16 | .loadingScreen{
17 | display: grid;
18 | justify-items: center;
19 | align-items: center;
20 | height: 100vh;
21 | }
--------------------------------------------------------------------------------
/frontend/src/components/global_ui/textarea/textArea.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import styles from './textArea.module.css'
3 |
4 | function textArea({
5 | textAlign,size,minLength,value,placeholder,name,type,onChange,error,maxLength,
6 | rows,cols,
7 | width
8 | }) {
9 | return (
10 |
11 |
14 |
{placeholder}
15 |
16 | {error &&
{error} }
17 | {error &&
}
18 |
25 |
26 |
27 |
28 |
29 | The Relief Riders initiative is a voluntary effort by a group of
30 | cyclists to support the needs of the elderly and the needy in their
31 | local communities.
33 |
34 |
How can we help you?
35 |
36 |
37 | Login as Requester
38 |
39 |
40 | Login as Rider
41 |
42 |
43 |
44 |
45 |
This Week's Top Riders
31 | {
32 | error ? {error}
:
33 |
34 | {
35 | data.map((item,i)=>
38 | }
39 |
40 | );
41 | }else{
42 | return (
51 |
52 | #{position}
53 |
57 |
58 | {name}
59 |
60 |
61 | {deliveryCount}
62 | deliveries
63 |
64 |
6 |
Difficulty in using the app?
7 |
11 |
19 |
20 |
21 | routehandler("new_request")} className="rider-home-btn">
23 |
26 | routehandler("my_requests")} className="rider-home-btn">
27 |
30 |
31 | routehandler("my_profile")} className="rider-home-btn">
32 |
35 | {
37 | logout(dispatch);
38 | history.replace("/");
39 | }}
40 | className="rider-home-btn"
41 | >
42 |
45 |
46 |
14 |
15 |
16 |
18 |
19 |
20 |
22 |
23 |
24 |
25 |
27 |
28 |
29 |
30 |
32 |
33 |
34 | );
35 | };
36 |
37 | export default RequesterHomeRoutes;
38 |
--------------------------------------------------------------------------------
/frontend/src/components/home/requester/style.css:
--------------------------------------------------------------------------------
1 | .riderhome{
2 | display: flex;
3 | flex-flow: column;
4 | gap: min(2vh,20px);
5 | align-self: flex-start;
6 |
7 | font-size: min(4.5vw,1.25rem);
8 | }
9 | .rider-home-container{
10 | height: 100vh;
11 | display: grid;
12 | align-content: flex-start;
13 | }
14 |
15 | .rider-home-btn{
16 | width: min(80%,400px);
17 | position: relative;
18 | text-transform: uppercase;
19 |
20 | padding: min(3vh,1.2em);
21 | font-weight: bold;
22 | }
23 | .rider-home-btn:focus , .rider-home-btn:hover{
24 | box-shadow: rgba(100, 100, 111, 0.3) 0px 12px 29px 0px;
25 |
26 | }
27 |
28 | .rider-home-btn i{
29 | position: absolute;
30 | left: 9%;
31 |
32 | width: max-content;
33 | }
34 |
--------------------------------------------------------------------------------
/frontend/src/components/home/rider/RiderHome.js:
--------------------------------------------------------------------------------
1 | import React, { useContext } from "react";
2 |
3 | import { AuthContext } from "../../context/auth/authProvider";
4 | import { logout } from "../../context/auth/authOperations";
5 |
6 | // import "../requester/style.css";
7 | import { useHistory } from "react-router-dom";
8 | import Logo from "../../global_ui/logo";
9 | import Navbar from "../../global_ui/nav";
10 |
11 | function RiderHome() {
12 | const history = useHistory();
13 | const { dispatch } = useContext(AuthContext);
14 |
15 | const routehandler = (route) => {
16 | history.push(route);
17 | };
18 |
19 | return (
20 |
21 |
22 |
23 | routehandler("/new_delivery")} className="rider-home-btn">
25 |
28 | routehandler("/current_request")} className="rider-home-btn">
29 |
32 | routehandler("/my_deliveries")} className="rider-home-btn">
33 |
36 | routehandler("/my_profile")} className="rider-home-btn">
37 |
40 | {
42 | logout(dispatch);
43 | history.replace("/");
44 | }}
45 | className="rider-home-btn"
46 | >
47 |
50 |
51 |
14 |
15 |
16 |
17 |
19 |
20 |
21 |
23 |
24 |
25 |
27 |
28 |
29 |
31 |
32 |
33 |
35 |
36 |
37 | );
38 | }
39 |
40 | export default RiderHomeRoutes;
--------------------------------------------------------------------------------
/frontend/src/components/requester/feedback/feedBackForm.css:
--------------------------------------------------------------------------------
1 | .feedBackForm{
2 | width: min(500px,90%);
3 | margin: 40px auto;
4 | }
5 |
6 | .radioButton{
7 | display: flex;
8 | justify-content: space-between;
9 | align-items: flex-start;
10 | font-size: large;
11 | margin-bottom: 14px;
12 | }
13 |
14 |
15 | .radioButton>span{
16 | white-space: nowrap;
17 | }
--------------------------------------------------------------------------------
/frontend/src/components/requester/my_requests/MyRequests.module.css:
--------------------------------------------------------------------------------
1 | .myRequestsList
2 | {
3 | margin-top: 30px;
4 | min-height: 100vh;
5 | text-align: center;
6 | margin-left: auto;
7 | margin-right: auto;
8 | justify-items: center;
9 | }
10 |
11 | .myRequestsListItem{
12 | padding: 15px 20px;
13 | min-height: 200px;
14 | margin-bottom: 20px;
15 | margin-left: auto;
16 | margin-right: auto;
17 | row-gap: 3px;
18 | display: flex;
19 | flex-direction: column;
20 | align-content: center;
21 | justify-content:space-evenly;
22 | font-size: clamp(0.7rem, 1vw, 1.2rem);
23 | width: min(90%, 550px);
24 | border-radius: 4px;
25 | box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
26 | }
27 |
28 | .rowOne{
29 | display: flex;
30 | flex-direction: row;
31 | justify-content:space-between;
32 | align-content: center;
33 | }
34 |
35 |
36 | .rowTwo{
37 | display: flex;
38 | flex-direction: row;
39 | justify-items: start;
40 | align-items: center;
41 | }
42 |
43 |
44 | .myRequestsListItem:hover{
45 | box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
46 | cursor: pointer;
47 | }
48 | .date
49 | {
50 | color: black;
51 | font-size: 15px;
52 | width: 50%;
53 | text-align: start;
54 | }
55 | .requestType
56 | {
57 | font-weight: bold;
58 | background-color: rgb(167, 255, 255);
59 | border-radius: 20px;
60 | color: black;
61 | padding: 5px 10px;
62 | outline: none;
63 | }
64 | .covidStatus
65 | {
66 | font-weight: bold;
67 | color: black;
68 | text-align: center;
69 | border-radius: 20px;
70 | background-color: rgb(167, 255, 255);
71 | padding: 5px 10px;
72 | }
73 | .medicines
74 | {
75 | margin-right:4px;
76 | color: white;
77 | border-radius: 20px;
78 | background-color: darkmagenta;
79 | padding: 5px 10px;
80 |
81 | }
82 | .groceries
83 | {
84 | margin-right: 4px;
85 | color: white;
86 | border-radius: 20px;
87 | background-color: darkmagenta;
88 | padding: 5px 10px;
89 |
90 | }
91 | .misc
92 | {
93 | margin-right: 4px;
94 | color: white;
95 | background-color: darkmagenta;
96 | border-radius: 20px;
97 | padding: 5px 10px;
98 |
99 | }
100 |
101 | .viewButton{
102 | display: none;
103 | margin: auto;
104 | padding: 3px;
105 | border-radius: 10px;
106 | border: 1px solid black;
107 | box-shadow: 0 0 2px black;
108 | }
109 | .ok
110 | {
111 | color: green;
112 | font-weight: bold;
113 | }
114 | .notOk
115 | {
116 | color: red;
117 | font-weight: bold;
118 | }
119 |
120 | .noRequests{
121 | text-align: center;
122 | margin-top: 45vh;
123 | font-weight: 600;
124 | color: #242323;
125 |
126 |
127 | }
--------------------------------------------------------------------------------
/frontend/src/components/requester/my_requests/MyRequestsListItem.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useHistory } from 'react-router-dom';
3 | import styles from './MyRequests.module.css';
4 |
5 | const MyRequestsListItem = (props) => {
6 |
7 | const routes = useHistory()
8 | return (
9 | {
10 | routes.push("my_requests/" + props.data.requestNumber, {
11 | request: props.data
12 | })
13 | }}
14 | className={styles.myRequestsListItem}>
15 |
16 | Order Date : {props.data.date}
17 | Status
18 | {
19 | (props.data.requestStatus == "DELIVERED" || props.data.requestStatus == "UNDER DELIVERY") ?
20 | ({" "+props.data.requestStatus} ) :
21 | ({" "+props.data.requestStatus} )
22 | }
23 |
24 |
25 |
26 |
27 | Request Type
28 | {props.data.requestType}
29 |
30 |
31 |
32 | Requester Status
33 | {props.data.requesterCovidStatus ?"COVID+":"COVID-FREE"}
34 |
35 |
36 |
37 | Ordered Items
38 |
39 | {
40 | props.data.itemCategories.map((category, index) => {
41 | switch (category) {
42 | case 'MEDICINES':
43 | return Medcines ;
44 | case 'GROCERIES':
45 | return Groceries ;
46 | case 'MISC':
47 | return Misc. ;
48 | }
49 | })
50 | }
51 |
52 |
53 |
54 |
9 |
10 |
12 | {
15 | if(!match.location.state) return
20 |
22 |
23 |
24 | );
25 | };
26 |
27 | export default MyRequestsRoutes;
28 |
--------------------------------------------------------------------------------
/frontend/src/components/requester/my_requests/placed_request/cancel_confirm_request.js:
--------------------------------------------------------------------------------
1 | const cancelConfirmRequest = async (token, requestID,cancel=false) => {
2 | try {
3 | let url
4 | if(cancel)
5 | url = `${process.env.REACT_APP_URL}/requester/cancelRequest/${requestID}`;
6 | else
7 | url = `${process.env.REACT_APP_URL}/requester/confirmRequest/${requestID}`;
8 | console.log(url);
9 | const res = await fetch(url, {
10 | method: "GET",
11 | headers: {
12 | authorization: "Bearer " + token,
13 | },
14 | });
15 |
16 | const data = await res.json();
17 | console.log(data);
18 | if (data.status[0] === "s") {
19 | return 1;
20 | } else {
21 | return data.message;
22 | }
23 | } catch (error) {
24 | return "Unable to access server, please try again later";
25 | }
26 | };
27 | export default cancelConfirmRequest;
28 |
--------------------------------------------------------------------------------
/frontend/src/components/requester/my_requests/placed_request/items_requested_list.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | const ItemsRequestedList = ({ list, category,styles }) => {
3 | return (
4 |
5 |
Items Requested
6 |
7 |
8 | {category.map((cat) => (
9 |
13 | {cat}
14 |
15 | ))}
16 |
17 |
18 | {list.map((item) => (
19 |
20 |
26 | {item.itemName}
27 |
28 | {item.quantity}
29 |
30 | ))}
31 |
32 |
19 |
24 |
25 | {
26 | items.map((link) => {
27 | console.log(10,link);
28 | return (
29 |
31 | onImageClicked(link)
32 | }
33 | className={styles.singleImage}
34 | key={link}
35 | >
36 |
37 |
Items
38 |
39 | );
40 | })
41 | }
42 | {
43 | bills.map((link, index) => (
44 |
46 | onImageClicked(process.env.REACT_APP_URL + link)
47 | }
48 | className={styles.singleImage}
49 | key={link}
50 | >
51 |
52 |
Bill #{index + 1}
53 |
54 | ))
55 | }
56 | {
57 | images.map((link) => (
58 |
60 | onImageClicked(process.env.REACT_APP_URL + link)
61 | }
62 | className={styles.singleImage}
63 | key={link}
64 | >
65 |
66 |
Rider-Selfie
67 |
68 | ))
69 | }
70 |
14 |
15 |
16 |
17 |
18 | Please choose the items you want to request
19 |
20 | routehandler("add_image")}
22 | >
23 | Upload Image
24 |
25 | or
26 | routehandler("enter_items")}
28 | >
29 | Enter Items
30 |
31 |
32 |
18 |
19 |
20 |
21 | {
25 | dispatch({ type: "REQUEST_TYPE", payload: "general" });
26 | routehandler("list_type");
27 | }}
28 | >
29 | General Request
30 |
31 | {
34 | const route = "list_type";
35 | dispatch({ type: "REQUEST_TYPE", payload: "p&d" });
36 |
37 | routehandler(route);
38 | }}
39 | >
40 | Pickup / Drop
41 |
42 |
43 |
38 |
39 |
40 |
41 |
43 |
44 |
46 |
47 |
49 |
50 |
52 |
53 |
55 |
56 |
58 |
59 |
61 |
62 |
64 |
65 |
67 |
68 |
69 |
70 |
71 | );
72 | };
73 |
74 | export default NewRequestRoutes;
75 |
--------------------------------------------------------------------------------
/frontend/src/components/requester/profile/RequesterProfile.module.css:
--------------------------------------------------------------------------------
1 | .requesterProfileContainer {
2 | display: grid;
3 | grid-gap: 8px;
4 | justify-items: center;
5 | margin-bottom: 10px;
6 | }
7 |
8 | .requesterProfileContainer label {
9 | font-weight: bold;
10 | align-self: start;
11 | position: relative;
12 | color: darkslategray;
13 | }
14 |
15 | .profileImage {
16 | border: 1px solid black;
17 | background-color: pink;
18 | margin: 3px;
19 |
20 | justify-self: center;
21 | border-radius: 50%;
22 | width: min(50%, 150px);
23 | }
24 | .profileDummy {
25 | position: relative;
26 | width: min(35vw, 150px);
27 | height: min(35vw, 150px);
28 | background: var(--secondary);
29 | border-radius: 50%;
30 | margin: 0 0 8px 0;
31 | }
32 | .profileDummy::before {
33 | content: "Profile";
34 | position: absolute;
35 | top: 50%;
36 | left: 50%;
37 | transform: translate(-50%, -50%);
38 | }
39 |
40 | .requesterProfileContainer span {
41 | padding: 8px;
42 | width: min(85%, var(--max-width));
43 | box-sizing: border-box;
44 | border: 2px solid #ddd;
45 | font-size: 16px;
46 | border-radius: 6px;
47 | }
48 |
49 |
--------------------------------------------------------------------------------
/frontend/src/components/requester/profile/editRequesterProfile.module.css:
--------------------------------------------------------------------------------
1 | .requesterProfileContainer {
2 | display: grid;
3 | gap: 10px;
4 | justify-items: center;
5 | margin-bottom: 10px;
6 | }
7 |
8 | .profileImage {
9 | border: 1px solid black;
10 | background-color: pink;
11 | margin: 3px;
12 |
13 | justify-self: center;
14 | border-radius: 50%;
15 | width: min(50%, 150px);
16 | }
17 | .profileDummy {
18 | position: relative;
19 | width: min(35vw, 150px);
20 | height: min(35vw, 150px);
21 | background: var(--secondary);
22 | border-radius: 50%;
23 | margin: 0 0 8px 0;
24 | }
25 | .profileDummy::before {
26 | content: "Profile";
27 |
28 | position: absolute;
29 | top: 50%;
30 | left: 50%;
31 | transform: translate(-50%, -50%);
32 | }
33 |
34 | .editProfileForm {
35 | display: grid;
36 | grid-gap: 10px;
37 | width: min(90%, var(--max-width));
38 | }
39 | .editProfileForm > div {
40 | width: min(100%, var(--max-width));
41 | }
42 |
43 | .address {
44 | display: grid;
45 | gap: 8px;
46 |
47 | margin-bottom: 1rem;
48 | grid-template-areas:
49 | "completeAddress completeAddress"
50 | "area city";
51 | }
52 | .address div:first-of-type {
53 | padding: 0;
54 | margin: 0;
55 | }
56 | .city {
57 | grid-area: city;
58 | }
59 | .city > div {
60 | width: 100%;
61 | }
62 | .area {
63 | grid-area: area;
64 | }
65 | .completeAddress {
66 | grid-area: completeAddress;
67 | }
68 |
--------------------------------------------------------------------------------
/frontend/src/components/requester/profile/profileRouting.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Route, Switch } from 'react-router-dom';
3 | import RequesterProfile from './RequesterProfile'
4 | import EditRequesterProfile from './editRequesterProfile'
5 |
6 | function ProfileRouting() {
7 | return (
8 |
9 |
10 |
12 |
13 |
14 |
16 |
17 | )
18 | }
19 |
20 | export default ProfileRouting
21 |
--------------------------------------------------------------------------------
/frontend/src/components/requester/readme.md:
--------------------------------------------------------------------------------
1 | Must provide
2 |
3 | 1. My requests screen
4 | 2. New_request screen (order form) and it's functions
5 | 3. Profile screen
6 | 4. Respective functions of above screens. (like in profile screen, ability to change name....etc)
--------------------------------------------------------------------------------
/frontend/src/components/rider/common/viewRequest.module.css:
--------------------------------------------------------------------------------
1 | .currentRequestContent{
2 | display: grid;
3 | align-content: flex-start;
4 | justify-items: center;
5 | /* width: min(90%,var(--maxselect-width)); */
6 | }
7 |
8 | .select {
9 | width: min(300px,90%);
10 |
11 | }
12 | .categories{
13 | display: flex;
14 | margin-top: 8px;
15 | gap: 8px;
16 | justify-content: start;
17 | align-items: center;
18 | }
19 |
20 | .currentRequestContent>*{
21 | margin-bottom: 8px;
22 | }
23 |
24 | .request{
25 | font-size: large;
26 | font-weight: 600;
27 | text-align: center;
28 | }
29 | .name{
30 | font-size: large;
31 | font-weight: 600;
32 | }
33 |
34 | .mobile{
35 | display: flex;
36 | flex-direction: row;
37 | justify-content: flex-start;
38 | align-items: center;
39 | gap: 15px;
40 | }
41 |
42 | .address{
43 | padding: 10px;
44 | border: 1px solid darkslategray;
45 | border-radius: 6px;
46 | display: flex;
47 | flex-direction: column;
48 | gap: 0px;
49 | }
50 |
51 | .addressPlaceHolder{
52 | margin-top: -25px;
53 | background-color: white;
54 | width: fit-content;
55 | font-size: large;
56 | font-weight:bold;
57 | margin-bottom: 0px;
58 | }
59 |
60 | .inputField{
61 | margin: 5px;
62 | padding: 0px;
63 | display: flex;
64 | flex-direction: row;
65 | justify-content: space-between;
66 | }
67 |
68 | .fieldName{
69 | margin: 0px;
70 | }
71 |
72 | .field{
73 | margin: 0px;
74 | border: 1px solid darkslategrey;
75 | height: 30px;
76 | padding-left: 10px;
77 | padding-right: 5px;
78 | min-width: 150px;
79 | border-radius: 4px;
80 | margin-left: 4px;
81 | }
82 |
83 |
84 | .orderType{
85 | display: flex;
86 | justify-content: space-between;
87 | gap: 10px;
88 |
89 |
90 | }
91 | .orderType Button{
92 | border-radius: 16px;
93 | }
94 |
95 | .itemsListList{
96 | margin-top: 15px;
97 | width: min(90%,var(--max-width));
98 | }
99 |
100 | table {
101 | border-collapse: collapse;
102 | width: 100%;
103 | }
104 |
105 | td,th {
106 | border: 1px solid #ddd;
107 | padding: 7px;
108 | text-align: left;
109 | }
110 |
111 |
112 | tr:hover {background-color: #ddd;}
113 |
114 | th {
115 | background-color:var(--secondary);
116 | color: black;
117 | }
118 |
119 |
120 | .noRequests{
121 | display: grid;
122 | flex-direction: column;
123 | justify-items:center;
124 | width: 100%;
125 | height: 100vh;
126 | }
127 |
--------------------------------------------------------------------------------
/frontend/src/components/rider/current_request/check_list.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-unused-vars */
2 | import React from "react";
3 | import styles from "./checklist.module.css";
4 | function CheckList({ items ,category,dispatch}) {
5 |
6 | const _check = (e,item,index)=>{
7 | if(e.target.checked){
8 | dispatch({type:'SETITEMS',payload:item})
9 | }else{
10 |
11 | dispatch({type:'REMOVEITEMS',payload:index})
12 |
13 | }
14 | }
15 |
16 | return (
17 | <>
18 | Items requested
19 |
20 | {category.map((cat) => (
21 |
25 | {cat}
26 |
27 | ))}
28 |
29 | Please tick the items you purchased
30 |
31 |
32 | {items.map((req,index) => {
33 | return (
34 |
35 |
36 | {req.itemName} - {req.quantity}
37 |
38 |
39 |
41 |
42 | );
43 | })}
44 |
45 |
46 | );
47 | }
48 |
49 | export default CheckList;
50 |
--------------------------------------------------------------------------------
/frontend/src/components/rider/current_request/checklist.module.css:
--------------------------------------------------------------------------------
1 | .checklist_container {
2 | display: grid;
3 | width: min(90%, 400px);
4 | padding-left: 4px;
5 | }
6 | .checkbox {
7 | padding: 0;
8 | display: flex;
9 | justify-content: space-between;
10 | }
11 |
12 | .checklist1 {
13 | appearance: none;
14 | -webkit-appearance: none;
15 | height: 24px;
16 | width: 24px;
17 | background: #b6b6b67e;
18 | border-radius: 8px;
19 | cursor: pointer;
20 | display: flex;
21 | align-items: center;
22 | justify-content: center;
23 | outline: none;
24 | }
25 |
26 | .checklist1:after {
27 | content: "\2713";
28 | font-size: 20px;
29 | color: white;
30 | display: none;
31 | }
32 | .checklist1:hover {
33 | background-color: #a5a5a5;
34 | }
35 | .checklist1:checked {
36 | background-color: #5bcd3e;
37 | }
38 | .checklist1:checked:after {
39 | display: block;
40 | }
41 |
42 | .category span {
43 | width: fit-content;
44 | font-size: clamp(0.8rem, 1.2vw, 1rem);
45 | margin-right: 0.6em;
46 | padding: 0.3em 0.6em;
47 | font-family: 'Lato', sans-serif;
48 | border-radius: 1rem;
49 | }
50 | .catGreen {
51 | color: honeydew;
52 | background: rgb(250, 93, 93) ;
53 | }
54 | .catGray {
55 | color: white;
56 | background: rgb(75, 131, 216);
57 | }
--------------------------------------------------------------------------------
/frontend/src/components/rider/current_request/fetch_current_request.js:
--------------------------------------------------------------------------------
1 | export const fetchCurrentRequest = async (dispatch, token) => {
2 |
3 | try {
4 | const res = await fetch(process.env.REACT_APP_URL + "/rider/currentRequest", {
5 | method: "GET",
6 | headers: {
7 | authorization: "Bearer " + token,
8 | },
9 | });
10 | const data = await res.json()
11 | console.log(data)
12 | if (data.status === 'success') {
13 | dispatch({ type: "SETREQUEST", payload: data.message });
14 | } else {
15 | dispatch({ type: "SHOWMSG", payload: data.message });
16 |
17 | }
18 | } catch (error) {
19 | dispatch({ type: "SHOWMSG", payload: "Unable to access server, Please try again " });
20 |
21 | }
22 |
23 |
24 | };
25 |
26 | // eslint-disable-next-line no-unused-vars
27 | const request = {
28 | requestNumber: "8628290",
29 | requesterID: "8628290",
30 | requestStatus: "PENDING",
31 | requesterCovidStatus: true,
32 | requestType: "P&D",
33 | name: "Mark Zucc",
34 | phoneNumber: "9999999999",
35 | itemsListImages: [
36 | // "https://images.unsplash.com/photo-1586281380117-5a60ae2050cc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80",
37 | ],
38 | riderID: {
39 | name: "Someone",
40 | },
41 | itemsListList: [
42 | {
43 | itemName: "Tomato",
44 | quantity: "2kg",
45 | },
46 | {
47 | itemName: "Zomato",
48 | quantity: "2kg",
49 | },
50 | ],
51 | itemCategories: ["MEDICINES", "MISC"],
52 | remarks: "Please delivery ASAP here",
53 | billsImageList: [
54 | // "https://images.unsplash.com/photo-1586281380117-5a60ae2050cc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80",
55 | ],
56 | rideImages: [
57 | // "https://images.unsplash.com/photo-1586281380117-5a60ae2050cc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80",
58 | ],
59 | pickupLocationAddress: {
60 | addressLine: "Some place far away",
61 | area: "",
62 | city: "Unknown",
63 | pincode: "XXXXXX",
64 | },
65 | dropLocationAddress: null,
66 | // {
67 | // addressLine: "Some place far away",
68 | // area: "",
69 | // city: "Unknown",
70 | // pincode: "XXXXXX",
71 | // }
72 | pickupLocationCoordinates: {
73 | coordinates: [17.9, 78.6],
74 | },
75 | dropLocationCoordinates: {
76 | coordinates: [17.9, 78.6],
77 | },
78 | };
79 |
--------------------------------------------------------------------------------
/frontend/src/components/rider/current_request/finish_request.js:
--------------------------------------------------------------------------------
1 |
2 | export const finishRequest = async (token, cancel = false) => {
3 | try {
4 | if (cancel) {
5 | const url = process.env.REACT_APP_URL + `/rider/cancelDelivery`;
6 | return await cancelDelivery(url, token)
7 | }
8 | else {
9 |
10 |
11 | const formData = new FormData()
12 | const imgsParsed = sessionStorage.getItem('i-images')
13 | const imgs = JSON.parse(imgsParsed)
14 | const imgsParsedBills = sessionStorage.getItem('b-images')
15 | const bills = JSON.parse(imgsParsedBills)
16 |
17 | for (const src in bills) {
18 | const res = await fetch(imgs[src])
19 | const blob = await res.blob()
20 | const file = new File([blob], "bill", { type: 'image/jpg' })
21 | formData.append('images', file)
22 | }
23 |
24 | for (const src in imgs) {
25 | const res = await fetch(imgs[src])
26 | const blob = await res.blob()
27 | const file = new File([blob], "image", { type: 'image/jpg' })
28 | formData.append('images', file)
29 | }
30 |
31 |
32 |
33 | const url = process.env.REACT_APP_URL + `/rider/finishDelivery`;
34 |
35 | const res = await fetch(url, {
36 | method: "POST",
37 | headers: {
38 | authorization: "Bearer " + token,
39 | },
40 | body: formData
41 | });
42 | const data = await res.json();
43 | console.log(data);
44 | if (data.status === "success") {
45 | sessionStorage.clear();
46 | return 1;
47 | } else {
48 | return data.message;
49 | }
50 | }
51 | } catch (error) {
52 | console.log(error);
53 | return "Unable to access server, Please try again later";
54 | }
55 | };
56 |
57 | const cancelDelivery = async (url, token) => {
58 | const res = await fetch(url, {
59 | method: "GET",
60 | headers: {
61 | authorization: "Bearer " + token,
62 | },
63 |
64 | });
65 | const data = await res.json();
66 | console.log(data);
67 | if (data.status === "success") {
68 | sessionStorage.clear();
69 | return 1;
70 | } else {
71 |
72 | return data.message;
73 | }
74 | }
--------------------------------------------------------------------------------
/frontend/src/components/rider/current_request/preview_images.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import ImageViewer from "../../global_ui/image_viewer/image_viewer";
3 |
4 | import styles from "./current_request.module.css";
5 | const PreviewImages = ({ setImages, title, images, imgWidth = "150px",canDelete = false }) => {
6 | const [imageViewerData, setImageViewerData] = useState({
7 | show: false,
8 | src: "",
9 | });
10 | const deleteImage = (index) => {
11 | console.log(index);
12 | setImages((imgs) => {
13 | const imgList = [...imgs]
14 | imgList.splice(index, 1)
15 |
16 | return [...imgList]
17 | })
18 | }
19 | const onImageClicked = (src) => {
20 | setImageViewerData({ show: true, src: src });
21 | };
22 | return (
23 | <>
24 | {images.length > 0 && {title} }
25 |
31 |
36 |
37 |
38 | {images.map((link, index) => {
39 | console.log(link);
40 | return (
41 |
42 |
47 | { canDelete &&
deleteImage(index)} className="fas fa-times-circle" > }
48 |
onImageClicked(link)} src={ process.env.REACT_APP_URL+ link} alt="img" />
52 |
53 | )
54 | })}
55 |
25 | {covid && (
26 |
39 | )}
40 |
47 | Requester Details
48 |
49 | {covid && (
50 |
57 | Requester is covid positive
58 |
59 | )}
60 |
Name : {name}
61 |
62 | {" "}
63 | Phone :
65 |
84 |
12 |
13 |
14 |
16 |
17 |
19 |
20 |
21 |
22 |
23 | )
24 | }
25 |
26 | export default ChooseRequestRoutes
27 |
--------------------------------------------------------------------------------
/frontend/src/components/rider/my_deliveries/.ukw:
--------------------------------------------------------------------------------
1 | u know what
--------------------------------------------------------------------------------
/frontend/src/components/rider/my_deliveries/MyDeliveries.module.css:
--------------------------------------------------------------------------------
1 | .myDeliveriesList
2 | {
3 | height: 100vh;
4 | text-align: center;
5 | margin-left: auto;
6 | margin-right: auto;
7 | justify-items: center;
8 | }
9 |
10 | .myDeliveriesListItem{
11 | padding: 15px;
12 | min-height: 150px;
13 | margin-bottom: 20px;
14 | margin-left: auto;
15 | margin-right: auto;
16 | row-gap: 3px;
17 | font-size: clamp(0.7rem, 1vw, 1.2rem);
18 | display: grid;
19 | width: min(90%, 500px);
20 | justify-content: center;
21 | grid-template-columns: 30% 30% 15% 25%;
22 | grid-template-rows: auto;
23 | grid-template-areas:
24 | "date requestType . requestStatus"
25 | "category1 category2 category3 .";
26 | border-radius: 4px;
27 | box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
28 | padding: 15px;
29 | }
30 |
31 | .myDeliveriesListItem:hover{
32 | box-shadow: rgba(0, 0, 0, 0.25) 0px 7px 14px, rgba(0, 0, 0, 0.22) 0px 5px 10px;
33 | cursor: pointer;
34 | }
35 |
36 | .date
37 | {
38 | margin: auto;
39 | grid-area: date;
40 | color: black;
41 | }
42 | .requestType
43 | {
44 | font-weight: bold;
45 | background-color: rgb(167, 255, 255);
46 | grid-area: requestType;
47 | border-radius: 20px;
48 | color: black;
49 | text-align: center;
50 | margin: auto;
51 | padding: 5px 10px;
52 | }
53 |
54 | .medicines
55 | {
56 | color: white;
57 | margin: auto;
58 | grid-area: category1;
59 | border-radius: 20px;
60 | background-color: rgb(216, 0, 0);
61 | padding: 5px 15px;
62 |
63 | }
64 | .groceries
65 | {
66 | color: white;
67 | margin: auto;
68 | grid-area: category2;
69 | border-radius: 20px;
70 | background-color: rgb(3, 209, 3);
71 | padding: 5px 15px;
72 |
73 | }
74 | .misc
75 | {
76 | color: white;
77 | margin: auto;
78 | grid-area: category3;
79 | border-radius: 10px;
80 | border: 2px solid rgb(7, 75, 144);
81 | background-color: blue;
82 | padding: 0px 3px 0px 3px;
83 |
84 | }
85 |
86 | .viewButton{
87 | display: none;
88 | margin: auto;
89 | grid-area: viewButton;
90 | padding: 3px;
91 | border-radius: 10px;
92 | border: 1px solid black;
93 | box-shadow: 0 0 2px black;
94 | }
95 | .ok
96 | {
97 | grid-area: requestStatus;
98 | color: green;
99 | font-weight: bold;
100 | }
101 | .notOk
102 | {
103 | grid-area: requestStatus;
104 | color: red;
105 | font-weight: bold;
106 | }
107 |
108 | .noRequests{
109 | text-align: center;
110 | margin-top: 45vh;
111 |
112 |
113 | }
--------------------------------------------------------------------------------
/frontend/src/components/rider/my_deliveries/MyDeliveriesListItem.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useHistory } from 'react-router-dom';
3 | import styles from './MyDeliveries.module.css';
4 |
5 | const MyDeliveriesListItem = (props) => {
6 |
7 | const routes = useHistory()
8 | return (
9 | {
10 | console.log("props:", props.data);
11 | routes.push("my_deliveries/" + props.data.requestNumber, {
12 | reqObj: props.data
13 | })
14 | }} className={styles.myDeliveriesListItem}>
15 | Date: {props.data.date}
16 | {props.data.requestType}
17 | {
18 | (props.data.requestStatus == "DELIVERED" || props.data.requestStatus == "UNDER DELIVERY") ? ({props.data.requestStatus} ) : ({props.data.requestStatus} )
19 | }
20 | {
21 | props.data.itemCategories.map((category, index) => {
22 | switch (category) {
23 | case 'MEDICINES': return Medcines ;
24 | case 'GROCERIES': return Groceries ;
25 | case 'MISC.': return Misc. ;
26 | }
27 | })
28 | }
29 |
30 |
31 |
34 |
)
35 | }
36 |
37 | export default MyDeliveriesListItem
--------------------------------------------------------------------------------
/frontend/src/components/rider/my_deliveries/my_delivery_routes.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Route, Switch } from "react-router-dom";
3 | import ViewRequest from '../common/viewRequest';
4 | import MyDeliveries from './MyDeliveries';
5 | const MyDeliveryRoutes = () => {
6 | return (
7 |
8 |
11 |
12 | );
13 | }
14 |
15 | export default MyDeliveryRoutes;
--------------------------------------------------------------------------------
/frontend/src/components/rider/profile/RiderProfile.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Navbar from "../../global_ui/nav";
3 | import styles from "./RiderProfile.module.css";
4 | import axios from "axios";
5 | import { useHistory } from "react-router-dom";
6 | import { useEffect, useState } from "react";
7 | import { Dialog } from "../../global_ui/dialog/dialog";
8 | import { LoadingScreen } from "../../global_ui/spinner";
9 | import { useContext } from "react";
10 | import { AuthContext } from "../../context/auth/authProvider";
11 |
12 | const RiderProfile = () => {
13 | const history = useHistory();
14 | const [data, setData] = useState({
15 | name: "",
16 | phoneNumber: "",
17 | profileUrl: "",
18 | });
19 | const [error, setError] = useState(null);
20 | const {token} = useContext(AuthContext)
21 | const [isLoaded, setisLoaded] = useState(false);
22 |
23 | useEffect(async () => {
24 | const options = {
25 | headers: {
26 | authorization: "Bearer " + token,
27 | },
28 | };
29 | axios.get(process.env.REACT_APP_URL+"/rider/profile", options).then(
30 | (response) => {
31 | console.log(response);
32 | if (response.data.status === "success") {
33 | setData({
34 | name: response.data.message.name,
35 | phoneNumber: response.data.message.phoneNumber,
36 | profileUrl: response.data.message.profileUrl,
37 | });
38 | setError(null);
39 | } else {
40 | setError(response.data.message);
41 | }
42 | setisLoaded(true);
43 | },
44 | (error) => {
45 | console.log("An error occured", error);
46 | setError(error.message);
47 | setisLoaded(true);
48 | }
49 | );
50 | }, []);
51 |
52 | return isLoaded ? (
53 | error ? (
54 | {
57 | history.push("/my_profile");
58 | setError(false);
59 | }}
60 | msg={error}
61 | />
62 | ) : (
63 |
64 |
65 |
66 | {data.profileURL ? (
67 |
68 | ) : (
69 |
70 | )}
71 |
Full Name:
72 |
{data.name}
73 |
74 |
Phone Number:
75 |
{data.phoneNumber}
76 |
77 |
history.push("/my_profile/edit_profile",{userData:data})}
79 | style={{
80 | marginTop: "5rem",
81 | padding: "0.55em 2em",
82 | }}
83 | >
84 | Edit
85 |
86 |
9 |
10 |
12 |
13 |
15 |
16 |
17 | )
18 | }
19 |
20 | export default profileRouting
21 |
--------------------------------------------------------------------------------
/frontend/src/components/rider/readme.md:
--------------------------------------------------------------------------------
1 | Must provide
2 |
3 | 1. Respective screens (refer folder names)
4 | 2. And their respective functions. (like current_request comp must have confirm delivery btn, which ends the delivery.....etc)
--------------------------------------------------------------------------------
/frontend/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | }
9 |
10 |
--------------------------------------------------------------------------------
/frontend/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 | import * as serviceWorkerRegistration from './serviceWorkerRegistration';
6 | import reportWebVitals from './reportWebVitals';
7 |
8 | ReactDOM.render(
9 |
10 | ,
12 | document.getElementById('root')
13 | );
14 |
15 | // If you want your app to work offline and load faster, you can change
16 | // unregister() to register() below. Note this comes with some pitfalls.
17 | // Learn more about service workers: https://cra.link/PWA
18 | serviceWorkerRegistration.register();
19 |
20 | // If you want to start measuring performance in your app, pass a function
21 | // to log results (for example: reportWebVitals(console.log))
22 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
23 | reportWebVitals();
24 |
--------------------------------------------------------------------------------
/frontend/src/models/requester.js:
--------------------------------------------------------------------------------
1 | import User from "./user"
2 | export default class Requester extends User {
3 | /**
4 | *
5 | * @param {string} number User's phone number
6 | * @param {string } name User's name
7 | * @param {number} yearOfBirth Year of Birth
8 | */
9 | constructor(number,name,yearOfBirth){
10 | super(name,number)
11 | this.yearOfBirth = yearOfBirth
12 | }
13 |
14 | }
--------------------------------------------------------------------------------
/frontend/src/models/rider.js:
--------------------------------------------------------------------------------
1 | import User from "./user"
2 | export default class Rider extends User {
3 | /**
4 | *
5 | * @param {string} number User's phone number
6 | * @param {string } name User's name
7 | */
8 | constructor(number,name){
9 | super(name,number)
10 |
11 | }
12 |
13 | }
--------------------------------------------------------------------------------
/frontend/src/models/user.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Base user class for both rider and requester
3 | */
4 | export default class User {
5 | /**
6 | *
7 | * @param {string} name
8 | */
9 | constructor(name,mobile){
10 | this.name = name;
11 | this.mobile = mobile;
12 | }
13 | }
--------------------------------------------------------------------------------
/frontend/src/reportWebVitals.js:
--------------------------------------------------------------------------------
1 | const reportWebVitals = (onPerfEntry) => {
2 | if (onPerfEntry && onPerfEntry instanceof Function) {
3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
4 | getCLS(onPerfEntry);
5 | getFID(onPerfEntry);
6 | getFCP(onPerfEntry);
7 | getLCP(onPerfEntry);
8 | getTTFB(onPerfEntry);
9 | });
10 | }
11 | };
12 |
13 | export default reportWebVitals;
14 |
--------------------------------------------------------------------------------
/frontend/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 |
--------------------------------------------------------------------------------
/frontend/src/utils/useLocalStorageState.js:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 | /**
3 | *
4 | * @param {string} key Any unqiue key
5 | * @param {any} initialValue
6 | *
7 | * * Data will be stored in local storage.
8 |
9 | usage
10 |
11 | const [data,setData] = useLocalStorageState("data","")
12 | */
13 | export const useLocalStorageState = (key,initialValue) => {
14 |
15 | const [data,setData] = useState(()=>{
16 | const value = localStorage.getItem(key)
17 | if(value)
18 | return JSON.parse(value)
19 | return initialValue
20 | })
21 | useEffect(()=>{
22 | localStorage.setItem(key,JSON.stringify(data))
23 | },[data])
24 |
25 | return [data,setData];
26 | }
27 | /**
28 | *
29 | * @param {string} key Any unqiue key
30 | * @param {any} initialValue
31 | *
32 | * Data will be deleted when browser or app is closed. Best for storing temporary session data.
33 | *
34 | usage
35 |
36 | const [data,setData] = useSessionStorageState("data","")
37 | */
38 | export const useSessionStorageState = (key,initialValue) => {
39 |
40 | const [data,setData] = useState(()=>{
41 | const value = sessionStorage.getItem(key)
42 | if(value)
43 | return JSON.parse(value)
44 | return initialValue
45 | })
46 | useEffect(()=>{
47 | sessionStorage.setItem(key,JSON.stringify(data))
48 | },[data])
49 |
50 | return [data,setData];
51 | }
52 |
--------------------------------------------------------------------------------
/mockups/AdminModuleFinal.xd:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coding-Studio-vbit/ReliefRiders/3227eb361d66a3eda3d8794c54c72db31dbc6e8f/mockups/AdminModuleFinal.xd
--------------------------------------------------------------------------------
/mockups/RidersForReliefFinal.xd:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coding-Studio-vbit/ReliefRiders/3227eb361d66a3eda3d8794c54c72db31dbc6e8f/mockups/RidersForReliefFinal.xd
--------------------------------------------------------------------------------
/uml_diagrams/component.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coding-Studio-vbit/ReliefRiders/3227eb361d66a3eda3d8794c54c72db31dbc6e8f/uml_diagrams/component.jpg
--------------------------------------------------------------------------------
/uml_diagrams/sequence.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coding-Studio-vbit/ReliefRiders/3227eb361d66a3eda3d8794c54c72db31dbc6e8f/uml_diagrams/sequence.jpg
--------------------------------------------------------------------------------
/uml_diagrams/usecase.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coding-Studio-vbit/ReliefRiders/3227eb361d66a3eda3d8794c54c72db31dbc6e8f/uml_diagrams/usecase.png
--------------------------------------------------------------------------------
45 |
46 | 
11 |