From b0e924f56a74646896426371d702e464c5fd3507 Mon Sep 17 00:00:00 2001 From: Daniel Hart Date: Fri, 30 Aug 2024 10:10:33 -0500 Subject: [PATCH 1/4] Homepage cleanup/unused variables --- .vscode/settings.json | 8 ++++++++ pages/index.js | 20 ++------------------ 2 files changed, 10 insertions(+), 18 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..1b62e3e --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,8 @@ +{ + "workbench.colorCustomizations": { + "titleBar.activeForeground": "#FFF", + "titleBar.inactiveForeground": "#FFF", + "titleBar.activeBackground": "#7D5EBF", + "titleBar.inactiveBackground": "#580259" + +} \ No newline at end of file diff --git a/pages/index.js b/pages/index.js index be328f9..c864ccf 100644 --- a/pages/index.js +++ b/pages/index.js @@ -9,7 +9,7 @@ import fetcher from "../lib/fetcher"; import Navigation from "../components/Navigation"; import Loader from "../components/Loader"; -import { hasActiveHappyHour, isCurrentlyBetweenTwoTimes } from "../lib/time"; +import { hasActiveHappyHour } from "../lib/time"; import { sortByDistance, calculateDistance, @@ -73,12 +73,7 @@ function Home() { places = [...activeSpecialsPlaces, ...otherPlaces]; function happyHoursRightNow() { - const currentTime = new Date(); - const currentDay = currentTime.getDay(); - - const todayPlace = places.filter( - (place) => hasActiveHappyHour(place, day) - ); + const todayPlace = places.filter((place) => hasActiveHappyHour(place, day)); return todayPlace.length; } @@ -108,17 +103,6 @@ function Home() {
-
- {/* {daysOfTheWeek.map((theDay) => ( - - ))} */} -
{bars.map((bar) => ( From df2031878a6d0d7d7c3afa8dff0339dc4aaf43f5 Mon Sep 17 00:00:00 2001 From: Daniel Hart Date: Fri, 30 Aug 2024 12:15:44 -0500 Subject: [PATCH 2/4] Add page number and limit number to api call --- pages/index.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/pages/index.js b/pages/index.js index c864ccf..bdd1ca9 100644 --- a/pages/index.js +++ b/pages/index.js @@ -9,7 +9,7 @@ import fetcher from "../lib/fetcher"; import Navigation from "../components/Navigation"; import Loader from "../components/Loader"; -import { hasActiveHappyHour } from "../lib/time"; +import { getCurrentTime, hasActiveHappyHour } from "../lib/time"; import { sortByDistance, calculateDistance, @@ -50,7 +50,13 @@ function Home() { fetchUserLocation(); }, []); - const { data, error } = useSWR("/api/places/" + day, fetcher); + let page = 1; + let limit = 10; + + const { data, error } = useSWR( + `/api/places/${day}?page=${page}&limit=${limit}¤tTime=${getCurrentTime()}`, + fetcher + ); if (error) return
Failed to load
; if (!data) return ; if (!data.success) return
Failed to load
; From 29ba9d57b0fa192703f0b93bbc3592c450547970 Mon Sep 17 00:00:00 2001 From: Daniel Hart Date: Fri, 30 Aug 2024 15:26:00 -0500 Subject: [PATCH 3/4] Create a Total Happy Hours phrase component Clean up index.js --- components/TotalHappyHours.js | 23 +++++++++++++++++++++++ pages/index.js | 14 ++------------ 2 files changed, 25 insertions(+), 12 deletions(-) create mode 100644 components/TotalHappyHours.js diff --git a/components/TotalHappyHours.js b/components/TotalHappyHours.js new file mode 100644 index 0000000..e468eb0 --- /dev/null +++ b/components/TotalHappyHours.js @@ -0,0 +1,23 @@ +export default function determineCurrentHappyHourVerbiage(happyHoursRightNow) { + if (happyHoursRightNow > 1) { + const multiplePhrases = [ + `There are ${happyHoursRightNow} happy hours happening right now. Get on it!`, + `You've got options! ${happyHoursRightNow} happy hours are happening right now.`, + `Hurry! ${happyHoursRightNow} happy hours are currently going on.`, + `Don't miss out! ${happyHoursRightNow} happy hours are happening as we speak.`, + `${happyHoursRightNow} happy hours are on right now! It's a good time to go out.`, + ]; + return multiplePhrases[Math.floor(Math.random() * multiplePhrases.length)]; + } + + if (happyHoursRightNow === 1) { + const singlePhrases = [ + `There's only one happy hour happening right now. Don't miss it!`, + `Just one happy hour going on at the moment. Better hurry!`, + `One happy hour is happening right now. It's the place to be!`, + ]; + return singlePhrases[Math.floor(Math.random() * singlePhrases.length)]; + } + + return `There are ${happyHoursRightNow} happy hours happening right now.`; +} diff --git a/pages/index.js b/pages/index.js index bdd1ca9..a42ae72 100644 --- a/pages/index.js +++ b/pages/index.js @@ -15,6 +15,7 @@ import { calculateDistance, getUserLocation, } from "../lib/location"; +import determineCurrentHappyHourVerbiage from "../components/TotalHappyHours"; import { useEffect } from "react"; function Home() { @@ -84,17 +85,6 @@ function Home() { return todayPlace.length; } - function determineCurrentHappyHourVerbiage() { - if (happyHoursRightNow() > 1) - return `There are ${happyHoursRightNow()} happy hours happening right now. Get on - it!`; - if (happyHoursRightNow() === 1) - return `There's only ${happyHoursRightNow()} happy hour happening right now. Get on - it!`; - - return `There are ${happyHoursRightNow()} happy hours happening right now.`; - } - const bars = places.slice(0, amountOfPlaces); return ( @@ -104,7 +94,7 @@ function Home() {
- {determineCurrentHappyHourVerbiage()} + {determineCurrentHappyHourVerbiage(happyHoursRightNow())}
From 40f8b614e6dbdc423dd5a2f15116ddaf125a6f72 Mon Sep 17 00:00:00 2001 From: Daniel Hart Date: Fri, 30 Aug 2024 16:23:52 -0500 Subject: [PATCH 4/4] Add pagination buttons based on total number of places --- components/Pagination.js | 45 +++++++++++++++++++++++++++++++++++++++ pages/api/places/[day].js | 25 +++++++++++++++++++++- pages/index.js | 34 ++++++++++++----------------- 3 files changed, 83 insertions(+), 21 deletions(-) create mode 100644 components/Pagination.js diff --git a/components/Pagination.js b/components/Pagination.js new file mode 100644 index 0000000..e7b9b7e --- /dev/null +++ b/components/Pagination.js @@ -0,0 +1,45 @@ +export default function Pagination({ page, limit, totalPlaces, onPageChange }) { + const numberOfPages = Math.ceil(totalPlaces / limit); + + const pageNumbers = []; + + for (let i = 1; i <= numberOfPages; i++) { + pageNumbers.push(i); + } + + return ( +
+ {page > 1 && ( +
onPageChange(page - 1)} + className='bg-purple-500 border-2 border-purple-500 mb-2 text-white font-bold py-2 px-4 rounded cursor-pointer' + > + Previous +
+ )} + + {pageNumbers.map((number) => ( +
onPageChange(number)} + className={`bg-purple-500 border-2 border-purple-500 mb-2 text-white font-bold py-2 px-4 rounded cursor-pointer ${ + number === page + ? "bg-transparent border-purple-300 text-purple-300" + : "" + }`} + > + {number} +
+ ))} + + {page < numberOfPages && ( +
onPageChange(page + 1)} + className='bg-purple-500 border-2 border-purple-500 mb-2 text-white font-bold py-2 px-4 rounded cursor-pointer' + > + Next +
+ )} +
+ ); +} diff --git a/pages/api/places/[day].js b/pages/api/places/[day].js index 2b1cb2f..4f83ea4 100644 --- a/pages/api/places/[day].js +++ b/pages/api/places/[day].js @@ -3,6 +3,11 @@ import { convertDayName } from "../../../lib/date"; export default async function handler(req, res) { let dayOfWeek = convertDayName(req.query.day); + const { page = 1, limit = 10, currentTime } = req.query; + + const pageNumber = parseInt(page, 10); + const pageSize = parseInt(limit, 10); + const currentTimeInt = parseInt(currentTime, 10); try { let { db } = await connectToDatabase(); @@ -58,12 +63,30 @@ export default async function handler(req, res) { }, }, { - $sort: { featured: -1 }, + $sort: { featured: -1 }, // Sort by featured descending + }, + { + $skip: (pageNumber - 1) * pageSize, + }, + { + $limit: pageSize, }, ]) .toArray(); + + const totalPlaces = await db.collection("places").countDocuments({ + enabled: true, + events: { + $elemMatch: { + keywords: "happyHour", + "eventSchedule.byDay": dayOfWeek, + }, + }, + }); + return res.json({ places: JSON.parse(JSON.stringify(places)), + totalPlaces, success: true, }); } catch (error) { diff --git a/pages/index.js b/pages/index.js index a42ae72..d7e476c 100644 --- a/pages/index.js +++ b/pages/index.js @@ -8,6 +8,7 @@ import { getDay } from "../lib/date"; import fetcher from "../lib/fetcher"; import Navigation from "../components/Navigation"; +import Pagination from "../components/Pagination"; import Loader from "../components/Loader"; import { getCurrentTime, hasActiveHappyHour } from "../lib/time"; import { @@ -19,14 +20,11 @@ import determineCurrentHappyHourVerbiage from "../components/TotalHappyHours"; import { useEffect } from "react"; function Home() { - const [amountOfPlaces, setAmountOfPlaces] = useState(10); + const [page, setPage] = useState(1); + const [limit, setLimit] = useState(10); const [userLocation, setUserLocation] = useState(null); const day = getDay(); - function showMorePlaces() { - setAmountOfPlaces(amountOfPlaces + 10); - } - useEffect(() => { const fetchUserLocation = async () => { try { @@ -51,8 +49,9 @@ function Home() { fetchUserLocation(); }, []); - let page = 1; - let limit = 10; + const handlePageChange = (newPage) => { + setPage(newPage); + }; const { data, error } = useSWR( `/api/places/${day}?page=${page}&limit=${limit}¤tTime=${getCurrentTime()}`, @@ -62,6 +61,7 @@ function Home() { if (!data) return ; if (!data.success) return
Failed to load
; let places = data.places; + let totalPlaces = data.totalPlaces; // sort by distance if (userLocation) { @@ -85,8 +85,6 @@ function Home() { return todayPlace.length; } - const bars = places.slice(0, amountOfPlaces); - return (
@@ -100,19 +98,15 @@ function Home() {
- {bars.map((bar) => ( + {places.map((bar) => ( ))} - {places.length <= amountOfPlaces ? null : ( -
- -
- )} +