+
{/* Inner Box */}
-
+
{/* Image */}
{/* Text Content */}
{/* Title */}
-
{props.name}
+{props.name}
-
+
- {/* Status and Button */}
+ {/* Status */}
Bringing: {props.bringing}
{/* Status */}
-
diff --git a/src/components/Dashboard.jsx b/src/components/Dashboard.jsx
index 60e6f26..ca5a51e 100644
--- a/src/components/Dashboard.jsx
+++ b/src/components/Dashboard.jsx
@@ -1,20 +1,32 @@
-import { useState } from 'react';
-import data from '../data/data.json';
+import { useState, useEffect } from 'react';
+import { collection, getDocs } from 'firebase/firestore';
+import { db } from '../firebase/firebase';
import Card from './Card';
function Dashboard() {
- // State to store items, initialized with data from JSON file
- const [items, setItems] = useState(data);
+ const [items, setItems] = useState([]); // Empty array to hold Firebase data
+
+ // Function to fetch invitee data from Firestore
+ const fetchData = async () => {
+ try {
+ const querySnapshot = await getDocs(collection(db, "invitees"));
+ const dataArray = querySnapshot.docs.map(doc => doc.data());
+ setItems(dataArray); // Set the state with the data from Firestore
+ } catch (error) {
+ console.error("Error fetching data: ", error);
+ }
+ };
+
+ // UseEffect to call fetchData when component loads
+ useEffect(() => {
+ fetchData();
+ }, []);
return (
+
{props.status}
{/* TITLE */}
-
- - {/* Glow Effects */} - - +
{/* Event List Grid */}
Who's Invited?
-- - {/* Glow Effects */} - - +
Who's Invited?
+{/* Event List Grid */}
@@ -24,7 +36,6 @@ function Dashboard() {
key={index}
name={item.name}
img={item.img}
- date={item.date}
status={item.status}
bringing={item.bringing}
/>
@@ -34,4 +45,4 @@ function Dashboard() {
);
}
-export default Dashboard;
+export default Dashboard;
\ No newline at end of file
diff --git a/src/components/FeaturedItem.jsx b/src/components/FeaturedItem.jsx
index 3147e27..bfbbccb 100644
--- a/src/components/FeaturedItem.jsx
+++ b/src/components/FeaturedItem.jsx
@@ -4,49 +4,44 @@ function FeaturedItem() {
return (
{/* TITLE */}
-
+
{/* BOX */} -
Your Picnic
-+
Your Picnic
+{/* BOX */} -
+
{/* Inner White Box with Shadow */}
-
);
}
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index 3703d6a..2d36218 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -1,41 +1,32 @@
import React from 'react';
import { PiBellSimpleRinging } from 'react-icons/pi';
import { VscAccount } from 'react-icons/vsc';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
function Navbar() {
return (
+
-
- {/* Floating Glow Effect */}
-
-
- {/* Item Image with Hover Effect */}
+ {/* Location Image with Hover Effect */}
{/* TEXT */}
{/* TEXT */}
- {/* Item Title */}
-
Lake Texarkana
- {/* Item Details */} -+ {/* Location Title */} +
Lake Texarkana
+ {/* RSVP Details */} +4 Going | 3 Unsure
- {/* Item Description */} -+ {/* Picnic Description */} +
Time for a day of relaxation on the lake. Bring a floatie and a swimsuit!
- {/* SELLING TYPE AND BUTTON */} + {/* RSVP Status */}
-
+
Going
- {/* Flashy Glowing Button */}
{/* Main navbar container */}
-
+
{/* TITLE */}
- Ripple & Refresh
+ Ripple & Refresh
{/* PAGES */}
-
+ {children}
+
+ );
+};
diff --git a/src/data/data.json b/src/data/data.json
deleted file mode 100644
index b3980fc..0000000
--- a/src/data/data.json
+++ /dev/null
@@ -1,82 +0,0 @@
-[
- {
- "id": 0,
- "name": "Alan Roybal",
- "img": "/images/sample1.webp",
- "bringing": "Pizza",
- "status": "Going",
- "date": 10
- },
- {
- "id": 1,
- "name": "Salman Jaher",
- "img": "/images/Salman.webp",
- "bringing": "N/A",
- "status": "Can't Go",
- "date": 2
- },
- {
- "id": 2,
- "name": "Purva Pawar",
- "img": "/images/Purva.webp",
- "bringing": "N/A",
- "status": "Unsure",
- "date": 4
- },
- {
- "id": 3,
- "name": "Joshua Das",
- "img": "/images/Joshua.webp",
- "bringing": "Chips",
- "status": "Going",
- "date": 2
- },
- {
- "id": 4,
- "name": "Reiki Hingorani",
- "img": "/images/Reiki.webp",
- "bringing": "Lemonade",
- "status": "Going",
- "date": 3
- },
- {
- "id": 5,
- "name": "Veer Shah",
- "img": "/images/Veer.webp",
- "bringing": "N/A",
- "status": "Unsure",
- "date": 6
- },
- {
- "id": 6,
- "name": "Arjun Kumar",
- "img": "/images/Arjun.webp",
- "bringing": "N/A",
- "status": "Can't Go",
- "date": 7
- },
- {
- "id": 7,
- "name": "Daniel Kim",
- "img": "/images/Daniel.webp",
- "bringing": "Honey Packs",
- "status": "Going",
- "date": 12
- },
- {
- "id": 8,
- "name": "Evan Ngo",
- "img": "/images/Evan.webp",
- "bringing": "N/A",
- "status": "Can't Go",
- "date": 8
- },
- {
- "id": 9,
- "name": "Michael Zhao",
- "img": "/images/Michael.webp",
- "bringing": "N/A",
- "status": "Unsure",
- "date": 2
- }
-]
diff --git a/src/firebase/auth.js b/src/firebase/auth.js
new file mode 100644
index 0000000..c933825
--- /dev/null
+++ b/src/firebase/auth.js
@@ -0,0 +1,35 @@
+import { auth } from "./firebase";
+import { createUserWithEmailAndPassword, GoogleAuthProvider, sendEmailVerification, sendPasswordResetEmail, signInWithEmailAndPassword, signInWithPopup, updatePassword } from "firebase/auth";
+
+export const doCreateUserWithEmailAndPassword = async (email, password) => {
+ return createUserWithEmailAndPassword(auth, email, password);
+};
+
+export const doSignInWithEmailAndPassword = (email, password) => {
+ return signInWithEmailAndPassword(auth, email, password);
+}
+
+export const doSignInWithGoogle = async () => {
+ const provider = new GoogleAuthProvider();
+ const result = await signInWithPopup(auth, provider);
+
+ return result;
+};
+
+export const doSignOut = () => {
+ return auth.signOut();
+};
+
+export const doPasswordReset = (email) => {
+ return sendPasswordResetEmail(auth, email);
+};
+
+export const doPasswordChange = (password) => {
+ return updatePassword(auth.currentUser, password);
+};
+
+export const doSendEmailVerification = () => {
+ return sendEmailVerification(auth.currentUser, {
+ url: `${window.location.origin}/home`,
+ });
+};
\ No newline at end of file
diff --git a/src/firebase/firebase.js b/src/firebase/firebase.js
new file mode 100644
index 0000000..98a65ca
--- /dev/null
+++ b/src/firebase/firebase.js
@@ -0,0 +1,26 @@
+// Import the functions you need from the SDKs you need
+import { initializeApp } from "firebase/app";
+import { getAuth } from "firebase/auth";
+import { getFirestore } from 'firebase/firestore';
+// TODO: Add SDKs for Firebase products that you want to use
+// https://firebase.google.com/docs/web/setup#available-libraries
+
+// Your web app's Firebase configuration
+const firebaseConfig = {
+ apiKey: "YOUR STUFF",
+ authDomain: "YOUR STUFF",
+ projectId: "YOUR STUFF",
+ storageBucket: "YOUR STUFF",
+ messagingSenderId: "YOUR STUFF",
+ appId: "YOUR STUFF"
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+
+// Initialize Firebase Authentication and get a reference to the service
+const auth = getAuth(app);
+
+const db = getFirestore(app);
+
+export { app, auth, db };
\ No newline at end of file
diff --git a/src/pages/ActivityPage.jsx b/src/pages/ActivityPage.jsx
index c9f6f2d..305d873 100644
--- a/src/pages/ActivityPage.jsx
+++ b/src/pages/ActivityPage.jsx
@@ -1,9 +1,24 @@
+// ActivityPage.jsx
import React from 'react';
+import VoteComponent from '../components/VoteComponent';
+import WeatherComponent from '../components/WeatherComponent';
+import Navbar from '../components/Navbar';
function ActivityPage() {
return (
-
+
+
);
}
diff --git a/src/components/PrivateRoute.jsx b/src/components/PrivateRoute.jsx
new file mode 100644
index 0000000..4964327
--- /dev/null
+++ b/src/components/PrivateRoute.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Navigate } from 'react-router-dom';
+import { useAuth } from '../contexts/authContext';
+
+function PrivateRoute({ children }) {
+ const { user } = useAuth(); // Check if the user is logged in
+
+ // Redirect to LandingPage if not logged in
+ if (!user) {
+ return
+
map
-
- rsvp
-
-
+
activity
{/* ICONS */}
-
- {/*
-
{/* Horizontal line separator */}
- +
+
+ );
+}
+
+export default VoteComponent;
diff --git a/src/components/WeatherComponent.jsx b/src/components/WeatherComponent.jsx
new file mode 100644
index 0000000..e19d7b4
--- /dev/null
+++ b/src/components/WeatherComponent.jsx
@@ -0,0 +1,81 @@
+import React, { useState, useEffect } from 'react';
+import { getFirestore, doc, getDoc, updateDoc } from 'firebase/firestore';
+import axios from 'axios';
+
+function WeatherComponent() {
+ const db = getFirestore();
+ const [weather, setWeather] = useState(null);
+ const [date, setDate] = useState('');
+
+ useEffect(() => {
+ const fetchDate = async () => {
+ const dateDoc = await getDoc(doc(db, 'settings', 'picnicDate'));
+ if (dateDoc.exists()) {
+ const savedDate = dateDoc.data().date;
+ setDate(savedDate);
+ fetchWeather(savedDate);
+ } else {
+ console.log("No date found in Firestore.");
+ }
+ };
+ fetchDate();
+ }, [db]);
+
+ const fetchWeather = async (selectedDate) => {
+ try {
+ const response = await axios.get(`https://api.weatherapi.com/v1/forecast.json`, {
+ params: {
+ key: '736f7b72cf89470dae4195414240611',
+ q: 'location',
+ dt: selectedDate,
+ },
+ });
+ setWeather(response.data.forecast.forecastday[0].day);
+ } catch (error) {
+ console.error("Error fetching weather:", error);
+ }
+ };
+
+ const handleDateChange = (e) => {
+ setDate(e.target.value);
+ };
+
+ const handleDateUpdate = async () => {
+ try {
+ await updateDoc(doc(db, 'settings', 'picnicDate'), { date });
+ fetchWeather(date);
+ console.log("Date updated successfully in Firestore.");
+ } catch (error) {
+ console.error("Error updating date:", error);
+ }
+ };
+
+ return (
+ Vote for an Activity
+
+
+
+
+
+ You have voted for {userVote.replace('activity', 'Activity ')}.
} +
+
+ );
+}
+
+export default WeatherComponent;
diff --git a/src/contexts/authContext.jsx b/src/contexts/authContext.jsx
new file mode 100644
index 0000000..04e4bac
--- /dev/null
+++ b/src/contexts/authContext.jsx
@@ -0,0 +1,28 @@
+import { createContext, useContext, useEffect, useState } from 'react';
+import { onAuthStateChanged, signInWithEmailAndPassword, createUserWithEmailAndPassword, signOut } from 'firebase/auth';
+import { auth } from '../firebase/firebase';
+
+const AuthContext = createContext();
+
+export const useAuth = () => useContext(AuthContext);
+
+export const AuthProvider = ({ children }) => {
+ const [user, setUser] = useState(null);
+
+ useEffect(() => {
+ const unsubscribe = onAuthStateChanged(auth, (user) => {
+ setUser(user); // Ensure 'user' state is updated
+ });
+ return unsubscribe;
+}, []);
+
+ const login = (email, password) => signInWithEmailAndPassword(auth, email, password);
+ const register = (email, password) => createUserWithEmailAndPassword(auth, email, password);
+ const logout = () => signOut(auth);
+
+ return (
+ Weather Forecast
+ + + {weather && ( +
+
+ )}
+ Temperature: {weather.avgtemp_f}°F
+Condition: {weather.condition.text}
+
-
);
}
diff --git a/src/pages/LandingPage.jsx b/src/pages/LandingPage.jsx
new file mode 100644
index 0000000..b8735ad
--- /dev/null
+++ b/src/pages/LandingPage.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+function LandingPage() {
+ return (
+ Activity Page
+
+ {/* TITLE */}
+
+ + {/* Center Card for Vote and Weather */} +
Activity Voting & Weather
++ + {/* Center Card for Vote and Weather */} +
+
+
+
+ );
+}
+
+export default LandingPage;
diff --git a/src/pages/LoginPage.jsx b/src/pages/LoginPage.jsx
new file mode 100644
index 0000000..aded87c
--- /dev/null
+++ b/src/pages/LoginPage.jsx
@@ -0,0 +1,58 @@
+import React, { useEffect, useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { useAuth } from '../contexts/authContext';
+
+function LoginPage() {
+ const { user, login } = useAuth(); // Use 'user' instead of 'userLoggedIn'
+ const navigate = useNavigate();
+ const [email, setEmail] = useState('');
+ const [password, setPassword] = useState('');
+ const [error, setError] = useState('');
+
+ useEffect(() => {
+ if (user) { // Check if a user is logged in
+ navigate('/home'); // Redirect to home if logged in
+ }
+ }, [user, navigate]); // 'user' state triggers navigation to /home
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ try {
+ await login(email, password);
+ navigate('/home'); // Ensure you navigate to '/home' after login
+ } catch (error) {
+ setError('Invalid credentials, please try again.');
+ }
+ };
+
+ return (
+ Welcome to Ripple & Refresh
+Please log in or register to continue
+
+
+ Login
+
+
+ Register
+
+
+
+
+
+ );
+}
+
+export default LoginPage;
diff --git a/src/pages/MapPage.jsx b/src/pages/MapPage.jsx
index 4d0fd98..04d7002 100644
--- a/src/pages/MapPage.jsx
+++ b/src/pages/MapPage.jsx
@@ -1,11 +1,45 @@
import React from 'react';
+import { GoogleMap, Marker, useJsApiLoader } from '@react-google-maps/api';
+import Navbar from '../components/Navbar';
+
+const MapPage = () => {
+ const mapCenter = { lat: 40.7128, lng: -74.0060 };
+ const mapStyles = {
+ height: "400px",
+ width: "100%",
+ };
+
+ const { isLoaded } = useJsApiLoader({
+ googleMapsApiKey: "GOOGLE_API_KEY",
+ });
+
+ if (!isLoaded) return Loading...
;
-function MapPage() {
return (
-
);
-}
+};
export default MapPage;
diff --git a/src/pages/RSVPPage.jsx b/src/pages/RSVPPage.jsx
deleted file mode 100644
index 284eee9..0000000
--- a/src/pages/RSVPPage.jsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-
-function RSVPPage() {
- return (
- Map Page
+
+ {/* Navbar */}
+
+ {/* TITLE */}
+
+ + {/* Map Section */} +
Where we at?
++ + {/* Map Section */} +
+
+
+
+
+
+
-
- );
-}
-
-export default RSVPPage;
diff --git a/src/pages/RegisterPage.jsx b/src/pages/RegisterPage.jsx
new file mode 100644
index 0000000..6e5db6e
--- /dev/null
+++ b/src/pages/RegisterPage.jsx
@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { useAuth } from '../contexts/authContext';
+
+function RegisterPage() {
+ const [email, setEmail] = useState('');
+ const [password, setPassword] = useState('');
+ const [error, setError] = useState('');
+ const { register } = useAuth();
+ const navigate = useNavigate();
+
+ const handleRegister = async (e) => {
+ e.preventDefault();
+ try {
+ await register(email, password);
+ navigate('/home'); // Redirect to home after registration
+ } catch (error) {
+ setError('This email is already registered. Please use a different email.');
+ }
+ };
+
+ return (
+ RSVP Page
-
+
+ );
+}
+
+export default RegisterPage;
diff --git a/tailwind.config.js b/tailwind.config.js
index 2e86a01..0a81768 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,11 +4,6 @@ export default {
theme: {
extend: {
colors: {
- pastelblue: '#A1CAF1',
- pastelgreen: '#B0E57C',
- pastelpink: '#FDC1C5',
- darkgreen: '#355E3B',
- darkblue: '#003366',
},
},
},
+
+ Register
+ + {error &&{error}
} + + + +
+
+ + Already have an account?{' '} + Login here +
+