Merge pull request #194 from tloncorp/po/get-apps-updates

get-apps: rework search interaction, update UX

ui/package.json

@@ -61,8 +61,8 @@
     "react-dom": "^17.0.2",
     "react-error-boundary": "^3.1.3",
     "react-hook-form": "^7.38.0",
+    "react-router-dom": "^6.11.2",
     "react-image-size": "^2.0.2",
-    "react-router-dom": "^5.2.0",
     "slugify": "^1.6.0",
     "zustand": "^3.7.2"
   },
@@ -75,7 +75,6 @@
     "@types/node": "^16.11.56",
     "@types/react": "^16.0.0",
     "@types/react-dom": "^16.0.0",
-    "@types/react-router-dom": "^5.1.8",
     "@typescript-eslint/eslint-plugin": "^4.26.1",
     "@typescript-eslint/parser": "^4.26.1",
     "@urbit/vite-plugin-urbit": "^0.8.0",

ui/src/app.tsx

@@ -3,12 +3,11 @@ import Mousetrap from 'mousetrap';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import {
   BrowserRouter,
-  Switch,
   Route,
-  useHistory,
   useLocation,
-  RouteComponentProps,
-  Redirect,
+  Routes,
+  useNavigate,
+  Navigate,
 } from 'react-router-dom';
 import { TooltipProvider } from '@radix-ui/react-tooltip';
 import { ErrorBoundary } from 'react-error-boundary';
@@ -49,13 +48,14 @@ const getId = async () => {
   return result.visitorId;
 };
 
-function OldLeapRedirect({ location }: RouteComponentProps) {
+function OldLeapRedirect() {
+  const location = useLocation();
   const path = location.pathname.replace('/leap', '');
-  return <Redirect to={path} />;
+  return <Navigate to={path} />;
 }
 
 const AppRoutes = () => {
-  const { push } = useHistory();
+  const navigate = useNavigate();
   const { search } = useLocation();
   const handleError = useErrorHandler();
   const browserId = useBrowserId();
@@ -70,7 +70,7 @@ const AppRoutes = () => {
     const query = new URLSearchParams(search);
     if (query.has('grid-note')) {
       const redir = getNoteRedirect(query.get('grid-note')!);
-      push(redir);
+      navigate(redir);
     }
   }, [search]);
 
@@ -105,18 +105,20 @@ const AppRoutes = () => {
         .wait(() => useContactState.getState().start(), 5);
 
       Mousetrap.bind(['command+/', 'ctrl+/'], () => {
-        push('/search');
+        navigate('/search');
       });
     }),
     []
   );
 
   return (
-    <Switch>
-      <Route path="/perma" component={PermalinkRoutes} />
-      <Route path="/leap/*" component={OldLeapRedirect} />
-      <Route path={['/:menu', '/']} component={Grid} />
-    </Switch>
+    <Routes>
+      <Route path="perma/*" element={<PermalinkRoutes />} />
+      <Route path="leap/*" element={<OldLeapRedirect />} />
+      <Route path="/" element={<Grid />}>
+        <Route path=":menu/*" element={<Grid />} />
+      </Route>
+    </Routes>
   );
 };
 

ui/src/components/DeskLink.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { Link, useHistory } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import { useCharge } from '../state/docket';
 import { getAppHref } from '@/logic/utils';
 
@@ -17,7 +17,7 @@ export function DeskLink({
   to = '',
   ...rest
 }: DeskLinkProps) {
-  const { push } = useHistory();
+  const navigate = useNavigate();
   const charge = useCharge(desk);
 
   if (!charge) {
@@ -42,7 +42,7 @@ export function DeskLink({
         if (rest.onClick) {
           rest.onClick(event);
         }
-        push('/');
+        navigate('/');
       }}
     >
       {children}

ui/src/components/WayfindingAppLink.tsx

@@ -45,15 +45,15 @@ const WayfindingAppLink = ({
         </div>
       </div>
       {installed ? (
-        <Button variant="alt-primary" as="a" href={link} target="_blank">
-          Open App
+        <Button variant="primary" as="a" href={link} target="_blank">
+          Open
         </Button>
       ) : (
         <NavLink to={`/search/${source}/apps/${source}/${desk}`}>
           <Button
             variant="alt-primary"
           >
-            Install App
+            Get
           </Button>
         </NavLink>
       )}

ui/src/components/icons/InvitesIcon.tsx

@@ -4,8 +4,20 @@ import { IconProps } from './icon';
 export default function InvitesIcon({ className }: IconProps) {
   // Placeholder, please make a real icon
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
-      <path fill-rule="evenodd" clip-rule="evenodd" d="M9 5.23077C9 7.60984 7.65685 8.46154 6 8.46154C4.34315 8.46154 3 7.60984 3 5.23077C3 2.8517 4.34315 2 6 2C7.65685 2 9 2.8517 9 5.23077ZM6 8.46154C2.68629 8.46154 0 9.92159 0 14H12C12 9.92159 9.31371 8.46154 6 8.46154ZM14 4C14 3.44772 13.5523 3 13 3C12.4477 3 12 3.44772 12 4V5H11C10.4477 5 10 5.44772 10 6C10 6.55228 10.4477 7 11 7H12V8C12 8.55228 12.4477 9 13 9C13.5523 9 14 8.55228 14 8V7H15C15.5523 7 16 6.55228 16 6C16 5.44772 15.5523 5 15 5H14V4Z" fill="#666666"/>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9 5.23077C9 7.60984 7.65685 8.46154 6 8.46154C4.34315 8.46154 3 7.60984 3 5.23077C3 2.8517 4.34315 2 6 2C7.65685 2 9 2.8517 9 5.23077ZM6 8.46154C2.68629 8.46154 0 9.92159 0 14H12C12 9.92159 9.31371 8.46154 6 8.46154ZM14 4C14 3.44772 13.5523 3 13 3C12.4477 3 12 3.44772 12 4V5H11C10.4477 5 10 5.44772 10 6C10 6.55228 10.4477 7 11 7H12V8C12 8.55228 12.4477 9 13 9C13.5523 9 14 8.55228 14 8V7H15C15.5523 7 16 6.55228 16 6C16 5.44772 15.5523 5 15 5H14V4Z"
+        fill="#666666"
+      />
     </svg>
   );
 }

ui/src/logic/useSystemUpdate.tsx

@@ -1,7 +1,7 @@
 import { kilnBump, Pike } from '@/gear';
 import { partition, pick } from 'lodash';
 import { useCallback } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import api from '../api';
 import { useCharges } from '../state/docket';
 import useKilnState, { usePike } from '../state/kiln';
@@ -14,7 +14,7 @@ function pikeIsBlocked(newKelvin: number, pike: Pike) {
 }
 
 export function useSystemUpdate() {
-  const { push } = useHistory();
+  const navigate = useNavigate();
   const base = usePike('base');
   const nextUpdate = base?.wefts[0];
   const newKelvin = base?.wefts[0]?.kelvin ?? 417;
@@ -32,7 +32,7 @@ export function useSystemUpdate() {
 
   const freezeApps = useCallback(async () => {
     await api.poke(kilnBump());
-    push('/leap/upgrading');
+    navigate('/leap/upgrading');
   }, []);
 
   return {