From ff890dac7b934f8837c113b554d02ffff82d35b2 Mon Sep 17 00:00:00 2001 From: ValeuDoamne Date: Sun, 26 May 2024 18:24:26 +0300 Subject: [PATCH 1/3] Add /display_accommodation/[id] and fix edit imgs --- .../[accommodationId]/accommodation.tsx | 74 +++++++++++ .../[accommodationId]/page.tsx | 117 ++++++++++++++++++ .../[accommodationId]/page.tsx | 2 +- 3 files changed, 192 insertions(+), 1 deletion(-) create mode 100644 src/app/display_accommodation/[accommodationId]/accommodation.tsx create mode 100644 src/app/display_accommodation/[accommodationId]/page.tsx diff --git a/src/app/display_accommodation/[accommodationId]/accommodation.tsx b/src/app/display_accommodation/[accommodationId]/accommodation.tsx new file mode 100644 index 0000000..1ca6e9c --- /dev/null +++ b/src/app/display_accommodation/[accommodationId]/accommodation.tsx @@ -0,0 +1,74 @@ +import { DocumentData } from 'firebase/firestore'; +import Image from 'next/image'; +import React, { useState } from 'react'; + + +const Accommodation: React.FC = ({ accommodation }) => { + const { photos, location, title, description, numberOfRooms, price } = accommodation; + const [currentPhotoIndex, setCurrentPhotoIndex] = useState(0); + + const handleNextPhoto = () => { + console.log('pressed!'); + setCurrentPhotoIndex((prevIndex) => (prevIndex + 1) % photos.length); + }; + + const handlePrevPhoto = () => { + setCurrentPhotoIndex((prevIndex) => (prevIndex - 1 + photos.length) % photos.length); + }; + + return ( +
+

{title}

+

Location: {location}

+ { photos ? +
+ {`Photo + + +
+ : null} +

{description}

+

Number of rooms: {numberOfRooms}

+

Price: {price} lei per night

+
+ ); +}; + +export default Accommodation; diff --git a/src/app/display_accommodation/[accommodationId]/page.tsx b/src/app/display_accommodation/[accommodationId]/page.tsx new file mode 100644 index 0000000..65c93c0 --- /dev/null +++ b/src/app/display_accommodation/[accommodationId]/page.tsx @@ -0,0 +1,117 @@ +'use client'; +import { UserContext } from '@/lib/context'; +import { db } from '@/lib/firebase'; +import { doc, getDoc, DocumentData, setDoc } from 'firebase/firestore'; +import { NextPage } from 'next'; +import { useContext, useEffect, useState } from 'react'; +import Accommodation from './accommodation'; +import 'react-datepicker/dist/react-datepicker.css'; +import DatePicker from 'react-datepicker'; +import toast from 'react-hot-toast'; + +interface DisplayAccommodationProps { + params: { + accommodationId: string; + }; +} + +const DisplayAccommodation: NextPage = ({ params }) => { + const [accommodation, setAccommodation] = useState({} as DocumentData); + const [receivedData, setData] = useState(false); + const [checkInDate, setCheckInDate] = useState(null); + const [checkOutDate, setCheckOutDate] = useState(null); + const currentDate = new Date(); + const { user } = useContext(UserContext); + + + const handleAddToCart = async () => { + if (checkInDate == null) { + toast.error("The checkin date cannot be null!"); + return; + } + if (checkOutDate == null) { + toast.error("The checkout date cannot be null!"); + return; + } + try { + const userCartReference = doc(db, 'cart', user.uid); + const document = await getDoc(userCartReference); + if (document.exists()) { + const documentData = document.data(); + documentData.cart.push({ + checkIn: checkInDate?.toJSON(), + checkOut: checkOutDate?.toJSON(), + accommodationId: params.accommodationId, + }) + await setDoc(userCartReference, documentData); + } else { + const documentData = { + cart: [{ + checkIn: checkInDate?.toJSON(), + checkOut: checkOutDate?.toJSON(), + accommodationId: params.accommodationId, + }] + } + await setDoc(userCartReference, documentData); + } + toast.success("Successfully added to cart!"); + } catch (e) { + toast.error("Could not add to cart! Error: "+e) + } + } + + useEffect(() => { + (async () => { + const accommodationRef = await getDoc(doc(db, "accommodations", params.accommodationId)); + if (accommodationRef.exists()) { + const accommodationData = accommodationRef.data(); + if (accommodationData.uid == user.uid) { + setAccommodation(accommodationRef.data()); + } + setData(true); + } + })(); + }, [receivedData]); + + return ( +
+ +
+
+ + { setCheckInDate(date); if(checkOutDate && date && date > checkOutDate) {setCheckOutDate(null);}}} + selectsStart + minDate={currentDate} + startDate={checkInDate} + endDate={checkOutDate} + className="border-2" + shouldCloseOnSelect={true} + dateFormat="dd/MM/yyyy" + /> +
+
+ + setCheckOutDate(date)} + selectsEnd + startDate={checkInDate} + endDate={checkOutDate} + minDate={checkInDate} + shouldCloseOnSelect={true} + dateFormat="dd/MM/yyyy" + /> +
+
+ +
+ ); + +}; + +export default DisplayAccommodation; diff --git a/src/app/edit_accommodation/[accommodationId]/page.tsx b/src/app/edit_accommodation/[accommodationId]/page.tsx index dc37209..c187838 100644 --- a/src/app/edit_accommodation/[accommodationId]/page.tsx +++ b/src/app/edit_accommodation/[accommodationId]/page.tsx @@ -122,7 +122,7 @@ const EditAccommodation: NextPage = ({ params }) => { description, numberOfRooms, price, - photos: images, // set the photos url + photos: photosUrls.concat(images), // set the photos url }); // Reset the form From cdbeed9a77ef91062ea98e5652d2504ac1e54320 Mon Sep 17 00:00:00 2001 From: ValeuDoamne Date: Sun, 26 May 2024 18:28:39 +0300 Subject: [PATCH 2/3] forgot to add the datepicker package --- package.json | 3 +++ 1 file changed, 3 insertions(+) diff --git a/package.json b/package.json index cb6a279..689875b 100644 --- a/package.json +++ b/package.json @@ -11,11 +11,13 @@ "dependencies": { "@stripe/react-stripe-js": "^2.7.1", "@stripe/stripe-js": "^3.4.1", + "date-fns": "^3.6.0", "firebase": "^10.6.0", "micro": "^10.0.1", "micro-cors": "^0.1.1", "next": "^14.1.4", "react": "^18.3.1", + "react-datepicker": "^6.9.0", "react-dom": "^18.3.1", "react-hot-toast": "^2.4.1", "react-icons": "^5.2.1", @@ -24,6 +26,7 @@ "devDependencies": { "@types/node": "^20", "@types/react": "^18", + "@types/react-datepicker": "^6.2.0", "@types/react-dom": "^18", "autoprefixer": "^10.0.1", "eslint": "^8", From 2073955f082fd9c05dd9e5c42457b4f4c7d9ae7c Mon Sep 17 00:00:00 2001 From: ValeuDoamne Date: Sun, 26 May 2024 18:34:28 +0300 Subject: [PATCH 3/3] Add package-lock.json because FU --- package-lock.json | 124 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 124 insertions(+) diff --git a/package-lock.json b/package-lock.json index 50ecdf0..c542a3c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,11 +10,13 @@ "dependencies": { "@stripe/react-stripe-js": "^2.7.1", "@stripe/stripe-js": "^3.4.1", + "date-fns": "^3.6.0", "firebase": "^10.6.0", "micro": "^10.0.1", "micro-cors": "^0.1.1", "next": "^14.1.4", "react": "^18.3.1", + "react-datepicker": "^6.9.0", "react-dom": "^18.3.1", "react-hot-toast": "^2.4.1", "react-icons": "^5.2.1", @@ -23,6 +25,7 @@ "devDependencies": { "@types/node": "^20", "@types/react": "^18", + "@types/react-datepicker": "^6.2.0", "@types/react-dom": "^18", "autoprefixer": "^10.0.1", "eslint": "^8", @@ -615,6 +618,59 @@ "resolved": "https://registry.npmjs.org/@firebase/webchannel-wrapper/-/webchannel-wrapper-0.10.3.tgz", "integrity": "sha512-+ZplYUN3HOpgCfgInqgdDAbkGGVzES1cs32JJpeqoh87SkRobGXElJx+1GZSaDqzFL+bYiX18qEcBK76mYs8uA==" }, + "node_modules/@floating-ui/core": { + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.2.tgz", + "integrity": "sha512-+2XpQV9LLZeanU4ZevzRnGFg2neDeKHgFLjP6YLW+tly0IvrhqT4u8enLGjLH3qeh85g19xY5rsAusfwTdn5lg==", + "license": "MIT", + "dependencies": { + "@floating-ui/utils": "^0.2.0" + } + }, + "node_modules/@floating-ui/dom": { + "version": "1.6.5", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.5.tgz", + "integrity": "sha512-Nsdud2X65Dz+1RHjAIP0t8z5e2ff/IRbei6BqFrl1urT8sDVzM1HMQ+R0XcU5ceRfyO3I6ayeqIfh+6Wb8LGTw==", + "license": "MIT", + "dependencies": { + "@floating-ui/core": "^1.0.0", + "@floating-ui/utils": "^0.2.0" + } + }, + "node_modules/@floating-ui/react": { + "version": "0.26.16", + "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.16.tgz", + "integrity": "sha512-HEf43zxZNAI/E781QIVpYSF3K2VH4TTYZpqecjdsFkjsaU1EbaWcM++kw0HXFffj7gDUcBFevX8s0rQGQpxkow==", + "license": "MIT", + "dependencies": { + "@floating-ui/react-dom": "^2.1.0", + "@floating-ui/utils": "^0.2.0", + "tabbable": "^6.0.0" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, + "node_modules/@floating-ui/react-dom": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.0.tgz", + "integrity": "sha512-lNzj5EQmEKn5FFKc04+zasr09h/uX8RtJRNj5gUXsSQIXHVWTVh+hVAg1vOMCexkX8EgvemMvIFpQfkosnVNyA==", + "license": "MIT", + "dependencies": { + "@floating-ui/dom": "^1.0.0" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, + "node_modules/@floating-ui/utils": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.2.tgz", + "integrity": "sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw==", + "license": "MIT" + }, "node_modules/@grpc/grpc-js": { "version": "1.9.14", "resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.9.14.tgz", @@ -1082,6 +1138,18 @@ "csstype": "^3.0.2" } }, + "node_modules/@types/react-datepicker": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/@types/react-datepicker/-/react-datepicker-6.2.0.tgz", + "integrity": "sha512-+JtO4Fm97WLkJTH8j8/v3Ldh7JCNRwjMYjRaKh4KHH0M3jJoXtwiD3JBCsdlg3tsFIw9eQSqyAPeVDN2H2oM9Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "@floating-ui/react": "^0.26.2", + "@types/react": "*", + "date-fns": "^3.3.1" + } + }, "node_modules/@types/react-dom": { "version": "18.2.23", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.23.tgz", @@ -1817,6 +1885,15 @@ "url": "https://github.com/chalk/wrap-ansi?sponsor=1" } }, + "node_modules/clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", @@ -1944,6 +2021,16 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/date-fns": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz", + "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/kossnocorp" + } + }, "node_modules/debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", @@ -4676,6 +4763,23 @@ "node": ">=0.10.0" } }, + "node_modules/react-datepicker": { + "version": "6.9.0", + "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-6.9.0.tgz", + "integrity": "sha512-QTxuzeem7BUfVFWv+g5WuvzT0c5BPo+XTCNbMTZKSZQLU+cMMwSUHwspaxuIcDlwNcOH0tiJ+bh1fJ2yxOGYWA==", + "license": "MIT", + "dependencies": { + "@floating-ui/react": "^0.26.2", + "clsx": "^2.1.0", + "date-fns": "^3.3.1", + "prop-types": "^15.7.2", + "react-onclickoutside": "^6.13.0" + }, + "peerDependencies": { + "react": "^16.9.0 || ^17 || ^18", + "react-dom": "^16.9.0 || ^17 || ^18" + } + }, "node_modules/react-dom": { "version": "18.3.1", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", @@ -4717,6 +4821,20 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "node_modules/react-onclickoutside": { + "version": "6.13.1", + "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.13.1.tgz", + "integrity": "sha512-LdrrxK/Yh9zbBQdFbMTXPp3dTSN9B+9YJQucdDu3JNKRrbdU+H+/TVONJoWtOwy4II8Sqf1y/DTI6w/vGPYW0w==", + "license": "MIT", + "funding": { + "type": "individual", + "url": "https://github.com/Pomax/react-onclickoutside/blob/master/FUNDING.md" + }, + "peerDependencies": { + "react": "^15.5.x || ^16.x || ^17.x || ^18.x", + "react-dom": "^15.5.x || ^16.x || ^17.x || ^18.x" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -5372,6 +5490,12 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/tabbable": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz", + "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==", + "license": "MIT" + }, "node_modules/tailwindcss": { "version": "3.4.3", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.3.tgz",