Refactor: state management/forms in web/mobile app (#43)

* fix: route validation * add submit registration query * fix: submit registration on shinkai extension * refactor: Connect * refactor agents * refactor: jobs * refactor inboxes * refactor create chat * refactor chat conversation requests * refactor chats/jobs * add createRegistrationCode * remove redux * revert visor changes * fix: chat conversation with files * fix: job redirect * remove logs * fix: scroll position * fix: ui chat * fix: auth redirect * fix: eslint * refactor forms * fix: audit * fix: eslint * fix: test * fix: warnings
dcSpark · Oct 17, 2023 · c4cc421 · c4cc421
1 parent f62ed6e
commit c4cc421
Show file tree

Hide file tree

Showing 50 changed files with 2,098 additions and 2,054 deletions.
diff --git a/apps/shinkai-app/src/App.test.tsx b/apps/shinkai-app/src/App.test.tsx
@@ -1,11 +1,11 @@
-import * as ed from "@noble/ed25519";
-import { sha512 } from "@noble/hashes/sha512";
-import { Crypto } from "@peculiar/webcrypto";
-import { render } from "@testing-library/react";
+import * as ed from '@noble/ed25519';
+import { sha512 } from '@noble/hashes/sha512';
+import { Crypto } from '@peculiar/webcrypto';
+import { render } from '@testing-library/react';
 import { act } from 'react-dom/test-utils';
-import { vi } from 'vitest'
+import { vi } from 'vitest';
 
-import App from "./App";
+import App from './App';
 
 // Enable synchronous methods
 ed.etc.sha512Sync = (...m) => sha512(ed.etc.concatBytes(...m));
@@ -21,10 +21,17 @@ Object.defineProperty(window.navigator, 'mediaDevices', {
   writable: true,
 });
 
+// Mock React Markdown library
+vi.mock('@uiw/react-markdown-preview', () => ({
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  default: ({ content, ...otherProps }: any) => <p {...otherProps}>content</p>,
+}));
+
 HTMLMediaElement.prototype.play = () => Promise.resolve();
 
-test("renders without crashing", async () => {
-  await act(async () => { // wrap the render function in act
+test('renders without crashing', async () => {
+  await act(async () => {
+    // wrap the render function in act
     const { baseElement } = render(<App />);
     expect(baseElement).toBeDefined();
   });

diff --git a/apps/shinkai-app/src/App.tsx b/apps/shinkai-app/src/App.tsx
@@ -17,9 +17,11 @@ import './theme/variables.css';
 
 import { IonApp, IonRouterOutlet, setupIonicReact } from '@ionic/react';
 import { IonReactRouter } from '@ionic/react-router';
-import { Provider } from 'react-redux';
+import { ApiConfig } from '@shinkai_network/shinkai-message-ts/api';
+import { queryClient } from '@shinkai_network/shinkai-node-state/lib/constants';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { useEffect } from 'react';
 import { Redirect, Route } from 'react-router-dom';
-import { PersistGate } from 'redux-persist/integration/react';
 
 import AddAgent from './pages/AddAgent';
 import AdminCommands from './pages/AdminCommands';
@@ -30,39 +32,69 @@ import CreateJob from './pages/CreateJob';
 import Home from './pages/Home';
 import JobChat from './pages/JobChat';
 import Settings from './pages/Settings';
-import { persistor, store } from './store';
+import { useAuth } from './store/auth';
 
 setupIonicReact();
 
-const App: React.FC = () => {
-  const setupComplete = localStorage.getItem('setupComplete') === 'true';
-  console.log(`Setup complete: ${setupComplete}`);
+function PrivateRoute({
+  children,
+  ...rest
+}: {
+  children: React.ReactNode;
+  path: string;
+  exact?: boolean;
+}) {
+  const auth = useAuth((state) => state.auth);
 
+  useEffect(() => {
+    ApiConfig.getInstance().setEndpoint(auth?.node_address ?? '');
+  }, [auth?.node_address]);
+  return (
+    <Route
+      {...rest}
+      render={() => {
+        return auth ? children : <Redirect to="/connect" />;
+      }}
+    />
+  );
+}
+
+const App: React.FC = () => {
   return (
-    <Provider store={store}>
-      <PersistGate loading={null} persistor={persistor}>
-        <IonApp>
-          <IonReactRouter>
-            <IonRouterOutlet>
-              <Route component={Connect} path="/connect" />
-              <Route component={Home} exact path="/home" />
-              <Route component={AdminCommands} exact path="/admin-commands" />
-              <Route component={CreateJob} exact path="/create-job" />
-              <Route component={CreateChat} exact path="/create-chat" />
-              <Route component={AddAgent} exact path="/add-agent" />
-              <Route component={Chat} exact path="/chat/:id" />
-              <Route component={JobChat} exact path="/job-chat/:id" />
-              <Route component={Settings} path="/settings" />
-              {!setupComplete ? (
-                <Redirect exact from="/" to="/connect" />
-              ) : (
-                <Redirect exact from="/" to="/home" />
-              )}
-            </IonRouterOutlet>
-          </IonReactRouter>
-        </IonApp>
-      </PersistGate>
-    </Provider>
+    <QueryClientProvider client={queryClient}>
+      <IonApp>
+        <IonReactRouter>
+          <IonRouterOutlet>
+            <Route component={Connect} path="/connect" />
+            <PrivateRoute exact path="/home">
+              <Home />
+            </PrivateRoute>
+            <PrivateRoute exact path="/admin-commands">
+              <AdminCommands />
+            </PrivateRoute>
+            <PrivateRoute exact path="/create-job">
+              <CreateJob />
+            </PrivateRoute>
+            <PrivateRoute exact path="/create-chat">
+              <CreateChat />
+            </PrivateRoute>
+            <PrivateRoute exact path="/add-agent">
+              <AddAgent />
+            </PrivateRoute>
+            <PrivateRoute exact path="/chat/:id">
+              <Chat />
+            </PrivateRoute>
+            <PrivateRoute exact path="/job-chat/:id">
+              <JobChat />
+            </PrivateRoute>
+            <PrivateRoute path="/settings">
+              <Settings />
+            </PrivateRoute>
+            <Redirect exact from="/" to="/home" />
+          </IonRouterOutlet>
+        </IonReactRouter>
+      </IonApp>
+    </QueryClientProvider>
   );
 };