Fix table filters

ConrabOpto · Oct 21, 2024 · 7b25ff2 · 7b25ff2
1 parent bf54416
commit 7b25ff2
Show file tree

Hide file tree

Showing 11 changed files with 225 additions and 243 deletions.
diff --git a/examples/basic/package.json b/examples/basic/package.json
@@ -13,7 +13,7 @@
     "mobx": "6.13.5",
     "mobx-react": "9.1.1",
     "mobx-state-tree": "6.0.1",
-    "mst-query": "4.0.1"
+    "mst-query": "4.0.2"
   },
   "devDependencies": {
     "@types/react": "^18.2.79",

diff --git a/examples/table-filters/index.html b/examples/table-filters/index.html
@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>
diff --git a/examples/table-filters/package-lock.json b/examples/table-filters/package-lock.json
diff --git a/examples/table-filters/package.json b/examples/table-filters/package.json
@@ -11,7 +11,7 @@
     "mobx": "6.13.5",
     "mobx-react": "9.1.1",
     "mobx-state-tree": "6.0.1",
-    "mst-query": "4.0.1",
+    "mst-query": "4.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.4.2"

diff --git a/examples/table-filters/src/components/App.tsx b/examples/table-filters/src/components/App.tsx
@@ -1,51 +1,49 @@
-import { observer } from "mobx-react";
-import { useQuery } from "mst-query";
-import { useEffect } from "react";
-import { Link, Outlet, useNavigate, useParams } from "react-router-dom";
-import { useRootStore } from "../context";
-import { CompanyModelType } from "../models/models";
+import { observer } from 'mobx-react';
+import { useQuery } from 'mst-query';
+import { useEffect } from 'react';
+import { Link, Outlet, useNavigate, useParams } from 'react-router-dom';
+import { useRootStore } from '../context';
+import { CompanyModelType } from '../models/models';
 
 const Sidebar = observer(({ items }: { items: CompanyModelType[] }) => {
-  const { companyId } = useParams();
-  const navigate = useNavigate();
+    const { companyId } = useParams();
+    const navigate = useNavigate();
 
-  useEffect(() => {
-    if (!companyId && items.length) {
-      navigate(`/company/${items[0].id}`);
-    }
-  }, [companyId, items, navigate]);
+    useEffect(() => {
+        if (!companyId && items.length) {
+            navigate(`/company/${items[0].id}`);
+        }
+    }, [companyId, items, navigate]);
 
-  return (
-    <div>
-      {items.map((item: any) => (
-        <div key={item.id}>
-          <Link to={`company/${item.id}`}>{item.name}</Link>
+    return (
+        <div>
+            {items.map((item: any) => (
+                <div key={item.id}>
+                    <Link to={`company/${item.id}`}>{item.name}</Link>
+                </div>
+            ))}
         </div>
-      ))}
-    </div>
-  );
+    );
 });
 
-const MainScreen = observer(
-  ({ companies }: { companies: CompanyModelType[] }) => {
+const MainScreen = observer(({ companies }: { companies: CompanyModelType[] }) => {
     return (
-      <div className="app-container">
-        <div className="app-sidebar">
-          <Sidebar items={companies} />
+        <div className="app-container">
+            <div className="app-sidebar">
+                <Sidebar items={companies} />
+            </div>
+            <div className="app-list">
+                <Outlet />
+            </div>
         </div>
-        <div className="app-list">
-          <Outlet />
-        </div>
-      </div>
     );
-  },
-);
+});
 
 export const App = observer(() => {
-  const rootStore = useRootStore();
-  const { data } = useQuery(rootStore.baseQuery);
-  if (!data) {
-    return <div>Loading app...</div>;
-  }
-  return <MainScreen companies={data} />;
+    const rootStore = useRootStore();
+    const { data } = useQuery(rootStore.baseQuery);
+    if (!data) {
+        return <div>Loading app...</div>;
+    }
+    return <MainScreen companies={data} />;
 });