/table?name=:name support

due to exhibitionist-digital/ultra#291 bug

src/app/routes/index.tsx

@@ -7,7 +7,7 @@ import { PageFrameLayoutProviderContextUpdate } from '/~/shared/providers/layout
 import { PageFrameLayoutContextCreator } from '/~/shared/providers/layout/page-frame/index.tsx';
 
 import { PageFrameLayout } from '/~/pages/layouts/page-frame.tsx';
-import { useUrlParamRetPath } from '/~/shared/lib/react/routing/useUrlParamRetPath.ts';
+import { useQueryParamRetPath } from '/~/shared/lib/react/routing/query-params.ts';
 import { RedirectIfNoLogin } from '/~/pages/routes-helpers/RedirectIfNoLogin.tsx';
 import { useNavigate } from 'react-router-dom';
 import LoginPage from '/~/pages/login/index.tsx';
@@ -23,7 +23,7 @@ const NavbarTables = React.lazy(() => import('/~/pages/navbar/tables.tsx'));
 
 export const AppRoutes = () => {
   const supabaseUser = useSupabaseUser();
-  const retPath = useUrlParamRetPath();
+  const retPath = useQueryParamRetPath();
   const navigate = useNavigate();
   console.log('__TEST__: AppRoutes: supabaseUser:', supabaseUser);
   console.log('__TEST__: AppRoutes: retPath:', retPath);
@@ -68,6 +68,15 @@ export const AppRoutes = () => {
               path='table/:name'
             />
 
+            <Route
+              element={
+                <PageFrameLayoutProviderContextUpdate navbarOpened={false}>
+                  <TablePage />
+                </PageFrameLayoutProviderContextUpdate>
+              }
+              path='table'
+            />
+
             <Route
               element={<TablesPage />}
               path='tables'

src/features/tables/list.tsx

@@ -7,7 +7,9 @@ export const TablesList = () => {
   console.log('TablesList: schemas:', publicSchema);
 
   const list = Object.entries(publicSchema).map(([tableName, _tableSchema]) => {
-    const href = `/table/${tableName}`;
+    // TODO uncomment after https://github.com/exhibitionist-digital/ultra/issues/291 is fixed
+    // const href = `/table/${tableName}`;
+    const href = `/table?name=${tableName}`;
     const caption = upperFirst(tableName);
 
     return (

src/pages/table/index.tsx

@@ -1,6 +1,6 @@
 import { usePageFrameLayoutComponent } from '/~/shared/providers/layout/page-frame/index.tsx';
 import { Spinner } from '/~/shared/ui/spinner.tsx';
-import useUrlParamName from '/~/shared/lib/react/routing/useUrlParamName.ts';
+import { useUrlParamName } from '/~/shared/lib/react/routing/url-params.ts';
 import { SupabaseAutogeneratedDataGrid } from '/~/widgets/supabase/autogenerated-data-grid/index.tsx';
 import { Suspense } from 'react';
 
@@ -16,19 +16,23 @@ import {
 //@deno-types="@types/lodash"
 import { startCase } from 'lodash';
 
+import { useQueryParamName } from '/~/shared/lib/react/routing/query-params.ts';
+
 const TablePage = () => {
   const isBrowser = useRenderOnlyInBrowser();
 
   const [qkey, qkeyRegen] = useQueryKeyUniqueSuffix();
   const PageFrameComponent = usePageFrameLayoutComponent();
   // const [loading, setLoading] = useState(false);
   // const user = useSupabase();
-  const name = useUrlParamName();
+  const nameParam = useUrlParamName() || useQueryParamName();
 
-  if (!name) {
+  if (!nameParam) {
     return <>Error: can't parse url param "name"</>;
   }
 
+  const name = `${nameParam}`;
+
   const tableSchema = publicSchema[name];
   // console.debug('__TEST__: TablePage: table schema:', tableSchema);
 

src/pages/table/index.tsx.bk

@@ -0,0 +1,64 @@
+import { usePageFrameLayoutComponent } from '/~/shared/providers/layout/page-frame/index.tsx';
+import { Spinner } from '/~/shared/ui/spinner.tsx';
+import useUrlParamName from '/~/shared/lib/react/routing/useUrlParamName.ts';
+// import { SupabaseAutogeneratedDataGrid } from '/~/widgets/supabase/autogenerated-data-grid/index.tsx';
+import { Suspense } from 'react';
+
+// import { publicSchema } from '/~/shared/api/supabase/schemas.ts';
+import { useQueryKeyUniqueSuffix } from '/~/shared/lib/react/query/key.ts';
+import { useRenderOnlyInBrowser } from '/~/shared/lib/react/useRenderOnlyInBrowser.ts';
+
+import {
+  COLUMNS_SHOW_FIRST,
+  COLUMNS_SHOW_LAST,
+} from '/~/shared/api/supabase/const.ts';
+
+//@deno-types="@types/lodash"
+import { startCase } from 'lodash';
+
+const TablePage = () => {
+  const isBrowser = useRenderOnlyInBrowser();
+
+  const [qkey, qkeyRegen] = useQueryKeyUniqueSuffix();
+  const PageFrameComponent = usePageFrameLayoutComponent();
+  // const [loading, setLoading] = useState(false);
+  // const user = useSupabase();
+  const name = useUrlParamName();
+
+  if (!name) {
+    return <>Error: can't parse url param "name"</>;
+  }
+
+  // const tableSchema = publicSchema[name];
+  // console.debug('__TEST__: TablePage: table schema:', tableSchema);
+
+  // if (!tableSchema) {
+  //   return <>Error: no schema with dis table</>;
+  // }
+
+  return (
+    <PageFrameComponent>
+      <h3>{startCase(name)} table</h3>
+
+      {isBrowser
+        ? (
+          <Suspense fallback={<Spinner />}>
+            __TEST__
+            {
+              /* <SupabaseAutogeneratedDataGrid
+              columnsNamesFirst={COLUMNS_SHOW_FIRST}
+              columnsNamesLast={COLUMNS_SHOW_LAST}
+              onReloadRequired={qkeyRegen}
+              queryKeyUniqueSuffix={qkey}
+              tableName={name}
+              tableSchema={tableSchema}
+            /> */
+            }
+          </Suspense>
+        )
+        : <Spinner />}
+    </PageFrameComponent>
+  );
+};
+
+export default TablePage;

src/shared/lib/react/routing/query-params.ts

@@ -0,0 +1,9 @@
+import { StringParam, useQueryParam } from 'use-query-params';
+
+export function useQueryParamString(name: string): string | undefined {
+  const [result] = useQueryParam(name, StringParam);
+
+  return result || undefined;
+}
+export const useQueryParamName = () => useQueryParamString('name');
+export const useQueryParamRetPath = () => useQueryParamString('retpath');

src/shared/lib/react/routing/url-params.ts

@@ -0,0 +1,10 @@
+import { useParams } from 'react-router-dom';
+
+export function useUrlParamString(paramName: string): string | null {
+  const value = useParams()[paramName];
+  return value ? value : null;
+}
+
+export function useUrlParamName(): string | null {
+  return useUrlParamString('name') || null;
+}