feat(frontend): initial search functionality (#78)
sct
4 years ago
committed by
GitHub
parent
3722a495dd
commit
342d1a3c75
@ -0,0 +1,38 @@
|
||||
import React from 'react';
|
||||
import useSearchInput from '../../../hooks/useSearchInput';
|
||||
|
||||
const SearchInput: React.FC = () => {
|
||||
const { searchValue, setSearchValue, setIsOpen } = useSearchInput();
|
||||
return (
|
||||
<div className="flex-1 flex">
|
||||
<form className="w-full flex md:ml-0" action="#" method="GET">
|
||||
<label htmlFor="search_field" className="sr-only">
|
||||
Search
|
||||
</label>
|
||||
<div className="relative w-full text-white focus-within:text-gray-200">
|
||||
<div className="absolute inset-y-0 left-0 flex items-center pointer-events-none">
|
||||
<svg className="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<input
|
||||
id="search_field"
|
||||
className="block w-full h-full pl-8 pr-3 py-2 rounded-md bg-cool-gray-600 text-white placeholder-gray-300 focus:outline-none focus:placeholder-gray-400 sm:text-sm"
|
||||
placeholder="Search"
|
||||
type="search"
|
||||
value={searchValue}
|
||||
onChange={(e) => setSearchValue(e.target.value)}
|
||||
onFocus={() => setIsOpen(true)}
|
||||
onBlur={() => setIsOpen(false)}
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SearchInput;
|
||||
@ -0,0 +1,12 @@
|
||||
import React from 'react';
|
||||
|
||||
const Placeholder: React.FC = () => {
|
||||
return (
|
||||
<div
|
||||
style={{ width: 250, height: 375 }}
|
||||
className="animate-pulse rounded-lg bg-cool-gray-700"
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default Placeholder;
|
||||
@ -0,0 +1,30 @@
|
||||
import { useEffect } from 'react';
|
||||
|
||||
/**
|
||||
* useClickOutside
|
||||
*
|
||||
* Simple hook to add an event listener to the body and allow a callback to
|
||||
* be triggered when clicking outside of the target ref
|
||||
*
|
||||
* @param ref Any HTML Element ref
|
||||
* @param callback Callback triggered when clicking outside of ref element
|
||||
*/
|
||||
const useClickOutside = (
|
||||
ref: React.RefObject<HTMLElement>,
|
||||
callback: (e: MouseEvent) => void
|
||||
): void => {
|
||||
useEffect(() => {
|
||||
const handleBodyClick = (e: MouseEvent) => {
|
||||
if (!ref.current?.contains(e.target as Node)) {
|
||||
callback(e);
|
||||
}
|
||||
};
|
||||
document.body.addEventListener('click', handleBodyClick);
|
||||
|
||||
return () => {
|
||||
document.body.removeEventListener('click', handleBodyClick);
|
||||
};
|
||||
}, [ref, callback]);
|
||||
};
|
||||
|
||||
export default useClickOutside;
|
||||
@ -0,0 +1,33 @@
|
||||
import { useState, useEffect, Dispatch, SetStateAction } from 'react';
|
||||
|
||||
/**
|
||||
* A hook to help with debouncing state
|
||||
*
|
||||
* This hook basically acts the same as useState except it is also
|
||||
* returning a deobuncedValue that can be used for things like
|
||||
* debouncing input into a search field
|
||||
*
|
||||
* @param initialValue Initial state value
|
||||
* @param debounceTime Debounce time in ms
|
||||
*/
|
||||
const useDebouncedState = <S>(
|
||||
initialValue: S,
|
||||
debounceTime = 300
|
||||
): [S, S, Dispatch<SetStateAction<S>>] => {
|
||||
const [value, setValue] = useState(initialValue);
|
||||
const [finalValue, setFinalValue] = useState(initialValue);
|
||||
|
||||
useEffect(() => {
|
||||
const timeout = setTimeout(() => {
|
||||
setFinalValue(value);
|
||||
}, debounceTime);
|
||||
|
||||
return () => {
|
||||
clearTimeout(timeout);
|
||||
};
|
||||
}, [value, debounceTime]);
|
||||
|
||||
return [value, finalValue, setValue];
|
||||
};
|
||||
|
||||
export default useDebouncedState;
|
||||
@ -0,0 +1,115 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
import type { UrlObject } from 'url';
|
||||
import { useEffect, useState, Dispatch, SetStateAction } from 'react';
|
||||
import useDebouncedState from './useDebouncedState';
|
||||
import { useRouter } from 'next/router';
|
||||
import type { Nullable } from '../utils/typeHelpers';
|
||||
|
||||
type Url = string | UrlObject;
|
||||
|
||||
interface SearchObject {
|
||||
searchValue: string;
|
||||
searchOpen: boolean;
|
||||
setIsOpen: Dispatch<SetStateAction<boolean>>;
|
||||
setSearchValue: Dispatch<SetStateAction<string>>;
|
||||
clear: () => void;
|
||||
}
|
||||
|
||||
const useSearchInput = (): SearchObject => {
|
||||
const router = useRouter();
|
||||
const [searchOpen, setIsOpen] = useState(false);
|
||||
const [lastRoute, setLastRoute] = useState<Nullable<Url>>(null);
|
||||
const [searchValue, debouncedValue, setSearchValue] = useDebouncedState(
|
||||
(router.query.query as string) ?? ''
|
||||
);
|
||||
|
||||
/**
|
||||
* This effect handles routing when the debounced search input
|
||||
* value changes.
|
||||
*
|
||||
* If we are not already on the /search route, then we push
|
||||
* in a new route. If we are, then we only replace the history.
|
||||
*/
|
||||
useEffect(() => {
|
||||
if (debouncedValue !== '') {
|
||||
if (router.pathname.startsWith('/search')) {
|
||||
router.replace({
|
||||
pathname: router.pathname,
|
||||
query: { ...router.query, query: debouncedValue },
|
||||
});
|
||||
} else {
|
||||
setLastRoute(router.asPath);
|
||||
router
|
||||
.push({
|
||||
pathname: '/search',
|
||||
query: { query: debouncedValue },
|
||||
})
|
||||
.then(() => window.scrollTo(0, 0));
|
||||
}
|
||||
}
|
||||
}, [debouncedValue]);
|
||||
|
||||
/**
|
||||
* This effect is handling behavior when the search input is closed.
|
||||
*
|
||||
* If we have a lastRoute, we will route back to it. If we don't
|
||||
* (in the case of a deeplink) we take the user back to the index route
|
||||
*/
|
||||
useEffect(() => {
|
||||
if (
|
||||
searchValue === '' &&
|
||||
router.pathname.startsWith('/search') &&
|
||||
!searchOpen
|
||||
) {
|
||||
if (lastRoute) {
|
||||
router.push(lastRoute).then(() => window.scrollTo(0, 0));
|
||||
} else {
|
||||
router.replace('/').then(() => window.scrollTo(0, 0));
|
||||
}
|
||||
}
|
||||
}, [searchOpen]);
|
||||
|
||||
/**
|
||||
* This effect handles behavior for when the route is changed.
|
||||
*
|
||||
* If after a route change, the new debounced value is not the same
|
||||
* as the query value then we will update the searchValue to either the
|
||||
* new query or to an empty string (in the case of null). This makes sure
|
||||
* that the value in the searchbox is whatever the user last entered regardless
|
||||
* of routing to something like a detail page.
|
||||
*
|
||||
* If the new route is not /search and query is null, then we will close the
|
||||
* search if it is open.
|
||||
*
|
||||
* In the final case, we want the search to always be open in the case the user
|
||||
* is on /search
|
||||
*/
|
||||
useEffect(() => {
|
||||
if (router.query.query !== debouncedValue) {
|
||||
setSearchValue((router.query.query as string) ?? '');
|
||||
|
||||
if (!router.pathname.startsWith('/search') && !router.query.query) {
|
||||
setIsOpen(false);
|
||||
}
|
||||
}
|
||||
|
||||
if (router.pathname.startsWith('/search')) {
|
||||
setIsOpen(true);
|
||||
}
|
||||
}, [router, setSearchValue]);
|
||||
|
||||
const clear = () => {
|
||||
setIsOpen(false);
|
||||
setSearchValue('');
|
||||
};
|
||||
|
||||
return {
|
||||
searchValue,
|
||||
searchOpen,
|
||||
setIsOpen,
|
||||
setSearchValue,
|
||||
clear,
|
||||
};
|
||||
};
|
||||
|
||||
export default useSearchInput;
|
||||
@ -0,0 +1,8 @@
|
||||
import React from 'react';
|
||||
import Search from '../components/Search';
|
||||
|
||||
const SearchPage: React.FC = () => {
|
||||
return <Search />;
|
||||
};
|
||||
|
||||
export default SearchPage;
|
||||
@ -1,3 +1,17 @@
|
||||
export type Undefinable<T> = T | undefined;
|
||||
export type Nullable<T> = T | null;
|
||||
export type Maybe<T> = T | null | undefined;
|
||||
|
||||
/**
|
||||
* Helps type objects with an abitrary number of properties that are
|
||||
* usually being defined at export.
|
||||
*
|
||||
* @param component Main object you want to apply properties to
|
||||
* @param properties Object of properties you want to type on the main component
|
||||
*/
|
||||
export function withProperties<A, B>(component: A, properties: B): A & B {
|
||||
(Object.keys(properties) as (keyof B)[]).forEach((key) => {
|
||||
Object.assign(component, { [key]: properties[key] });
|
||||
});
|
||||
return component as A & B;
|
||||
}
|
||||
|
||||
Loading…
Reference in new issue