Skip to content

Commit 2e32261

Browse files
PetaHarshithPetaHarshith
committed
updating w supabase
1 parent 6d8032f commit 2e32261

9 files changed

Lines changed: 98 additions & 182 deletions

File tree

‎src/components/ListCard.jsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,22 @@ import React from "react";
22
import { Card, Badge } from "react-bootstrap";
33

44
export default function ListCard({ title, creator, restaurantCount, onClick }) {
5+
const handleKeyPress = (e) => {
6+
if (e.key === 'Enter' || e.key === ' ') {
7+
e.preventDefault();
8+
onClick();
9+
}
10+
};
11+
512
return (
613
<Card
714
className="shadow-sm mb-3 h-100"
815
style={{ cursor: "pointer", transition: "transform 0.2s" }}
916
onClick={onClick}
17+
onKeyPress={handleKeyPress}
18+
tabIndex={0}
19+
role="button"
20+
aria-label={`View ${title} list created by ${creator} with ${restaurantCount} restaurants`}
1021
onMouseEnter={(e) => e.currentTarget.style.transform = "translateY(-4px)"}
1122
onMouseLeave={(e) => e.currentTarget.style.transform = "translateY(0)"}
1223
>

‎src/components/NavigationBar.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export default function NavigationBar() {
1717
expand="lg"
1818
className="mb-0"
1919
style={{
20-
backgroundColor: "#ff5722",
20+
backgroundColor: "#d84315",
2121
padding: "1rem 0",
2222
boxShadow: "0 2px 4px rgba(0,0,0,0.1)"
2323
}}

‎src/components/RestaurantItem.jsx‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,25 @@ import { Card, Row, Col, Image } from "react-bootstrap";
33
import Tag from "./Tag";
44

55
export default function RestaurantItem({ restaurant, onClick, onTagClick }) {
6-
const { name, rating, tags = [], image, imageAlt } = restaurant;
6+
const { name, rating, tags = [], image, imageAlt, image_alt } = restaurant;
7+
const altText = imageAlt || image_alt;
8+
9+
const handleKeyPress = (e) => {
10+
if (e.key === 'Enter' || e.key === ' ') {
11+
e.preventDefault();
12+
onClick();
13+
}
14+
};
715

816
return (
917
<Card
1018
className="shadow-sm mb-3"
1119
style={{ cursor: "pointer" }}
1220
onClick={onClick}
21+
onKeyPress={handleKeyPress}
22+
tabIndex={0}
23+
role="button"
24+
aria-label={`View details for ${name}${rating ? `, rated ${rating} out of 5 stars` : ''}`}
1325
>
1426
<Card.Body>
1527
<Row className="align-items-center">
@@ -18,7 +30,7 @@ export default function RestaurantItem({ restaurant, onClick, onTagClick }) {
1830
<Col xs={12} md={3} className="mb-3 mb-md-0">
1931
<Image
2032
src={image}
21-
alt={imageAlt || `Photo of ${name}`}
33+
alt={altText || `Photo of ${name}`}
2234
rounded
2335
fluid
2436
style={{ width: "100%", height: "120px", objectFit: "cover" }}

‎src/components/ResturantDetailPanel.jsx‎

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,28 @@ import { Card, Button, Image } from "react-bootstrap";
33
import Tag from "./Tag";
44

55
export default function RestaurantDetailPanel({ restaurant }) {
6-
const { name, rating, tags, address, hours, description, image, imageAlt } = restaurant;
6+
const { name, rating, tags = [], address, hours, description, image, imageAlt, image_alt } = restaurant;
7+
const altText = imageAlt || image_alt;
78

89
return (
910
<Card className="shadow-sm mb-3">
1011
{image && (
1112
<Image
1213
src={image}
13-
alt={imageAlt || `Photo of ${name}`}
14+
alt={altText || `Photo of ${name}`}
1415
style={{ width: "100%", height: "300px", objectFit: "cover" }}
1516
/>
1617
)}
1718
<Card.Body>
18-
<Card.Title className="d-flex align-items-center justify-content-between">
19-
<h1 className="h2">{name}</h1>
20-
<span>
21-
⭐ <strong>{rating}</strong>/5
22-
</span>
23-
</Card.Title>
19+
<h1 className="mb-3">{name}</h1>
20+
21+
{rating && (
22+
<p className="mb-3">
23+
<span aria-label={`Rating: ${rating} out of 5 stars`}>
24+
⭐ <strong>{rating}</strong>/5
25+
</span>
26+
</p>
27+
)}
2428

2529
<div className="mb-3">
2630
{tags.map((tag) => (
@@ -43,12 +47,11 @@ export default function RestaurantDetailPanel({ restaurant }) {
4347
)}
4448

4549
{description && (
46-
<Card.Text className="mt-3">{description}</Card.Text>
50+
<>
51+
<h2 className="h5 mt-4">About</h2>
52+
<Card.Text>{description}</Card.Text>
53+
</>
4754
)}
48-
49-
<Button variant="primary" className="mt-3">
50-
+ Add to List
51-
</Button>
5255
</Card.Body>
5356
</Card>
5457
);

‎src/pages/Home.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@ export default function Home() {
7676
<Button
7777
variant="primary"
7878
onClick={() => user ? setShowCreateModal(true) : navigate("/login")}
79+
aria-label="Create a new restaurant list"
7980
>
8081
+ Create New List
8182
</Button>

‎src/pages/ListViewNew.jsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -150,10 +150,11 @@ export default function ListView() {
150150

151151

152152
<div className="d-flex justify-content-between align-items-center mb-3">
153-
<h2>Restaurants</h2>
153+
<h3>Restaurants</h3>
154154
<Button
155155
variant="primary"
156156
onClick={() => user ? setShowAddModal(true) : navigate("/login")}
157+
aria-label="Add a new restaurant to this list"
157158
>
158159
+ Add Restaurant
159160
</Button>

‎src/pages/Profile.jsx‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -171,14 +171,14 @@ export default function Profile() {
171171
<Row className="mt-3">
172172
<Col xs={6} md={3}>
173173
<div className="text-center">
174-
<h4>{stats.listsCreated}</h4>
175-
<p className="text-muted">Lists Created</p>
174+
<p className="h4 mb-1">{stats.listsCreated}</p>
175+
<p className="text-muted small">Lists Created</p>
176176
</div>
177177
</Col>
178178
<Col xs={6} md={3}>
179179
<div className="text-center">
180-
<h4>{stats.restaurantsAdded}</h4>
181-
<p className="text-muted">Restaurants Added</p>
180+
<p className="h4 mb-1">{stats.restaurantsAdded}</p>
181+
<p className="text-muted small">Restaurants Added</p>
182182
</div>
183183
</Col>
184184
</Row>
@@ -187,8 +187,12 @@ export default function Profile() {
187187

188188
{/* User's Lists */}
189189
<div className="d-flex justify-content-between align-items-center mb-3">
190-
<h4 className="mb-0">My Lists</h4>
191-
<Button variant="primary" onClick={() => navigate("/")}>
190+
<h3 className="mb-0">My Lists</h3>
191+
<Button
192+
variant="primary"
193+
onClick={() => navigate("/")}
194+
aria-label="Create a new restaurant list"
195+
>
192196
+ Create New List
193197
</Button>
194198
</div>

‎src/pages/RestaurantPage.jsx‎

Lines changed: 0 additions & 125 deletions
This file was deleted.

‎src/pages/ResturantPage.jsx‎

Lines changed: 43 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,57 @@
1-
import React from "react";
2-
import { useParams } from "react-router-dom";
3-
import { Container, Row, Col } from "react-bootstrap";
1+
import React, { useState, useEffect } from "react";
2+
import { useParams, useNavigate } from "react-router-dom";
3+
import { Container, Row, Col, Alert, Button } from "react-bootstrap";
44
import NavigationBar from "../components/NavigationBar";
55
import RestaurantDetailPanel from "../components/ResturantDetailPanel";
6-
7-
// TEMP dummy data – replace later if your group has real data
8-
const dummyRestaurants = [
9-
{
10-
id: 1,
11-
name: "Mickies Dairy Bar",
12-
rating: 4.6,
13-
tags: ["Brunch", "American"],
14-
address: "123 Monroe St, Madison, WI",
15-
hours: "8:00 AM – 2:00 PM",
16-
description: "Classic Madison brunch spot with huge portions. Known for their famous scrambler and friendly service.",
17-
image: "https://images.unsplash.com/photo-1533777857889-4be7c70b33f7?w=800&h=600&fit=crop",
18-
imageAlt: "Delicious brunch plate with eggs, bacon, and toast at Mickies Dairy Bar"
19-
},
20-
{
21-
id: 2,
22-
name: "Village Pizza",
23-
rating: 4.3,
24-
tags: ["Pizza", "Italian"],
25-
address: "456 State St, Madison, WI",
26-
hours: "11:00 AM – 10:00 PM",
27-
description: "Casual pizza place great for group dinners. Authentic Italian recipes with fresh ingredients.",
28-
image: "https://images.unsplash.com/photo-1513104890138-7c749659a591?w=800&h=600&fit=crop",
29-
imageAlt: "Fresh Italian pizza with melted cheese and basil"
30-
},
31-
];
6+
import LoadingSpinner from "../components/LoadingSpinner";
7+
import { supabase } from "../lib/supabase";
328

339
export default function RestaurantPage() {
3410
const { restaurantId } = useParams();
11+
const navigate = useNavigate();
12+
const [restaurant, setRestaurant] = useState(null);
13+
const [loading, setLoading] = useState(true);
14+
const [error, setError] = useState("");
3515

36-
const restaurant = dummyRestaurants.find(
37-
(r) => String(r.id) === String(restaurantId)
38-
);
16+
useEffect(() => {
17+
const fetchRestaurant = async () => {
18+
try {
19+
const { data, error } = await supabase
20+
.from('restaurants')
21+
.select('*')
22+
.eq('id', restaurantId)
23+
.single();
24+
25+
if (error) throw error;
26+
setRestaurant(data);
27+
} catch (err) {
28+
setError(err.message);
29+
} finally {
30+
setLoading(false);
31+
}
32+
};
33+
34+
fetchRestaurant();
35+
}, [restaurantId]);
36+
37+
if (loading) {
38+
return (
39+
<>
40+
<NavigationBar />
41+
<LoadingSpinner message="Loading restaurant..." />
42+
</>
43+
);
44+
}
3945

40-
if (!restaurant) {
46+
if (error || !restaurant) {
4147
return (
4248
<>
4349
<NavigationBar />
4450
<Container className="py-4">
45-
<p>Restaurant not found.</p>
51+
<Alert variant="danger">
52+
{error || "Restaurant not found."}
53+
</Alert>
54+
<Button onClick={() => navigate("/")}>Back to Home</Button>
4655
</Container>
4756
</>
4857
);

0 commit comments

Comments
 (0)