From d79737a49748658954de6b8d32a355f81f5cfc2f Mon Sep 17 00:00:00 2001 From: QkoSad Date: Fri, 2 Dec 2022 18:33:38 +0200 Subject: [PATCH] added option for geolocation, that requires an api and currently does not work, and completed the add listing functionality --- package-lock.json | 28 ++++++-- package.json | 1 + src/pages/CreateListing.jsx | 129 +++++++++++++++++++++++++++++++----- src/pages/Offers.jsx | 2 - 4 files changed, 137 insertions(+), 23 deletions(-) diff --git a/package-lock.json b/package-lock.json index fb3ac7f..c3248bc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,7 @@ "react-router-dom": "^6.4.3", "react-scripts": "5.0.1", "react-toastify": "^9.1.1", + "uuid": "^9.0.0", "web-vitals": "^2.1.4" } }, @@ -15913,6 +15914,14 @@ "websocket-driver": "^0.7.4" } }, + "node_modules/sockjs/node_modules/uuid": { + "version": "8.3.2", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", + "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", + "bin": { + "uuid": "dist/bin/uuid" + } + }, "node_modules/source-list-map": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz", @@ -16928,9 +16937,9 @@ } }, "node_modules/uuid": { - "version": "8.3.2", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", - "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz", + "integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==", "bin": { "uuid": "dist/bin/uuid" } @@ -29240,6 +29249,13 @@ "faye-websocket": "^0.11.3", "uuid": "^8.3.2", "websocket-driver": "^0.7.4" + }, + "dependencies": { + "uuid": { + "version": "8.3.2", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", + "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==" + } } }, "source-list-map": { @@ -29995,9 +30011,9 @@ "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==" }, "uuid": { - "version": "8.3.2", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", - "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==" + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz", + "integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==" }, "v8-to-istanbul": { "version": "8.1.1", diff --git a/package.json b/package.json index 8007acc..5d7f428 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "react-router-dom": "^6.4.3", "react-scripts": "5.0.1", "react-toastify": "^9.1.1", + "uuid": "^9.0.0", "web-vitals": "^2.1.4" }, "scripts": { diff --git a/src/pages/CreateListing.jsx b/src/pages/CreateListing.jsx index 0c7a8df..58cafa8 100644 --- a/src/pages/CreateListing.jsx +++ b/src/pages/CreateListing.jsx @@ -1,10 +1,20 @@ import { useState, useRef, useEffect } from "react"; import { getAuth, onAuthStateChanged } from "firebase/auth"; +import { + getStorage, + ref, + uploadBytesResumable, + getDownloadURL, +} from "firebase/storage"; +import { db } from "../firebase.config"; +import { addDoc, collection, serverTimestamp } from "firebase/firestore"; +import { v4 as uuidv4 } from "uuid"; import { useNavigate } from "react-router-dom"; import Spinner from "../components/Spinner"; +import { toast } from "react-toastify"; function CreateLising() { - const [geolocationEnabled, setGeolocationEnabled] = useState(true); + const [geolocationEnabled, setGeolocationEnabled] = useState(false); const [loading, setLoading] = useState(false); const [formData, setFormData] = useState({ type: "rent", @@ -56,8 +66,96 @@ function CreateLising() { }; }, [isMounted]); - const onSubmit = (e) => { - e.prevent.default(); + const onSubmit = async (e) => { + e.preventDefault(); + setLoading(false); + + if (discountedPrice >= regularPrice) { + setLoading(false); + toast.error("Discounted price needs to be less than regular price"); + return; + } + if (images.length > 6) { + setLoading(false); + toast.error("Max 6 images"); + return; + } + let geolocation = {}; + let location; + + if (geolocationEnabled) { + //Don't want to register for a geolocation + /* const response = await fetch( + `http://api.positionstack.com/v1/forward?access_key=${APIKEY}&query=${address}` + ); + const data = await response.json(); + setFormData((prevState) => ({ + ...prevState, + latitude: data.data[0].latitude, + longitude: data.data[0].longitude, + })); + */ + } else { + geolocation.lat = latittude; + geolocation.lng = longitude; + location = address; + } + const storeImage = async (image) => { + return new Promise((resolve, reject) => { + const storage = getStorage(); + const fileName = `${auth.currentUser.uid}-${image.name}-${uuidv4()}`; + const storageRef = ref(storage, "images/" + fileName); + const uploadTask = uploadBytesResumable(storageRef, image); + uploadTask.on( + "state_changed", + (snapshot) => { + const progress = + (snapshot.bytesTransferred / snapshot.totalBytes) * 100; + console.log("Upload is " + progress + "% done"); + switch (snapshot.state) { + case "paused": + console.log("Upload is paused"); + break; + case "running": + console.log("Upload is running"); + break; + } + }, + (error) => { + reject(error); + }, + () => { + getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => { + resolve(downloadURL); + }); + } + ); + }); + }; + const imgUrls = await Promise.all( + [...images].map((image) => storeImage(image)) + ).catch(() => { + setLoading(false); + toast.error("Image is not uploaded"); + return; + }); + + const formDataCopy = { + ...formData, + imgUrls, + geolocation, + timestamp: serverTimestamp(), + }; + formDataCopy.location=address + delete formDataCopy.images; + delete formDataCopy.address; + location && (formDataCopy.location = location); + !formDataCopy.offer && delete formDataCopy.discountedPrice; + + const docRef = await addDoc(collection(db, "listings"), formDataCopy); + setLoading(false); + toast.success("Listing saved"); + navigate(`/category/${formDataCopy.type}/${docRef.id}`); }; const onMutate = (e) => { @@ -72,7 +170,7 @@ function CreateLising() { if (e.target.files) { setFormData((prevState) => ({ ...prevState, - image: e.target.files, + images: e.target.files, })); } if (!e.target.files) { @@ -114,7 +212,7 @@ function CreateLising() { Rent - + +