+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| index.js | +
+
+ |
+ 0% | +0/19 | +0% | +0/1 | +0% | +0/1 | +0% | +0/19 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 | + + + + + + + + + + + + + + + + + + + | /** + * Import function triggers from their respective submodules: + * + * const {onCall} = require("firebase-functions/v2/https"); + * const {onDocumentWritten} = require("firebase-functions/v2/firestore"); + * + * See a full list of supported triggers at https://firebase.google.com/docs/functions + */ + +const {onRequest} = require("firebase-functions/v2/https"); +const logger = require("firebase-functions/logger"); + +// Create and deploy your first functions +// https://firebase.google.com/docs/functions/get-started + +// exports.helloWorld = onRequest((request, response) => { +// logger.info("Hello logs!", {structuredData: true}); +// response.send("Hello from Firebase!"); +// }); + |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| functions | +
+
+ |
+ 0% | +0/19 | +0% | +0/1 | +0% | +0/1 | +0% | +0/19 | +
| src | +
+
+ |
+ 0% | +0/64 | +0% | +0/3 | +0% | +0/3 | +0% | +0/64 | +
| src/components | +
+
+ |
+ 4.62% | +48/1037 | +26.31% | +5/19 | +16.66% | +3/18 | +4.62% | +48/1037 | +
| src/components/pages | +
+
+ |
+ 17.58% | +54/307 | +20% | +3/15 | +10% | +1/10 | +17.58% | +54/307 | +
| src/utilities | +
+
+ |
+ 0% | +0/228 | +0% | +0/3 | +0% | +0/3 | +0% | +0/228 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { useAuthState } from './utilities/firebase'; +import { HashRouter as Router, Routes, Route } from 'react-router-dom'; +import 'bootstrap-icons/font/bootstrap-icons.css'; +import 'bootstrap/dist/css/bootstrap.min.css'; + +import SignInPage from './components/pages/SignIn.jsx'; +import './App.css'; + +import Navigationbar from './components/Navigation'; +import HomePage from './components/pages/HomePage'; +import RequestsPage from './components/pages/RequestsPage'; +import ProfilePage from './components/pages/ProfilePage'; +import RequestFormPage from './components/pages/RequestForm'; +import Header from './components/Header'; + +const App = () => { + const [user, loading, error] = useAuthState(); + + if (loading) { + return <div>Loading...</div>; + } + + if (error) { + return <div>Error: {error.message}</div>; // Handle error if authentication fails + } + + return ( + <Router> + <div className="App"> + {/* If user is authenticated, show Header, Navbar, and Routes, else show SignInPage */} + {!user ? ( + <SignInPage /> // Show sign-in page if not authenticated + ) : ( + <> + <Header /> + + <div className="content flex-grow"> + <Routes> + <Route path="/" element={<HomePage />} /> + <Route path="/requests" element={<RequestsPage />} /> + <Route path="/profile" element={<ProfilePage />} /> + <Route path="/requestform" element={<RequestFormPage />} /> + </Routes> + </div> + + <Navigationbar /> + </> + )} + </div> + </Router> + ); +}; + +export default App; + |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 | + + + + + + + + + + + + + + + | import "./SignIn.css" + +const HomePage = () => { + return ( + <div className="sign-in-page"> + <div className="sign-in"> + <div className="house"> + <i class="bi bi-house-door"></i> + </div> + <p className="title">Welcome</p> + + </div> + </div> + ); +} +export default HomePage; |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 | 1x +1x +1x +1x + +1x +1x +1x +1x + + +1x + + + +1x + + + + + + + + + + + + + + + + + + + + + + + + +1x +1x +1x +1x + +1x | import React, { useState } from 'react';
+import { Button, DropdownButton } from 'react-bootstrap';
+import { signInWithGoogle, signOut, useAuthState } from '../utilities/firebase';
+import "./Buttons.css"
+
+ export const GreenButton = ({onClick, text}) => (
+ <Button className="green-custom-button"
+ onClick={onClick}
+ >{text}</Button>
+ );
+
+ export const GreyButton = ({onClick, text}) => (
+ <Button className="grey-custom-button" onClick={onClick}>{text}</Button>
+ );
+
+ export const GreyOutlineButton = ({ onClick, text, disabled }) => {
+ const [isPressed, setIsPressed] = useState(false);
+
+ const handleClick = (e) => {
+ if (!disabled) {
+ setIsPressed(!isPressed); // Toggle the pressed state
+ if (onClick) {
+ onClick(e); // Trigger any additional onClick logic passed via props
+ }
+ }
+ };
+
+ return (
+ <Button
+ className={`grey-outline-custom-button ${isPressed ? 'pressed' : ''}`}
+ variant="outline-secondary"
+ onClick={handleClick}
+ disabled={disabled}
+ size="sm"
+ >
+ {text}
+ </Button>
+ );
+ };
+
+ const AuthButton = () => {
+ const [user] = useAuthState();
+ return user ? <GreenButton onClick={signOut} text={'Sign out'}/> : <GreenButton onClick={signInWithGoogle} text={'Sign in'} />
+ };
+
+ export default AuthButton; |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import React, { useEffect, useState } from 'react'; +import { useDbUpdate ,useAuthState} from "../utilities/firebase"; + +export const calcTime = (timer) => { + const day = Math.floor(timer / (60*24)); + const hour = Math.floor(timer / 60); + const min = Math.floor(timer); + if (day > 0) { + return ( + `${day} day(s)` + ); + } + else { + if (hour > 0) { + return( + `${hour} hour(s)` + ); + } + else{ + return(`${min} minute(s)`) + } + } +} + +const CountdownTimer = ({request}) => { + + const postTime = new Date(request.post_time).valueOf(); + const [timeRemaining, setTimeRemaining] = useState((postTime/60000 + request.timer) - (new Date()/60000)); + const [updateData, result] = useDbUpdate(`/requests/${request.request_id}`); + + useEffect(() => { + const timerInterval = setInterval(() => { + setTimeRemaining((postTime/60000 + request.timer) - (new Date()/60000)); + if(timeRemaining <= 0){ + const updatedData = { ...(request), request_status: "Closed"}; + try{ + updateData(updatedData) + } + catch (error) { + console.error("Error occurred:", error.message); + } + } + + }, (1000)); + + // Cleanup the interval when the component unmounts + return () => clearInterval(timerInterval); + },[]); + + return( + <div>{calcTime(timeRemaining)} remaining</div> + ); +} +export default CountdownTimer; |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 | 1x +1x +1x +1x +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +1x | // EditProfile.jsx
+import React from 'react'
+import { useState, useEffect } from 'react';
+import './EditProfileModal.css'
+import { useDbData, useDbUpdate } from '../utilities/firebase';
+
+
+function EditProfileModal({ closeModal, userId }) {
+ const [userData, userDataError] = useDbData(`/users/${userId}`);
+
+ const [address, setAddress] = useState('');
+ const [apartment, setApartment] = useState('');
+ const [city, setCity] = useState('');
+ const [state, setStateLoc] = useState('');
+ const [zip, setZip] = useState('');
+ const [neighborhoodCode, setNeighborhoodCode] = useState('');
+
+ const [updateData, result] = useDbUpdate(`/users/${userId}`);
+
+
+ useEffect(() => {
+ if (userData) {
+ setAddress(userData.Address || '');
+ setApartment(userData.Apartment || '');
+ setCity(userData.City || '');
+ setStateLoc(userData.StateLoc || '');
+ setZip(userData.Zip || '');
+ setNeighborhoodCode(userData.NeighborhoodCode || '');
+ }
+ }, [userData]);
+
+ const handleSave = async () => {
+ const updates = {
+ Address: address,
+ Apartment: apartment,
+ City: city,
+ StateLoc: state,
+ Zip: zip,
+ NeighborhoodCode: neighborhoodCode
+ };
+
+ try {
+ await updateData(updates);
+ console.log("Profile updated successfully!");
+
+ closeModal();
+ } catch (error) {
+ console.error("Error updating profile:", error);
+ }
+ };
+
+
+
+ if (!userData) {
+ return <p>Loading...</p>;
+ }
+
+ return (
+ <div className='modalBackground'>
+ <div className="modalContainer">
+ {/* <div className="titleCloseBtn">
+ <button onClick={() => closeModal(false)}> X </button>
+ </div> */}
+ <div className="title">
+ <h2>Edit Profile</h2>
+ </div>
+ <div className="body">
+
+
+ <div className="address">
+ <h3>Home Address</h3>
+ <input
+ className="input fullWidth"
+ value={address}
+ onChange={(e) => setAddress(e.target.value)}
+ placeholder="Enter your address"
+ />
+ <input
+ className="input fullWidth"
+ value={apartment}
+ onChange={(e) => setApartment(e.target.value)}
+ placeholder="Apartment, suite, etc."
+ />
+ <input
+ className="input fullWidth"
+ value={city}
+ onChange={(e) => setCity(e.target.value)}
+ placeholder="City"
+ />
+
+ {/* <input className="input fullWidth" value="Address" />
+ <input className="input fullWidth" value="Apartment, suite, etc" /> */}
+ {/* <input className="input fullWidth" value="City" /> */}
+ <div className="twoColumns">
+ {/* <input className="input " value="State" />
+ <input className="input " value="Zip Code" /> */}
+ <input
+ className="input"
+ value={state}
+ onChange={(e) => setStateLoc(e.target.value)}
+ placeholder="State"
+ />
+ <input
+ className="input"
+ value={zip}
+ onChange={(e) => setZip(e.target.value)}
+ placeholder="Zip Code"
+ />
+ </div>
+ </div>
+
+
+ <div className="neighborhood">
+ <h3> Neighborhood Code</h3>
+ {/* <input className="input" value="Enter Here"/> */}
+ <input
+ className="input"
+ value={neighborhoodCode}
+ onChange={(e) => setNeighborhoodCode(e.target.value)}
+ placeholder="Enter Neighborhood Code"
+ />
+ <p className="smallText">please allow up to 2 days for approval from your Neighborhood Admin</p>
+ </div>
+
+ </div>
+ <div className="footer">
+ <button id='cancelBtn' onClick={() => closeModal(false)}>Cancel</button>
+ <button id='saveBtn' onClick={handleSave} >Save Profile</button>
+ </div>
+
+
+ </div>
+ </div>
+ )
+}
+
+export default EditProfileModal |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | // defining various forms +import React, { useState, useEffect } from 'react'; +import {Form, Container, Row, Col, Dropdown, DropdownButton, Alert } from 'react-bootstrap'; +import { useDbUpdate ,useAuthState} from "../utilities/firebase"; +import { useNavigate } from 'react-router-dom'; + +import { GreyButton, GreenButton, GreyOutlineButton } from "./Buttons"; +import './Form.css' + +export const TextOnlyForm = ({text, setText, placeholder}) => ( + <Form.Control + as="textarea" + rows={4} + value={text} + onChange={(e) => setText(e.target.value)} + className='text-only' + placeholder={placeholder} + style={{ width: '90%', height: 'auto' }} + /> +); + +export const AcceptanceForm = ({request, handleClose}) => { + const [updateData, result] = useDbUpdate(`/requests/${request.request_id}`); + const [user] = useAuthState(); + const currentUserID = user?.uid; + const [phoneNumber, setPhoneNumber] = useState(''); + const [msg, setMsg] = useState(''); + const [deliveryOption, setDeliveryOption] = useState(''); // State to track the selected option + const [err, setErr] = useState(false); + + const updatedData = { ...(request), + request_status: "Pending", + accept_userid : currentUserID, + delivery_pref: [...request.delivery_pref, deliveryOption], // adding selected pref to the end, any repeat indicates a selected option + accept_phone_number: phoneNumber, + accept_msg: msg + }; + const AcceptRequest = async(evt) => { + evt.preventDefault(); + if(deliveryOption !== ''){ + try{ + await(updateData(updatedData)); + handleClose(); + } + catch (error) { + console.error("Error occurred:", error.message); + } + } + else { + setErr(true); + } + return; + } + + const handleButtonClick = (option) => { + setErr(false); + setDeliveryOption(deliveryOption === option ? '' : option); + }; + + return ( + + <Container className="mt-5"> + <Form className="custom-form" style={{ background: '#D1E7DD' }}> + {/* Phone Number Input */} + <Form.Group className="mb-3" controlId="formPhoneNumber"> + <Form.Label>Phone Number</Form.Label> + <Form.Control + className="w-100" + type="phone number" + placeholder="Phone number" + onChange={(e) => setPhoneNumber(e.target.value)} + autoFocus + /> + </Form.Group> + {/* Message Input */} + <Form.Group + className="mb-3" + controlId="formMessage" + > + <Form.Label>Message</Form.Label> + <Form.Control + className="w-100" + as="textarea" + rows={5} + style={{ minHeight: '100px' }} + placeholder="Write your message" + onChange={(e) => setMsg(e.target.value)} + /> + </Form.Group> + <Form.Group + className="mb-3" + controlId="formOptions" + > + <Form.Label>Deliver option (choose one): </Form.Label> + <div className="d-flex flex-wrap"> + {(request.delivery_pref).map( (option) => { + return( + <div className="me-2 mb-2"> + <GreyOutlineButton + onClick={() => handleButtonClick(option)} + text={option} + disabled={deliveryOption !== '' && deliveryOption !== option}/> + </div> + ); + })} + </div> + </Form.Group> + + {err && ( + <Alert variant="danger" className="mb-2 small-alert"> + Please select a delivery option. + </Alert> + )} + {/* Accept Button */} + <div className="d-flex justify-content-center"> + <GreyButton onClick={AcceptRequest} text={'Accept Request'}/> + </div> + </Form> + </Container> + ); + +} + +const TimeSelector = ({setTimer}) => { + const [selectedDay, setSelectedDay] = useState(''); + const [selectedHour, setSelectedHour] = useState(''); + const [selectedMinute, setSelectedMinute] = useState(''); + + const days = Array.from({ length: 8 }, (_, i) => i); // Generates array [1, 2, 3, ..., 7] + const hours = Array.from({ length: 24 }, (_, i) => i); // Generates array [0, 1, 2, ..., 23] + const minutes = Array.from({ length: 60 }, (_, i) => i); // Generates array [0, 1, 2, ..., 59] + + const dropdownMenuStyle = { + maxHeight: '160px', // Approx. 5 rows (adjust as needed for row height) + overflowY: 'auto', + }; + + return ( + <Container className="mt-4"> + <Row className="justify-content-center"> + <Col xs="auto"> + <DropdownButton + variant="secondary" + id="dropdown-day" + size="sm" + title={selectedDay !== '' ? `${selectedDay} Days` : 'Day'} + onSelect={(e) => {setSelectedDay(e); setTimer(e*24*60+selectedHour*60+selectedMinute*1)}} + > + <div style={dropdownMenuStyle}> + {days.map((day) => ( + <Dropdown.Item key={day} eventKey={day}> + Day {day} + </Dropdown.Item> + ))} + </div> + </DropdownButton> + </Col> + + <Col xs="auto"> + <DropdownButton + variant="secondary" + id="dropdown-hour" + size="sm" + title={selectedHour !== '' ? `${selectedHour} Hours` : 'Hour'} + onSelect={(e) => {setSelectedHour(e); setTimer(selectedDay*24*60+e*60+selectedMinute*1)}} + > + <div style={dropdownMenuStyle}> + {hours.map((hour) => ( + <Dropdown.Item key={hour} eventKey={hour}> + {hour < 10 ? `0${hour}` : hour} Hour(s) + </Dropdown.Item> + ))} + </div> + </DropdownButton> + </Col> + + <Col xs="auto"> + <DropdownButton + variant="secondary" + id="dropdown-minute" + size="sm" + title={selectedMinute !== '' ? `${selectedMinute} Minutes` : 'Min'} + onSelect={(e) => {setSelectedMinute(e); setTimer(selectedDay*24*60+selectedHour*60+e*1)}} + > + <div style={dropdownMenuStyle}> + {minutes.map((minute) => ( + <Dropdown.Item key={minute} eventKey={minute}> + {minute < 10 ? `0${minute}` : minute} Minute(s) + </Dropdown.Item> + ))} + </div> + </DropdownButton> + </Col> + </Row> + </Container> + ); +}; + +const MultiSelect = ({deliveryPref, setDeliveryPref, meetUp, setMeetUpLocation}) => { + const options = ['Pick up', 'Drop off', 'Meet up']; + // const [meetUpLocation, setMeetUpLocation] = useState(''); // Changed variable name + + // Handle select logic + const handleSelect = (option) => { + setDeliveryPref((prevSelected) => { + if (prevSelected.includes(option)) { + return prevSelected.filter((item) => item !== option); // Deselect the option + } else { + return [...prevSelected, option]; // Select the option + } + }); + }; + + return ( + <div> + <Form.Label>Select Options:</Form.Label> + {options.map((option) => ( + <Form.Check + key={option} + type="checkbox" + label={option} + checked={deliveryPref.includes(option)} + onChange={() => handleSelect(option)} // Handle checkbox change + /> + ))} + {deliveryPref.includes('Meet up') && ( + <Form.Group className="mt-3"> + <Form.Label>Meet-up Location:</Form.Label> + <Form.Control + type="text" + placeholder="Enter location" + value={meetUp} // Updated to use meetUpLocation + onChange={(e) => setMeetUpLocation(e.target.value)} // Update location state + /> + </Form.Group> + )} + <div className="mt-3"> + <strong>Selected: </strong>{deliveryPref.length === 0 ? 'None' : deliveryPref.join(', ')} + </div> + </div> + ); +}; + +export const RequestForm= ({data, setDescription, setTimer, deliveryPref, setDeliveryPref, setMeetUpLocation, onClick}) => { + + const navigate = useNavigate(); + const DirectToHome = () => { + navigate('/'); + }; + return ( + + <Container className="mt-1"> + <Form className="custom-form"> + {/* Description Input */} + <Form.Group className="mb-3" controlId="formDescription"> + <Form.Label>Description</Form.Label> + <Form.Control + className="w-100" + as="textarea" + rows={5} + style={{ minHeight: '100px' }} + placeholder="How can your neighbors help?" + value={data.description} + onChange={(e) => setDescription(e.target.value)} + /> + </Form.Group> + <hr /> + <Form.Group className="mb-3 d-flex align-items-center" controlId="formExpectedDuration"> + <Form.Label>Post Expiration</Form.Label> + <TimeSelector setTimer={setTimer}/> + </Form.Group> + <hr /> + <Form.Group controlId="formDelivery"> + <Form.Label>Delivery Preference</Form.Label> + <MultiSelect deliveryPref={deliveryPref} setDeliveryPref={setDeliveryPref} meetUp={data.meet_up_loc} setMeetUpLocation={setMeetUpLocation}/> + </Form.Group> + + {/* Accept/Submit Button */} + <div className="d-flex justify-content-center gap-3"> + <GreenButton onClick={DirectToHome} text={'Cancel'}/> + <GreenButton onClick={onClick} text={'Submit'}/> + </div> + </Form> + </Container> + ); +} + +export default TextOnlyForm |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 | + + + + + + + + + + + + + + + + + + + | import React from 'react'; +import { Container, Navbar } from 'react-bootstrap'; +import 'bootstrap-icons/font/bootstrap-icons.css'; +import './Header.css'; + +const Header = () => { + return ( + <Navbar bg="light" className="header-navbar fixed-top justify-content-center"> + <Container className="d-flex justify-content-center"> + <Navbar.Brand href="/" className="text-center d-flex align-items-center"> + <i className="bi bi-house-door-fill" style={{ fontSize: '2rem', color: '#4B7260' }}></i> + <span className="ms-3 good-neighbor-text">Good Neighbor</span> + </Navbar.Brand> + </Container> + </Navbar> + ); +}; + +export default Header; + |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 | + + + + + + + + + + + + + + + + + + | import { Modal } from 'react-bootstrap'; +import { AcceptanceForm } from "./Form"; +import { calcTime } from './CountdownTimer'; + +const AcceptRequestModal = ({show, handleClose, currentRequest}) => { + return ( + <Modal show={show} onHide={handleClose}> + <Modal.Header style={{ background: '#EEEEEE' }} closeButton> + <Modal.Title>{currentRequest.username} ({calcTime(currentRequest.timer)} remaining)</Modal.Title> + </Modal.Header> + <Modal.Body > + <p>{currentRequest.description}</p> + <AcceptanceForm request={currentRequest} handleClose={handleClose} /> + </Modal.Body> + </Modal> + ) +}; + +export default AcceptRequestModal |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { NavLink } from 'react-router-dom'; +import './Navigation.css' +import Container from 'react-bootstrap/Container'; +import Nav from 'react-bootstrap/Nav'; +import Navbar from 'react-bootstrap/Navbar'; + +const Navigationbar = () => { + return ( + <Navbar fixed="bottom" className="bg-light border-top"> + <Container className="d-flex justify-content-around"> + <Nav className="w-100 d-flex justify-content-between"> + <Nav.Link as={NavLink} to="/" className="nav-icon" activeClassName="active"> + <i className="bi bi-house-door-fill"></i> + <p>Home</p> + </Nav.Link> + + <Nav.Link as={NavLink} to="/profile" className="nav-icon" activeClassName="active"> + <i className="bi bi-person-fill"></i> + <p>Profile</p> + </Nav.Link> + + <Nav.Link as={NavLink} to="/requests" className="nav-icon" activeClassName="active"> + <i className="bi bi-list-task"></i> + <p>Requests</p> + </Nav.Link> + </Nav> + </Container> + </Navbar> + ); +}; + +export default Navigationbar; + |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import React from 'react'; +import { Modal, Button } from 'react-bootstrap'; +import { renderStars } from "./renderStars"; + +const ProfileModal = ({ show, handleClose, user, msg, contactNumber }) => { + if (!user) return null; // If no user data is passed, return null + return ( + <Modal show={show} onHide={handleClose}> + <Modal.Header style={{ background: '#EEEEEE' }} closeButton> + <Modal.Title>{user.username}'s Profile</Modal.Title> + </Modal.Header> + <Modal.Body> + <p><strong>Name:</strong> {user.username || 'Not available'}</p> + <p><strong>Location:</strong> {user.Address}, {user.Apartment}, {user.City}, {user.StateLoc} {user.Zip}</p> + <p><strong>Rating:</strong> {renderStars(user.rate_score)}</p> + <p><strong>Tasks Completed:</strong> {user.task_CBU || 0}</p> + <p><strong>Tasks Offered:</strong> {user.task_CFU || 0}</p> + <p><strong>Contact Number:</strong> {contactNumber || 0}</p> + <p><strong>Message:</strong> {msg || 0}</p> + </Modal.Body> + <Modal.Footer> + <Button variant="secondary" onClick={handleClose}>Close</Button> + </Modal.Footer> + </Modal> + ); +}; + +export default ProfileModal; + |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import React, { useState } from 'react'; +import { DropdownButton, Dropdown, Card, Badge } from 'react-bootstrap'; +import { useDbData } from '../utilities/firebase'; +import "./RequestList.css"; +import AcceptRequestModal from "./Modal" +import CountdownTimer from './CountdownTimer'; +import DistanceMatrix from '../utilities/Dynamic_Distance'; + +const RequestList = () => { + const [sortBy, setSortBy] = useState('timeRemaining'); + const [show, setShow] = useState(false); + const [currentRequest, setCurrentRequest] = useState(null); + + // Use useDbData hook to get the users and requests from Firebase + const [requestsData, requestsError] = useDbData('/requests'); + const [usersData, usersError] = useDbData('/users'); + + if (requestsError || usersError) { + return <div>Error loading data!</div>; + } + + if (!requestsData || !usersData) { + return <div>Loading...</div>; + } + + const requests = Object.values(requestsData); // Convert requests object to array + const users = usersData; + const requestsNotAccepted = requests.filter(request => request.request_status === "Open"); + + const handleClose = () => setShow(false); + const handleShow = (request) => { + setCurrentRequest(request); + setShow(true); + }; + + // Remove duplicates from delivery preferences + const getUniqueDeliveryPrefs = (prefs) => { + return [...new Set(prefs)]; + }; + + // Return the correct color based on the delivery preference + const getBadgeColor = (pref) => { + switch (pref) { + case 'Drop off': + return 'primary'; // Blue + case 'Meet up': + return 'success'; // Green + case 'Pick up': + return 'warning'; // Yellow + default: + return 'secondary'; // Gray unexpected values + } + }; + + return ( + <div className="w-100"> + <div className="request-list-header d-flex justify-content-center align-items-center mb-3"> + <h2 className="mb-0">Request List</h2> + </div> + + <div className="flex-grow-1 overflow-auto px-3 py-2"> + <div className="row"> + {requestsNotAccepted.map(request => { + const user = users[request.userid]; // Get user info for each request + const rating = user ? user.rate_score : 0; + const uniquePrefs = getUniqueDeliveryPrefs(request.delivery_pref); + + const address = user ? user.Address : ''; + const city = user ? user.City : ''; + const state = user ? user.StateLoc : ''; + const zip = user ? user.Zip : ''; + const fullAddress = `${address}, ${city}, ${state} ${zip}`; + + return ( + <div key={request.request_id} className="col-12 mb-3"> + <Card className="shadow border-0 cursor-pointer hover-effect" onClick={() => handleShow(request)}> + <Card.Body className="p-0"> + <Card.Header className="d-flex justify-content-between align-items-center text-muted"> + <CountdownTimer request={request} /> + <div> + {uniquePrefs.map((pref, index) => ( + <Badge key={index} bg={getBadgeColor(pref)} className="ms-1"> + {pref} + </Badge> + ))} + </div> + </Card.Header> + <div className="p-3"> + <div className="d-flex justify-content-between align-items-center mb-1"> + <Card.Title className="h5 mb-0">{user?.username || "Unknown"}</Card.Title> + <div className="d-flex align-items-center"> + <i className="bi bi-star-fill text-warning me-1"></i> + <span>{rating}</span> + </div> + </div> + <DistanceMatrix arrival={fullAddress} /> + <Card.Text>{request.description}</Card.Text> + </div> + </Card.Body> + </Card> + </div> + ); + })} + </div> + </div> + + {/* Modal outside the map to avoid rendering multiple modals */} + {currentRequest && <AcceptRequestModal show={show} handleClose={handleClose} currentRequest={currentRequest}/>} + </div> + ); +}; + +export default RequestList; + |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 +289 +290 +291 +292 +293 +294 +295 +296 +297 +298 +299 +300 +301 +302 +303 +304 +305 +306 +307 +308 +309 +310 +311 +312 +313 +314 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import React, { useState, useEffect } from 'react'; +import { Button, Card, Alert } from 'react-bootstrap'; +import './Request_Page_list.css'; +import { useDbData, useAuthState, useDbRemove, useDbStatusUpdate } from '../utilities/firebase'; +import { buttonCreate } from './buttons_request'; +import RateModal from './rate_modal'; +import ProfileModal from './ProfileModal'; + +const Request_Page_List = () => { + // Request hook + const [showUserRequests, setShowUserRequests] = useState(true); + const [showAlert, setShowAlert] = useState(false); + + // Get userid + const [user] = useAuthState(); + const currentUserID = user?.uid; + + // Database hook + const [requests, error] = useDbData('requests'); + const [users, usersError] = useDbData('users'); + const [removeRequest, removeResult] = useDbRemove(); + const [updateStatus, updateResult] = useDbStatusUpdate(); + + /// Rating modal handle ////////////////////////// + const [selectedRequestId, setSelectedRequestId] = useState(null); // No initial request selected + const [isRateModalOpen, setIsRateModalOpen] = useState(false); // Rate modal closed by default + const [selectedUser, setSelectedUser] = useState(null); // User for profile modal + const [contactNumber, setContactNumber] = useState('xxx-xxx-xxxx'); + const [acceptMsg, setAcceptMsg] = useState(''); + const [isProfileModalOpen, setIsProfileModalOpen] = useState(false); // Profile modal closed by default + + const handleRateModalOpen = (requestId) => { + setSelectedRequestId(requestId); // Set the clicked request ID + setIsRateModalOpen(true); // Open the rate modal + }; + + const handleRateModalClose = () => { + setSelectedRequestId(null); // Clear the selected request + setIsRateModalOpen(false); // Close the rate modal + }; + + const handleCloseRequest = (requestId, acceptUserId, newRating, userId) => { + const userToUpdate = users[acceptUserId]; // Get the user data + const rateCount = userToUpdate.rate_count || 1; // Default rate count + + // Update the request status to 'Closed' + updateStatus(`requests/${requestId}`, { + request_status: 'Closed', // Mark request as closed + }); + + // Update the accepted user's rating and increment task_CBU + updateStatus(`users/${acceptUserId}`, { + rate_score: newRating, // Update the new rating + rate_count: rateCount + 1, // Increment the rate count + task_CBU: (userToUpdate.task_CBU || 0) + 1, // Increment task_CBU + }); + + // Update the current user's task_CFU + const currentUser = users[userId]; // Fetch the current user + updateStatus(`users/${userId}`, { + task_CFU: (currentUser.task_CFU || 0) + 1, // Increment task_CFU + }); + + console.log(`Closing request ID: ${requestId}, updated user ${acceptUserId} with new rating: ${newRating}, and incremented task_CBU/CFU`); + + handleRateModalClose(); + }; + + ////////////////////////////////////////////////////////////////// + ///// Profile modal stuff //////////////////////////////////////// + ////////////////////////////////////////////////////////////////// + + // Open profile modal using requestId to find the requester's profile + const handleProfileModalOpen = (requestId) => { + const request = requests[requestId]; + const userId = request.accept_userid; // Get the userId of the person who made the request + const user = users[userId]; + const msg = request.accept_msg; + const number = request.accept_phone_number; + + if (user) { + setSelectedUser(user); + setIsProfileModalOpen(true); + setAcceptMsg(msg); + setContactNumber(number); + } + }; + + // Close profile modal + const handleProfileModalClose = () => { + setSelectedUser(null); + setIsProfileModalOpen(false); + }; + + ///////////////////// + + useEffect(() => { + if (removeResult) { + setShowAlert(true); + const timer = setTimeout(() => { + setShowAlert(false); + }, 1000); // Alert will disappear after 1 second + + return () => clearTimeout(timer); + } + }, [removeResult]); + + if (error) { + return <div>Error: {error.message}</div>; // Handle error + } + if (usersError) { + return <div>Error: {usersError.message}</div>; // Handle users error + } + if (!requests || !users) { + return <div>Loading...</div>; // Show loading until data is fetched + } + + // Filter requests based on the logged-in user (currentUserID) + const userRequests = Object.values(requests).filter(request => request.userid === currentUserID); + const acceptedRequests = Object.values(requests).filter(request => request.accept_userid === currentUserID); + + // Obtain User Info + const getUserById = (userId) => { + const user = Object.values(users).find(u => u.userid === userId); + return user ? user : "Unknown User"; + }; + + const getBadgeClass = (status) => { + switch (status) { + case 'Open': + return 'bg-secondary'; + case 'Pending': + return 'bg-warning'; + case 'Accepted': + return 'bg-success'; + case 'Done': + return 'bg-info'; + default: + return 'bg-secondary'; // Default color for unknown statuses + } + }; + + // UI construction + return ( + <div className="container"> + {/* Top buttons */} + <div className="top-buttons"> + <Button + variant={showUserRequests ? "primary" : "outline-primary"} + onClick={() => setShowUserRequests(true)} + className="me-2" + > + Your Requests + </Button> + <Button + variant={!showUserRequests ? "primary" : "outline-primary"} + onClick={() => setShowUserRequests(false)} + > + Requests You Accepted + </Button> + </div> + {showAlert && ( + <Alert variant={removeResult.error ? "danger" : "success"} className="mt-3"> + {removeResult.message} + </Alert> + )} + + {/* Single content section */} + <div className="row"> + <div className="col-12"> + {showUserRequests ? ( + <div> + <div className="request-page-list-header"> + <h2>Your Requests</h2> + </div> + {userRequests.length > 0 ? ( + + userRequests.map((request) => { + const user = getUserById(request.accept_userid); // Retrieve the user object + + return ( + <Card key={request.request_id} className="mb-3 shadow-sm"> + <Card.Body> + <div className="d-flex justify-content-between"> + <div className="text-start"> + <strong className="text-highlight"> + { user && user.username + ? <span><strong>{user.username}</strong> has accepted your request:</span> + : <span><strong>No one</strong> has accepted your request yet</span>} + </strong> + {request.meet_up_loc && + <div className="text-muted"> + <i className="bi bi-geo-alt"></i> + + Meet up location: {request.meet_up_loc} + </div>} + <Card.Text className="normal-text">{request.description}</Card.Text> + </div> + <div className="text-end"> + + <span className="me-2 text-muted">Status:</span> + <span className={`badge ${getBadgeClass(request.request_status)} badge-responsive`}> + {request.request_status} + {(request.request_status === 'Pending' || request.request_status === 'Accepted') && ` / ${findDuplicate(request.delivery_pref)}`} + </span> + </div> + </div> + <div className="d-flex justify-content-center mt-3"> + {/* Dynamically create buttons based on request status, including Withdraw Help */} + {buttonCreate(request.request_status, request.request_id, request.delivery_pref, removeRequest, updateStatus, handleRateModalOpen, handleProfileModalOpen)} + </div> + </Card.Body> + </Card> + ); + }) + ) : ( + <p>No requests from you yet.</p> + )} + </div> + ) : ( + <div> + <div className="request-page-list-header"> + <h2>Requests You Accepted</h2> + </div> + {acceptedRequests.length > 0 ? ( + acceptedRequests.map((request) => { + const user = getUserById(request.userid); + return ( + <Card key={request.request_id} className="mb-3 shadow-sm"> + <Card.Body> + <div className="d-flex justify-content-between"> + <div> + <strong className="text-highlight"> + You have accepted <strong>{user.username}</strong>'s Request + </strong> + + <div className="text-muted"> + <i className="bi bi-geo-alt"></i> + + {user.Address}, {user.Apartment}, {user.City}, {user.StateLoc} {user.Zip} + </div> + {request.meet_up_loc && + <div className="text-muted"> + <i className="bi bi-geo-alt"></i> + + Meet up location: {request.meet_up_loc} + </div>} + {/* Description section */} + <Card.Text className="normal-text"> + <strong>Description:</strong> {request.description} + </Card.Text> + </div> + <div className="text-end"> + <span className="me-2 text-muted">Status:</span> + <span className={`badge ${getBadgeClass(request.request_status)} badge-responsive`}> + {request.request_status} + {(request.request_status === 'Pending' || request.request_status === 'Accepted') && ` / ${findDuplicate(request.delivery_pref)}`} + </span> + </div> + + </div> + + <div className="d-flex justify-content-center mt-3"> + {/* Dynamically create buttons for accepted requests */} + {buttonCreate(request.request_status === 'Closed' ? request.request_status : 'Your_accept', request.request_id,request.delivery_pref, removeRequest, updateStatus,handleRateModalOpen)} + </div> + </Card.Body> + </Card> + ); + }) + ) : ( + <p>You haven't accepted any requests yet.</p> + )} + </div> + + )} + </div> + </div> + <RateModal + show={isRateModalOpen} + handleClose={handleRateModalClose} + requestId={selectedRequestId} + handleSubmit={handleCloseRequest} + requests={requests} + users={users} + /> + <ProfileModal + show={isProfileModalOpen} + handleClose={handleProfileModalClose} + user={selectedUser} + msg={acceptMsg} + contactNumber={contactNumber} + /> + </div> + ); +}; + +const findDuplicate = (array) => { + const counts = {}; + array.forEach((item) => { + counts[item] = (counts[item] || 0) + 1; + }); + + for (let item in counts) { + if (counts[item] > 1) { + return item; + } + } + return "Invalid"; +}; + + +export default Request_Page_List; + |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import React, { useState, useEffect } from 'react'; +import { Button, Card, Alert } from 'react-bootstrap'; + + + +// Function to create buttons based on request status and connect handlers +export const buttonCreate = (status, requestId, delivery_pref, withdrawHook, statusHook, modalhook, profileModalHook) => { + switch (status) { + case 'Open': + return ( + <> + <Button variant="danger" size="sm" onClick={() => handleWithdrawRequest(requestId,withdrawHook)}> + Withdraw Request + </Button> + </> + ); + + case 'Pending': + return ( + <> + <Button variant="success" size="sm" className="me-2" onClick={() => handleAcceptHelp(requestId,statusHook)}> + Accept Help + </Button> + <Button variant="danger" size="sm" className="me-2" onClick={() => handleWithdrawHelp(requestId,statusHook,delivery_pref)}> + Reject Help + </Button> + <Button variant="info" size="sm" onClick={() => profileModalHook(requestId)}> + View Profile + </Button> + </> + ); + + case 'Accepted': + return ( + <> + <Button variant="success" size="sm" className="me-2" onClick={() => modalhook(requestId)}> + Close Request + </Button> + <Button variant="info" size="sm" className="me-2" onClick={() => profileModalHook(requestId)}> + View Profile + </Button> + <Button variant="danger" size="sm" onClick={() => handleWithdrawRequest(requestId,withdrawHook)}> + Withdraw Request + </Button> + + </> + ); + + case 'Closed': + return null; // No buttons for "Closed" status + case 'Your_accept': + return ( + <> + <Button variant="danger" size="sm" onClick={() => handleWithdrawHelp(requestId,statusHook,delivery_pref)}> + Withdraw Help + </Button> + </> + ); + + default: + return null; // No buttons for unknown status + } +}; + +// Event Handlers (inside the same file) +const handleWithdrawRequest = (requestId,withdrawHook) => { + console.log(`Withdrawing request for request ID: ${requestId}`); + withdrawHook(`requests/${requestId}`); +}; + +const handleAcceptHelp = (requestId,statusHook) => { + console.log(`Accepting help for request ID: ${requestId}`); + statusHook(`requests/${requestId}`, { + request_status : 'Accepted' + }); +}; + +const handleWithdrawHelp = (requestId,statusHook,delivery_pref) => { + console.log(`Withdrawing help for request ID: ${requestId}`); + const uniqueDeliveryPref = [...new Set(delivery_pref)]; + statusHook(`requests/${requestId}`, { + request_status: 'Open', + accept_status: false, + accept_userid: '', + delivery_pref: uniqueDeliveryPref + }); +}; +const handleViewProfile = (requestId) => { + console.log(`Viewing profile for request ID: ${requestId}`); + // Implement view profile logic here +}; + +const handleCloseRequest = (requestId) => { + console.log(`Closing request for request ID: ${requestId}`); + // Implement close request logic here +}; |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| Buttons.jsx | +
+
+ |
+ 42.85% | +15/35 | +66.66% | +2/3 | +50% | +2/4 | +42.85% | +15/35 | +
| CountdownTimer.jsx | +
+
+ |
+ 0% | +0/43 | +0% | +0/1 | +0% | +0/1 | +0% | +0/43 | +
| EditProfileModal.jsx | +
+
+ |
+ 5.71% | +6/105 | +100% | +0/0 | +0% | +0/1 | +5.71% | +6/105 | +
| Form.jsx | +
+
+ |
+ 0% | +0/244 | +0% | +0/1 | +0% | +0/1 | +0% | +0/244 | +
| Header.jsx | +
+
+ |
+ 0% | +0/16 | +0% | +0/1 | +0% | +0/1 | +0% | +0/16 | +
| Modal.jsx | +
+
+ |
+ 0% | +0/16 | +0% | +0/1 | +0% | +0/1 | +0% | +0/16 | +
| Navigation.jsx | +
+
+ |
+ 0% | +0/27 | +0% | +0/1 | +0% | +0/1 | +0% | +0/27 | +
| ProfileModal.jsx | +
+
+ |
+ 0% | +0/25 | +0% | +0/1 | +0% | +0/1 | +0% | +0/25 | +
| RequestList.jsx | +
+
+ |
+ 0% | +0/93 | +0% | +0/1 | +0% | +0/1 | +0% | +0/93 | +
| Request_Page_List.jsx | +
+
+ |
+ 0% | +0/241 | +0% | +0/1 | +0% | +0/1 | +0% | +0/241 | +
| buttons_request.jsx | +
+
+ |
+ 0% | +0/68 | +0% | +0/1 | +0% | +0/1 | +0% | +0/68 | +
| rate_modal.jsx | +
+
+ |
+ 0% | +0/52 | +0% | +0/1 | +0% | +0/1 | +0% | +0/52 | +
| rating.jsx | +
+
+ |
+ 0% | +0/33 | +0% | +0/1 | +0% | +0/1 | +0% | +0/33 | +
| renderStars.jsx | +
+
+ |
+ 100% | +16/16 | +60% | +3/5 | +100% | +1/1 | +100% | +16/16 | +
| starRate.jsx | +
+
+ |
+ 47.82% | +11/23 | +100% | +0/0 | +0% | +0/1 | +47.82% | +11/23 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 | 1x +1x +1x +1x +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +1x | // EditProfile.jsx
+import React from 'react'
+import { useState, useEffect } from 'react';
+import './CreateUser.css'
+import { useDbAdd, useDbData, useDbUpdate } from '../../utilities/firebase';
+
+
+function CreateUser({ closeModal, userId }) {
+ // const [userData, userDataError] = useDbData(`/users/${userId}`);
+
+ const [name, setName] = useState('');
+ const [address, setAddress] = useState('');
+ const [apartment, setApartment] = useState('');
+ const [city, setCity] = useState('');
+ const [state, setStateLoc] = useState('');
+ const [zip, setZip] = useState('');
+ const [neighborhoodCode, setNeighborhoodCode] = useState('');
+
+ const [addUser, result] = useDbAdd(`/users`);
+
+
+ const handleSave = async () => {
+ if (!userId) {
+ console.error("User ID is missing.");
+ return;
+ }
+
+ const newUserProfile = {
+ username: name,
+ Address: address,
+ Apartment: apartment,
+ City: city,
+ StateLoc: state,
+ Zip: zip,
+ NeighborhoodCode: neighborhoodCode,
+ userid: userId, // Use the passed-in userId
+ rate_count: 0,
+ rate_score: 0,
+ task_CBU: 0,
+ task_CFU: 0,
+ photo_url: '',
+ location: ''
+ };
+
+ try {
+ await addUser(newUserProfile, userId); // Store user data under /users/{userId}
+ console.log("Profile created successfully!");
+ closeModal();
+ } catch (error) {
+ console.error("Error creating profile:", error);
+ }
+ };
+
+
+
+
+ return (
+ <div className='modalBackground'>
+ <div className="modalContainer">
+ {/* <div className="titleCloseBtn">
+ <button onClick={() => closeModal(false)}> X </button>
+ </div> */}
+ <div className="title">
+ <h1>Edit Profile</h1>
+ </div>
+ <div className="body">
+ <div>
+ <h2>Full Name</h2>
+ <input
+ className="input fullWidth"
+ value={name}
+ onChange={(e) => setName(e.target.value)}
+ placeholder="Enter your full name"
+ />
+ </div>
+
+
+ <div className="address">
+ <h2>Home Address</h2>
+ <input
+ className="input fullWidth"
+ value={address}
+ onChange={(e) => setAddress(e.target.value)}
+ placeholder="Enter your address"
+ />
+ <input
+ className="input fullWidth"
+ value={apartment}
+ onChange={(e) => setApartment(e.target.value)}
+ placeholder="Apartment, suite, etc."
+ />
+ <input
+ className="input fullWidth"
+ value={city}
+ onChange={(e) => setCity(e.target.value)}
+ placeholder="City"
+ />
+
+ <div className="twoColumns">
+ <input
+ className="input"
+ value={state}
+ onChange={(e) => setStateLoc(e.target.value)}
+ placeholder="State"
+ />
+ <input
+ className="input"
+ value={zip}
+ onChange={(e) => setZip(e.target.value)}
+ placeholder="Zip Code"
+ />
+ </div>
+ </div>
+
+
+ <div className="neighborhood">
+ <h2> Neighborhood Code</h2>
+ {/* <input className="input" value="Enter Here"/> */}
+ <input
+ className="input"
+ value={neighborhoodCode}
+ onChange={(e) => setNeighborhoodCode(e.target.value)}
+ placeholder="Enter Neighborhood Code"
+ />
+ <p className="smallText">please allow up to 2 days for approval from your Neighborhood Admin</p>
+ </div>
+
+ </div>
+ <div className="footer">
+ <button id='cancelBtn' onClick={() => closeModal(false)}>Cancel</button>
+ <button id='saveBtn' onClick={handleSave} >Save Profile</button>
+ </div>
+
+
+ </div>
+ </div>
+ )
+}
+
+export default CreateUser |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import React, { useState } from 'react'; +import { useNavigate } from 'react-router-dom'; +import "./HomePage.css"; + +import RequestList from "../RequestList" +import TextOnlyForm from "../Form"; +import { GreenButton } from "../Buttons"; + +const HomePage = () => { + const [description, setDescription] = useState(''); + const navigate = useNavigate(); + + const DirectToRequestForm = () => { + navigate('/requestform', { state: { description } }); // Pass description as state + }; + + return ( + <div className='homepage-container'> + <div className='new-request-area'> + <h2 className="mb-0 me-2">New Request</h2> + <TextOnlyForm text={description} setText={setDescription} placeholder={'How can your neighbors help?'}/> + <GreenButton onClick={DirectToRequestForm} text={'Submit'}/> + </div> + + <RequestList /> + </div> + ); +}; + +export default HomePage; + |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 | 1x +1x +1x +1x +1x +1x +1x +1x +1x + +1x + +1x + +1x + +1x + + +1x +1x +1x + +1x + +1x +1x + + + +1x + + +1x + + + +1x + + + + + + + + + + + + + + + + + + + + + + + + + + +1x + + + +1x +1x + +1x + + + +1x +1x +1x +1x +1x + + +1x +1x +1x +1x +1x +1x +1x +1x +1x + +1x + +1x + +1x + +1x + + + + + + + +1x +1x + +1x + +1x + | import React from 'react';
+import "./ProfilePage.css"
+import AuthButton from '../Buttons';
+import StarRate from "../starRate";
+import { useState, useEffect } from "react";
+import { renderStars } from "../renderStars";
+import { useAuthState, useDbData } from '../../utilities/firebase';
+import EditProfileModal from '../EditProfileModal'
+import CreateUser from './CreateUser'
+
+const ProfilePage = () => {
+
+ const [user] = useAuthState();
+
+ const user_id = user ? user.uid : "TESTING";
+
+ const [usersData, usersError] = useDbData(`users/${user_id}`);
+
+ //for waiting until the information is fetched. If timed out, then go to create Profile button.
+ const [isDelayed, setIsDelayed] = useState(false); // State to control delayed rendering
+ useEffect(() => {
+ const timer = setTimeout(() => {
+ setIsDelayed(true);
+ }, 5000);
+
+ return () => clearTimeout(timer);
+ }, []);
+
+
+ //edit profile
+ const [openModal, setOpenModal] = useState(false);
+
+
+ if (!user) {
+ return <p>Loading user data...</p>;
+ }
+
+ if (!usersData) {
+ return (
+ <div className='profile-page'>
+ {isDelayed ? (
+ <>
+ <p>It seems like you have not made an account with us. Create your profile now!</p>
+ {/* <AuthButton/> */}
+ <button className="white-custom-button" onClick={() => {
+ setOpenModal(true);
+ }}>Create Profile</button>
+
+ {openModal && (
+ <CreateUser
+ closeModal={() => setOpenModal(false)}
+ userId={user_id} // Pass userId to CreateUser to create profile with correct ID
+ />
+
+ )}
+ </> ) : (
+ <p>Loading user data...</p>
+ )}
+ {/* <AuthButton/> */}
+
+ </div>
+ )
+ // return <p>User data loaded!</p>;
+ }
+ if (!user) {
+ return <p>Loading user data...</p>;
+ }
+
+ return (
+ <div className='profile-page'>
+ {/* should be replaced with auth data */}
+ <h1 className="user-name"> {user.displayName || "Anonymous"} </h1>
+ {/* Ensure user.displayName is not undefined */}
+
+ {/* Stars */}
+ <div className="starStyle">
+ { renderStars(usersData.rate_score) } {/* Pass the rateScore to renderStars */}
+ <p className="ratingCountContainer">{usersData.rate_count}</p>
+ </div>
+ <p className="goodNeighborRanking">Good Neightbor Rating</p>
+
+ {/* Stats */}
+ <div className="StatsContainer">
+ <div className="TasksBy">
+ <h1 className="numberStyle"> {usersData.task_CBU || 0} </h1>
+ <p className="textStyle">Tasks completed by User </p>
+ </div>
+ <div className="TasksFor">
+ <h1 className="numberStyle">{usersData.task_CFU || 0}</h1>
+ <p className="textStyle">Tasks completed for User </p>
+ </div>
+
+ </div>
+ {/* //edit profile button */}
+ <button className="white-custom-button" onClick={() => {
+ setOpenModal(true);
+ }}> Edit Profile</button>
+
+ {openModal && (
+ <EditProfileModal
+ closeModal={() => setOpenModal(false)}
+ userId={user_id} //passes userId to modal, avoids redundancy
+ // initialLocation={usersData.location} // Pass user's initial location
+ />
+ )}
+
+ <AuthButton/>
+ </div>
+ );
+};
+
+export default ProfilePage;
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import React from 'react'; +import { useFormData } from '../../utilities/useFormData'; +import { useDbAdd } from '../../utilities/firebase'; +import './RequestForm.css' +import { useAuthState } from '../../utilities/firebase'; +import { useLocation, useNavigate } from 'react-router-dom'; +import { push, ref } from 'firebase/database'; +import { database } from '../../utilities/firebase'; +import { RequestForm } from "../Form"; +import { useState, useEffect } from 'react'; + +const RequestFormPage = () => { + const location = useLocation(); + const navigate = useNavigate(); + + useEffect(() => { + const { description } = location.state || {}; + console.log(description) + if (description) { + setDescription(description); + } + }, [location.state]); + + const [formState] = useFormData(null); + const [add] = useDbAdd('requests'); + const [user] = useAuthState(); + + const newRequestId = push(ref(database, 'requests')).key; + + const [description, setDescription] = useState(''); + const [timer, setTimer] = useState(''); + const [deliveryPref, setDeliveryPref] = useState(''); + const [meetUpLocation, setMeetUpLocation] = useState(''); + + const data = { + description: description, + timer: timer, + delivery_pref: deliveryPref, + expected_duration: "", + request_status: "Open", + accept_userid: "", + location: "", + post_time: new Date().toISOString(), + meet_up_loc: meetUpLocation, + request_id: newRequestId, + userid: user ? user.uid : "TESTING", + username: user ? user.displayName || "Anonymous" : "Anonymous", + }; + + + const submit = async (evt) => { + evt.preventDefault(); + + const errors = formState.errors || {}; + + if (Object.keys(errors).length === 0) { + try { + await add({ ...data }, newRequestId); + console.log('Form submitted:', { ...data }); + navigate('/'); // Navigate back to homepage after successful submission + } catch (error) { + console.error("Error saving data:", error); + } + } + }; + + return ( + <div className="requestform-page"> + <h4 className='title'>New Request</h4> + <RequestForm + data={data} + setDescription={setDescription} + setTimer={setTimer} + deliveryPref={deliveryPref} + setDeliveryPref={setDeliveryPref} + setMeetUpLocation={setMeetUpLocation} + onClick={submit}/> + </div> + ); +}; + +export default RequestFormPage; |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 | + + + + + + + + + + + + + + | import React from 'react'; +import './RequestsPage.css' +import Request_Page_List from "../Request_Page_List" + +const RequestsPage = () => { + return ( + <div className="requests-page-container"> + <h1>Your Requests Dashboard</h1> + <Request_Page_List /> + </div> + ); +}; + +export default RequestsPage; + |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 | + + + + + + + + + + + + + + + + + | import Navigation from '../Navigation.jsx'; +import "./SignIn.css" +import AuthButton from '../Buttons.jsx' + +const SignInPage = () => { + return ( + <div className="sign-in-page"> + <div className="sign-in"> + <div className="house"> + <i class="bi bi-house-door"></i> + </div> + <p className="title">Good Neighbor</p> + <AuthButton /> + </div> + </div> + ); +} +export default SignInPage; |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| CreateUser.jsx | +
+
+ |
+ 5.3% | +6/113 | +100% | +0/0 | +0% | +0/1 | +5.3% | +6/113 | +
| HomePage.jsx | +
+
+ |
+ 0% | +0/23 | +0% | +0/1 | +0% | +0/1 | +0% | +0/23 | +
| ProfilePage.jsx | +
+
+ |
+ 64% | +48/75 | +27.27% | +3/11 | +20% | +1/5 | +64% | +48/75 | +
| RequestForm.jsx | +
+
+ |
+ 0% | +0/69 | +0% | +0/1 | +0% | +0/1 | +0% | +0/69 | +
| RequestsPage.jsx | +
+
+ |
+ 0% | +0/11 | +0% | +0/1 | +0% | +0/1 | +0% | +0/11 | +
| SignIn.jsx | +
+
+ |
+ 0% | +0/16 | +0% | +0/1 | +0% | +0/1 | +0% | +0/16 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import React, { useState } from 'react'; +import { Modal, Button } from 'react-bootstrap'; +import Rating from './rating'; + +const RateModal = ({ show, handleClose, requestId, handleSubmit, requests, users }) => { + const [rating, setRating] = useState(0); // State to store the rating + + // Find the specific request based on requestId + const request = requests ? requests[requestId] : null; + + // Get the accept_userid from the request + const acceptUserId = request ? request.accept_userid : null; + + // Find the user's username based on accept_userid + const neighborUsername = acceptUserId && users[acceptUserId] ? users[acceptUserId].username : 'Unknown User'; + + const requestDescription = request ? request.description : 'No description available'; + + const handleRatingSubmit = () => { + const userToUpdate = users[acceptUserId]; // Get the user from users data + + const currentRating = userToUpdate.rate || 5; // Current user rating (default to 5 if not available) + const rateCount = userToUpdate.rate_count || 1; // Current rate count (default to 1 if not available) + const currentUserId = request.userid; + // Calculate the new rating + let newRating = (currentRating * rateCount + rating) / (rateCount + 1); + newRating = parseFloat(newRating.toFixed(2)); + // Pass data to the parent through handleSubmit + handleSubmit(requestId, acceptUserId, newRating,currentUserId); // Pass new rating, userId, and requestId + handleClose(); // Close modal + }; + + return ( + <Modal show={show} onHide={handleClose} centered> + <Modal.Header closeButton> + <Modal.Title className="text-center w-100">Please rate your neighbor's help</Modal.Title> + </Modal.Header> + <Modal.Body> + {requestId ? ( + <div className="text-center"> + {/* Neighbor Username */} + <div className="mb-3"> + <strong className="fw-bold">Neighbor Username:</strong> + <p className="text-muted">{neighborUsername}</p> + </div> + + {/* Request Description */} + <div className="mb-3"> + <strong className="fw-bold">Request Description:</strong> + <p className="text-muted">{requestDescription}</p> + </div> + + {/* Rating Section */} + <div className="rating-section"> + <p className="fw-bold">Please rate your neighbor's help:</p> + <Rating onRate={(rate) => setRating(rate)} /> + </div> + </div> + ) : ( + <p>No request selected.</p> + )} + </Modal.Body> + <Modal.Footer className="d-flex justify-content-center"> + {/* Submit button centered */} + <Button + variant="primary" + onClick={handleRatingSubmit} // Handle the submit action and rating + > + Submit + </Button> + </Modal.Footer> + </Modal> + ); +}; + +export default RateModal; + + + + |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import React, { useState } from 'react'; + +// Inline SVG for the star +const starSvg = (filled) => ( + <svg + xmlns="http://www.w3.org/2000/svg" + width="40" + height="40" + viewBox="0 0 30 30" + fill={filled ? "#ffc107" : "#e4e5e9"} // Fill color based on hover or rating + > + <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.707 1.629 8.111L12 18.896l-7.565 4.228L6.064 15.01 0 9.303l8.332-1.148z" /> + </svg> +); + +const Rating = ({ onRate }) => { + const [rating, setRating] = useState(5); // Actual rating value + const [hover, setHover] = useState(null); // Hover state for stars + + return ( + <div className="star-rating d-flex justify-content-center"> + {[...Array(5)].map((star, index) => { + const ratingValue = index + 1; + + return ( + <span + key={index} + style={{ cursor: "pointer" }} + onClick={() => { + setRating(ratingValue); // Update the rating value + onRate(ratingValue); // Pass rating to parent component + }} + onMouseEnter={() => setHover(ratingValue)} // Set hover state when mouse enters a star + onMouseLeave={() => setHover(null)} // Reset hover state when mouse leaves + > + {starSvg(ratingValue <= (hover || rating))} {/* Render filled or empty star */} + </span> + ); + })} + </div> + ); +}; + +export default Rating; + |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 | 1x + + +1x +1x +1x +1x + +1x +1x + +1x +4x +1x + +1x + +1x +1x +1x +1x + +1x + | import React from 'react';
+
+// Function to render stars based on the rating
+export const renderStars = (rating) => {
+ const fullStars = Math.floor(rating);
+ const halfStar = rating % 1 !== 0 ? 1 : 0;
+ const emptyStars = 5 - fullStars - halfStar;
+
+ return (
+ <>
+ {/* Full stars */}
+ {[...Array(fullStars)].map((_, index) => (
+ <i key={index} className="bi bi-star-fill text-warning"></i>
+ ))}
+ {/* Half star */}
+ {halfStar ? <i className="bi bi-star-half text-warning"></i> : null}
+ {/* Empty stars */}
+ {[...Array(emptyStars)].map((_, index) => (
+ <i key={index} className="bi bi-star text-warning"></i>
+ ))}
+ </>
+ );
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 | 1x + + + +1x +1x +1x +1x +1x +1x +1x + +1x +1x + + +1x + + + + + + + + + + + + + + + + + + + | import React from 'react';
+// import {FaStar} from "react-icons/fa";
+
+
+const starSvg = (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="40"
+ height="40"
+ viewBox="0 0 30 30"
+ fill="currentColor"
+ >
+ <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.707 1.629 8.111L12 18.896l-7.565 4.228L6.064 15.01 0 9.303l8.332-1.148z" />
+ </svg>
+ );
+
+ export default function StarRate() {
+
+ return (
+ <>
+ {[...Array(5)].map((star, index) => {
+ return (
+ <>
+
+ <span key={index}>
+ {starSvg}
+ </span>
+
+ </>
+ );
+ })}
+ </>
+ );
+ }
+
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ ++ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 | + + + + + + + + + + + + | import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import App from './App'; + +const root = ReactDOM.createRoot(document.getElementById('root')); + +root.render( + <React.StrictMode> + <App /> + </React.StrictMode> +); + |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import React, { useState, useEffect } from 'react'; + +const DistanceMatrix = ({ arrival }) => { + const [origin, setOrigin] = useState(''); + const [destination, setDestination] = useState(arrival); + const [distance, setDistance] = useState(''); + const [duration, setDuration] = useState(''); + + const getUserLocation = () => { + if (navigator.geolocation) { + navigator.geolocation.getCurrentPosition( + (position) => { + const { latitude, longitude } = position.coords; + setOrigin(`${latitude},${longitude}`); + }, + (error) => { + console.error('Error getting location:', error); + alert('Unable to retrieve your location. Please enable location services.'); + } + ); + } else { + console.error('Geolocation is not supported by this browser.'); + alert('Geolocation is not supported by this browser.'); + } + }; + + const calculateDistance = () => { + const service = new window.google.maps.DistanceMatrixService(); + + service.getDistanceMatrix( + { + origins: [origin], + destinations: [destination], + travelMode: window.google.maps.TravelMode.WALKING, + unitSystem: window.google.maps.UnitSystem.METRIC, + avoidHighways: false, + avoidTolls: false, + }, + (response, status) => { + if (status !== 'OK') { + alert('Error was: ' + status); + return; + } + + const results = response.rows[0].elements[0]; + if (results) { + setDistance(results.distance.text); + setDuration(results.duration.text); + } + } + ); + }; + + useEffect(() => { + getUserLocation(); + }, []); + + useEffect(() => { + if (origin && destination) { + calculateDistance(); + } + }, [origin, destination]); + // console.log('Origin', origin); + // console.log('Destination', destination); + + return ( + + + <div> + <div> + <text>{distance} ({duration || 'Calculating...'} away)</text> + </div> + + + </div> + ); +}; + +export default DistanceMatrix; |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { getDatabase, onValue, ref, update, get, push, set ,remove} from 'firebase/database'; +import { useCallback, useEffect, useState } from 'react'; +import { initializeApp } from 'firebase/app'; +import { getAuth, GoogleAuthProvider, onAuthStateChanged, signInWithPopup, signOut as firebaseSignOut } from 'firebase/auth'; + +const firebaseConfig = { + apiKey: "AIzaSyCPJhTswV7OHI1weBX4_0dMqRSauCwUDJs", + authDomain: "yellowteam-goodneigh.firebaseapp.com", + databaseURL: "https://yellowteam-goodneigh-default-rtdb.firebaseio.com", + projectId: "yellowteam-goodneigh", + storageBucket: "yellowteam-goodneigh.appspot.com", + messagingSenderId: "157525304360", + appId: "1:157525304360:web:5e9cc1389851deb0d3011d", + measurementId: "G-VP1GR150E7" + }; + +// Initialize Firebase +const firebase = initializeApp(firebaseConfig); +const database = getDatabase(firebase); +const auth = getAuth(firebase); + +export const useDbData = (path) => { + const [data, setData] = useState(); + const [error, setError] = useState(null); + + useEffect(() => ( + onValue(ref(database, path), (snapshot) => { + setData(snapshot.val()); + }, (error) => { + setError(error); + }) + ), [path]); + + return [data, error]; +}; + +const makeResult = (error) => { + const timestamp = Date.now(); + const message = error?.message || `Updated: ${new Date(timestamp).toLocaleString()}`; + return { timestamp, error, message }; +}; + +export const useDbUpdate = (path) => { + const [result, setResult] = useState(); + const updateData = useCallback(async (value) => { + console.log('Updating path:', path); + console.log('Value before update:', value); + + if (!value || typeof value !== 'object') { + console.error("Invalid value passed to updateData:", value); + return; + } + + const dbRef = ref(database, path); + update(dbRef, value) + .then(() => setResult(makeResult())) + .catch((error) => { + console.error("Error during Firebase update:", error); + setResult(makeResult(error)); + }); + }, [path]); + + return [updateData, result]; +}; + +export { firebase, database, auth }; + +export const signInWithGoogle = () => { + signInWithPopup(auth, new GoogleAuthProvider()); +}; + +export const signOut = () => firebaseSignOut(auth); + +export const useAuthState = () => { + const [user, setUser] = useState(); + + useEffect(() => ( + onAuthStateChanged(auth, setUser) + ), []); + + return [user]; +}; + +export const useDbAdd = (path) => { + const [result, setResult] = useState(null); + + // Given data and a key, the key is used to create a new path for the data + const add = async (data, key) => { + try { + const newRef = ref(database, `${path}/${key}`); // Use the key passed in the argument + await set(newRef, data); // Set data at the specified reference + setResult({ message: 'Request added successfully!', error: false }); + } catch (error) { + setResult({ message: error.message, error: true }); + } + }; + + return [add, result]; + }; + + export const getRef = (path) => { + + + + + }; + export const useDbRemove = () => { + const [result, setResult] = useState(null); + + const removeData = useCallback(async (path) => { + try { + const dbRef = ref(database, path); + const snapshot = await get(dbRef); + if (snapshot.exists()) { + await remove(dbRef); + setResult({ message: `Removed successfully`, error: false }); + } else { + setResult({ message: `Error: No data found at path: ${path}`, error: true }); + } + } catch (error) { + setResult({ message: error.message, error: true }); + } + }, []); + + return [removeData, result]; +}; + + +export const useDbStatusUpdate = () => { + const [result, setResult] = useState(); + + + const updateStatus = useCallback(async (path, updates) => { + console.log('Updating path:', path); + console.log('Update data:', updates); + + if (!updates || typeof updates !== 'object') { + console.error("Invalid updates passed to updateStatus:", updates); + return; + } + + const dbRef = ref(database, path); // Pass the path dynamically + update(dbRef, updates) + .then(() => setResult({ success: true })) + .catch((error) => { + console.error("Error during Firebase update:", error); + setResult({ success: false, error }); + }); + }, []); + + return [updateStatus, result]; + }; |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| Dynamic_Distance.jsx | +
+
+ |
+ 0% | +0/63 | +0% | +0/1 | +0% | +0/1 | +0% | +0/63 | +
| firebase.js | +
+
+ |
+ 0% | +0/151 | +0% | +0/1 | +0% | +0/1 | +0% | +0/151 | +
| useFormData.jsx | +
+
+ |
+ 0% | +0/14 | +0% | +0/1 | +0% | +0/1 | +0% | +0/14 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 | + + + + + + + + + + + + + + + + + | import { useState } from 'react'; + +export const useFormData = (validator = null, values = {}) => { + const [state, setState] = useState(() => ({ values })); + + const change = (evt) => { + const { id, value } = evt.target; + const error = validator ? validator(id, value) : ''; + evt.target.setCustomValidity(error); + + const values = {...state.values, [id]: value}; + const errors = {...state.errors, [id]: error}; + const hasError = Object.values(errors).some(x => x !== ''); + setState(hasError ? { values, errors } : { values }); + }; + + return [state, change]; +}; |