From 5b8b6a209dbab0011692ec2d1dfd688078838cbf Mon Sep 17 00:00:00 2001 From: angelp03 Date: Fri, 8 Nov 2024 10:24:55 -0600 Subject: [PATCH] refactor existing frontend code --- src/App.jsx | 200 ++--------------------------------- src/components/Banner.css | 13 ++- src/components/Banner.jsx | 7 +- src/pages/LandingPage.jsx | 25 +++++ src/pages/ReviewPostPage.jsx | 157 +++++++++++++++++++++++++++ src/utilities/firebase.js | 46 ++++---- 6 files changed, 234 insertions(+), 214 deletions(-) create mode 100644 src/pages/LandingPage.jsx create mode 100644 src/pages/ReviewPostPage.jsx diff --git a/src/App.jsx b/src/App.jsx index f300761..1dc6065 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,194 +1,16 @@ -import React, { useState, useEffect } from 'react'; -import './App.css'; -import { useAuthState, signInWithGoogle, firebaseSignOut } from './utilities/firebase'; -import { findCafes } from './utilities/findCafes'; -import MapComponent from "./MapComponent"; - -function App() { - const [reviews, setReviews] = useState([]); - const [availability, setAvailability] = useState({}); - const [newReview, setNewReview] = useState(''); - const [selectedReview, setSelectedReview] = useState(null); - const [replyText, setReplyText] = useState(''); - const [cafeStatus, setCafeStatus] = useState({ seating: '', outlets: '' }); - const [address, setAddress] = useState(''); - const [dist, setDist] = useState(''); - const [cafes, setCafes] = useState([]); - - const [user] = useAuthState(); - - const handleSignIn = async () => { - try { - await signInWithGoogle(); - } catch (error) { - console.error('Error signing in:', error); - } - }; - - const handleLogout = () => firebaseSignOut(); - - useEffect(() => {}, []); - - const findCafesWrapper = () => { - findCafes(dist, address, setCafes); - }; - - const handleReviewSubmit = () => { - if (newReview.trim()) { - const review = { id: Date.now(), text: newReview, replies: [] }; - setReviews((prevReviews) => [...prevReviews, review]); - setNewReview(''); - } - }; - - const handleReplySubmit = (reviewId) => { - if (replyText.trim()) { - setReviews((prevReviews) => - prevReviews.map((review) => - review.id === reviewId - ? { ...review, replies: [...review.replies, replyText] } - : review - ) - ); - setReplyText(''); - setSelectedReview(null); - } - }; - - const handleAvailabilityUpdate = (cafeId) => { - const timestamp = new Date().toLocaleString(); - const newUpdate = { timestamp, seating: cafeStatus.seating, outlets: cafeStatus.outlets }; - - setAvailability((prevAvailability) => ({ - ...prevAvailability, - [cafeId]: { - history: [...(prevAvailability[cafeId]?.history || []), newUpdate], - }, - })); - setCafeStatus({ seating: '', outlets: '' }); - }; - - const cafesMap = [ - { name: "Cafe Blue", lat: 42.046, lng: -87.688 }, - { name: "Green Bean Cafe", lat: 42.048, lng: -87.684 }, - { name: "Java Lounge", lat: 42.044, lng: -87.690 }, - ]; +import { BrowserRouter as Router, Route, Routes } from "react-router-dom"; +import LandingPage from './pages/LandingPage'; +import ReviewPostPage from "./pages/ReviewPostPage"; +const App = () => { return ( -
-
-

CafeWay

- {user ? ( - <> - -

Welcome, {user.email}

- - ) : ( - - )} -
- -
-
-

Share a Review

- setNewReview(e.target.value)} - /> - - -
    - {reviews.map((review) => ( -
  • -

    setSelectedReview(review)}>{review.text}

    -
      - {review.replies.map((reply, index) => ( -
    • - Reply: {reply} -
      • - ))} -
    - {selectedReview && selectedReview.id === review.id && ( -
    - setReplyText(e.target.value)} - /> - -
    - )} -
    • - ))} -
- -

Update Cafe Availability

- setCafeStatus({ ...cafeStatus, seating: e.target.value })} - /> - setCafeStatus({ ...cafeStatus, outlets: e.target.value })} - /> - - -

Availability History

- {availability['cafe-123']?.history?.map((update, index) => ( -
-

- {update.timestamp}: Seating: {update.seating}, Outlets: {update.outlets} -

-
- ))} -
- -
-

Cafes Near Me

- setAddress(e.target.value)} - /> - setDist(e.target.value)} - /> - -

Cafes Near Me

-
    - {cafes.map((cafe, index) => ( -
  • {cafe}
    • - ))} -
- - -
    - {cafes.map((cafesMap, index) => ( -
  • - {cafe.name} (Lat: {cafe.lat}, Lng: {cafe.lng}) -
    • - ))} -
- - {/* Integrate MapComponent with hardcoded data */} -
- -
-
-
-
- ); + + + }/> + }/> + + + ) } export default App; diff --git a/src/components/Banner.css b/src/components/Banner.css index 89c1df9..f3016a4 100644 --- a/src/components/Banner.css +++ b/src/components/Banner.css @@ -7,7 +7,7 @@ font-family: 'Hind Vadodara', sans-serif; font-weight: bolder; color: #8A3323; - border-bottom: 1px solid #8A3323; + border-bottom: 2px solid #8A3323; } .logo-search-div { @@ -35,7 +35,9 @@ .text-input { width: 22rem; - height: 1.5rem; + height: 2rem; + border-top: none; + border-left: none; border-bottom: 1px solid black; border-radius: 0; padding-left: 0.5rem; @@ -46,7 +48,7 @@ } .search-btn { - height: 2.6rem; + height: 2.3rem; width: 3rem; background-color: #8A3323; border: none; @@ -54,10 +56,13 @@ display: flex; justify-content: center; align-items: center; - margin-bottom: 0.65rem; + border-top: none; + border-left:none; + border-right:none; border-top-left-radius: 0; border-bottom-left-radius: 0; border-bottom: 1px solid black; + border-top-right-radius: 0.25; } .banner-buttons { diff --git a/src/components/Banner.jsx b/src/components/Banner.jsx index 2642603..1633ca0 100644 --- a/src/components/Banner.jsx +++ b/src/components/Banner.jsx @@ -1,8 +1,9 @@ import './Banner.css'; import Icon from '../Icon.svg'; import Search from '../Search.svg'; +import { handleSignIn } from '../utilities/firebase'; -const Banner = () => { +export const Banner = () => { // const navigate = useNavigate(); // const navigateToReviews = () => { // navigate('/reviews') @@ -27,7 +28,7 @@ const Banner = () => { - @@ -35,4 +36,4 @@ const Banner = () => { ) } -export default Banner \ No newline at end of file +export default Banner; \ No newline at end of file diff --git a/src/pages/LandingPage.jsx b/src/pages/LandingPage.jsx new file mode 100644 index 0000000..a198607 --- /dev/null +++ b/src/pages/LandingPage.jsx @@ -0,0 +1,25 @@ +import React from 'react'; +import '../App.css'; +import MapComponent from "../MapComponent"; +import Banner from '../components/Banner'; + +const LandingPage = () => { + + const cafesMap = [ + { name: "Cafe Blue", lat: 42.046, lng: -87.688 }, + { name: "Green Bean Cafe", lat: 42.048, lng: -87.684 }, + { name: "Java Lounge", lat: 42.044, lng: -87.690 }, + ]; + + return ( +
+ + {/* Integrate MapComponent with hardcoded data */} +
+ +
+
+ ); +} + +export default LandingPage; \ No newline at end of file diff --git a/src/pages/ReviewPostPage.jsx b/src/pages/ReviewPostPage.jsx new file mode 100644 index 0000000..861853d --- /dev/null +++ b/src/pages/ReviewPostPage.jsx @@ -0,0 +1,157 @@ +import React, { useState, useEffect } from 'react'; +import '../App.css'; +import { useAuthState } from '../utilities/firebase'; +import { findCafes } from '../utilities/findCafes'; + +const ReviewPostPage = () => { + const [reviews, setReviews] = useState([]); + const [availability, setAvailability] = useState({}); + const [newReview, setNewReview] = useState(''); + const [selectedReview, setSelectedReview] = useState(null); + const [replyText, setReplyText] = useState(''); + const [cafeStatus, setCafeStatus] = useState({ seating: '', outlets: '' }); + const [address, setAddress] = useState(''); + const [dist, setDist] = useState(''); + const [cafes, setCafes] = useState([]); + useEffect(() => { }, []); + + const findCafesWrapper = () => { + findCafes(dist, address, setCafes); + }; + + const handleReviewSubmit = () => { + if (newReview.trim()) { + const review = { id: Date.now(), text: newReview, replies: [] }; + setReviews((prevReviews) => [...prevReviews, review]); + setNewReview(''); + } + }; + + const handleReplySubmit = (reviewId) => { + if (replyText.trim()) { + setReviews((prevReviews) => + prevReviews.map((review) => + review.id === reviewId + ? { ...review, replies: [...review.replies, replyText] } + : review + ) + ); + setReplyText(''); + setSelectedReview(null); + } + }; + + const handleAvailabilityUpdate = (cafeId) => { + const timestamp = new Date().toLocaleString(); + const newUpdate = { timestamp, seating: cafeStatus.seating, outlets: cafeStatus.outlets }; + + setAvailability((prevAvailability) => ({ + ...prevAvailability, + [cafeId]: { + history: [...(prevAvailability[cafeId]?.history || []), newUpdate], + }, + })); + setCafeStatus({ seating: '', outlets: '' }); + }; + return ( +
+
+
+

Share a Review

+ setNewReview(e.target.value)} + /> + + +
    + {reviews.map((review) => ( +
  • +

    setSelectedReview(review)}>{review.text}

    +
      + {review.replies.map((reply, index) => ( +
    • + Reply: {reply} +
      • + ))} +
    + {selectedReview && selectedReview.id === review.id && ( +
    + setReplyText(e.target.value)} + /> + +
    + )} +
    • + ))} +
+ +

Update Cafe Availability

+ setCafeStatus({ ...cafeStatus, seating: e.target.value })} + /> + setCafeStatus({ ...cafeStatus, outlets: e.target.value })} + /> + + +

Availability History

+ {availability['cafe-123']?.history?.map((update, index) => ( +
+

+ {update.timestamp}: Seating: {update.seating}, Outlets: {update.outlets} +

+
+ ))} +
+ +
+

Cafes Near Me

+ setAddress(e.target.value)} + /> + setDist(e.target.value)} + /> + +

Cafes Near Me

+
    + {cafes.map((cafe, index) => ( +
  • {cafe}
    • + ))} +
+ + +
    + {cafes.map((cafesMap, index) => ( +
  • + {cafe.name} (Lat: {cafe.lat}, Lng: {cafe.lng}) +
    • + ))} +
+ +
+
+
+ ) +} + +export default ReviewPostPage; \ No newline at end of file diff --git a/src/utilities/firebase.js b/src/utilities/firebase.js index 4390349..ea1d27d 100644 --- a/src/utilities/firebase.js +++ b/src/utilities/firebase.js @@ -27,16 +27,16 @@ const database = getDatabase(app); export const signInWithGoogle = () => { signInWithPopup(auth, provider) - .then(async (result) => { - console.log('User signed in:', result.user); - var zipcode = await findZipcode(result.user.email); - console.log("Zipcode: ", zipcode); - }) - .catch((error) => { - console.error('Error signing in with Google:', error); - }); - }; - + .then(async (result) => { + console.log('User signed in:', result.user); + var zipcode = await findZipcode(result.user.email); + console.log("Zipcode: ", zipcode); + }) + .catch((error) => { + console.error('Error signing in with Google:', error); + }); +}; + export const firebaseSignOut = () => signOut(auth); export const useAuthState = () => { @@ -53,13 +53,13 @@ export const useAuthState = () => { export const useDbData = (path) => { const [data, setData] = useState(); const [error, setError] = useState(null); - + useEffect(() => { const dbRef = ref(database, path); const unsubscribe = onValue( - dbRef, - (snapshot) => setData(snapshot.val()), - (error) => setError(error) + dbRef, + (snapshot) => setData(snapshot.val()), + (error) => setError(error) ); return () => unsubscribe(); }, [path]); @@ -72,9 +72,9 @@ export const useDbUpdate = (path) => { const updateData = useCallback( (value) => { - update(ref(database, path), value) - .then(() => setResult({ message: "Update successful", timestamp: Date.now() })) - .catch((error) => setResult({ error, message: error.message })); + update(ref(database, path), value) + .then(() => setResult({ message: "Update successful", timestamp: Date.now() })) + .catch((error) => setResult({ error, message: error.message })); }, [path] ); @@ -82,4 +82,14 @@ export const useDbUpdate = (path) => { return [updateData, result]; }; -export {database}; \ No newline at end of file +export const handleSignIn = async () => { + try { + await signInWithGoogle(); + } catch (error) { + console.error('Error signing in:', error); + } +}; + +export const handleLogout = () => firebaseSignOut(); + +export { database }; \ No newline at end of file