Created
February 11, 2023 17:45
-
-
Save mikeant42/36db317afa994315a28395ae6941c760 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, { useState, useEffect } from 'react'; | |
| import { Link } from 'react-router-dom'; | |
| import { render } from '@testing-library/react'; | |
| import axios from 'axios' | |
| import Map from 'react-store-locator' | |
| function pythagoreanDistanceBetweenPoints(lat1, lon1, lat2, lon2) { | |
| const R = 6371e3; | |
| const x = (lon2 - lon1) * Math.cos((lat1 + lat2) / 2); | |
| const y = (lat2 - lat1); | |
| const d = Math.sqrt(x * x + y * y) * R; | |
| return d; | |
| } | |
| // haversine distance | |
| // returns distance in km | |
| function getDistanceFromLatLonInKm(lat1, lon1, lat2, lon2) { | |
| var R = 6371; | |
| var dLat = deg2rad(lat2 - lat1); | |
| var dLon = deg2rad(lon2 - lon1); | |
| var a = | |
| Math.sin(dLat / 2) * Math.sin(dLat / 2) + | |
| Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) * | |
| Math.sin(dLon / 2) * Math.sin(dLon / 2) | |
| ; | |
| var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); | |
| var d = R * c; | |
| return d; | |
| } | |
| function deg2rad(deg) { | |
| return deg * (Math.PI / 180) | |
| } | |
| async function GeoCode(query) { | |
| const url = ( | |
| 'https://api.geocod.io/v1.7/geocode/?' + | |
| new URLSearchParams({ q: query, format: 'simple', api_key: "3aa3367d666ddefa9d6d9ddde36df638df9de3d" }).toString() | |
| ); | |
| const result = await fetch(url) | |
| .then(response => response.json()); | |
| console.log('Fetched from: ' + url); | |
| return (result); | |
| } | |
| function create2DArray(numRows, numColumns) { | |
| let array = new Array(numRows); | |
| for (let i = 0; i < numColumns; i++) { | |
| array[i] = new Array(numColumns); | |
| } | |
| return array; | |
| } | |
| function sortAscending(a, b) { | |
| if (a[1] === b[1]) { | |
| return 0; | |
| } | |
| else { | |
| return (a[1] < b[1]) ? -1 : 1; | |
| } | |
| } | |
| function SearchBar({ placeholder, data }) { | |
| const [filteredData, setFilteredData] = useState([]); | |
| const [showMap, setShowMap] = useState(false); | |
| const [showList, setShowList] = useState(true); | |
| const maxLocations = 10; | |
| const maxDistanceKm = 15; | |
| let zipCodeEntered = false; | |
| const searchFilter = (e) => { | |
| if (e.keyCode === 13) { | |
| const searchWord = e.target.value; | |
| var isValidZip = /(^\d{5}$)|(^\d{5}-\d{4}$)/.test(searchWord); | |
| var newFilter = null; | |
| let distances = create2DArray(maxLocations, maxLocations); | |
| if (isValidZip) { | |
| zipCodeEntered = true; | |
| console.log("Valid zip"); | |
| var lat, long = 0 | |
| GeoCode(searchWord).then(data => { | |
| lat = data.lat; | |
| long = data.lng; | |
| }).then(x => { | |
| newFilter = data.filter((value) => { | |
| var distance = getDistanceFromLatLonInKm(lat, long, value.Latitude, value.Longitude); | |
| distances[value.STORE] = distance; | |
| if (distance < maxDistanceKm) { | |
| console.log(value.Zip + " - " + searchWord + " --- distance: --- " + distance); | |
| } | |
| return distance < 15; | |
| }) | |
| // console.log(distances); | |
| // distances.sort(sortAscending); | |
| // newFilter = distances; | |
| }).then(x => { | |
| if (searchWord === "") { | |
| filteredData([]); | |
| } | |
| else { | |
| setFilteredData(newFilter); | |
| } | |
| }); | |
| } else { | |
| zipCodeEntered = false; | |
| newFilter = data.filter((value) => { | |
| return (value.ADDRESS.toLowerCase() + " " + value.CITY.toLowerCase() + " " + value.ZIP).includes(searchWord.toLowerCase()); | |
| }) | |
| if (searchWord === "") { | |
| filteredData([]); | |
| } | |
| else { | |
| setFilteredData(newFilter); | |
| } | |
| } | |
| } | |
| } | |
| return ( | |
| <div> | |
| <input | |
| type='text' | |
| style={{ | |
| display: 'block', | |
| margin: 'auto', | |
| width: '30%' | |
| }} | |
| placeholder={placeholder} | |
| onKeyDown={searchFilter} | |
| /> | |
| <div | |
| style={{ | |
| marginTop: '3vh', | |
| backgroundColor: 'white', | |
| paddingTop: 14, | |
| paddingBottom: 14, | |
| paddingRight: 28, | |
| paddingLeft: 28, | |
| fontSize: 16, | |
| //cursor: pointer, | |
| // display: inlineBlock | |
| }} | |
| > | |
| <h1 | |
| className='text-center' | |
| ><button onClick={(event) => { setShowList(true); setShowMap(false); }}>List</button> | |
| <button onClick={(event) => { setShowList(false); setShowMap(true); }}>Map</button> </h1> | |
| </div> | |
| {showList && | |
| filteredData.length >= 1 && ( | |
| <div | |
| style={{ | |
| marginTop: 10, | |
| }} | |
| > | |
| {filteredData.slice(0, maxLocations).map((value, key) => { | |
| //key = value.ADDRESS; | |
| return <div | |
| className='row border border-3 border-secondary bg-light' | |
| style={{ | |
| width: '60%', | |
| margin: 'auto', | |
| marginTop: 20, | |
| "--bs-border-opacity": 0.5, | |
| }} | |
| > | |
| <div | |
| className='col-7' | |
| ><Link to="/home">{value.ADDRESS}, {value.CITY}, {value.STATE} {value.Zip}, </Link></div> | |
| <div | |
| className='col-5' | |
| > | |
| <p>WAIT TIME <strong style={{ color: 'red', fontSize: 25 }}>10</strong> mins</p> | |
| </div> | |
| </div> | |
| })} | |
| </div>) | |
| } | |
| { | |
| showMap && filteredData.length >= 1 && ( | |
| <div | |
| style={{ | |
| marginTop: 10, | |
| }} | |
| > | |
| { | |
| } | |
| </div>) | |
| } | |
| </div > | |
| ) | |
| } | |
| export default SearchBar; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment