Skip to content

Commit

Permalink
refactor existing frontend code
Browse files Browse the repository at this point in the history
  • Loading branch information
angelp03 committed Nov 8, 2024
1 parent 885898c commit 5b8b6a2
Show file tree
Hide file tree
Showing 6 changed files with 234 additions and 214 deletions.
200 changes: 11 additions & 189 deletions src/App.jsx
Original file line number Diff line number Diff line change
@@ -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 (
<div className="App">
<header className="App-header">
<h1>CafeWay</h1>
{user ? (
<>
<button className="my-post-button" onClick={handleLogout}>Sign Out</button>
<p>Welcome, {user.email}</p>
</>
) : (
<button className="my-post-button" onClick={handleSignIn}>Sign In</button>
)}
</header>

<div className="listings-container">
<div className="listings-column">
<h2>Share a Review</h2>
<input
type="text"
placeholder="Share a quick review..."
value={newReview}
onChange={(e) => setNewReview(e.target.value)}
/>
<button onClick={handleReviewSubmit}>Submit</button>

<ul className="review-list">
{reviews.map((review) => (
<li key={review.id} className="review-item">
<p onClick={() => setSelectedReview(review)}>{review.text}</p>
<ul className="reply-list">
{review.replies.map((reply, index) => (
<li key={index} className="reply-item">
<span className="reply-label">Reply:</span> {reply}
</li>
))}
</ul>
{selectedReview && selectedReview.id === review.id && (
<div className="reply-input">
<input
type="text"
placeholder="Write a reply..."
value={replyText}
onChange={(e) => setReplyText(e.target.value)}
/>
<button onClick={() => handleReplySubmit(review.id)}>Send</button>
</div>
)}
</li>
))}
</ul>

<h2>Update Cafe Availability</h2>
<input
type="text"
placeholder="Seating status (e.g., Few seats left)"
value={cafeStatus.seating}
onChange={(e) => setCafeStatus({ ...cafeStatus, seating: e.target.value })}
/>
<input
type="text"
placeholder="Outlet status (e.g., All taken)"
value={cafeStatus.outlets}
onChange={(e) => setCafeStatus({ ...cafeStatus, outlets: e.target.value })}
/>
<button onClick={() => handleAvailabilityUpdate('cafe-123')}>Update Availability</button>

<h2>Availability History</h2>
{availability['cafe-123']?.history?.map((update, index) => (
<div key={index} className="availability-item">
<p>
<strong>{update.timestamp}:</strong> Seating: {update.seating}, Outlets: {update.outlets}
</p>
</div>
))}
</div>

<div className="map-column">
<h2>Cafes Near Me</h2>
<input
type="text"
placeholder="Enter zip code"
value={address}
onChange={(e) => setAddress(e.target.value)}
/>
<input
type="number"
placeholder="Enter radius (in miles)"
value={dist}
onChange={(e) => setDist(e.target.value)}
/>
<button onClick={findCafesWrapper}>Search</button>
<h2>Cafes Near Me</h2>
<ul>
{cafes.map((cafe, index) => (
<li className="cafe-card" key={index}>{cafe}</li>
))}
</ul>


<ul className="cafe-list">
{cafes.map((cafesMap, index) => (
<li key={index} className="cafe-item">
{cafe.name} (Lat: {cafe.lat}, Lng: {cafe.lng})
</li>
))}
</ul>

{/* Integrate MapComponent with hardcoded data */}
<div style={{ height: '400px', width: '100%', marginTop: '20px' }}>
<MapComponent cafes={cafesMap} />
</div>
</div>
</div>
</div>
);
<Router>
<Routes>
<Route path="/" element={ <LandingPage/> }/>
<Route path="/post" element={ <ReviewPostPage/> }/>
</Routes>
</Router>
)
}

export default App;
13 changes: 9 additions & 4 deletions src/components/Banner.css
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
Expand All @@ -46,18 +48,21 @@
}

.search-btn {
height: 2.6rem;
height: 2.3rem;
width: 3rem;
background-color: #8A3323;
border: none;
cursor: pointer;
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 {
Expand Down
7 changes: 4 additions & 3 deletions src/components/Banner.jsx
Original file line number Diff line number Diff line change
@@ -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')
Expand All @@ -27,12 +28,12 @@ const Banner = () => {
<button className="banner-btn">
Review
</button>
<button className="banner-btn">
<button className="banner-btn" onClick={handleSignIn}>
Login
</button>
</div>
</div>
)
}

export default Banner
export default Banner;
25 changes: 25 additions & 0 deletions src/pages/LandingPage.jsx
Original file line number Diff line number Diff line change
@@ -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 (
<div className="App">
<Banner />
{/* Integrate MapComponent with hardcoded data */}
<div style={{ height: '600px', width: '100%'}}>
<MapComponent cafes={cafesMap} />
</div>
</div>
);
}

export default LandingPage;
Loading

0 comments on commit 5b8b6a2

Please sign in to comment.