From d6855594214b4e0855b4075a4e4f9db19aa2e345 Mon Sep 17 00:00:00 2001 From: Aden Krakman Date: Tue, 1 Nov 2022 22:19:28 -0500 Subject: [PATCH] split up search bar and left side --- src/frontend/src/components/SearchBar.tsx | 53 +++++++++++++++++ .../src/components/SearchBarStyles.css | 33 +---------- .../{getApartments.tsx => getApts.tsx} | 6 +- .../components/getSearchBarSuggestions.tsx | 49 ++++++++++++++++ ...AndDisplayResults.tsx => populateLeft.tsx} | 57 ++++--------------- src/frontend/src/pages/MainPage.tsx | 6 +- 6 files changed, 121 insertions(+), 83 deletions(-) create mode 100644 src/frontend/src/components/SearchBar.tsx rename src/frontend/src/components/{getApartments.tsx => getApts.tsx} (93%) create mode 100644 src/frontend/src/components/getSearchBarSuggestions.tsx rename src/frontend/src/components/{SearchAndDisplayResults.tsx => populateLeft.tsx} (69%) diff --git a/src/frontend/src/components/SearchBar.tsx b/src/frontend/src/components/SearchBar.tsx new file mode 100644 index 000000000..d535398b9 --- /dev/null +++ b/src/frontend/src/components/SearchBar.tsx @@ -0,0 +1,53 @@ +import { Autocomplete, Stack, TextField } from '@mui/material'; +import React, { useState } from 'react'; +import data from '../staticdata.json'; +import { useSearchParams } from 'react-router-dom'; +import './SearchBarStyles.css'; +import getSuggestions from './getSearchBarSuggestions'; + +export default function SearchBar() { + // eslint-disable-next-line + const [query, setQuery] = useState(''); + const [searchParams, setSearchParams] = useSearchParams(); + const [search, setSearch] = useState(false); + // eslint-disable-next-line + const { names } = getSuggestions(query, search); + + const handleSubmit = ( + event: React.SyntheticEvent, + value: string + ) => { + event.preventDefault(); + setQuery(value); + if (value === '') { + searchParams.delete('searchQuery'); + searchParams.set('search', 'False'); + setSearch(false); + } else { + searchParams.set('searchQuery', value); + searchParams.set('search', 'True'); + setSearch(true); + } + setSearchParams(searchParams); + }; + + return ( + <> +

Apartment Search

+
+ + option.name)} + renderInput={(params) => ( + + )} + /> + +
+
+ + ); +} diff --git a/src/frontend/src/components/SearchBarStyles.css b/src/frontend/src/components/SearchBarStyles.css index b74d72757..ff8c72490 100644 --- a/src/frontend/src/components/SearchBarStyles.css +++ b/src/frontend/src/components/SearchBarStyles.css @@ -1,37 +1,8 @@ .search { - background-position: 14px 12px; - background-repeat: no-repeat; font-size: 16px; padding: 14px 20px 12px 45px; border: none; - margin-left: 500px; width: 500px; -} - -.box { - text-align: center; - border: black ridge 1px; - border-radius: 10px; - margin: 3px; - width: 20rem; - padding-left: 10px; -} - -.list { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - box-sizing: border-box; -} - -.myDropdown { - min-width: 230px; - overflow: auto; - z-index: 1; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - box-sizing: border-box; + margin: 0 auto; + display: block; } diff --git a/src/frontend/src/components/getApartments.tsx b/src/frontend/src/components/getApts.tsx similarity index 93% rename from src/frontend/src/components/getApartments.tsx rename to src/frontend/src/components/getApts.tsx index 354afbb82..0a36a96dd 100644 --- a/src/frontend/src/components/getApartments.tsx +++ b/src/frontend/src/components/getApts.tsx @@ -19,7 +19,7 @@ function getApartments(query: string, pageNum: number, selected: string[]) { // clears the apartments setApartments(emptyarray); pageNum = 1; - }, [query, selected]); + }, [selected]); useEffect(() => { // GETs new apartments whenever a button is selected @@ -33,7 +33,7 @@ function getApartments(query: string, pageNum: number, selected: string[]) { const source = CancelToken.source(); axios({ method: 'GET', //http://localhost:3333/mockdata?q=${query}&_page=${pageNum}&_limit=2 - url: `http://localhost:3333/mockdata?q=${query}&_page=${pageNum}&_limit=${limit}`, + url: `http://localhost:3333/mockdata?q=&_page=${pageNum}&_limit=${limit}`, cancelToken: source.token, }) .then((res) => { @@ -68,7 +68,7 @@ function getApartments(query: string, pageNum: number, selected: string[]) { return () => { source.cancel(); }; - }, [query, pageNum, selected]); + }, [pageNum, selected]); return { loading, error, apartments, hasMore }; } diff --git a/src/frontend/src/components/getSearchBarSuggestions.tsx b/src/frontend/src/components/getSearchBarSuggestions.tsx new file mode 100644 index 000000000..ee7e55913 --- /dev/null +++ b/src/frontend/src/components/getSearchBarSuggestions.tsx @@ -0,0 +1,49 @@ +import { useState, useEffect } from 'react'; +import axios from 'axios'; + +export default function getSuggestions(query: string, search: boolean) { + const emptyarray: { + name: string; + }[] = []; + const [names, setNames] = useState(emptyarray); + + useEffect(() => { + // clears the names + setNames(emptyarray); + }, [query]); + + useEffect(() => { + // GETs new names whenever a button is selected + const CancelToken = axios.CancelToken; + const source = CancelToken.source(); + axios({ + method: 'GET', + url: `http://localhost:3333/mockdata?search=${search}&searchQuery=${query}`, + cancelToken: source.token, + }) + .then((res) => { + const newNames: { + name: string; + }[] = []; + for (let i = 0; i < res.data.length; i++) { + if (res.data[i].name !== undefined) { + newNames.push({ + name: res.data[i].name, + }); + } + } + //setNames((prevNames) => { + // return [...new Set([...prevApartments, ...newApartments])]; + //}); + setNames(newNames); + }) + .catch((e) => { + if (axios.isCancel(e)) return; + }); + return () => { + source.cancel(); + }; + }, [query]); + + return { names }; +} diff --git a/src/frontend/src/components/SearchAndDisplayResults.tsx b/src/frontend/src/components/populateLeft.tsx similarity index 69% rename from src/frontend/src/components/SearchAndDisplayResults.tsx rename to src/frontend/src/components/populateLeft.tsx index e4be5d909..76ddbd079 100644 --- a/src/frontend/src/components/SearchAndDisplayResults.tsx +++ b/src/frontend/src/components/populateLeft.tsx @@ -1,18 +1,12 @@ -import { - Autocomplete, - Stack, - TextField, - ToggleButton, - ToggleButtonGroup, -} from '@mui/material'; +import { ToggleButton, ToggleButtonGroup } from '@mui/material'; import React, { useState, useRef, useCallback } from 'react'; import SingleCard from './SingleCard'; -import data from '../staticdata.json'; -import getApartments from './getApartments'; import { useSearchParams } from 'react-router-dom'; import './SearchBarStyles.css'; +import getApartments from './getApts'; -export default function Searching() { +export default function Populate() { + // eslint-disable-next-line const [query, setQuery] = useState(''); const [searchParams, setSearchParams] = useSearchParams(); const [pageNum, setPageNum] = useState(1); @@ -28,7 +22,7 @@ export default function Searching() { const observer = useRef(null); // prevents the infinite scroll from triggering forever - const lastBookElementRef = useCallback( + const lastAptElementRef = useCallback( (node: HTMLDivElement) => { if (loading) return; if (observer.current) observer.current.disconnect(); @@ -42,26 +36,6 @@ export default function Searching() { [loading, hasMore] ); - const handleSubmit = ( - event: React.SyntheticEvent, - value: string - ) => { - event.preventDefault(); - setQuery(value); - if (value === '') { - searchParams.delete('searchQuery'); - searchParams.set('search', 'False'); - } else { - searchParams.set('searchQuery', value); - searchParams.set('search', 'True'); - } - searchParams.set('numApts', '10'); - searchParams.set('pictures', 'True'); - searchParams.set('review', 'True'); - searchParams.set('aptId', id.toString()); - setSearchParams(searchParams); - }; - const handleToggle = ( event: React.SyntheticEvent, newSelected: string[] @@ -93,27 +67,16 @@ export default function Searching() { searchParams.delete('ratingSort'); searchParams.delete('popular'); } + searchParams.set('populate', 'True'); + if (newSelected.length == 0) { + searchParams.set('populate', 'False'); + } setSearchParams(searchParams); }; return (
-
-

Apartment Search

-
- - option.name)} - renderInput={(params) => ( - - )} - /> - -

+
); diff --git a/src/frontend/src/pages/MainPage.tsx b/src/frontend/src/pages/MainPage.tsx index 08f835a58..47dc667c6 100644 --- a/src/frontend/src/pages/MainPage.tsx +++ b/src/frontend/src/pages/MainPage.tsx @@ -1,11 +1,13 @@ import React from 'react'; -import Searching from '../components/SearchAndDisplayResults'; +import Populate from '../components/populateLeft'; +import SearchBar from '../components/SearchBar'; function MainPage() { //const [to, setTo] = useState(data[0]); return (
- + +
); }