Fix blank Trove & Lexicon

app/src/os/services/ship/spaces/bazaar.service.ts

@@ -35,12 +35,6 @@ export class BazaarService extends AbstractService<BazaarUpdateType> {
   }
 
   async init() {
-    //refresh app catalog
-    await APIConnection.getInstance().conduit.poke({
-      app: 'bazaar',
-      mark: 'bazaar-action',
-      json: { initialize: null },
-    });
     return new Promise((resolve, reject) => {
       APIConnection.getInstance().conduit.watch({
         app: 'bazaar',

app/src/renderer/apps/nativeApps.ts

@@ -60,7 +60,7 @@ export const nativeApps: AppManifestMap = {
       hideTitlebarBorder: true,
     },
   },
-  lexicon: {
+  'os-lexicon': {
     id: 'os-lexicon',
     title: 'Lexicon',
     type: 'native',
@@ -70,7 +70,7 @@ export const nativeApps: AppManifestMap = {
       hideTitlebarBorder: true,
     },
   },
-  trove: {
+  'os-trove': {
     id: 'os-trove',
     title: 'Trove',
     type: 'native',

app/src/renderer/system/desktop/components/AppWindow/getNativeAppWindow.tsx

@@ -10,8 +10,8 @@ import { TroveApp } from 'renderer/apps/Trove/TroveApp';
 export enum NativeAppId {
   Browser = 'os-browser',
   Settings = 'os-settings',
-  Lexicon = 'lexicon',
-  Trove = 'trove',
+  Lexicon = 'os-lexicon',
+  Trove = 'os-trove',
 }
 
 export const getNativeAppWindow = {
@@ -25,11 +25,11 @@ export const getNativeAppWindow = {
     titlebar: null,
     view: (props: any) => <SystemApp {...props} />,
   },
-  lexicon: {
+  'os-lexicon': {
     titlebar: null,
     view: (props: any) => <LexiconApp {...props} />,
   },
-  trove: {
+  'os-trove': {
     titlebar: null,
     view: (props: any) => <TroveApp {...props} />,
   },

lexicon/.babelrc

@@ -1,11 +1,22 @@
 {
   "presets": [
     "@babel/preset-env",
-    ["@babel/preset-react", {"runtime": "automatic"}],
-    ["@babel/preset-typescript", { "isTSX": true, "allExtensions": true }]
+    [
+      "@babel/preset-react",
+      {
+        "runtime": "automatic"
+      }
+    ],
+    [
+      "@babel/preset-typescript",
+      {
+        "isTSX": true,
+        "allExtensions": true
+      }
+    ]
   ],
   "plugins": [
     "babel-plugin-styled-components",
     "@babel/plugin-proposal-class-properties"
   ]
-}
+}

lexicon/package.json

@@ -10,27 +10,25 @@
   },
   "dependencies": {
     "@urbit/http-api": "^2.3.0",
-    "react-router-dom": "^6.12.0",
+    "react-router-dom": "^6.14.1",
     "zustand": "^4.3.8"
   },
   "peerDependencies": {
-    "@holium/design-system": "0.2.1",
     "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "styled-components": "^5.3.6"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.9",
-    "@babel/preset-env": "^7.18.9",
+    "@babel/core": "^7.20.2",
+    "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
-    "@preconstruct/cli": "^2.2.1",
+    "@preconstruct/cli": "^2.2.2",
+    "@types/babel__core": "^7.1.20",
     "@types/react": "^18.0.37",
     "@types/react-dom": "^18.0.11",
-    "eslint": "^8.38.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.3.4",
-    "typescript": "^5.0.2"
+    "babel-loader": "^8.3.0",
+    "babel-plugin-styled-components": "^2.0.7"
   }
-}
+}

lexicon/src/Lexicon.tsx

@@ -1,5 +1,11 @@
 import { useEffect } from 'react';
-import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import {
+  BrowserRouter,
+  Navigate,
+  redirect,
+  Route,
+  Routes,
+} from 'react-router-dom';
 import { createGlobalStyle } from 'styled-components';
 
 import {
@@ -28,6 +34,7 @@ const GlobalStyle = createGlobalStyle`
     outline: none;
   }
 `;
+
 declare global {
   interface Window {
     ship: string;
@@ -296,37 +303,37 @@ export const Lexicon = ({
   useEffect(() => {
     setShipName(shipName);
   }, [shipName]);
+
+  useEffect(() => {
+    // Start at the root path.
+    redirect('/');
+  }, []);
+
   if (!api) return null;
+
   return (
-    <>
-      <main
-        style={{
-          overflowY: 'auto',
-          height: '100vh',
-          backgroundColor: 'transparent',
-        }}
-      >
-        <GlobalStyle />
-        <Router>
-          <Routes>
-            <Route element={<Navigation selectedSpace={selectedSpace} />}>
-              <Route
-                path="/index.html/:ship/:group/:word"
-                element={<WordPage />}
-              />
-              <Route path="/index.html/:ship/:group" element={<HomePage />} />
-              <Route
-                path="/index.html/dict/:word"
-                element={<DictionaryPage />}
-              />
-              <Route
-                path="/index.html"
-                element={<p>don't mind me just redirecting over here</p>}
-              />
-            </Route>
-          </Routes>
-        </Router>
-      </main>
-    </>
+    <main
+      style={{
+        overflowY: 'auto',
+        height: '100vh',
+        backgroundColor: 'transparent',
+      }}
+    >
+      <GlobalStyle />
+      <BrowserRouter>
+        <Routes>
+          <Route element={<Navigation selectedSpace={selectedSpace} />}>
+            <Route path="/:ship/:group/:word" element={<WordPage />} />
+            <Route path="/:ship/:group" element={<HomePage />} />
+            <Route path="/dict/:word" element={<DictionaryPage />} />
+            <Route
+              path="/"
+              element={<p>don't mind me just redirecting over here</p>}
+            />
+          </Route>
+        </Routes>
+        <Navigate to={selectedSpace} />
+      </BrowserRouter>
+    </main>
   );
 };

lib/design-system/src/os/AppTile/AppTile.stories.tsx

@@ -8,7 +8,7 @@ export default {
 } as ComponentMeta<typeof AppTile>;
 
 const lexicon: AppTileType = {
-  id: 'lexicon',
+  id: 'os-lexicon',
   title: 'Lexicon',
   href: {
     glob: {

trove/package.json

@@ -26,35 +26,34 @@
     "mime": "^3.0.0",
     "moment": "^2.29.4",
     "react-dnd-html5-backend": "^16.0.1",
-    "react-router-dom": "^6.4.3",
+    "react-router-dom": "^6.14.1",
     "styled-components": "^5.3.6",
     "styled-system": "^5.1.5",
     "urbit-ob": "^5.0.1",
     "yet-another-react-lightbox": "^2.3.0",
-    "zustand": "^4.1.4",
+    "zustand": "^4.3.8",
     "react-dnd": "^16.0.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.9",
-    "@babel/preset-env": "^7.18.9",
+    "@babel/core": "^7.20.2",
+    "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
-    "@preconstruct/cli": "^2.2.1",
+    "@preconstruct/cli": "^2.2.2",
+    "@types/babel__core": "^7.1.20",
     "@types/react": "^18.0.37",
     "@types/react-dom": "^18.0.11",
-    "eslint": "^8.38.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.3.4",
-    "typescript": "^5.0.2",
     "@types/styled-components": "^5.1.26",
     "@types/styled-system": "^5.1.15",
     "@urbit/vite-plugin-urbit": "^0.8.0",
     "@vitejs/plugin-react-refresh": "^1.3.1",
     "autoprefixer": "^10.3.7",
+    "babel-loader": "^8.3.0",
+    "babel-plugin-styled-components": "^2.0.7",
     "postcss": "^8.3.9",
     "react-icons": "^4.6.0",
     "tailwindcss": "^2.2.16",
-    "vite": "^2.9.16",
+    "vite": "^4.3.9",
     "urbit-ob": "^5.0.1"
   }
 }

trove/src/Trove.tsx

@@ -1,5 +1,11 @@
 import { useEffect } from 'react';
-import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import {
+  BrowserRouter,
+  Navigate,
+  redirect,
+  Route,
+  Routes,
+} from 'react-router-dom';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 
 import { trovePreload } from '../../app/src/os/services/ship/trove.service';
@@ -8,12 +14,12 @@ import { Navigation } from './components';
 import { Home } from './pages';
 import useTroveStore, { TroveStore } from './store/troveStore';
 import { theme } from './theme';
+
 const muiTheme = createTheme({
   palette: {
     primary: { main: theme.primary },
     error: { main: theme.error },
   },
-
   typography: {
     fontFamily: ['Rubik'].join(','),
     subtitle1: {
@@ -27,15 +33,16 @@ const muiTheme = createTheme({
     },
   },
 });
-interface Props {
+
+type Props = {
   selectedSpace: string;
   shipName: string;
   TroveIPC: typeof trovePreload;
   update: any;
   useStorage: any;
   uploadFile: any;
   deleteFile: any;
-}
+};
 
 export const Trove = ({
   selectedSpace,
@@ -51,23 +58,32 @@ export const Trove = ({
   const setSpace = useTroveStore((store: TroveStore) => store.setSpace);
   const space = useTroveStore((store: TroveStore) => store.space);
   const setApi = useTroveStore((store: TroveStore) => store.setApi);
+
+  useEffect(() => {
+    // Start at the root path.
+    redirect('/');
+  }, []);
+
   useEffect(() => {
     //subscribe to updates here
     TroveIPC.UIUpdates();
     //add our api instance to the store
     setApi(TroveIPC);
   }, [TroveIPC]);
+
   useEffect(() => {
     if (update) {
       updateHandler(update);
     }
   }, [update]);
+
   useEffect(() => {
     if (shipName) {
       setShipName(shipName);
       setMySpace(shipName + '/our');
     }
   }, [shipName]);
+
   useEffect(() => {
     if (selectedSpace) {
       const newSpace = selectedSpace.substring(1);
@@ -76,6 +92,7 @@ export const Trove = ({
   }, [selectedSpace]);
 
   if (!space) return null;
+
   return (
     <main
       style={{
@@ -84,11 +101,11 @@ export const Trove = ({
       }}
     >
       <ThemeProvider theme={muiTheme}>
-        <Router>
+        <BrowserRouter>
           <Routes>
             <Route element={<Navigation selectedSpace={selectedSpace} />}>
               <Route
-                path="index.html/:ship/:group"
+                path="/:ship/:group"
                 element={
                   <Home
                     useStorage={useStorage}
@@ -98,14 +115,15 @@ export const Trove = ({
                 }
               />
               <Route
-                path="index.html/"
+                path="/"
                 element={
                   <>Enter a space in the url example: ...apps/trove/~zod/our</>
                 }
               />
             </Route>
           </Routes>
-        </Router>
+          <Navigate to={selectedSpace} />
+        </BrowserRouter>
       </ThemeProvider>
     </main>
   );

trove/src/components/NavigationHeader.tsx

@@ -7,6 +7,7 @@ import { WrappedBackground } from '../components';
 import { splitLastOccurrence } from '../helpers';
 import useTroveStore, { TroveStore } from '../store/troveStore';
 import { theme } from '../theme';
+
 export const NavigationHeader = () => {
   const currentSpace = useTroveStore((store: TroveStore) => store.currentSpace);
   const [stlfDisplay, setStflDisplay] = useState<string>('');

trove/src/pages/Home.tsx

@@ -167,6 +167,7 @@ export const Home = ({ useStorage, uploadFile, deleteFile }: any) => {
   useEffect(() => {
     getTroves();
   }, [space]);
+
   const getPerm = (
     permObj: any,
     troveName: string