(v2.1) adds API count and Fuse search

Author: kevincobain2000

ui/package-lock.json

@@ -17,6 +17,7 @@
     "@fontsource/roboto": "^4.5.8",
     "@heroicons/react": "^2.0.15",
     "astro": "^2.0.6",
+    "fuse.js": "^6.6.2",
     "react-ace": "^10.1.0",
     "react-anchor-link-smooth-scroll": "^1.0.12",
     "react-markdown": "^8.0.5",

ui/package.json

@@ -5,6 +5,7 @@ import ApiInfo from './ApiInfo';
 import ApiAction from './ApiAction';
 import useLocalStorage from 'react-use-localstorage';
 import shortid from 'shortid';
+import Fuse from 'fuse.js';
 
 interface IAPIRule {
     [key: string]: string[];
@@ -24,6 +25,7 @@ interface IAPIInfo {
 export default function App() {
 
     const [lrdDocsJson, setLrdDocsJson] = useState<IAPIInfo[]>([]);
+    const [lrdDocsJsonCopy, setLrdDocsJsonCopy] = useState<IAPIInfo[]>([]);
     const [allParamsRegistry, setAllParamsRegistery] = useLocalStorage('allParamsRegistry', "{}");
     const [apiURL, setApiURL] = useState<string>('');
     const [host, setHost] = useState<string>('');
@@ -39,7 +41,10 @@ export default function App() {
     const [showPatch] = useLocalStorage('showPatch', 'true');
     const [showHead] = useLocalStorage('showHead', 'true');
 
-
+    const searchOptions = {
+        keys: ['uri', 'docBlock'],
+        threshold: 0.3
+    };    
 
     useEffect(() => {
         // get query param named api
@@ -72,13 +77,31 @@ export default function App() {
             .then((lrdDocsJson) => {
                 setError(null)
                 setLrdDocsJson(lrdDocsJson)
+                setLrdDocsJsonCopy(lrdDocsJson)
                 setSendingRequest(false)
             }).catch((error) => {
                 setError(error.message)
                 setSendingRequest(false)
             })
     }
 
+    const handleSearch = (search: string) => {
+        search = search.trim()
+        if (!search) {
+            setLrdDocsJson(lrdDocsJsonCopy)
+            return
+        }
+        const fuse = new Fuse(lrdDocsJson, searchOptions);
+
+        const filteredData = fuse.search(search);
+        const filteredLrdJson: IAPIInfo[] = []
+        for (let i = 0; i < filteredData.length; i++) {
+            filteredLrdJson.push(filteredData[i].item)
+        }
+
+        setLrdDocsJson(filteredLrdJson)
+    }
+
     const handleChangeSettings = (showGet: string,
         showPost: string,
         showDelete: string,
@@ -92,7 +115,7 @@ export default function App() {
     }
     return (
         <>
-            <TopNav handleChangeSettings={handleChangeSettings} />
+            <TopNav handleChangeSettings={handleChangeSettings} handleSearch={handleSearch} />
             {sendingRequest && (
                 <progress className="progress progress-success w-full"></progress>
             )}

ui/src/components/App.tsx

@@ -29,7 +29,7 @@ export default function Sidebar(props: Props) {
         <>
             <aside>
                 <h2 className="title pl-5 pt-2 mb-5">
-                    API List
+                    API List  <span className='text-slate-500 capitalize'>Total {lrdDocsJson.length}</span>
                 </h2>
                 <ul>
                     {lrdDocsJson.map((lrdDocsItem) => (

ui/src/components/Sidebar.tsx

@@ -13,10 +13,11 @@ interface Props {
         showHead: string,
         sort: string,
         groupby: string) => void
+    handleSearch: (search: string) => void
 }
 export default function TopNav(props: Props) {
 
-    const { handleChangeSettings } = props
+    const { handleChangeSettings, handleSearch } = props
     const [theme, setTheme] = useLocalStorage('theme', '');
     const [sort, setSort] = useLocalStorage('sort', 'default');
     const [groupby, setGroupby] = useLocalStorage('groupby', 'default');
@@ -97,6 +98,9 @@ export default function TopNav(props: Props) {
                     </a>
                 </div>
                 <div className="flex-none">
+                    <div className="form-control">
+                        <input type="text" placeholder="Search" className="input input-sm input-bordered" onChange={ (e) => handleSearch(e.target.value) } />
+                    </div>                    
                     <div className="menu menu-horizontal px-6 ">
                         <label className="swap swap-rotate">
                             <input type="checkbox" onChange={toggleDarkMode} />