Submit the form without a save button

Author: samejr

apps/webapp/app/routes/resources.account.session-duration/SessionDurationSetting.tsx

@@ -1,5 +1,4 @@
-import { Form, useNavigation } from "@remix-run/react";
-import { Button } from "~/components/primitives/Buttons";
+import { useSubmit } from "@remix-run/react";
 import { InputGroup } from "~/components/primitives/InputGroup";
 import { Label } from "~/components/primitives/Label";
 import { Paragraph } from "~/components/primitives/Paragraph";
@@ -17,54 +16,56 @@ export function SessionDurationSetting({
   options,
   orgCapSeconds,
 }: SessionDurationSettingProps) {
-  const navigation = useNavigation();
-  const isSubmitting =
-    navigation.state !== "idle" &&
-    navigation.formAction === "/resources/account/session-duration";
+  const submit = useSubmit();
 
   const orgCapOption =
     orgCapSeconds === null ? null : options.find((o) => o.value === orgCapSeconds);
 
   return (
-    <Form method="post" action="/resources/account/session-duration" className="w-full">
-      <InputGroup className="mb-4">
-        <Label>Automatic logout</Label>
-        <Paragraph variant="small">
-          Automatically log out after this period of time. Choose a shorter duration for added
-          security on shared or unattended devices.
-          {orgCapSeconds !== null ? (
-            <>
-              {" "}
-              Your organization caps this at {orgCapOption?.label ?? `${orgCapSeconds} seconds`}.
-            </>
-          ) : null}
-        </Paragraph>
-      </InputGroup>
-      <div className="flex items-center gap-2">
-        <Select
-          name="sessionDuration"
-          variant="tertiary/medium"
-          defaultValue={String(currentValue)}
-          text={(value: string) =>
-            options.find((o) => String(o.value) === value)?.label ?? "Select a duration"
-          }
-          dropdownIcon
-        >
-          {options.map((option) => (
-            <SelectItem key={option.value} value={String(option.value)}>
-              {option.label}
-            </SelectItem>
-          ))}
-        </Select>
-        <Button
-          type="submit"
-          variant="primary/medium"
-          disabled={isSubmitting}
-          data-action="save session duration"
-        >
-          {isSubmitting ? "Saving…" : "Save"}
-        </Button>
+    <div className="w-full">
+      <div className="flex w-full items-center justify-between gap-4">
+        <InputGroup className="flex-1">
+          <Label>Automatic logout</Label>
+          <Paragraph variant="small">
+            Automatically log out after a period of time.
+            {orgCapSeconds !== null ? (
+              <>
+                {" "}
+                Your organization caps this at {orgCapOption?.label ?? `${orgCapSeconds} seconds`}.
+              </>
+            ) : null}
+          </Paragraph>
+        </InputGroup>
+        <div className="flex flex-none items-center">
+          <Select
+            name="sessionDuration"
+            variant="secondary/small"
+            defaultValue={String(currentValue)}
+            setValue={(value) => {
+              const next = Array.isArray(value) ? value[0] : value;
+              if (typeof next !== "string" || next === String(currentValue)) return;
+              submit(
+                { sessionDuration: next },
+                { method: "post", action: "/resources/account/session-duration" }
+              );
+            }}
+            text={(value: string) =>
+              options.find((o) => String(o.value) === value)?.label ?? "Select a duration"
+            }
+            dropdownIcon
+          >
+            {options.map((option) => (
+              <SelectItem
+                key={option.value}
+                value={String(option.value)}
+                className="text-text-bright"
+              >
+                {option.label}
+              </SelectItem>
+            ))}
+          </Select>
+        </div>
       </div>
-    </Form>
+    </div>
   );
 }