- 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/79 | -0% | -0/4 | -0% | -0/4 | -0% | -0/79 | -
| src/components | -
-
- |
- 17.57% | -190/1081 | -54.28% | -19/35 | -17.07% | -7/41 | -17.57% | -190/1081 | -
| src/components/pages | -
-
- |
- 9.12% | -28/307 | -33.33% | -2/6 | -28.57% | -2/7 | -9.12% | -28/307 | -
| src/utilities | -
-
- |
- 39.82% | -92/231 | -66.66% | -8/12 | -28.57% | -4/14 | -39.82% | -92/231 | -
- 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 { useAuthState } from './utilities/firebase'; -import { HashRouter as Router, Routes, Route } from 'react-router-dom'; -import 'bootstrap-icons/font/bootstrap-icons.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'; - -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-header"> - {/* If user is authenticated, show Navbar and Routes, else show SignInPage */} - {!user ? ( - <SignInPage /> // Show sign-in page if not authenticated - ) : ( - <> - <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> - <div> - <Navigationbar /> - </div> - </> - )} - </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 | - - - - - - - - - - - - - - - - - | import Navigation from './components/Navigation.jsx'; -import "./SignIn.css" -import AuthButton from './components/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. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 | - - - - - - - - - - - - - - - - - - | import { signInWithGoogle, signOut, useAuthState } from '../utilities/firebase'; - -const SignInButton = () => ( - <button className="button" onClick={signInWithGoogle}>Sign in</button> -); - -const SignOutButton = () => ( - <button className="button" onClick={signOut}>Sign out</button> -); - -const AuthButton = () => { - const [user] = useAuthState(); - return user ? <SignOutButton /> : <SignInButton />; -}; - -const activation = ({isActive}) => isActive ? 'active' : 'inactive'; - - -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 | 1x -1x -1x -1x - -1x -2x -2x -2x - - -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 | 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, { 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 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | // 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 | 1x -1x -1x -1x -1x - -1x -1x - -1x -2x -2x -2x -2x -2x -2x -2x -2x -2x - - -1x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -1x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -1x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -1x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -1x | // 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 | 1x -1x -1x - -1x - - - - - - - - - - - - - -1x | 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 | - - - - - - - - - - - - - - - - - - - - - | import React from "react"; -import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; -import HomePage from './pages/HomePage' -import RequestsPage from './pages/RequestsPage' -import ProfilePage from './pages/ProfilePage' -import Navbar from "./Navigation"; - -const NavPage = () => { - return ( - <> - - <Routes> - <Route path="/" element={<HomePage />} /> - <Route path="/requests" element={<RequestsPage />} /> - <Route path="/profile" element={<ProfilePage />} /> - </Routes> - - </> - ); -}; - -export default NavPage; |
- 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 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | import { NavLink } from 'react-router-dom'; -// import { signInWithGoogle, signOut, useAuthState } from '../utilities/firebase'; -import './Navigation.css' -import Container from 'react-bootstrap/Container'; -import Nav from 'react-bootstrap/Nav'; -import Navbar from 'react-bootstrap/Navbar'; -import NavDropdown from 'react-bootstrap/NavDropdown'; -import house from './images/house-door.svg'; - - -const Navigationbar = () => { - return ( - <Navbar fixed="bottom" expand="lg" className="bg-body-tertiary"> - <Container> - <Navbar.Brand href="/"> - <img src={house} - className="d-inline-block align-top" - /> - <text className="good-neighbor">Good Neighbor</text> - </Navbar.Brand> - <Navbar.Toggle aria-controls="basic-navbar-nav" /> - <Navbar.Collapse id="basic-navbar-nav"> - <Nav className="navSelectionStyle"> - - <Nav.Link> - <NavLink to="/"> - <p className="homeNavStyle">Home</p> - </NavLink> - </Nav.Link> - - <Nav.Link> - <NavLink to="/profile"> - <p className="navPagesStyling">Profile</p> - </NavLink> - </Nav.Link> - - <Nav.Link> - <NavLink to="/requests"> - <p className="navPagesStyling">Requests</p> - </NavLink> - </Nav.Link> - </Nav> - </Navbar.Collapse> - </Container> - </Navbar> - ); - // Lihn's original code - // I'm leaving it in because I wasn't able to get the isActive working in the bootstrap react navbar - // but navigation still seems to work well - - // const activeLink = "bg-blue-100 text-black"; - // const normalLink = "text-white"; // You may want to keep the normal link style - - // return ( - // <section> - // <div className="bottom-nav"> - // <NavLink - // to="/" - // className={({ isActive }) => (isActive ? activeLink : normalLink)} - // > - // <p className="nav-link">Home</p> - // </NavLink> - // <NavLink - // to="/profile" - // className={({ isActive }) => (isActive ? activeLink : normalLink)} - // > - // <p className="nav-link">Profile</p> - // </NavLink> - // <NavLink - // to="/requests" - // className={({ isActive }) => (isActive ? activeLink : normalLink)} - // > - // <p className="nav-link">Requests</p> - // </NavLink> - // </div> - // </section> - // ); -}; - -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 | 1x -1x -1x - -1x - - - - - - - - - - - - - - - - - - - - - - -1x - | 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 -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 -1x - -1x -4x -4x -4x - - -4x -4x - -4x - - - -4x -2x -2x - -1x -1x -1x - -1x -1x - - - - -1x - - - - - - - - - - - - - - - - - -1x -1x -1x - - -1x -2x -2x -1x -2x -1x -2x - -2x - -2x -2x - -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 -2x -2x -2x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x - -1x -1x -1x - - -2x -4x - -4x - -1x - | 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);
- };
-
- const handleSort = (criterion) => {
- const sortedRequests = [...requests].sort((a, b) => {
- if (criterion === 'timeRemaining') {
- return a.expected_duration - b.expected_duration;
- } else if (criterion === 'distance') {
- return 0;
- } else if (criterion === 'rating') {
- const userA = users[a.userid]?.rate_score || 0;
- const userB = users[b.userid]?.rate_score || 0;
- return userB - userA;
- }
- return 0;
- });
- setSortBy(criterion);
- setRequests(sortedRequests);
- };
-
- // 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 me-2">Request List</h2>
- <DropdownButton id="dropdown-basic" variant="secondary" size="sm" title="Sort by">
- <Dropdown.Item onClick={() => handleSort('timeRemaining')}>Time Remaining</Dropdown.Item>
- <Dropdown.Item onClick={() => handleSort('distance')}>Distance</Dropdown.Item>
- <Dropdown.Item onClick={() => handleSort('rating')}>Rating</Dropdown.Item>
- </DropdownButton>
- </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} />
- <small className="text-muted mb-2">{request.location || "Unknown location"}</small>
- <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 | 1x -1x -1x -1x -1x -1x -1x - -1x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -1x - - - - - - - - - - - - - - -1x - | 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've 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>
- <h2>Your Requests</h2>
- {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>
- <strong className="text-highlight">
- { user && user.username
- ? <span><strong>{user.username}</strong> has accepted your request:</span>
- : <span><strong>No one</strong> accepts 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>
- <h2>Requests You've Accepted</h2>
- {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 | 1x -1x - - - - -1x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -1x - - - - -1x - - - - - - -1x - - - - - - - - - -1x - - - - -1x - - - | 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={() => 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 '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 | -- |
|---|---|---|---|---|---|---|---|---|---|
| AuthButton.jsx | -
-
- |
- 0% | -0/11 | -0% | -0/1 | -0% | -0/1 | -0% | -0/11 | -
| Buttons.jsx | -
-
- |
- 34.28% | -12/35 | -100% | -1/1 | -25% | -1/4 | -34.28% | -12/35 | -
| CountdownTimer.jsx | -
-
- |
- 55.81% | -24/43 | -80% | -4/5 | -100% | -2/2 | -55.81% | -24/43 | -
| EditProfileModal.jsx | -
-
- |
- 0% | -0/105 | -0% | -0/1 | -0% | -0/1 | -0% | -0/105 | -
| Form.jsx | -
-
- |
- 9.01% | -22/244 | -100% | -1/1 | -16.66% | -1/6 | -9.01% | -22/244 | -
| Modal.jsx | -
-
- |
- 31.25% | -5/16 | -100% | -0/0 | -0% | -0/1 | -31.25% | -5/16 | -
| NavPage.jsx | -
-
- |
- 0% | -0/17 | -0% | -0/1 | -0% | -0/1 | -0% | -0/17 | -
| Navigation.jsx | -
-
- |
- 0% | -0/41 | -0% | -0/1 | -0% | -0/1 | -0% | -0/41 | -
| ProfileModal.jsx | -
-
- |
- 20% | -5/25 | -100% | -0/0 | -0% | -0/1 | -20% | -5/25 | -
| RequestList.jsx | -
-
- |
- 80.86% | -93/115 | -56.52% | -13/23 | -30% | -3/10 | -80.86% | -93/115 | -
| Request_Page_List.jsx | -
-
- |
- 4.21% | -10/237 | -100% | -0/0 | -0% | -0/2 | -4.21% | -10/237 | -
| buttons_request.jsx | -
-
- |
- 11.76% | -8/68 | -100% | -0/0 | -0% | -0/6 | -11.76% | -8/68 | -
| rate_modal.jsx | -
-
- |
- 9.61% | -5/52 | -100% | -0/0 | -0% | -0/1 | -9.61% | -5/52 | -
| rating.jsx | -
-
- |
- 12.12% | -4/33 | -100% | -0/0 | -0% | -0/2 | -12.12% | -4/33 | -
| renderStars.jsx | -
-
- |
- 12.5% | -2/16 | -100% | -0/0 | -0% | -0/1 | -12.5% | -2/16 | -
| starRate.jsx | -
-
- |
- 0% | -0/23 | -0% | -0/1 | -0% | -0/1 | -0% | -0/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 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | // 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 -32 -33 | 1x -1x -1x - -1x -1x -1x - -1x -2x -2x - -2x -1x -1x - -2x -2x - -2x -2x -2x -2x - -2x - -2x -2x - -2x - -1x - | 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'>
-
- <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 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | 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 | 1x -1x -1x -1x - - - - - - - - -1x - | import React from 'react'; -import './RequestsPage.css' -import Request_Page_List from "../Request_Page_List" -const RequestsPage = () => { - return ( - <div className="requests-page"> - <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 | -
-
- |
- 0% | -0/113 | -0% | -0/1 | -0% | -0/1 | -0% | -0/113 | -
| HomePage.jsx | -
-
- |
- 100% | -23/23 | -100% | -2/2 | -100% | -2/2 | -100% | -23/23 | -
| ProfilePage.jsx | -
-
- |
- 0% | -0/75 | -0% | -0/1 | -0% | -0/1 | -0% | -0/75 | -
| RequestForm.jsx | -
-
- |
- 0% | -0/69 | -0% | -0/1 | -0% | -0/1 | -0% | -0/69 | -
| RequestsPage.jsx | -
-
- |
- 45.45% | -5/11 | -100% | -0/0 | -0% | -0/1 | -45.45% | -5/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 | 1x -1x -1x - -1x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -1x - - - - | 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 | 1x - - -1x - - - - - - - - - - - -1x - - - - - - - - - - - - - - - - - - - - - - - - - - - -1x - | 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 - - - - - - - - - - - - - - - - - - - - | 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 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | 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. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| App.jsx | -
-
- |
- 0% | -0/40 | -0% | -0/1 | -0% | -0/1 | -0% | -0/40 | -
| Home.jsx | -
-
- |
- 0% | -0/13 | -0% | -0/1 | -0% | -0/1 | -0% | -0/13 | -
| SignIn.jsx | -
-
- |
- 0% | -0/16 | -0% | -0/1 | -0% | -0/1 | -0% | -0/16 | -
| index.jsx | -
-
- |
- 0% | -0/10 | -0% | -0/1 | -0% | -0/1 | -0% | -0/10 | -
- 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 | 1x - -1x -2x -2x -2x -2x - -2x -1x - - - - - - - - - - -1x -1x -1x -1x -1x - -2x - - - - - - - - - - - - - - - - - - - - - - - - - - -2x -1x -2x - -2x -1x - - -2x -2x -2x - -2x - - -2x -2x -2x -2x - - -2x - -2x - -1x | 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 | 1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -1x -4x -4x -4x -4x -2x - -2x - -2x -4x -4x -4x -4x -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 { 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 | -
-
- |
- 46.15% | -30/65 | -62.5% | -5/8 | -66.66% | -2/3 | -46.15% | -30/65 | -
| firebase.js | -
-
- |
- 40.78% | -62/152 | -100% | -3/3 | -20% | -2/10 | -40.78% | -62/152 | -
| 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]; -}; |