From 0bc8157d42a6feb1c1230d0b9a33975d1ea3dfc1 Mon Sep 17 00:00:00 2001 From: Catherine Chiu Date: Wed, 2 Feb 2022 17:50:34 -0800 Subject: [PATCH 1/5] event search by date and time --- client/public/style.css | 41 +----- client/src/components/App.jsx | 25 +++- client/src/components/homepage/event.jsx | 2 +- client/src/components/homepage/homepage.jsx | 145 ++++++++++++-------- server/controllers/events.js | 6 +- server/models/events.js | 10 +- 6 files changed, 118 insertions(+), 111 deletions(-) diff --git a/client/public/style.css b/client/public/style.css index 8e6d14b..fe2ffd3 100644 --- a/client/public/style.css +++ b/client/public/style.css @@ -61,48 +61,9 @@ .categories { width: 90%; - overflow-x: scroll; + /* overflow-x:; */ } -.eventContainer { - display: flex; - flex-direction: column; - width: 100vw; - margin: 0; - font-family: 'Questrial', sans-serif; - font-size: 2vh; -} - -.eventRows { - display: flex; - justify-content: space-evenly; - flex-direction: row; - margin-top: 2vw; - margin-bottom: 5vw; - margin-left: 2.5vw; - margin-right: 2.5vw; -} - -.homePageEventCard { - width: 35vh; - height: 50vh; - text-align: center; - margin-left: 1.5vw; - margin-right: 1.5vw; -} - -.homePageEventPhoto { - width: 32vh; - height: 48vh; - text-align: center; - border-radius: 5%; - object-fit: cover; -} - - -.homePageRelative { - position: relative; -} .pepe { height: 10vw; diff --git a/client/src/components/App.jsx b/client/src/components/App.jsx index 9edfcb5..3dcac4e 100644 --- a/client/src/components/App.jsx +++ b/client/src/components/App.jsx @@ -23,12 +23,14 @@ import { getAuth } from "firebase/auth"; const App = () => { + const auth = getAuth(); + const user = auth.currentUser; const [search, setSearch] = useState(null) const [searchEvent, setSearchEvent] = useState([]) - const auth = getAuth(); - const user = auth.currentUser; + const [startDate, setStartDate] = useState(new Date()); + const [value, onChange] = useState(['10:00', '11:00']); const searchEvents = (e) => { e.preventDefault(); @@ -41,6 +43,17 @@ const App = () => { }) } + const searchEventsTime = (e) => { + e.preventDefault(); + axios.get('/api/searchEvents/time', { params: { date: startDate, validFrom: value[0], validTo: value[1]}}) + .then((response) => { + console.log(response.data) + }) + .catch((error) => { + console.log(error) + }) + } + if (user) { return (
@@ -103,6 +116,10 @@ const App = () => {
) @@ -165,6 +182,10 @@ const App = () => { ) diff --git a/client/src/components/homepage/event.jsx b/client/src/components/homepage/event.jsx index dc654a8..a919ca9 100644 --- a/client/src/components/homepage/event.jsx +++ b/client/src/components/homepage/event.jsx @@ -4,7 +4,7 @@ import { Link } from 'react-router-dom'; const Event = ({ event }) => { return ( - + diff --git a/client/src/components/homepage/homepage.jsx b/client/src/components/homepage/homepage.jsx index bf3b1d0..07279bb 100644 --- a/client/src/components/homepage/homepage.jsx +++ b/client/src/components/homepage/homepage.jsx @@ -1,5 +1,5 @@ -import { Button, ButtonGroup, Grid, GridItem, Flex, Heading, Box } from '@chakra-ui/react'; -import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons' +import { Button, ButtonGroup, Grid, GridItem, Flex, Heading, Box, IconButton} from '@chakra-ui/react'; +import { ChevronLeftIcon, ChevronRightIcon, SearchIcon } from '@chakra-ui/icons' import React, { useRef, useEffect, useState } from 'react'; import DatePicker from 'react-datepicker'; import '../../../../node_modules/react-datepicker/dist/react-datepicker.css' @@ -18,6 +18,7 @@ const HomePage = ( { searchEvent } ) => { const [events, setEvents] = useState([]); const [categoriesList, setCategoriesList] = useState([]); + const [startDate, setStartDate] = useState(new Date()); const [value, onChange] = useState(['10:00', '11:00']); @@ -40,24 +41,50 @@ const HomePage = ( { searchEvent } ) => { } }, [searchEvent]) + const searchEventsTime = () => { + console.log('hi') + const newDate = startDate.toLocaleDateString() + axios.get('/api/searchEvents/time', { params: { date: newDate, validFrom: value[0], validTo: value[1]}}) + .then((response) => { + setEvents(response.data) + }) + .catch((error) => { + console.log(error) + }) + } + return ( - -
- - - setStartDate(date)} - /> - - - - + + + {setStartDate(date)}} + type='submit' + /> + + } + backgroundColor='brand.500' + color='brand.400' + size='lg' + textStyle='button' + fontSize='1vw' + _hover={{ + backgroundColor: 'brand.400', + color: 'brand.500' + }} + onClick={(e) => {searchEventsTime()}} + /> + + + { cursor='pointer' onClick={() => {categories.current.scrollBy(-500, 0)}} /> - {/*
*/} - - - {categoriesList.map((category, idx) => ( - - ))} - - - {/*
*/} + + + {categoriesList.map((category, idx) => ( + + ))} + + { cursor='pointer' onClick={() => {categories.current.scrollBy(500, 0)}} /> + + + + + Popular near you... + + + + + {events.map((event, idx) => { + return ( + + ) + })} + - - - Popular near you... - - - {events.map((event, idx) => { - return ( - - ) - })} - -
) } diff --git a/server/controllers/events.js b/server/controllers/events.js index 8299bb9..5f19fde 100644 --- a/server/controllers/events.js +++ b/server/controllers/events.js @@ -53,9 +53,11 @@ const getSpecificEvent = async (req, res) => { const getEventsByTime = async (req, res) => { let limit = req.query.limit || 10; let page = req.query.page || 0; - let minutes = req.query.minutes; + let date = req.query.date; + let validFrom = req.query.validFrom; + let validTo = req.query.validTo; try { - const { rows } = await models.getEventsByTime(minutes,limit, page); + const { rows } = await models.getEventsByTime(date, validFrom, validTo, limit, page); res.send(rows); } catch (e) { res.status(500).send(e); diff --git a/server/models/events.js b/server/models/events.js index eac272d..da4db90 100644 --- a/server/models/events.js +++ b/server/models/events.js @@ -20,14 +20,14 @@ const getSpecificEvent = (id) => { return db.pool.query(query); } -const getEventsByTime = (minutes,limit = 10, page = 0) => { - let offset = limit * page; +const getEventsByTime = (date, validFrom, validTo, limit = 10, page = 0) => { const query = ` select * from events - where event_length_minutes < ${minutes} - limit ${limit} - offset ${offset}; + where date='${date}' + and start_time + between '${validFrom}' + and '${validTo}'; ` return db.pool.query(query); } From 260e007868287911bb402e5e890338f36da5f043 Mon Sep 17 00:00:00 2001 From: Catherine Chiu Date: Wed, 2 Feb 2022 17:55:38 -0800 Subject: [PATCH 2/5] time search all time range on null --- client/src/components/homepage/homepage.jsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/client/src/components/homepage/homepage.jsx b/client/src/components/homepage/homepage.jsx index 07279bb..c94d902 100644 --- a/client/src/components/homepage/homepage.jsx +++ b/client/src/components/homepage/homepage.jsx @@ -42,9 +42,10 @@ const HomePage = ( { searchEvent } ) => { }, [searchEvent]) const searchEventsTime = () => { - console.log('hi') const newDate = startDate.toLocaleDateString() - axios.get('/api/searchEvents/time', { params: { date: newDate, validFrom: value[0], validTo: value[1]}}) + const from = value ? value[0] : '00:00' + const to = value ? value[1] : '23:59' + axios.get('/api/searchEvents/time', { params: { date: newDate, validFrom: from, validTo: to}}) .then((response) => { setEvents(response.data) }) From 89a5b8bd37dd131af70099c68bcef1fe72194230 Mon Sep 17 00:00:00 2001 From: Catherine Chiu Date: Wed, 2 Feb 2022 18:23:34 -0800 Subject: [PATCH 3/5] match color on interests/preferences page --- client/src/components/homepage/filterList.jsx | 2 +- client/src/components/homepage/homepage.jsx | 2 +- client/src/components/preferences/Preferences.jsx | 8 ++++---- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/client/src/components/homepage/filterList.jsx b/client/src/components/homepage/filterList.jsx index 7c7873c..f524cab 100644 --- a/client/src/components/homepage/filterList.jsx +++ b/client/src/components/homepage/filterList.jsx @@ -16,7 +16,7 @@ const FilterList = ({ category, events, handleReset }) => { return ( - + Filter by: {category} + + + + Date: Wed, 2 Feb 2022 19:55:24 -0800 Subject: [PATCH 5/5] revert header in App.jsx for PR #77 --- client/src/components/App.jsx | 34 ++-------------------------------- 1 file changed, 2 insertions(+), 32 deletions(-) diff --git a/client/src/components/App.jsx b/client/src/components/App.jsx index b7df810..a74516f 100644 --- a/client/src/components/App.jsx +++ b/client/src/components/App.jsx @@ -1,19 +1,7 @@ import { Header } from './header'; import HomePage from './homepage/homepage.jsx'; import React, { useState, useEffect } from "react"; -import { - Box, Heading, Spacer, Menu, Stack, FormControl, Input, - MenuButton, - MenuList, - MenuItem, - MenuItemOption, - MenuGroup, - MenuOptionGroup, - MenuDivider, - Button, - Flex, - extendTheme -} from '@chakra-ui/react'; +import { Box, Input, Button, Flex} from '@chakra-ui/react'; import { ChevronDownIcon } from '@chakra-ui/icons'; import { Link } from "react-router-dom"; import axios from 'axios'; @@ -38,25 +26,7 @@ const App = () => { return (
- - - bored tour - - - - - }> - Username - - - My Events - My Friends - My Interests - - - - - +