From fbaee42ca7dd336f98e17e922923ed4f874da7a2 Mon Sep 17 00:00:00 2001 From: Kevin Batdorf Date: Mon, 20 Mar 2023 11:00:04 +0100 Subject: [PATCH 1/3] Add type filtering --- package-lock.json | 14 ++++++++++++++ package.json | 1 + src/SearchBar.jsx | 30 +++++++++++++++++++++++++++--- src/SearchResults.jsx | 12 ++++++------ src/hooks/useSearch.js | 6 +++--- src/state/search.js | 2 ++ 6 files changed, 53 insertions(+), 12 deletions(-) diff --git a/package-lock.json b/package-lock.json index 28abfcc..c9df8c4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "0.1.0", "dependencies": { "canvas-confetti": "^1.6.0", + "clsx": "^1.2.1", "postcss-flexbugs-fixes": "^5.0.2", "postcss-normalize": "^10.0.1", "postcss-preset-env": "^8.0.1", @@ -5483,6 +5484,14 @@ "wrap-ansi": "^7.0.0" } }, + "node_modules/clsx": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", + "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==", + "engines": { + "node": ">=6" + } + }, "node_modules/co": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", @@ -21731,6 +21740,11 @@ "wrap-ansi": "^7.0.0" } }, + "clsx": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", + "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==" + }, "co": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", diff --git a/package.json b/package.json index 3558680..4530dc8 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "private": true, "dependencies": { "canvas-confetti": "^1.6.0", + "clsx": "^1.2.1", "postcss-flexbugs-fixes": "^5.0.2", "postcss-normalize": "^10.0.1", "postcss-preset-env": "^8.0.1", diff --git a/src/SearchBar.jsx b/src/SearchBar.jsx index 4fd0317..0d49e43 100644 --- a/src/SearchBar.jsx +++ b/src/SearchBar.jsx @@ -1,3 +1,4 @@ +import clsx from "clsx"; import { useEffect, useState } from "react"; import SearchResults from "./SearchResults"; import { useSearchStore } from "./state/search"; @@ -6,8 +7,16 @@ const capitalPDangit = (query) => { return query.replace(/Wordpress/i, "WordPress"); }; +const types = { + '': 'All', + wordpress_reference: 'WordPress Reference', + wordpress_dev_reference: 'WordPress Dev Notes', + wpcli: 'WP CLI', + php_reference: 'PHP.net', +} + const SearchBar = () => { - const { search, setSearch, setSearchHistory } = useSearchStore(); + const { search, setSearch, setSearchHistory, type, setType } = useSearchStore(); const [searchTerm, setSearchTerm] = useState(""); const [selectedResult, selectResult] = useState(null); @@ -31,7 +40,10 @@ const SearchBar = () => { return (
-
e.preventDefault()}> + e.preventDefault()}> + { placeholder="Search for a WordPress function, hook, or class." autoFocus /> +
+

Filter by type:

+ {Object.entries(types).map(([key, value]) => ( + + ))} +
diff --git a/src/SearchResults.jsx b/src/SearchResults.jsx index 3af5803..644e122 100644 --- a/src/SearchResults.jsx +++ b/src/SearchResults.jsx @@ -9,15 +9,15 @@ const decodeHTMLEntities = (text) => { return textArea.value; }; -const SearchResults = ({ query, selectedResult, selectResult }) => { +const SearchResults = ({ search, type, selectedResult, selectResult }) => { const [copyStatus, setCopyStatus] = useState(""); - const { data, error, loading } = useSearch(query); + const { data, error, loading } = useSearch({search, type}); const copyToClipboard = async (text) => { return navigator.clipboard.writeText(text); }; - if (!query) return null; + if (!search) return null; if (error) { return

Failed to load, dangit.

; @@ -71,12 +71,12 @@ const SearchResults = ({ query, selectedResult, selectResult }) => { return (
- {query && query.length < 3 ? ( + {search && search.length < 3 ? (

Keep typing...

) : data.length === 0 ? ( -

No search results for: {query}

+

No search results for: {search}

) : ( -

Search results for: {query}

+

Search results for: {search}

)} {data && data?.length > 0 && (
diff --git a/src/hooks/useSearch.js b/src/hooks/useSearch.js index 174565e..34a7507 100644 --- a/src/hooks/useSearch.js +++ b/src/hooks/useSearch.js @@ -2,9 +2,9 @@ import useSWR from "swr"; const fetcher = (...args) => fetch(...args).then((res) => res.json()); const url = "https://heigl.docs-dang.it/api/docs"; -export const useSearch = (query) => { - const fullUrl = query ? `${url}?search=${query}` : url; - const { data, error } = useSWR(fullUrl, fetcher); +export const useSearch = ({ search, type }) => { + const query = new URLSearchParams({ search, type }); + const { data, error } = useSWR(`${url}?${query.toString()}`, fetcher); return { data, error, diff --git a/src/state/search.js b/src/state/search.js index db5886a..c03f506 100644 --- a/src/state/search.js +++ b/src/state/search.js @@ -5,8 +5,10 @@ export const useSearchStore = create( persist( (set, get) => ({ search: "", + type: "", searchHistory: [], setSearch: (search) => set({ search }), + setType: (type) => set({ type }), setSearchHistory: (search) => set({ searchHistory: [search, ...get().searchHistory.slice(-9)] }), }), From da054de36091dcc5aea26cde385f0d57bea7c412 Mon Sep 17 00:00:00 2001 From: GitHub Actions Date: Mon, 20 Mar 2023 10:00:58 +0000 Subject: [PATCH 2/3] chore: lint and format --- src/SearchBar.jsx | 33 +++++++++++++++++++++------------ src/SearchResults.jsx | 2 +- 2 files changed, 22 insertions(+), 13 deletions(-) diff --git a/src/SearchBar.jsx b/src/SearchBar.jsx index 0d49e43..4f1e4f4 100644 --- a/src/SearchBar.jsx +++ b/src/SearchBar.jsx @@ -8,15 +8,16 @@ const capitalPDangit = (query) => { }; const types = { - '': 'All', - wordpress_reference: 'WordPress Reference', - wordpress_dev_reference: 'WordPress Dev Notes', - wpcli: 'WP CLI', - php_reference: 'PHP.net', -} + "": "All", + wordpress_reference: "WordPress Reference", + wordpress_dev_reference: "WordPress Dev Notes", + wpcli: "WP CLI", + php_reference: "PHP.net", +}; const SearchBar = () => { - const { search, setSearch, setSearchHistory, type, setType } = useSearchStore(); + const { search, setSearch, setSearchHistory, type, setType } = + useSearchStore(); const [searchTerm, setSearchTerm] = useState(""); const [selectedResult, selectResult] = useState(null); @@ -40,7 +41,11 @@ const SearchBar = () => { return (
-
e.preventDefault()}> + e.preventDefault()} + > @@ -56,10 +61,14 @@ const SearchBar = () => {

Filter by type:

{Object.entries(types).map(([key, value]) => ( - ))} diff --git a/src/SearchResults.jsx b/src/SearchResults.jsx index 644e122..4063a92 100644 --- a/src/SearchResults.jsx +++ b/src/SearchResults.jsx @@ -11,7 +11,7 @@ const decodeHTMLEntities = (text) => { const SearchResults = ({ search, type, selectedResult, selectResult }) => { const [copyStatus, setCopyStatus] = useState(""); - const { data, error, loading } = useSearch({search, type}); + const { data, error, loading } = useSearch({ search, type }); const copyToClipboard = async (text) => { return navigator.clipboard.writeText(text); From 92b1b3c11f2b00f68b7daace7b89486071e16dcd Mon Sep 17 00:00:00 2001 From: Kevin Batdorf Date: Mon, 20 Mar 2023 11:06:39 +0100 Subject: [PATCH 3/3] Update type names --- src/SearchBar.jsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/SearchBar.jsx b/src/SearchBar.jsx index 4f1e4f4..dde135a 100644 --- a/src/SearchBar.jsx +++ b/src/SearchBar.jsx @@ -9,10 +9,10 @@ const capitalPDangit = (query) => { const types = { "": "All", - wordpress_reference: "WordPress Reference", - wordpress_dev_reference: "WordPress Dev Notes", - wpcli: "WP CLI", - php_reference: "PHP.net", + wordpress_reference: "WordPress reference", + wordpress_dev_reference: "WordPress dev notes", + wpcli: "WP-CLI", + php_reference: "PHP reference", }; const SearchBar = () => {