conifgure correct urls for 'get'

src/backend/app.py

@@ -6,11 +6,12 @@
 from flask import Flask, request
 from pages.login import Login
 from pages.mainpage import MainPage
+from flask_cors import CORS
 
 # from logging import FileHandler, WARNING
 
 app = Flask(__name__)
-
+CORS(app)
 
 @app.route("/login", methods=["POST", "GET"])
 def login():
@@ -80,7 +81,7 @@ def mainpage_get(mainpage_obj: MainPage, args: MultiDict):
         "params", ["num_apts", "apt_id", "search_query", "price_sort", "rating_sort"]
     )
     param = params(
-        args.get("numApts", type=int),
+        #args.get("numApts", type=int),
         args.get("aptId", type=int),
         args.get("searchQuery", type=str),
         args.get("priceSort", type=int),

src/frontend/db.json

@@ -1,7 +1,7 @@
 {
   "mockdata": [
     {
-      "id": 1,
+      "id": 8,
       "name": "Champaign park",
       "address": "West Green",
       "rating": 0,
@@ -17,7 +17,7 @@
       "price_max": 1000
     },
     {
-      "id": 3,
+      "id": 7,
       "name": "Town and County",
       "address": "Healey street",
       "rating": 0,
@@ -49,15 +49,15 @@
       "price_max": 1000
     },
     {
-      "id": 7,
+      "id": 3,
       "name": "Champaign park",
       "address": "Wright street",
       "rating": 0,
       "price_min": 500,
       "price_max": 1000
     },
     {
-      "id": 8,
+      "id": 2,
       "name": "Champaign park",
       "address": "West springfield",
       "rating": 0,

src/frontend/package.json

@@ -26,6 +26,7 @@
     "react-router-dom": "^6.4.2",
     "react-scripts": "^5.0.1",
     "styled-components": "^5.3.6",
+    "underscore": "^1.13.6",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -52,6 +53,7 @@
   "proxy": "http://localhost:5000",
   "devDependencies": {
     "@types/styled-components": "^5.1.26",
+    "@types/underscore": "^1.11.4",
     "prettier": "2.7.1",
     "typescript": "^4.8.4"
   }

src/frontend/src/components/SearchBar.tsx

@@ -1,19 +1,16 @@
 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 = (
+   const handleChange = (
       event: React.SyntheticEvent<Element, Event>,
       value: string
    ) => {
@@ -39,8 +36,8 @@ export default function SearchBar() {
                <Autocomplete
                   id="free-solo-demo"
                   freeSolo
-                  onInputChange={handleSubmit}
-                  options={data.map((option) => option.name)}
+                  onInputChange={handleChange}
+                  options={names.map((option) => option.name)}
                   renderInput={(params) => (
                      <TextField {...params} label="Search" />
                   )}

src/frontend/src/components/getApts.tsx

@@ -1,7 +1,12 @@
 import { useState, useEffect } from 'react';
 import axios from 'axios';
 
-function getApartments(query: string, pageNum: number, selected: string[]) {
+function getApartments(
+   query: string,
+   pageNum: number,
+   priceSort: string[],
+   ratingSort: string[]
+) {
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(false);
    const emptyarray: {
@@ -19,21 +24,28 @@ function getApartments(query: string, pageNum: number, selected: string[]) {
       // clears the apartments
       setApartments(emptyarray);
       pageNum = 1;
-   }, [selected]);
+   }, [priceSort, ratingSort]);
 
    useEffect(() => {
-      // GETs new apartments whenever a button is selected
+      // gets new apartments on initial load and when a button is selected
       let limit = 2;
       if (query === '') {
          limit = 10;
       }
+      const priceNum = convertPriceSort(priceSort);
+      const ratingNum = convertRatingSort(ratingSort);
+      let populate = 'True';
+      if (priceNum === 0 && ratingNum === 0) {
+         populate = 'False';
+      }
       setLoading(true);
       setError(false);
       const CancelToken = axios.CancelToken;
       const source = CancelToken.source();
       axios({
+         // http://127.0.0.1:5000/?populate=${populate}&priceSort=${priceNum}&ratingSort=${ratingNum}&numApts=${limit}&_page=${pageNum}
          method: 'GET', //http://localhost:3333/mockdata?q=${query}&_page=${pageNum}&_limit=2
-         url: `http://localhost:3333/mockdata?q=&_page=${pageNum}&_limit=${limit}`,
+         url: ` http://127.0.0.1:5000/?populate=${populate}&priceSort=${priceNum}&ratingSort=${ratingNum}&numApts=${limit}`,
          cancelToken: source.token,
       })
          .then((res) => {
@@ -45,7 +57,7 @@ function getApartments(query: string, pageNum: number, selected: string[]) {
                price_max: number;
             }[] = [];
             for (let i = 0; i < res.data.length; i++) {
-               if (res.data[i].name !== undefined) {
+               if (res.data[i].name !== undefined && pageNum == 1) {
                   newApartments.push({
                      name: res.data[i].name,
                      address: res.data[i].address,
@@ -68,9 +80,29 @@ function getApartments(query: string, pageNum: number, selected: string[]) {
       return () => {
          source.cancel();
       };
-   }, [pageNum, selected]);
+   }, [pageNum, priceSort, ratingSort]);
 
    return { loading, error, apartments, hasMore };
 }
 
+function convertPriceSort(sort: string[]) {
+   if (sort.includes('low-high')) {
+      return -1;
+   } else if (sort.includes('high-low')) {
+      return 1;
+   } else {
+      return 0;
+   }
+}
+
+function convertRatingSort(sort: string[]) {
+   if (sort.includes('least popular')) {
+      return -1;
+   } else if (sort.includes('most popular')) {
+      return 1;
+   } else {
+      return 0;
+   }
+}
+
 export default getApartments;

src/frontend/src/components/getSearchBarSuggestions.tsx

@@ -13,12 +13,12 @@ export default function getSuggestions(query: string, search: boolean) {
    }, [query]);
 
    useEffect(() => {
-      // GETs new names whenever a button is selected
+      // gets new names whenever query changes
       const CancelToken = axios.CancelToken;
       const source = CancelToken.source();
       axios({
          method: 'GET',
-         url: `http://localhost:3333/mockdata?search=${search}&searchQuery=${query}`,
+         url: `http://127.0.0.1:5000/?search=${search}&searchQuery=${query}`,
          cancelToken: source.token,
       })
          .then((res) => {
@@ -32,9 +32,6 @@ export default function getSuggestions(query: string, search: boolean) {
                   });
                }
             }
-            //setNames((prevNames) => {
-            //   return [...new Set([...prevApartments, ...newApartments])];
-            //});
             setNames(newNames);
          })
          .catch((e) => {