Fixing developerMode toggl

useVenice · Sep 15, 2022 · a8174b5 · a8174b5
1 parent 148b2cf
commit a8174b5
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 27 deletions.
diff --git a/apps/next/components/Layout.tsx b/apps/next/components/Layout.tsx
@@ -35,7 +35,11 @@ export function Layout({
   children,
 }: LayoutProps) {
   const [developerMode, setDeveloperMode] = useAtom(developerModeAtom)
-  const {adminSyncMeta, isAdmin} = useLedgerSyncAdmin({})
+  const {adminSyncMeta, isAdmin, integrationsRes} = useLedgerSyncAdmin({})
+  // TODO: deduplicate me...
+  const onlyIntegrationId =
+    integrationsRes.data?.length === 1 ? integrationsRes.data[0]?.id : undefined
+
   return (
     <div className="relative flex h-screen flex-col overflow-y-hidden">
       <header className="border-b border-gray-100">
@@ -115,22 +119,24 @@ export function Layout({
             </label>
           </div>
 
-          <div className="flex">
-            <button
-              className="btn-outline btn btn-sm truncate"
-              onClick={() =>
-                adminSyncMeta
-                  .mutateAsync()
-                  .then((res) => {
-                    console.log('meta sync success', res)
-                  })
-                  .catch((err) => {
-                    console.error('meta sync error', err)
-                  })
-              }>
-              Sync metadata (reindex institutions)
-            </button>
-          </div>
+          {!onlyIntegrationId && (
+            <div className="flex">
+              <button
+                className="btn-outline btn btn-sm truncate"
+                onClick={() =>
+                  adminSyncMeta
+                    .mutateAsync()
+                    .then((res) => {
+                      console.log('meta sync success', res)
+                    })
+                    .catch((err) => {
+                      console.error('meta sync error', err)
+                    })
+                }>
+                Sync metadata (reindex institutions)
+              </button>
+            </div>
+          )}
         </footer>
       )}
     </div>

diff --git a/apps/next/pages/_app.tsx b/apps/next/pages/_app.tsx
@@ -15,7 +15,10 @@ import {ledgerSyncCommonConfig} from '@ledger-sync/app-config/commonConfig'
 import type {Id} from '@ledger-sync/cdk-core'
 import {LSProvider} from '@ledger-sync/engine-frontend'
 
-import {accessTokenAtom} from '../contexts/PortalParamsContext'
+import {
+  accessTokenAtom,
+  developerModeAtom,
+} from '../contexts/PortalParamsContext'
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -55,6 +58,7 @@ function _LSProvider({children}: {children: React.ReactNode}) {
       queryClient={queryClient}
       config={ledgerSyncCommonConfig}
       accessToken={accessToken}
+      developerMode={useAtomValue(developerModeAtom)}
       ledgerId={ledgerId}>
       {children}
     </LSProvider>

diff --git a/apps/next/pages/ledgers/[ledgerId]/index.tsx b/apps/next/pages/ledgers/[ledgerId]/index.tsx
@@ -82,22 +82,25 @@ function ConnectionCard({
   // NOTE: envName is not relevant when reconnecting,
   // and honestly neither is ledgerId...
   // How do we express these situations?
-  const {connect, syncConnection, deleteConnection} = useLedgerSync({
-    envName: env,
-  })
+  const {connect, syncConnection, deleteConnection, developerMode} =
+    useLedgerSync({
+      envName: env,
+    })
   return (
     <div className="card border border-base-content/25 transition-[transform,shadow] hover:scale-105 hover:shadow-lg">
       <div className="card-body space-y-4">
         <div className="flex space-x-4">
           <div className="flex flex-col space-y-2">
             <InstitutionLogo institution={conn.institution} />
 
-            <div className="flex-row gap-4">
-              <span className="badge-outline badge text-2xs border-base-content/25 uppercase">
-                {/* FIXME */}
-                sandbox
-              </span>
-            </div>
+            {developerMode && (
+              <div className="flex-row gap-4">
+                <span className="badge-outline badge text-2xs border-base-content/25 uppercase">
+                  {/* FIXME */}
+                  sandbox
+                </span>
+              </div>
+            )}
           </div>
 
           <div className="flex flex-1 justify-end">
@@ -202,6 +205,11 @@ function ConnectionCard({
             </span>
           </div>
         </div>
+        {developerMode && (
+          <div className="flex-row gap-4">
+            <span className="text-2xs border-base-content/25">{conn.id}</span>
+          </div>
+        )}
       </div>
     </div>
   )