chore: Improved loading

src/routes/config/[guildId].tsx

@@ -148,7 +148,7 @@ const saveConfig = async (
   return { success: true };
 };
 
-function config() {
+function MyConfig() {
   const params = useParams();
   const navigator = useNavigate();
   const location = useLocation();
@@ -285,7 +285,6 @@ function config() {
   });
 
   return (
-    <Layout site="config">
     <div class="group">
       <h3>Configure li&apos;l Judd in</h3>
       <div>
@@ -316,6 +315,7 @@ function config() {
               list="timezones"
               id="timezone"
               ref={(e) => setTimezoneRef(e)}
+              value={payload()?.guild.timezone}
               onInput={(e) =>
                 setConfig(
                   "features",
@@ -351,9 +351,7 @@ function config() {
             <p>Time Planning </p>
             <FontAwesomeIcon
               icon={
-                  config.features.timePlanning.enabled
+                config.features.timePlanning.enabled ? faToggleOn : faToggleOff
-                    ? faToggleOn
-                    : faToggleOff
               }
               size="xl"
             />
@@ -363,13 +361,9 @@ function config() {
             type="checkbox"
             id="timePlanning"
             ref={(e) => setTpEnabledRef(e)}
+            checked={!!payload()?.guild.tpChannelId}
             onInput={(e) =>
-                setConfig(
+              setConfig("features", "timePlanning", "enabled", e.target.checked)
-                  "features",
-                  "timePlanning",
-                  "enabled",
-                  e.target.checked,
-                )
             }
           />
           <div
@@ -380,6 +374,7 @@ function config() {
               <label>Target channel:</label>
               <select
                 ref={(e) => setChannelRef(e)}
+                value={payload()?.guild.tpChannelId}
                 onInput={(e) =>
                   setConfig(
                     "features",
@@ -411,6 +406,9 @@ function config() {
               <label>Target Interval:</label>
               <select
                 ref={(e) => setTargetDayRef(e)}
+                value={
+                  splitInterval(payload()?.guild.tpInterval ?? 0).targetDay
+                }
                 onInput={(e) =>
                   setConfig(
                     "features",
@@ -440,6 +438,9 @@ function config() {
               at
               <select
                 ref={(e) => setTargetHourRef(e)}
+                value={
+                  splitInterval(payload()?.guild.tpInterval ?? 0).targetHour
+                }
                 onInput={(e) =>
                   setConfig(
                     "features",
@@ -450,14 +451,15 @@ function config() {
                 }
               >
                 <Index each={Array.from(Array(24)).map((_e, i) => i)}>
-                    {(id) => (
+                  {(id) => <option value={String(id())}>{String(id())}</option>}
-                      <option value={String(id())}>{String(id())}</option>
-                    )}
                 </Index>
               </select>
               :
               <select
                 ref={(e) => setTargetMinuteRef(e)}
+                value={
+                  splitInterval(payload()?.guild.tpInterval ?? 0).targetMinute
+                }
                 onInput={(e) =>
                   setConfig(
                     "features",
@@ -493,6 +495,7 @@ function config() {
                 type="checkbox"
                 id="pingableRoles"
                 ref={(e) => setPingableRolesRef(e)}
+                checked={payload()?.guild.pingableRoles}
                 onInput={(e) =>
                   setConfig(
                     "features",
@@ -518,10 +521,18 @@ function config() {
             Apply
           </button>
           <button onClick={() => navigator("/config")}>Back</button>
+          <button onClick={() => refetch()}>Reset</button>
           <Show when={willUpdateValues()}>UNSAVED CHANGES</Show>
         </section>
       </div>
     </div>
+  );
+}
+
+function config() {
+  return (
+    <Layout site="config">
+      <MyConfig />
     </Layout>
   );
 }