feat(ui): no results case

stdword · Nov 3, 2023 · 54abc7b · 54abc7b
1 parent bb2b1f1
commit 54abc7b
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/src/ui/insert.css b/src/ui/insert.css
@@ -149,6 +149,12 @@ div {
     position: relative;
 }
 
+.nothing {
+    padding-bottom: 1rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+}
+
 .item {
     word-break: break-all;
 

diff --git a/src/ui/insert.tsx b/src/ui/insert.tsx
@@ -23,7 +23,6 @@ function InsertUI({ blockUUID }) {
     const [searchQueryState, setSearchQueryState] = useState('')
     const [resultsState, setResultsState] = useState([] as string[])
     const [highlightedIndexState, setHighlightedIndexState] = useState(null as number | null)
-    // const firstUpdate = useRef(true)
 
     function showUI() {
         // handle show/hide animation
@@ -194,7 +193,7 @@ function InsertUI({ blockUUID }) {
                         <div id="results-wrap">
                             <div id="results">
                                 <div id="items">
-                                    {resultsState.map((item) => (
+                                    {resultsState.length ? resultsState.map((item) => (
                                         <div className="item"
                                              onClick={insertHighlightedItem}
                                              onMouseDown={highlightItem}
@@ -209,7 +208,10 @@ function InsertUI({ blockUUID }) {
                                                 </div>
                                             </span>
                                         </div>
-                                    ))}
+                                    )): <div className="nothing">
+                                            No results
+                                        </div>
+                                    }
                                 </div>
                             </div>
                         </div>