+
+ );
+}
+
+function App() {
+ const [isAuthenticated, setIsAuthenticated] = useState(false);
+ const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+ const [isEstablishmentPopupOpen, setIsEstablishmentPopupOpen] =
+ useState(false);
+ const [isReviewPopupOpen, setIsReviewPopupOpen] = useState(false);
+
+ const [user, setUser] = useState(null);
+ const [target, setTarget] = useState(null);
+ const [userDetail, setUserDetail] = useState(null);
+ const [map, setMap] = useState(null);
+ const [isEventPopupOpen, setIsEventPopupOpen] = useState(false);
+
+ const [places, setPlaces] = useState([]);
+
+ useEffect(() => {
+ const unsubscribe = auth.onAuthStateChanged((user) => {
+ if (!user) {
+ setIsAuthenticated(false);
+ } else {
+ setIsAuthenticated(true);
+ setUser(user);
+ }
+ });
+
+ return () => unsubscribe();
+ }, []);
+ useEffect(() => {
+ const fetchUser = async () => {
+ try {
+ const docRef = doc(db, "users", user.uid);
+ const docSnap = await getDoc(docRef);
+
+ if (docSnap.exists()) {
+ setUserDetail(docSnap.data());
+ console.log("User", docSnap.data());
+ } else {
+ console.log("No such document!");
+ }
+ } catch (error) {
+ // setError(error);
+ console.log("fetch error", error);
+ } finally {
+ // setLoading(false);
+ }
+ };
+ if (user) {
+ setIsAuthenticated(true);
+ fetchUser();
+ } else {
+ setIsAuthenticated(false);
+ setUserDetail(null);
+ }
+ }, [user]);
+
+ //To validate the password
+ const SignUpForm = () => {
+ const [password, setPassword] = useState("");
+ const [error, setError] = useState("");
+
+ const handleSignUp = (e) => {
+ e.preventDefault(); // Prevent form submission
+
+ // Password validation criteria
+ const minLength = 8;
+ const hasNumber = /\d/.test(password);
+ const hasSpecialChar = /[!@#$%^&*]/.test(password); // Special character check
+
+ // Check if all criteria are met
+ if (password.length < minLength) {
+ setError("Password must be at least 8 characters long.");
+ } else if (!hasNumber) {
+ setError("Password must contain at least one number.");
+ } else if (!hasSpecialChar) {
+ setError("Password must contain at least one special character.");
+ } else {
+ setError("");
+ console.log("Sign-up successful:", password);
+ }
+ };
+ };
+
+ return (
+
+
+ + {isSignUp ? "Sign Up" : "Sign In"} +
+ + ++ {isSignUp ? "Already have an account?" : "Don't have an account?"} + +
+
+ {/* */}
+
+
+
+
+
+ );
+ }
+
+ export default Drawer;
\ No newline at end of file
diff --git a/local_lens_web/src/components/EstablishmentPopup.jsx b/local_lens_web/src/components/EstablishmentPopup.jsx
new file mode 100644
index 0000000..fbe4604
--- /dev/null
+++ b/local_lens_web/src/components/EstablishmentPopup.jsx
@@ -0,0 +1,320 @@
+import { useState } from "react";
+import app, { db, storage } from "../firebase-config";
+import { collection, addDoc, setDoc, doc, updateDoc, getDoc } from "firebase/firestore";
+import { init } from "@thetsf/geofirex";
+
+const geo = init(app);
+
+function EstablishmentPopup({ isOpen, onClose, target, user }) {
+ const [name, setName] = useState("");
+ const [type, setType] = useState("");
+ const [rating, setRating] = useState(0);
+ const [comment, setComment] = useState("");
+ const [images, setImages] = useState([]);
+ const [imageFiles, setImagesFiles] = useState([]);
+ // const [imgUrl, setImgUrl] = useState([]);
+ const [uploading, setUploading] = useState(false);
+
+ function generateRandomId() {
+ return "id-" + Math.random().toString(36).substr(2, 9);
+ }
+
+ const submitEstablishment = async (review) => {
+ try {
+ // const geohash = geofirex.geohashForLocation(new geofirex.GeoPoint(target.lat, target.lon));
+ console.log("target", target);
+ const geohash = geo.point(target.lat, target.lng);
+ const docRef = await setDoc(doc(db, "locations", review.id), {
+ geohash,
+ id: review.id,
+ latitude: target.lat,
+ longitude: target.lng,
+ name: review.name,
+ type: review.type,
+ reviews: 0,
+ rating: 0.0,
+ });
+ } catch (error) {
+ console.log(error);
+ }
+ };
+
+ async function uploadImage(image) {
+ if (image) {
+ // Return a Promise to ensure async/await works correctly
+ return new Promise((resolve, reject) => {
+ const uploadTask = storage.ref(`review-post/${image.name}`).put(image);
+ console.log("Uploading", image);
+
+ uploadTask.on(
+ "state_changed",
+ (snapshot) => {
+ // Progress function (optional to show progress)
+ const progress = Math.round(
+ (snapshot.bytesTransferred / snapshot.totalBytes) * 100
+ );
+ // You can use this to update a progress bar or show the upload status
+ },
+ (error) => {
+ // Error function
+ console.log(error);
+ reject(error); // Reject the promise on error
+ },
+ () => {
+ // Complete function
+ uploadTask.snapshot.ref
+ .getDownloadURL()
+ .then((url) => {
+ console.log("File available at", url);
+ resolve(url); // Resolve the promise with the URL
+ })
+ .catch((error) => {
+ reject(error); // Reject if getDownloadURL fails
+ });
+ }
+ );
+ });
+ }
+ }
+
+ const submitReview = async (review) => {
+ try {
+ // Log the image files to check they are being passed correctly
+ console.log("Image files: ", imageFiles);
+
+ // Create an array of promises for image uploads
+ const uploadPromises = imageFiles.map(async (img) => {
+ try {
+ // Log the image being uploaded
+ console.log("Uploading image: ", img);
+
+ // Upload the image and get the URL
+ const imgUrl = await uploadImage(img);
+
+ // Log the URL returned by the upload
+ console.log("Uploaded image URL: ", imgUrl);
+
+ // Return the image URL to be collected in the Promise.all() array
+ return imgUrl;
+ } catch (err) {
+ console.error("Error uploading image: ", err);
+ throw new Error("Image upload failed");
+ }
+ });
+
+ // Wait for all images to be uploaded and get the array of URLs
+ const imgUrls = await Promise.all(uploadPromises);
+
+ // Log the image URLs array
+ console.log("All image URLs: ", imgUrls);
+
+ // Proceed to add the review to the database
+ const docRef = await addDoc(collection(db, "reviews"), {
+ id: review.id,
+ name: user.name,
+ uid: user.uid,
+ comment: review.comment,
+ rating: review.rating,
+ images: imgUrls, // Use the image URLs returned from uploads
+ });
+
+ const reviewDocRef = doc(db, "locations", review.id);
+ const reviewDoc = await getDoc(reviewDocRef);
+
+ if (reviewDoc.exists) {
+ console.log("Review data:", reviewDoc.data());
+ } else {
+ console.log("No such document!");
+ }
+
+ await updateDoc(reviewDocRef, {
+ reviews: reviewDoc.data().reviews + 1,
+ rating:
+ (reviewDoc.data().rating * reviewDoc.data().reviews + review.rating) /
+ (reviewDoc.data().reviews + 1),
+ });
+
+ console.log("Review submitted with ID: ", docRef.id);
+ setName("");
+ setType("");
+ setRating(0);
+ setComment("");
+ setImages([]);
+ setImagesFiles([]);
+ setUploading(false);
+ } catch (error) {
+ console.error("Error submitting review: ", error);
+ }
+ };
+
+ const handleSubmit = (e) => {
+ e.preventDefault();
+ const id = generateRandomId();
+ console.log("Submitted:", { name, type, rating, comment, images });
+ submitEstablishment({ id, name, type, rating, comment, images });
+ submitReview({ id, name, type, rating, comment, images });
+ onClose();
+ };
+
+ const handleImageUpload = (e) => {
+ const files = Array.from(e.target.files);
+ if (images.length + files.length > 6) {
+ alert("You can only upload up to 6 images");
+ return;
+ }
+ const newImages = files.map((file) => URL.createObjectURL(file));
+ setImages([...images, ...newImages]);
+ setImagesFiles([...imageFiles, ...files]);
+ };
+
+ const removeImage = (index) => {
+ const newImages = [...images];
+ newImages.splice(index, 1);
+ setImages(newImages);
+ };
+
+ if (!isOpen) return null;
+
+ return (
+
+
+
+
+ Menu
+-
+
- + + +
- + + +
- + + +
+
+ );
+}
+
+export default EstablishmentPopup;
diff --git a/local_lens_web/src/components/EventPopUp.jsx b/local_lens_web/src/components/EventPopUp.jsx
new file mode 100644
index 0000000..10714da
--- /dev/null
+++ b/local_lens_web/src/components/EventPopUp.jsx
@@ -0,0 +1,78 @@
+import React, { useState } from 'react';
+import { addDoc, collection } from 'firebase/firestore';
+import { db } from '../firebase-config';
+
+function EventPopup({ isOpen, onClose, user }) {
+ const [eventName, setEventName] = useState('');
+ const [eventDate, setEventDate] = useState('');
+ const [eventTime, setEventTime] = useState('');
+ const [eventLocation, setEventLocation] = useState('');
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ const docRef = await addDoc(collection(db, "events"), {
+ id: generateRandomId(),
+ name: eventName,
+ uid: user.uid,
+ date: new Date(eventDate + 'T' + eventTime),
+ location: eventLocation,
+ time: eventTime,
+ });
+ console.log('Event submitted:', { eventName, eventDate, eventTime, eventLocation });
+ onClose();
+ };
+
+ function generateRandomId() {
+ return "ev-" + Math.random().toString(36).substr(2, 9);
+ }
+
+ if (!isOpen) return null;
+
+ return (
+
+
+ Add Establishment
+ + +
+
+ );
+ }
+
+ export default EventPopup;
\ No newline at end of file
diff --git a/local_lens_web/src/components/Footer/Footer.jsx b/local_lens_web/src/components/Footer/Footer.jsx
new file mode 100644
index 0000000..17217c7
--- /dev/null
+++ b/local_lens_web/src/components/Footer/Footer.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+import module from './Footer.module.css'
+const Footer = () => {
+ return (
+
+
+ Post an Event
+ + +Footer
+ )
+}
+
+export default Footer
\ No newline at end of file
diff --git a/local_lens_web/src/components/Footer/Footer.module.css b/local_lens_web/src/components/Footer/Footer.module.css
new file mode 100644
index 0000000..45f760e
--- /dev/null
+++ b/local_lens_web/src/components/Footer/Footer.module.css
@@ -0,0 +1,5 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
\ No newline at end of file
diff --git a/local_lens_web/src/components/Header/Header.jsx b/local_lens_web/src/components/Header/Header.jsx
new file mode 100644
index 0000000..1160749
--- /dev/null
+++ b/local_lens_web/src/components/Header/Header.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+import module from './Header.module.css'
+const Header = () => {
+ return (
+ Header
+ )
+}
+
+export default Header
\ No newline at end of file
diff --git a/local_lens_web/src/components/Header/Header.module.css b/local_lens_web/src/components/Header/Header.module.css
new file mode 100644
index 0000000..baf835b
--- /dev/null
+++ b/local_lens_web/src/components/Header/Header.module.css
@@ -0,0 +1,5 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
\ No newline at end of file
diff --git a/local_lens_web/src/components/Layout/Layout.jsx b/local_lens_web/src/components/Layout/Layout.jsx
new file mode 100644
index 0000000..ca65004
--- /dev/null
+++ b/local_lens_web/src/components/Layout/Layout.jsx
@@ -0,0 +1,13 @@
+import Header from "../Header/Header";
+import Footer from "../Footer/Footer";
+function Layout({ children }) {
+ return (
+
+ {/*
+ );
+}
+
+export default Layout;
diff --git a/local_lens_web/src/components/MapComponent.jsx b/local_lens_web/src/components/MapComponent.jsx
new file mode 100644
index 0000000..c882b11
--- /dev/null
+++ b/local_lens_web/src/components/MapComponent.jsx
@@ -0,0 +1,270 @@
+import { useState, useEffect, useRef } from "react";
+import {
+ MapContainer,
+ TileLayer,
+ Marker,
+ Popup,
+ useMapEvents,
+ useMap,
+} from "react-leaflet";
+import "leaflet/dist/leaflet.css";
+import L from "leaflet";
+import app, { db } from "../firebase-config";
+import { collection, getDocs, query, where, limit } from "firebase/firestore";
+import { init } from "@thetsf/geofirex";
+
+const geo = init(app);
+
+const ico = L.divIcon({
+ className: "cutomMark",
+ html: ``,
+ iconSize: [32, 32],
+ iconAnchor: [16, 16],
+});
+const icoM = L.icon({
+ iconUrl: 'https://i.imgur.com/v1vQwWG.png',
+ // className: "cutomMark",
+ // html: ``,
+ iconSize: [32, 32],
+ iconAnchor: [20,20],
+});
+
+const MapComponent = ({ addEstablishment, target, map, setMap, addReview, places }) => {
+ const [currentPosition, setCurrentLocation] = useState(null);
+ const [markers, setMarkers] = useState([]);
+ const [locationError, setLocationError] = useState(null);
+
+ useEffect(() => {
+ // Check if geolocation is available in the browser
+ if ("geolocation" in navigator) {
+ navigator.geolocation.getCurrentPosition(
+ (position) => {
+ // On success, set the location state with the latitude and longitude
+ setCurrentLocation([
+ position.coords.latitude,
+ position.coords.longitude,
+ ]);
+
+ // alert(position.coords.latitude + "," + position.coords.longitude);
+ },
+ (error) => {
+ // On error, set the error message in state
+ setLocationError(error.message);
+ }
+ );
+ } else {
+ setLocationError("Geolocation is not supported by this browser.");
+ }
+ }, []);
+ useEffect(() => {
+ const getLocationFromFirebase = async () => {
+ try {
+ const q = query(collection(db, "locations"), limit(50));
+
+ const snapshots = await getDocs(q);
+ snapshots.forEach((doc) => {
+ // doc.data() is never undefined for query doc snapshots
+ console.log(doc.id, " => ", doc.data());
+ markers.push(doc.data());
+ });
+ } catch (error) {
+ console.log(error);
+ }
+
+ // db.collection("locations")
+ // .get()
+ // .then((querySnapshot) => {
+ // querySnapshot.forEach((doc) => {
+ // console.log(doc.id, "=>", doc.data());
+ // setMarkers([...markers, doc.data()]);
+ // });
+ // })
+ // .catch((error) => {
+ // console.error("Error getting documents: ", error);
+ // });
+ };
+
+ getLocationFromFirebase().then(() => {
+ setMarkers(markers);
+ places(markers);
+ });
+ }, []);
+
+ // useEffect(() => {
+ // if (currentPosition) {
+ // const locations = collection(db, "locations");
+ // const center = geo.point(currentPosition[0], currentPosition[1]);
+ // const radius = 5; // 10 Kmeters
+ // const field = "geohash";
+
+ // const firestoreRef = db
+ // .collection("cities")
+ // .where("name", "!=", "Phoenix");
+ // const geoRef = geo.query(firestoreRef);
+ // // console.log("query results", query);
+
+ // const query = geoRef.within(center, radius, field);
+
+ // query.subscribe((hits) => console.log(hits));
+ // }
+ // }, [currentPosition]);
+
+ const handleMapClick = (event) => {
+ const { lat, lng } = event.latlng; // Get the latitude and longitude of the click
+
+ alert(lat + " " + lng);
+
+ // Add a new marker to the state
+ // setMarkers((prevMarkers) => [
+ // ...prevMarkers,
+ // { lat, lng, id: Date.now() }, // Use Date.now() to generate a unique ID
+ // ]);
+ };
+
+ function MapEvent({ target }) {
+ const map = useMapEvents({
+ click(e) {
+ const markPos = e.latlng;
+
+ const distance = calculateDistance(
+ markPos.lat,
+ markPos.lng,
+ currentPosition[0],
+ currentPosition[1]
+ );
+
+ if (distance < 10) {
+ alert("too close");
+ } else {
+ addEstablishment(true);
+ target(e.latlng);
+ }
+ },
+ });
+ }
+
+ function calculateDistance(lat1, lon1, lat2, lon2) {
+ const R = 6371; // Radius of the Earth in kilometers
+ const dLat = deg2rad(lat2 - lat1);
+ const dLon = deg2rad(lon2 - lon1);
+ const a =
+ Math.sin(dLat / 2) * Math.sin(dLat / 2) +
+ Math.cos(deg2rad(lat1)) *
+ Math.cos(deg2rad(lat2)) *
+ Math.sin(dLon / 2) *
+ Math.sin(dLon / 2);
+ const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+ const distance = R * c * 1000; // Distance in meters
+ return distance;
+ }
+
+ function deg2rad(deg) {
+ return deg * (Math.PI / 180);
+ }
+
+ return (
+
+ {/* MapContainer is the wrapper for your map */}
+ {currentPosition == null ? (
+
+ ) : (
+
+ {/* TileLayer loads the OpenStreetMap tiles */}
+
+ {markers.map((marker, idx) => {
+ return (
+ {
+ target({
+ lat: marker.latitude,
+ lng: marker.longitude,
+ name: marker.name,
+ type: marker.type,
+ id: marker.id,
+ });
+ addReview(true);
+ },
+ }}
+ key={idx}
+ >
+
+
+
+ );
+ })}
+ Current Location
+
+
+ )}
+
+ );
+};
+
+export default MapComponent;
diff --git a/local_lens_web/src/components/NotFoundPage.jsx b/local_lens_web/src/components/NotFoundPage.jsx
new file mode 100644
index 0000000..079e354
--- /dev/null
+++ b/local_lens_web/src/components/NotFoundPage.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+const NotFoundPage = () => {
+ return (
+
+
+ {marker.name}
+{marker.type}
+
+
+ );
+};
+
+export default NotFoundPage;
\ No newline at end of file
diff --git a/local_lens_web/src/components/ReviewPopUp.jsx b/local_lens_web/src/components/ReviewPopUp.jsx
new file mode 100644
index 0000000..438f32a
--- /dev/null
+++ b/local_lens_web/src/components/ReviewPopUp.jsx
@@ -0,0 +1,394 @@
+import { useEffect, useState } from "react";
+import app, { db, storage } from "../firebase-config";
+import { collection, addDoc, doc, updateDoc, getDoc } from "firebase/firestore";
+
+function ReviewPopUp({ isOpen, onClose, target, user }) {
+ const [name, setName] = useState(target != null ? target.name : "");
+ const [type, setType] = useState(target != null ? target.type : "");
+ const [rating, setRating] = useState(0);
+ const [comment, setComment] = useState("");
+ const [images, setImages] = useState([]);
+ const [imageFiles, setImagesFiles] = useState([]);
+ // const [imgUrl, setImgUrl] = useState([]);
+ const [uploading, setUploading] = useState(false);
+
+ useEffect(() => {
+ if (target) {
+ setName(target.name);
+ setType(target.type);
+ }
+ }, [target]);
+
+ function generateRandomId() {
+ return "id-" + Math.random().toString(36).substr(2, 9);
+ }
+
+ // const submitReview = async (review) => {
+ // try {
+ // // const imgs = [];
+ // // imageFiles.forEach(async (img) => {
+ // // imgs.push(await uploadImage(img));
+ // // });
+ // // const docRef = await addDoc(collection(db, "reviews"), {
+ // // id: target.id,
+ // // name: user.name,
+ // // uid: user.uid,
+ // // comment: review.comment,
+ // // rating: review.rating,
+ // // images: imgUrl,
+ // // });
+ // // const imgs = await Promise.all(imageFiles.map((img) => uploadImage(img)));
+ // // const docRef = await addDoc(collection(db, "reviews"), {
+ // // id: target.id,
+ // // name: user.name,
+ // // uid: user.uid,
+ // // comment: review.comment,
+ // // rating: review.rating,
+ // // images: imgs, // Assuming imgs contains the uploaded image URLs
+ // // });
+
+ // const uploadPromises = imageFiles.map(async (img) => {
+ // return await uploadImage(img);
+ // });
+
+ // // Wait for all image uploads to finish
+ // const imgUrls = await Promise.all(uploadPromises);
+
+ // // Now, proceed to add the review to the database
+ // const docRef = await addDoc(collection(db, "reviews"), {
+ // id: target.id,
+ // name: user.name,
+ // uid: user.uid,
+ // comment: review.comment,
+ // rating: review.rating,
+ // images: imgUrls, // imgUrls will be an array of image URLs
+ // });
+ // } catch (error) {
+ // console.log(error);
+ // }
+ // };
+
+ // async function uploadImage(image) {
+ // if (image) {
+ // const uploadTask = storage.ref(`review-post/${image.name}`).put(image);
+ // console.log("Uploading", image);
+
+ // uploadTask.on(
+ // "state_changed",
+ // (snapshot) => {
+ // // Progress function
+ // const progress = Math.round(
+ // (snapshot.bytesTransferred / snapshot.totalBytes) * 100
+ // );
+ // // setProgress(progress);
+ // },
+ // (error) => {
+ // // Error function
+ // console.log(error);
+ // },
+ // () => {
+ // // Complete function
+ // uploadTask.snapshot.ref.getDownloadURL().then((url) => {
+ // // setUrl(url);
+ // // handleUser({ ppic: url });
+ // setImgUrl([...imgUrl, url]);
+ // console.log("File available at", url);
+ // return url;
+ // });
+ // }
+ // );
+ // }
+ // }
+
+ const submitReview = async (review) => {
+ try {
+ // Log the image files to check they are being passed correctly
+ console.log("Image files: ", imageFiles);
+
+ // Create an array of promises for image uploads
+ const uploadPromises = imageFiles.map(async (img) => {
+ try {
+ // Log the image being uploaded
+ console.log("Uploading image: ", img);
+
+ // Upload the image and get the URL
+ const imgUrl = await uploadImage(img);
+
+ // Log the URL returned by the upload
+ console.log("Uploaded image URL: ", imgUrl);
+
+ // Return the image URL to be collected in the Promise.all() array
+ return imgUrl;
+ } catch (err) {
+ console.error("Error uploading image: ", err);
+ throw new Error("Image upload failed");
+ }
+ });
+
+ // Wait for all images to be uploaded and get the array of URLs
+ const imgUrls = await Promise.all(uploadPromises);
+
+ // Log the image URLs array
+ console.log("All image URLs: ", imgUrls);
+
+ // Proceed to add the review to the database
+ const docRef = await addDoc(collection(db, "reviews"), {
+ id: target.id,
+ name: user.name,
+ uid: user.uid,
+ comment: review.comment,
+ rating: review.rating,
+ images: imgUrls, // Use the image URLs returned from uploads
+ });
+
+ const reviewDocRef = doc(db, "locations", target.id);
+ const reviewDoc = await getDoc(reviewDocRef);
+
+ if (reviewDoc.exists) {
+ console.log("Review data:", reviewDoc.data());
+ } else {
+ console.log("No such document!");
+ }
+
+ await updateDoc(reviewDocRef, {
+ reviews: reviewDoc.data().reviews + 1,
+ rating:
+ (reviewDoc.data().rating * reviewDoc.data().reviews + review.rating) /
+ (reviewDoc.data().reviews + 1),
+ });
+
+ console.log("Review submitted with ID: ", docRef.id);
+ setName("");
+ setType("");
+ setRating(0);
+ setComment("");
+ setImages([]);
+ setImagesFiles([]);
+ setUploading(false);
+ } catch (error) {
+ console.error("Error submitting review: ", error);
+ }
+ };
+
+ async function uploadImage(image) {
+ if (image) {
+ // Return a Promise to ensure async/await works correctly
+ return new Promise((resolve, reject) => {
+ const uploadTask = storage.ref(`review-post/${image.name}`).put(image);
+ console.log("Uploading", image);
+
+ uploadTask.on(
+ "state_changed",
+ (snapshot) => {
+ // Progress function (optional to show progress)
+ const progress = Math.round(
+ (snapshot.bytesTransferred / snapshot.totalBytes) * 100
+ );
+ // You can use this to update a progress bar or show the upload status
+ },
+ (error) => {
+ // Error function
+ console.log(error);
+ reject(error); // Reject the promise on error
+ },
+ () => {
+ // Complete function
+ uploadTask.snapshot.ref
+ .getDownloadURL()
+ .then((url) => {
+ console.log("File available at", url);
+ resolve(url); // Resolve the promise with the URL
+ })
+ .catch((error) => {
+ reject(error); // Reject if getDownloadURL fails
+ });
+ }
+ );
+ });
+ }
+ }
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ if (uploading) return;
+ else setUploading(true);
+
+ const id = generateRandomId();
+ console.log("Submitted:", { name, type, rating, comment, images }, user);
+ // imageFiles.forEach(async (img) => {
+ // await uploadImage(img);
+ // });
+ await submitReview({ id, name, type, rating, comment, images });
+ // const uploadPromises = imageFiles.map(async (img) => {
+ // await uploadImage(img);
+ // });
+
+ // await Promise.all(uploadPromises);
+ // await submitReview({ id, name, type, rating, comment, images });
+ onClose();
+ };
+
+ const handleImageUpload = (e) => {
+ const files = Array.from(e.target.files);
+ if (images.length + files.length > 6) {
+ alert("You can only upload up to 6 images");
+ return;
+ }
+ const newImages = files.map((file) => URL.createObjectURL(file));
+ setImages([...images, ...newImages]);
+ setImagesFiles([...imageFiles, ...files]);
+ };
+
+ const removeImage = (index) => {
+ const newImages = [...images];
+ newImages.splice(index, 1);
+ setImages(newImages);
+ };
+
+ if (!isOpen) return null;
+
+ return (
+
+
+ 404
+Oops! Page not found
+You might've gotten lost cause the page you are looking for does not exist.
+ + Go Home + +
+
+ );
+}
+
+export default ReviewPopUp;
diff --git a/local_lens_web/src/components/SidePanel.jsx b/local_lens_web/src/components/SidePanel.jsx
new file mode 100644
index 0000000..0998b95
--- /dev/null
+++ b/local_lens_web/src/components/SidePanel.jsx
@@ -0,0 +1,609 @@
+import { useEffect, useState } from "react";
+import {
+ collection,
+ getDocs,
+ query,
+ where,
+ limit,
+ Timestamp,
+} from "firebase/firestore";
+import app, { db } from "../firebase-config";
+
+function SidePanel({ map, target, places }) {
+ const [searchTerm, setSearchTerm] = useState("");
+ const [activeTab, setActiveTab] = useState("places");
+ const [showSearchResults, setShowSearchResults] = useState(false);
+
+ const [nearbyPlaceSearch, setNearbySearch] = useState(null);
+ const [nearbyGebetaSearch, setNearbyGebeta] = useState(null);
+
+ const [navigateCoord, setNavigateCoor] = useState();
+ const [reviews, setReviews] = useState([]);
+ const [isReviewLoading, setIsReviewLoading] = useState(true);
+ const [locations, setLocaions] = useState([]);
+ // const placeholderReviews = [
+ // {
+ // place: "Coffee Shop",
+ // user: "John",
+ // rating: 4,
+ // comment: "Great coffee and atmosphere!",
+ // },
+ // {
+ // place: "Restaurant",
+ // user: "Alice",
+ // rating: 5,
+ // comment: "Delicious food and excellent service.",
+ // },
+ // {
+ // place: "Bookstore",
+ // user: "Bob",
+ // rating: 4,
+ // comment: "Wide selection of books, friendly staff.",
+ // },
+ // {
+ // place: "Bakery",
+ // user: "Emma",
+ // rating: 5,
+ // comment: "The best croissants in town!",
+ // },
+ // {
+ // place: "Grocery Store",
+ // user: "David",
+ // rating: 3,
+ // comment: "Decent selection, but a bit pricey.",
+ // },
+ // ];
+
+ const [events, setEvents] = useState([]);
+
+ useEffect(() => {
+ const unsubscribe = async () => {
+ const reviewList = [];
+ try {
+ const q = query(
+ collection(db, "reviews"),
+ where("id", "==", target.id)
+ );
+
+ const snapshots = await getDocs(q);
+ snapshots.forEach((doc) => {
+ // doc.data() is never undefined for query doc snapshots
+ console.log("These are the reviews " + doc.id, " => ", doc.data());
+
+ reviewList.push(doc.data());
+ });
+ } catch (error) {
+ console.log(error);
+ } finally {
+ setIsReviewLoading(false);
+ setReviews(reviewList);
+ }
+ };
+
+ if (target) {
+ console.log("this the target", target);
+ setIsReviewLoading(true);
+ setActiveTab("reviews");
+ // unsubscribe().then(val => setReviews(val));
+ unsubscribe();
+ // return () => unsubscribe();
+ } else {
+ setActiveTab("places");
+ setReviews([]);
+ }
+ }, [target]);
+
+ useEffect(() => {
+ const fetchEvents = async () => {
+ try {
+ const today = new Date();
+ // const sevenDaysAgo = addDays(today, 7);
+
+ // const seven = Timestamp.fromDate((today + 5));
+
+ // console.log("DateDifff", seven);
+ const q = query(
+ collection(db, "events"),
+ where("date", ">", today),
+ limit(50)
+ );
+ const snapshots = await getDocs(q);
+ const arr = [];
+ const eventsData = snapshots.docs.map((doc) => {
+ arr.push(doc.data());
+ return {
+ id: doc.id,
+ ...doc.data(),
+ };
+ });
+ setEvents(arr);
+ } catch (error) {
+ console.error("Error fetching events:", error);
+ }
+ };
+
+ fetchEvents();
+ }, []);
+
+ useEffect(() => {
+ // if (places) setLocaions(new Set(places));
+ const locs = places.filter(
+ (place, index, self) =>
+ index === self.findIndex((p) => p.name === place.name)
+ );
+ setLocaions(locs);
+ }, [places]);
+
+ const filteredPlaces = Array.from(locations).filter((place) =>
+ place.name.toLowerCase().includes(searchTerm.toLowerCase())
+ );
+
+ const reviewedPlaces = filteredPlaces.filter((places) => places.reviewed);
+ const unreviewedPlaces = filteredPlaces.filter((place) => !place.reviewed);
+
+ const fetchGebetaPlaces = async (term) => {
+ setNearbyGebeta(null);
+ try {
+ const response = await fetch(
+ `https://mapapi.gebeta.app/api/v1/route/geocoding?name=${term}&apiKey=${process.env.REACT_APP_TOKEN}`,
+ {
+ method: "GET",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ }
+ );
+
+ if (!response.ok) {
+ throw new Error(`HTTP error! status: ${response.status}`);
+ }
+
+ const data = await response.json().then((data) => {
+ setNearbyGebeta(data.data);
+ });
+
+ console.log("Success:", data);
+ } catch (error) {
+ console.error("Error:", error);
+ }
+ };
+
+ const fetchNearbyPlaces = async (term) => {
+ // const q = query(collection(db, "locations"), limit(50));
+ // const snapshots = await getDocs(q);
+ // snapshots.forEach((doc) => {
+ // // doc.data() is never undefined for query doc snapshots
+ // console.log("Name of loc", doc.id, " => ", doc.data());
+ // });
+ };
+
+ const renderPlaces = (places) => {
+ return places.map((place, index) => (
+
+
+ Add Review
+ + +{place.name}
+Type: {place.type}
+ {place.reviewed && ( +Rating: {place.rating}
+ )} +{place.name}
+Distance: 1.0km
+Type: {place.type}
+{place.name}
+Type: {place.type}
+Rating: {place.rating}β
+{person.name}
+Distance: {person.distance}
+{event.name}
++ Date: {event.date.toDate().toLocaleDateString()} +
+Time: {event.time}
++ Location:{" "} + navigateToEvent(event.location)} + > + {event.location} + +
+There are no reviews why don't you add yours.
+{review.place}
+User: {review.name}
+Rating: {review.rating}/5
+{review.comment}
+
+ {review.images.map((image, index) => (
+
+
+ 
+
+ ))}
+
+
+ );
+}
+
+export default SidePanel;
diff --git a/local_lens_web/src/firebase-config.js b/local_lens_web/src/firebase-config.js
new file mode 100644
index 0000000..ca42858
--- /dev/null
+++ b/local_lens_web/src/firebase-config.js
@@ -0,0 +1,40 @@
+// Import the functions you need from the SDKs you need
+import firebase from "firebase/compat/app";
+import "firebase/compat/firestore";
+import "firebase/compat/auth";
+import "firebase/compat/storage";
+// 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
+// For Firebase JS SDK v7.20.0 and later, measurementId is optional
+const firebaseConfig = {
+ apiKey: "AIzaSyBW3p70Bs5sb8oCjJgrccfE2JcdtvqdkvA",
+ authDomain: "local-lens-b69ea.firebaseapp.com",
+ projectId: "local-lens-b69ea",
+ storageBucket: "altium-cd024.appspot.com",
+ messagingSenderId: "31714200393",
+ appId: "1:31714200393:web:9dbf95aafffe65f273e898",
+ measurementId: "G-1NVM79BK6Y"
+};
+const firebaseConfigStorage = {
+ apiKey: "AIzaSyDYfBm1bVX-jWuGY1ThG3FgGU3V_QLZB7Q",
+ authDomain: "altium-cd024.firebaseapp.com",
+ projectId: "altium-cd024",
+ storageBucket: "altium-cd024.appspot.com",
+ messagingSenderId: "904813905259",
+ appId: "1:904813905259:web:05080cc50f26ce2a22382e"
+};
+
+const app = firebase.initializeApp(firebaseConfig);
+
+// const analytics = app.analytics();//firebase.analytics(app);
+const auth = app.auth();
+const db = app.firestore();
+const storage = app.storage();
+
+export default app;
+export {auth};
+// export {analytics};
+export {db};
+export {storage};
diff --git a/local_lens_web/src/index.css b/local_lens_web/src/index.css
new file mode 100644
index 0000000..17df0e7
--- /dev/null
+++ b/local_lens_web/src/index.css
@@ -0,0 +1,17 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+ margin: 0;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+ 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+ sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+ font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+ monospace;
+}
diff --git a/local_lens_web/src/index.js b/local_lens_web/src/index.js
new file mode 100644
index 0000000..d563c0f
--- /dev/null
+++ b/local_lens_web/src/index.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+
+
+ {showSearchResults && (
+
+
+
+ )}
+
+
+ Reviewed Places
+- {renderPlaces(filteredPlaces)}
Unreviewed Places
+- {renderUnreviewed(nearbyGebetaSearch)}
+
+
+
+ {target && (
+
+ )}
+
+ + Nearby {activeTab.charAt(0).toUpperCase() + activeTab.slice(1)} +
+- {renderContent()}