Homepage date time search

client/public/style.css

@@ -32,12 +32,6 @@
   left: 0px;
 }
 
-
-
-
-
-
-
 .calendar {
   border-radius: 8px;
   font-size: 2vh;
@@ -61,48 +55,9 @@
 
 .categories {
   width: 90%;
-  overflow-x: scroll;
-}
-
-.eventContainer {
-  display: flex;
-  flex-direction: column;
-  width: 100vw;
-  margin: 0;
-  font-family: 'Questrial', sans-serif;
-  font-size: 2vh;
+  /* overflow-x:; */
 }
 
-.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;

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,7 +26,7 @@ const App = () => {
 
   return (
     <div>
-      <Header />
+      <Header/>
       <Box
         backgroundImage="url('./images/RaccoonParty.jpeg')"
         backgroundSize='cover'

client/src/components/homepage/event.jsx

@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom';
 
 const Event = ({ event }) => {
   return (
-    <GridItem fontSize='2vh' textAlign='center' justifyContent='center' alignItems='center' h='52vh' marginLeft='auto' marginRight='auto'>
+    <GridItem fontSize='2vh' textAlign='center' justifyContent='center' alignItems='center' h='52vh' marginLeft='2.5vw' marginRight='2.5vw'>
       <Flex alignItems='center' justifyContent='space-around' w='32vh'>
         <Link to={`/events/${event.id}`} style={{textDecoration: 'none'}}>
           <Image src={event.mainphoto} align='center' w='32vh' h='40vh' objectFit='cover' borderRadius='5%' marginBottom='0.5vw'/>

client/src/components/homepage/filterList.jsx

@@ -16,7 +16,7 @@ const FilterList = ({ category, events, handleReset }) => {
 
   return (
     <Box pl="5em">
-      <HStack spacing="5">
+      <HStack spacing="5" marginBottom='2.5vh'>
         <Box>Filter by: {category}</Box>
         <Button onClick={handleReset}>
           Reset <Icon as={GrPowerReset} w={4} h={4} pl="2px" />

client/src/components/homepage/homepage.jsx

@@ -6,8 +6,9 @@ import {
   Flex,
   Heading,
   Box,
+  IconButton
 } from "@chakra-ui/react";
-import { ChevronLeftIcon, ChevronRightIcon } from "@chakra-ui/icons";
+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";
@@ -26,6 +27,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"]);
   const [label, setLabel] = useState("");
@@ -65,40 +67,67 @@ const HomePage = ({ searchEvent }) => {
     setLabel("");
   };
 
+  const searchEventsTime = () => {
+    const newDate = startDate.toLocaleDateString()
+    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)
+      })
+      .catch((error) => {
+        console.log(error)
+      })
+  }
+
   return (
-    <Flex alignItems="center" w="100vw">
-      <div>
+    <Flex
+      flexDirection='column'
+    >
+      <Flex
+        marginTop='2vw'
+        marginBottom='0'
+        flexDirection='row'
+        justifyContent='space-evenly'
+      >
         <Flex
-          marginTop="2vw"
-          marginBottom="0"
-          flexDirection="row"
-          justifyContent="center"
+          flexDirection='row'
+          marginLeft='2vw'
+          justifyContent='space-around'
+        >
+          <DatePicker
+            className='calendar'
+            closeOnScroll={true}
+            selected={startDate}
+            onChange={(date) => {setStartDate(date)}}
+            type='submit'
+          />
+          <TimeRangePicker
+            className='react-timerange-picker'
+            onChange={onChange}
+            value={value}
+            type='submit'
+          />
+          <IconButton aria-label='Search database' icon={<SearchIcon />}
+            backgroundColor='brand.500'
+            color='brand.400'
+            size='lg'
+            textStyle='button'
+            fontSize='1vw'
+            _hover={{
+              backgroundColor: 'brand.400',
+              color: 'brand.500'
+            }}
+            onClick={(e) => {searchEventsTime()}}
+          />
+        </Flex>
+        <Flex
+          flexDirection='row'
+          w='50vw'
+          alignItems='center'
+          justifyContent='space-around'
+          marginRight='2vw'
         >
-          <Flex
-            flexDirection="row"
-            alignItems="center"
-            justifyContent="center"
-            marginLeft="2vw"
-          >
-            <DatePicker
-              className="calendar"
-              closeOnScroll={true}
-              selected={startDate}
-              onChange={(date) => setStartDate(date)}
-            />
-            <TimeRangePicker
-              className="react-timerange-picker"
-              onChange={onChange}
-              value={value}
-            />
-          </Flex>
-          <Flex
-            flexDirection="row"
-            w="70vw"
-            alignItems="center"
-            justifyContent="space-around"
-            marginRight="2vw"
-          >
             <ChevronLeftIcon
               ref={slideLeft}
               w={8}
@@ -109,9 +138,15 @@ const HomePage = ({ searchEvent }) => {
                 categories.current.scrollBy(-500, 0);
               }}
             />
-            {/* <div ref={categories} className='categories'> */}
-            <Box w="90%" overflowX="auto">
-              <ButtonGroup spacing={6} direction="row" align="center">
+            <Box w='90%'
+              overflowX='hidden'
+              ref={categories}
+            >
+              <ButtonGroup
+                spacing={6}
+                direction="row"
+                align="center"
+              >
                 {categoriesList.map((category, idx) => (
                   <Button
                     backgroundColor="brand.400"
@@ -128,7 +163,6 @@ const HomePage = ({ searchEvent }) => {
                 ))}
               </ButtonGroup>
             </Box>
-            {/* </div> */}
             <ChevronRightIcon
               ref={slideRight}
               w={8}
@@ -145,7 +179,7 @@ const HomePage = ({ searchEvent }) => {
           fontSize="5vh"
           marginLeft="5vw"
           marginTop="2vw"
-          marginBottom="2vw"
+          marginBottom='1vw'
         >
           Popular near you...
         </Heading>
@@ -170,9 +204,8 @@ const HomePage = ({ searchEvent }) => {
             })}
           </Grid>
         ) : null}
-      </div>
     </Flex>
   );
 };
 
-export default HomePage;
+export default HomePage;

client/src/components/preferences/Preferences.jsx

@@ -209,7 +209,7 @@ const Preferences = ({userId}) => {
 
     return (
       <div>
-        <Box bg='tomato' w='100%' p={4} mt={2} mb={4} color='white'>
+        <Box bg='brand.400' w='100%' p={4} mt={2} mb={4} color='white'>
           <Heading>{currentStepData.label}</Heading>
           <p>{currentStepData.question}</p>
         </Box>
@@ -233,17 +233,17 @@ const Preferences = ({userId}) => {
 
       <div className="controls">
         {stepIndex > 0 &&
-          <Box as='button' onClick={handlePrevious} borderRadius='md' bg='tomato' color='white' mr={2} px={4} h={8}>
+          <Box as='button' onClick={handlePrevious} borderRadius='md' bg='brand.400' color='white' mr={2} px={4} h={8}>
            Previous
           </Box>
         }
         {stepIndex < steps.length - 1 &&
-          <Box as='button' onClick={handleNext} borderRadius='md' bg='tomato' color='white' px={4} h={8}>
+          <Box as='button' onClick={handleNext} borderRadius='md' bg='brand.400' color='white' px={4} h={8}>
             Next
           </Box>
         }
         {stepIndex === steps.length - 1 &&
-          <Box as='button' onClick={handleFinish} borderRadius='md' bg='tomato' color='white' px={4} h={8}>
+          <Box as='button' onClick={handleFinish} borderRadius='md' bg='brand.400' color='white' px={4} h={8}>
             Finish
           </Box>
         }

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);

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);
 }