chuckdries/Personal-Website
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix deselect in keyword picker

Browse Source
This commit is contained in:
Chuck Dries 2023-03-09 21:31:54 -08:00
parent 46ba7780d7
commit d24ffecf7c
2 changed files with 17 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/KeywordsPicker.tsx
View File

@ -5,7 +5,7 @@ import { Link } from "gatsby";
interface KeywordsPickerProps { interface KeywordsPickerProps {
keywords: string[]; keywords: string[];
value: string | null; value: string | null;
getHref: (value: string | null) => string; getHref: (value: string | null, selected: boolean) => string;
onPick: (value: string | null) => void; onPick: (value: string | null) => void;
} }
const KeywordsPicker = ({ keywords, value, getHref, onPick }: KeywordsPickerProps) => { const KeywordsPicker = ({ keywords, value, getHref, onPick }: KeywordsPickerProps) => {
@ -28,7 +28,7 @@ const KeywordsPicker = ({ keywords, value, getHref, onPick }: KeywordsPickerProp
)} )}
onClick={() => onPick(keyword)} onClick={() => onPick(keyword)}
replace={false} replace={false}
to={getHref(keyword)} to={getHref(keyword, selected)}
> >
{keyword}{" "} {keyword}{" "}
</Link> </Link>

34
src/pages/photogallery.tsx
View File

@ -54,20 +54,17 @@ const GalleryPage = ({
const showDebug = Boolean(params.get("debug")?.length); const showDebug = Boolean(params.get("debug")?.length);
const [showPalette, setShowPalette] = React.useState(false); const [showPalette, setShowPalette] = React.useState(false);
const onKeywordPick = React.useCallback( const onKeywordPick = React.useCallback((newKeyword: string | null) => {
(newKeyword: string | null) => { if (newKeyword) {
if (newKeyword) { try {
try { window.plausible("Filter Keyword", {
window.plausible("Filter Keyword", { props: { keyword: newKeyword },
props: { keyword: newKeyword }, });
}); } catch (e) {
} catch (e) { // do nothing
// do nothing
}
} }
}, }
[] }, []);
);
const setSortKey = React.useCallback( const setSortKey = React.useCallback(
(newSortKey: string) => { (newSortKey: string) => {
@ -121,7 +118,7 @@ const GalleryPage = ({
console.log("⚠️failed to find hash"); console.log("⚠️failed to find hash");
return; return;
} }
console.log('scrolling into view manually') console.log("scrolling into view manually");
el.scrollIntoView({ el.scrollIntoView({
block: hash.startsWith("all") ? "start" : "center", block: hash.startsWith("all") ? "start" : "center",
}); });
@ -254,11 +251,10 @@ const GalleryPage = ({
</div> </div>
<div className="flex flex-col lg:flex-row lg:items-end justify-between px-4 md:px-8 sm:mx-auto"> <div className="flex flex-col lg:flex-row lg:items-end justify-between px-4 md:px-8 sm:mx-auto">
<KeywordsPicker <KeywordsPicker
getHref={(val) => getHref={(val, selected) =>
getGalleryPageUrl( selected
{ keyword: val, sortKey, showDebug }, ? getGalleryPageUrl({ keyword: null, sortKey, showDebug }, hash)
hash : getGalleryPageUrl({ keyword: val, sortKey, showDebug }, hash)
)
} }
keywords={[ keywords={[
"Boyce Thompson Arboretum", "Boyce Thompson Arboretum",