vK9LxwdK

1import React, { useEffect, useState } from "react";
2import "./App.css";
3import MapBox from "./mapBox";
4import { FeatureCollection } from "geojson";
5import InputBox from "./inputBox";
6import REPL from "./REPL/components/REPL";
7import { getSearchJSON, overlayData } from "./overlay";
8
9// REMEMBER TO PUT YOUR API KEY IN A FOLDER THAT IS GITIGNORED!!
10// (for instance, /src/private/api_key.tsx)
11// import {API_KEY} from "./private/mapbox_api_key";
12// import {ACCESS_TOKEN} from "./private/mapbox_api_key"; // my attempt
13// import {ACCESS_TOKEN} from "./private/mapbox_api_key.js";
14
15/**
16 * mapboxAccessToken, [longitude, latitude, zoom], onMove, style, mapStyle
17 */
18function App() {
19  /* GOAL #1: whenever user enters a new searchWord in REPLINPUT textbox, pass that to
20        mapBox, which will take that searchWord and use it to call the backend (using fetch)
21        the result of that call to fetch will be a FeatureCollection of matching features
22        GOAL #2:
23        pass the feature collection to Overlay.TS as an overlay
24  
25      */
26  const emptyFeatureCollection: FeatureCollection = {
27    type: "FeatureCollection",
28    features: [],
29  };
30
31  const [searchWord, setSearchWord] = useState("");
32  const [searchOverlay, setSearchOverlay] = useState<GeoJSON.FeatureCollection>(emptyFeatureCollection);
33
34  async function handleSubmit(searchWord: string) {
35    
36    try {
37      const result = await getSearchJSON(searchWord);
38      setSearchOverlay(result);
39    } catch (error) {
40      console.error("Search failed:", error);
41      // Handle the error, e.g., show an error message to the user
42    }
43      // console.log("in app, handle submit found search word: ", searchWord)
44      // const searchResult = await getSearchJSON(searchWord);
45      // return searchResult
46      // // Do something with the search result, e.g., update state or pass it to another component
47      // console.log("Search result:", searchResult);
48    
49  }
50
51  return (
52    <div className="App">
53      <InputBox searchWord={searchWord} setSearchWord={setSearchWord} handleSubmit={handleSubmit}/>
54      {/* <REPL searchWord={searchWord} setSearchWord={setSearchWord} /> */}
55    
56      <MapBox searchOverlay = {searchOverlay} setSearchOverlay = {setSearchOverlay} searchWord={searchWord} />
57
58      console.log("searchword IS ", searchWord);
59    </div>
60  );
61}
62
63export default App;
64