use Switch/Match instead of Show

crabnebula-dev · Jan 29, 2024 · 48de36d · 48de36d
1 parent 822724c
commit 48de36d
Showing 1 changed file with 48 additions and 56 deletions.
diff --git a/clients/web/src/components/tauri/configuration-view.tsx b/clients/web/src/components/tauri/configuration-view.tsx
@@ -1,4 +1,4 @@
-import { Show, For, createEffect, Switch, Match } from "solid-js";
+import { For, createEffect, Switch, Match } from "solid-js";
 import { ConfigurationValue } from "./configuration-value";
 import { ConfigurationTooltip } from "./configuration-tooltip";
 import { generateDescriptions } from "~/lib/tauri/tauri-conf-lib";
@@ -7,7 +7,6 @@ import { useParams } from "@solidjs/router";
 import { ConfigurationErrors } from "./configuration-errors";
 import { MissingConfigurationParameterDialog } from "./dialogs/missing-configuration-parameter-dialog";
 import { MissingConfigurationDialog } from "./dialogs/missing-configuration-dialog";
-import { Heading } from "../heading";
 
 export function ConfigurationView() {
   const params = useParams<{
@@ -42,60 +41,53 @@ export function ConfigurationView() {
 
   return (
     <div class="p-4 h-full">
-      <Show when={params.config && !params.selected && config()}>
-        <h1 class="text-3xl">{config()?.label}</h1>
-        <ConfigurationErrors error={config()?.error} />
-      </Show>
-      <Show
-        when={tabWithKeys(tab())}
-        fallback={
-          <div class="h-full grid gap-4 text-center content-center justify-center items-center p-4">
-            <Heading>No Configuration Selected</Heading>
-            &larr; Use the sidebar to get started.
-          </div>
-        }
-      >
-        {(t) => (
-          <>
-            <header>
-              <h1 class="text-3xl pb-8 text-white">
-                <ConfigurationTooltip parentKey="" key={params.selected} />
-              </h1>
-            </header>
-            <Switch
-              fallback={
-                <ConfigurationValue
-                  parentKey=""
-                  key={params.selected}
-                  value={t()}
-                />
-              }
-            >
-              <Match when={typeof tab() === "object"}>
-                <For each={Object.entries(t())}>
-                  {([key, value]) => (
-                    <ConfigurationValue
-                      parentKey={params.selected}
-                      key={key}
-                      value={value}
-                    />
-                  )}
-                </For>
-              </Match>
-            </Switch>
-          </>
-        )}
-      </Show>
-
-      <Show when={params.config && !config()}>
-        <MissingConfigurationDialog config={params.config} />
-      </Show>
-      <Show when={params.config && config() && params.selected && !tab()}>
-        <MissingConfigurationParameterDialog
-          config={params.config}
-          selectedParameter={params.selected}
-        />
-      </Show>
+      <Switch>
+        <Match when={params.config && !params.selected && config()}>
+          <h1 class="text-3xl">{config()?.label}</h1>
+          <ConfigurationErrors error={config()?.error} />
+        </Match>
+        <Match when={tabWithKeys(tab())}>
+          {(t) => (
+            <>
+              <header>
+                <h1 class="text-3xl pb-8 text-white">
+                  <ConfigurationTooltip parentKey="" key={params.selected} />
+                </h1>
+              </header>
+              <Switch
+                fallback={
+                  <ConfigurationValue
+                    parentKey=""
+                    key={params.selected}
+                    value={t()}
+                  />
+                }
+              >
+                <Match when={typeof tab() === "object"}>
+                  <For each={Object.entries(t())}>
+                    {([key, value]) => (
+                      <ConfigurationValue
+                        parentKey={params.selected}
+                        key={key}
+                        value={value}
+                      />
+                    )}
+                  </For>
+                </Match>
+              </Switch>
+            </>
+          )}
+        </Match>
+        <Match when={params.config && !config()}>
+          <MissingConfigurationDialog config={params.config} />
+        </Match>
+        <Match when={params.config && config() && params.selected && !tab()}>
+          <MissingConfigurationParameterDialog
+            config={params.config}
+            selectedParameter={params.selected}
+          />
+        </Match>
+      </Switch>
     </div>
   );
 }