refactor: fix errors and change css

ItsNotGoodName · Mar 16, 2023 · 5d43d95 · 5d43d95
1 parent 2b379bc
commit 5d43d95
Show file tree

Hide file tree

Showing 4 changed files with 120 additions and 38 deletions.
diff --git a/web/src/App.tsx b/web/src/App.tsx
@@ -34,6 +34,8 @@ import {
   onCleanup,
   Index,
   createReaction,
+  Suspense,
+  ErrorBoundary,
 } from "solid-js";
 import { type Component } from "solid-js";
 import {
@@ -182,7 +184,7 @@ const RadioPlayerTitleDropdown: Component<
 
   return (
     <DaisyDropdown
-      class={mergeClass("no-animation", props.class)}
+      class={props.class}
       buttonClass="btn-primary w-full justify-start truncate"
       buttonChildren={
         <div class="w-0">
@@ -421,7 +423,54 @@ const RadioAudioSourceDropdown: Component<
   );
 };
 
-const RadioSelect: Component<
+const RadioListCard: Component<
+  {
+    radioUUID: Accessor<string>;
+    setRadioUUID: Setter<string>;
+    radios: Resource<ModelRadio[]>;
+  } & ClassProps
+> = (props) => {
+  return (
+    <div
+      class={mergeClass(
+        "card w-full bg-base-100 shadow-xl sm:w-96",
+        props.class
+      )}
+    >
+      <div class="card-body">
+        <h2 class="card-title">
+          <Show
+            when={
+              !props.radios.error &&
+              !props.radios.loading &&
+              props.radios()?.length == 0
+            }
+            fallback={<>Select Radio</>}
+          >
+            No Radios Discoverd
+          </Show>
+        </h2>
+        <Suspense fallback={<>Loading...</>}>
+          <Show when={!props.radios.error}>
+            <For each={props.radios()}>
+              {(radio) => (
+                <DaisyButton
+                  class="btn-primary"
+                  onClick={[props.setRadioUUID, radio.uuid]}
+                  value={radio.uuid}
+                >
+                  {radio.name}
+                </DaisyButton>
+              )}
+            </For>
+          </Show>
+        </Suspense>
+      </div>
+    </div>
+  );
+};
+
+const RadioListSelect: Component<
   {
     radioUUID: Accessor<string>;
     setRadioUUID: Setter<string>;
@@ -587,7 +636,7 @@ const App: Component = () => {
     window.removeEventListener("focus", onVisibilityChange);
   });
 
-  const [page, setPage] = createSignal(PAGE_EDIT);
+  const [page, setPage] = createSignal(PAGE_HOME);
   const radioLoading = () =>
     (state.uuid != radioUUID() && radioUUID() != "") || ws.connecting();
   const radioLoaded = () =>
@@ -610,7 +659,19 @@ const App: Component = () => {
       <div class="container mx-auto px-4 pt-20 pb-36">
         <Switch>
           <Match when={page() == PAGE_HOME}>
-            <HomePage radioUUID={radioUUID} state={state} />
+            <Show
+              when={radioUUID() != ""}
+              fallback={
+                <RadioListCard
+                  class="mx-auto"
+                  radioUUID={radioUUID}
+                  setRadioUUID={setRadioUUID}
+                  radios={radiosListQuery[0]}
+                />
+              }
+            >
+              <HomePage radioUUID={radioUUID} state={state} />
+            </Show>
           </Match>
           <Match when={page() == PAGE_EDIT}>
             <EditPage />
@@ -664,7 +725,7 @@ const App: Component = () => {
                 classButton="rounded-r-none"
                 discovering={discovering()}
               />
-              <RadioSelect
+              <RadioListSelect
                 class="w-full flex-1 rounded-l-none"
                 radioUUID={radioUUID}
                 setRadioUUID={setRadioUUID}
@@ -700,4 +761,14 @@ const App: Component = () => {
   );
 };
 
-export default App;
+export default () => (
+  <ErrorBoundary
+    fallback={(err) => (
+      <div class="m-4">
+        <DaisyErrorAlert>{err || "Something went wrong."}</DaisyErrorAlert>
+      </div>
+    )}
+  >
+    <App />
+  </ErrorBoundary>
+);
diff --git a/web/src/Daisy.tsx b/web/src/Daisy.tsx
@@ -3,7 +3,7 @@ import { type JSX, type ParentComponent, Show, splitProps } from "solid-js";
 import { ICON_SIZE } from "./constants";
 import { type ClassProps, mergeClass, useDropdown } from "./utils";
 
-export const DaisyErrorAlert: ParentComponent<ClassProps> = (props) => {
+export const DaisyErrorAlert: ParentComponent = (props) => {
   return (
     <div class="alert alert-error shadow-lg">
       <div>
@@ -60,7 +60,7 @@ export const DaisyDropdown: ParentComponent<
 
   return (
     <div
-      class={mergeClass("dropdown", props.class)}
+      class={mergeClass("dropdown no-animation", props.class)}
       classList={{ "dropdown-open": showDropdown() }}
       onFocusOut={toggleDropdown}
     >

diff --git a/web/src/pages/Edit.tsx b/web/src/pages/Edit.tsx
@@ -95,13 +95,6 @@ const PresetsTable: Component<
                 )}
               </For>
             </tbody>
-            <tfoot>
-              <tr>
-                <th></th>
-                <th>URL</th>
-                <th>New Title</th>
-              </tr>
-            </tfoot>
           </table>
         </Match>
         <Match when={props.presets.loading}>Loading...</Match>
@@ -110,34 +103,45 @@ const PresetsTable: Component<
   );
 };
 
+const DefaultPresetForm = {
+  title_new: "",
+  title_new_change: false,
+  url: "",
+  url_new: "",
+  url_new_change: false,
+};
+
 const PresetForm: Component<
   { presetURL: Accessor<string>; onClose: () => void } & ClassProps
 > = (props) => {
   const [preset, presetQuery] = usePresetQuery(props.presetURL);
-  const [presetForm, setPresetForm] = createStore<ModelPreset>({
-    title_new: "",
-    url: "",
-    url_new: "",
-  });
+  const [presetForm, setPresetForm] = createStore({ ...DefaultPresetForm });
   createEffect(
-    on(preset, () => {
-      if (preset.loading) {
-        return;
-      } else if (preset.error) {
-        return;
-      }
+    on(
+      () => !preset.error && preset(),
+      () => {
+        if (preset.loading) {
+          return;
+        } else if (preset.error) {
+          return;
+        }
 
-      const p = preset();
-      if (p) {
-        setPresetForm(p);
+        const p = preset();
+        if (p) {
+          setPresetForm({ ...DefaultPresetForm, ...p });
+        }
       }
-    })
+    )
   );
 
   const updatePreset = useUpdatePreset();
   const submit = (e: Event) => {
     e.preventDefault();
-    void updatePreset.mutate(presetForm);
+    void updatePreset.mutate({
+      title_new: presetForm.title_new,
+      url: presetForm.url,
+      url_new: presetForm.url_new,
+    });
   };
   const reset = () => {
     void presetQuery.refetch();
@@ -169,12 +173,16 @@ const PresetForm: Component<
           <span class="label-text">New Title</span>
         </label>
         <input
+          classList={{ "input-warning": presetForm.title_new_change }}
           type="text"
           placeholder="New Title"
           class="input-bordered input"
           value={presetForm.title_new}
           onInput={(e) => {
-            setPresetForm({ title_new: e.currentTarget.value });
+            setPresetForm({
+              title_new: e.currentTarget.value,
+              title_new_change: true,
+            });
           }}
           disabled={loading()}
         />
@@ -186,9 +194,13 @@ const PresetForm: Component<
         <textarea
           placeholder="New URL"
           class="textarea-bordered textarea h-24"
+          classList={{ "textarea-warning": presetForm.url_new_change }}
           value={presetForm.url_new}
           onInput={(e) => {
-            setPresetForm({ url_new: e.currentTarget.value });
+            setPresetForm({
+              url_new: e.currentTarget.value,
+              url_new_change: true,
+            });
           }}
           disabled={loading()}
         />

diff --git a/web/src/ws.ts b/web/src/ws.ts
@@ -27,7 +27,7 @@ const subscribe = (ws: WebSocket, radioUUID: string) => {
   );
 };
 
-const defaultState: StateState = {
+const DefaultState: StateState = {
   audio_source: "",
   audio_sources: [],
   is_muted: false,
@@ -71,13 +71,13 @@ export function useWS(radioUUID: Accessor<string>): WSReturn {
     equals: false,
   });
   const [discovering, setDiscovering] = createSignal(false);
-  const [state, setState] = createStore({ ...defaultState });
+  const [state, setState] = createStore({ ...DefaultState });
 
   const connect = () => {
     const ws = new WebSocket(WS_URL);
     batch(() => {
       setConnecting(true);
-      setState(defaultState);
+      setState(DefaultState);
     });
     console.log("WS: Connecting");
 
@@ -116,7 +116,7 @@ export function useWS(radioUUID: Accessor<string>): WSReturn {
         setConnecting(false);
         setConnected(false);
         setDisconnected(true);
-        setState(defaultState);
+        setState(DefaultState);
       });
     });
 
@@ -143,7 +143,6 @@ export function useWS(radioUUID: Accessor<string>): WSReturn {
         return;
       }
 
-      setState(defaultState);
       subscribe(ws, radioUUID());
     })
   );