V90aHjpt

1import React, { useEffect, useState } from "react";
2import "./App.css";
3import MapBox from "./mapBox";
4import InputBox from "./inputBox";
5import REPL from "./REPL/components/REPL";
6import { getSearchJSON } from "./overlay";
7
8// REMEMBER TO PUT YOUR API KEY IN A FOLDER THAT IS GITIGNORED!!
9// (for instance, /src/private/api_key.tsx)
10// import {API_KEY} from "./private/mapbox_api_key";
11// import {ACCESS_TOKEN} from "./private/mapbox_api_key"; // my attempt
12// import {ACCESS_TOKEN} from "./private/mapbox_api_key.js";
13
14/**
15 * mapboxAccessToken, [longitude, latitude, zoom], onMove, style, mapStyle
16 */
17function App() {
18  /* GOAL #1: whenever user enters a new searchWord in REPLINPUT textbox, pass that to
19        mapBox, which will take that searchWord and use it to call the backend (using fetch)
20        the result of that call to fetch will be a FeatureCollection of matching features
21        GOAL #2:
22        pass the feature collection to Overlay.TS as an overlay
23  
24      */
25
26  const [searchWord, setSearchWord] = useState("");
27
28  function handleSubmit(searchWord: string) {
29    console.log("in app, handle submit found search word: ", searchWord)
30    getSearchJSON(searchWord);
31  };
32
33  return (
34    <div className="App">
35      <InputBox searchWord={searchWord} setSearchWord={setSearchWord} handleSubmit={handleSubmit}/>
36      {/* <REPL searchWord={searchWord} setSearchWord={setSearchWord} /> */}
37    
38      <MapBox searchWord={searchWord} />
39
40      console.log("searchword IS ", searchWord);
41    </div>
42  );
43}
44
45export default App;
46