add: markdown search feature

src/components/Navigations/SideNavigation.js

@@ -3,12 +3,20 @@ import PathNode from "./PathNode";
 import "./SideNavigation.css";
 import {useDeletePath, usePaths, useUpdatePath} from "../../utils/path-queries";
 import React from 'react';
+import {useSearchMarkdown} from "../../utils/markdown-queries";
+import MarkdownNode from "./MarkdownNode";
 
 const SideNavigation = () => {
     const {data: paths, isLoading, error } = usePaths(1);
     const deletePath = useDeletePath();
     const updatePath = useUpdatePath();
     const [searchTerm, setSearchTerm] = React.useState("");
+    const [keyword, setKeyword] = React.useState("");
+    const [searchMode, setSearchMode] = React.useState(false);
+
+    const {data: searchResults, isLoading: isSearching} = useSearchMarkdown(keyword, {
+        enabled: searchMode && !!searchMode,
+    });
     const sortedPaths = paths
         ? paths.slice().sort((a, b) => a.order.localeCompare(b.order))
         : [];
@@ -22,6 +30,14 @@ const SideNavigation = () => {
         }
     };
 
+    const handleSearch = () => {
+        setSearchMode(true);
+        setKeyword(searchTerm);
+    }
+    const exitSearch = () => {
+        setSearchMode(false);
+    }
+
     const handleSave = (id, newName) => {
         updatePath.mutate({ id, data: {name: newName }} , {
             onError: (err) => {
@@ -29,17 +45,56 @@ const SideNavigation = () => {
             }
         });
     };
-    if(isLoading){
+    if(!searchMode && isLoading){
+        return <aside className="menu"><p>Loading...</p></aside>;
+    }
+    if(searchMode && isSearching){
         return <aside className="menu"><p>Loading...</p></aside>;
     }
-
     if(error){
         return <aside className="menu"><p>Error...</p></aside>;
     }
 
+
     return (
         <aside className="menu">
-            <p className="menu-label">---</p>
+            <div className="field has-addons mb-2">
+                <div className="control is-expanded">
+                    <input
+                        className="input is-small"
+                        type="text"
+                        placeholder="Search..."
+                        value={searchTerm}
+                        onChange={(e) => setSearchTerm(e.target.value)}
+                    />
+                </div>
+                <div className="control">
+                    <button
+                        className="button is-small is-info"
+                        onClick={handleSearch}
+                        disabled={!searchTerm.trim()}
+                        type="button"
+                    >
+                        <span className="icon">
+                            <i className="fa fa-search"></i>
+                        </span>
+                    </button>
+                </div>
+
+                {searchMode && (
+                    <div className="control">
+                        <button
+                            className="button is-small is-danger"
+                            onClick={exitSearch}
+                            type="button"
+                        >
+                            <span className="icon">
+                                <i className={"fa fa-window-close"}></i>
+                            </span>
+                        </button>
+                    </div>
+                )}
+            </div>
             <PermissionGuard rolesRequired={["admin", "creator"]}>
                 <a
                     href="/markdown/create"
@@ -48,18 +103,30 @@ const SideNavigation = () => {
                     Create New Markdown
                 </a>
             </PermissionGuard>
-            <ul className="menu-list">
-                {isLoading && <p>Loading...</p>}
-                {sortedPaths.map((path) => (
-                    <PathNode
-                        key={path.id}
-                        path={path}
-                        isRoot={false}
-                        onSave={handleSave}
-                        onDelete={handleDelete}
-                    />
-                ))}
-            </ul>
+            {searchMode ? (
+                <ul>
+                    {searchResults.map((markdown, i) => (
+                        <MarkdownNode
+                            markdown={markdown}
+                            handleMoveMarkdown={() => {}}
+                        />
+                    ))}
+                </ul>
+            ) : (
+                <ul className="menu-list">
+                    {isLoading && <p>Loading...</p>}
+                    {sortedPaths.map((path) => (
+                        <PathNode
+                            key={path.id}
+                            path={path}
+                            isRoot={false}
+                            onSave={handleSave}
+                            onDelete={handleDelete}
+                        />
+                    ))}
+                </ul>
+            )}
+
         </aside>
     );
 };