Skip to content

Commit

Permalink
Ob/issue #17 search bar (#38)
Browse files Browse the repository at this point in the history
* Co-authored-by: Torey Littlefield <toreylittlefield@users.noreply.github.com>

* searchbar compenent

* searchbar compenent

* LocationSearch

* remove node modules in packages/client

* update packages and fix root package.json

* move eslint install to root package.json

* made changes accordinly

* search bar update

locationsearch updated with the suggestions recieved

* fix import BottomNav compile error

---------

Co-authored-by: Torey Littlefield <52614742+toreylittlefield@users.noreply.github.com>
  • Loading branch information
Netdreion and toreylittlefield committed May 27, 2023
1 parent 8034f04 commit ea058db
Show file tree
Hide file tree
Showing 9 changed files with 209 additions and 65 deletions.
84 changes: 42 additions & 42 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

10 changes: 2 additions & 8 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,9 @@
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,css,scss,md}\""
},
"devDependencies": {
"@heroicons/react": "^2.0.16",
"eslint": "^8.40.0",
"prettier": "^2.8.5",
"typescript": "4.9.5",
"@types/leaflet": "^1.9.3",
"autoprefixer": "^10.4.14",
"postcss": "^8.4.21",
"postcss-import": "^15.1.0",
"tailwindcss": "^3.2.7"
"typescript": "^5.0.4"
},
"engines": {
"node": ">=14.0.0"
Expand All @@ -23,4 +18,3 @@
"packages/*"
]
}

16 changes: 8 additions & 8 deletions packages/client/lib/components/BottomNav.jsx
Original file line number Diff line number Diff line change
@@ -1,29 +1,29 @@
import { useState } from "react";
import BottomNavItem from "./BottomNavItem.jsx";
import { useState } from 'react';
import BottomNavItem from './BottomNavItem.jsx';
import {
HomeIcon,
MagnifyingGlassIcon,
UserIcon,
PlusCircleIcon,
MapPinIcon,
} from "@heroicons/react/24/outline";
} from '@heroicons/react/24/outline';

const BottomNav = () => {
const [active, setActive] = useState(0)
const [active, setActive] = useState(0);

return (
<div className="absolute bottom-0 z-[9999] w-full h-16 text-foreground/30 rounded-t-2xl p-1 grid grid-cols-5 justify-items-center items-center bg-white">
<BottomNavItem
setActive={() => setActive(0)}
selected={active === 0 ? true : false}
name={"Home"}
name={'Home'}
>
<HomeIcon className="h-6 w-6 pointer-events-none" />
</BottomNavItem>
<BottomNavItem
setActive={() => setActive(1)}
selected={active === 1 ? true : false}
name={"Search"}
name={'Search'}
>
<MagnifyingGlassIcon className="h-6 w-6 pointer-events-none" />
</BottomNavItem>
Expand All @@ -38,14 +38,14 @@ const BottomNav = () => {
<BottomNavItem
setActive={() => setActive(2)}
selected={active === 2 ? true : false}
name={"Layers"}
name={'Layers'}
>
<MapPinIcon className="h-6 w-6 pointer-events-none" />
</BottomNavItem>
<BottomNavItem
setActive={() => setActive(3)}
selected={active === 3 ? true : false}
name={"Profile"}
name={'Profile'}
>
<UserIcon className="h-6 w-6 pointer-events-none" />
</BottomNavItem>
Expand Down
124 changes: 124 additions & 0 deletions packages/client/lib/components/LocationSearch.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
import React, { useState, useRef } from 'react';
import {
MagnifyingGlassCircleIcon,
XMarkIcon,
} from '@heroicons/react/24/outline';
import useOnClickOutside from './useOnClickOutside';

const mockSearchLocationData = {
results: [
{
lat: 40.7128,
lng: -74.006,
name: 'New York, NY, USA',
},
{
lat: 37.7749,
lng: -122.4194,
name: 'San Francisco, CA, USA',
},
{
lat: 34.0522,
lng: -118.2437,
name: 'Los Angeles, CA, USA',
},
{
lat: 41.8781,
lng: -87.6298,
name: 'Chicago, IL, USA',
},
],
};

function LocationSearch() {
const [isOpen, setIsOpen] = useState(false);
const [value, setValue] = useState('');
const [results, setResults] = useState([]);
const searchRef = useRef(null);

function handleToggleSearch() {
setIsOpen(!isOpen);
}

function getSearchLocationData(searchText) {
const filteredResults = mockSearchLocationData.results.filter((result) => {
return result.name.toLowerCase().includes(searchText.toLowerCase());
});
return filteredResults;
}

function handleInputChange(event) {
const value = event.target.value;
setValue(value);
const searchResults = getSearchLocationData(value);
setResults(searchResults);
setIsOpen(searchResults.length > 0);
}

function handleClearInput() {
setValue('');
setResults([]);
setIsOpen(false);
}

function handleListItemClick(name) {
setValue(name);
setIsOpen(false);
}

function hideSearch() {
setIsOpen(false);
}

useOnClickOutside(searchRef, hideSearch);

return (
<div
ref={searchRef}
className="fixed top-8 left-6 right-6 z-[9999] bg-background text-foreground rounded-2xl"
>
<div className="relative">
<div className="flex px-5 py-3 justify-between items-center gap-x-4 rounded-lg">
<button onClick={handleToggleSearch}>
{isOpen ? (
<XMarkIcon className="w-6 h-6" />
) : (
<MagnifyingGlassCircleIcon className="w-6 h-6" />
)}
</button>

<input
className="w-full pl-2 placeholder:text-foreground/30 rounded-lg"
type="text"
placeholder="Search For Place, Location"
value={value}
onChange={handleInputChange}
/>
{value && (
<button onClick={handleClearInput}>
<XMarkIcon className="w-6 h-6" />
</button>
)}
</div>

{isOpen && (
<div className="absolute top-14 left-0 right-0 bg-white border border-solid border-white-500 rounded-b-lg">
<ul className="list-none p-0">
{results.slice(0, 10).map((item) => (
<li
key={item.name}
className="px-5 py-2 hover:bg-selected-10 cursor-pointer"
onClick={() => handleListItemClick(item.name)}
>
{item.name}
</li>
))}
</ul>
</div>
)}
</div>
</div>
);
}

export default LocationSearch;
1 change: 1 addition & 0 deletions packages/client/lib/components/Map.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import useStore from '../../store/store';
import 'leaflet/dist/leaflet.css';
import { MapContainer, TileLayer, Marker, ZoomControl,useMap } from 'react-leaflet';
import Leaflet from 'leaflet';

const SetViewOnUserLocation = () => {
const map = useMap();

Expand Down

0 comments on commit ea058db

Please sign in to comment.