search: fixing bksp issues and adding further capabilities

pkg/grid/package-lock.json

@@ -5,6 +5,7 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "landscape",
       "version": "0.0.0",
       "dependencies": {
         "@radix-ui/react-dialog": "^0.0.20",

pkg/grid/src/nav/Nav.tsx

@@ -46,9 +46,14 @@ export const useNavStore = create<NavStore>((set) => ({
     set({ searchInput: input || '', selection })
 }));
 
+function normalizePathEnding(path: string) {
+  const end = path.length - 1;
+  return path[end] === '/' ? path.substring(0, end - 1) : path;
+}
+
 export function createNextPath(current: string, nextPart?: string): string {
   let end = nextPart;
-  const parts = current.split('/').reverse();
+  const parts = normalizePathEnding(current).split('/').reverse();
   if (parts[1] === 'search') {
     end = 'apps';
   }
@@ -61,7 +66,7 @@ export function createNextPath(current: string, nextPart?: string): string {
 }
 
 export function createPreviousPath(current: string): string {
-  const parts = current.split('/');
+  const parts = normalizePathEnding(current).split('/');
   parts.pop();
 
   if (parts[parts.length - 1] === 'leap') {

pkg/grid/src/nav/search/Apps.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect } from 'react';
 import { useQuery, useQueryClient } from 'react-query';
 import { Link, RouteComponentProps } from 'react-router-dom';
+import fuzzy from 'fuzzy';
 import slugify from 'slugify';
 import { ShipName } from '../../components/ShipName';
 import { fetchProviderTreaties, treatyKey } from '../../state/docket';
@@ -11,12 +12,23 @@ type AppsProps = RouteComponentProps<{ ship: string }>;
 
 export const Apps = ({ match }: AppsProps) => {
   const queryClient = useQueryClient();
-  const { select } = useNavStore();
+  const { searchInput, select } = useNavStore((state) => ({
+    searchInput: state.searchInput,
+    select: state.select
+  }));
   const provider = match?.params.ship;
   const { data } = useQuery(treatyKey([provider]), () => fetchProviderTreaties(provider), {
     enabled: !!provider
   });
-  const count = data?.length;
+  const results = data
+    ? fuzzy
+        .filter(
+          searchInput,
+          data.map((t) => t.title)
+        )
+        .map((result) => data[result.index])
+    : undefined;
+  const count = results?.length;
 
   useEffect(() => {
     select(
@@ -43,9 +55,9 @@ export const Apps = ({ match }: AppsProps) => {
           {count} result{count === 1 ? '' : 's'}
         </p>
       </div>
-      {data && (
+      {results && (
         <ul className="space-y-8" aria-labelledby="developed-by">
-          {data.map((app) => (
+          {results.map((app) => (
             <li key={app.desk}>
               <Link
                 to={`${match?.path.replace(':ship', provider)}/${slugify(app.desk)}`}

pkg/grid/src/nav/search/Providers.tsx

@@ -27,9 +27,14 @@ export const Providers = ({ match, history }: ProvidersProps) => {
   }, []);
 
   const handleSearch = useCallback(
-    debounce((input: string) => {
-      push(match?.path.replace(':ship', input.trim()));
-    }, 300),
+    debounce(
+      (input: string) => {
+        const normalizedValue = input.trim().replace(/(~?[\w^_-]{3,13})\//, '$1/apps');
+        push(match?.path.replace(':ship', normalizedValue));
+      },
+      300,
+      { leading: true }
+    ),
     [path]
   );