split up search bar and left side

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<Element, Event>,
+      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 (
+      <>
+         <h1>Apartment Search</h1>
+         <div className="search">
+            <Stack spacing={2} sx={{ width: 500 }}>
+               <Autocomplete
+                  id="free-solo-demo"
+                  freeSolo
+                  onInputChange={handleSubmit}
+                  options={data.map((option) => option.name)}
+                  renderInput={(params) => (
+                     <TextField {...params} label="Search" />
+                  )}
+               />
+            </Stack>
+         </div>
+         <br />
+      </>
+   );
+}

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

src/frontend/src/components/getApartments.tsx → 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 };
 }

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

src/frontend/src/components/SearchAndDisplayResults.tsx → 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<IntersectionObserver | null>(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<Element, Event>,
-      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<Element, Event>,
       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 (
       <div className="App">
          <div>
-            <div style={{ display: 'flex', justifyContent: 'center' }}></div>
-            <h1>Apartment Search</h1>
-            <div className="search">
-               <Stack spacing={2} sx={{ width: 500 }}>
-                  <Autocomplete
-                     id="free-solo-demo"
-                     freeSolo
-                     onInputChange={handleSubmit}
-                     options={data.map((option) => option.name)}
-                     renderInput={(params) => (
-                        <TextField {...params} label="Search" />
-                     )}
-                  />
-               </Stack>
-            </div>
             <br />
             <ToggleButtonGroup
                color="primary"
@@ -134,7 +97,7 @@ export default function Searching() {
                   if (apartments.length === i + 1) {
                      return (
                         // handles last element
-                        <div key={i} ref={lastBookElementRef}>
+                        <div key={i} ref={lastAptElementRef}>
                            <SingleCard {...apartment} key={i} />
                         </div>
                      );

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 (
       <div>
-         <Searching />
+         <SearchBar />
+         <Populate />
       </div>
    );
 }