feat: updated switch field

SnailyCAD · Apr 15, 2023 · afa0d9c · afa0d9c
1 parent 781f9a3
commit afa0d9c
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 55 deletions.
diff --git a/apps/client/src/components/admin/values/manage-modal/LicenseFields.tsx b/apps/client/src/components/admin/values/manage-modal/LicenseFields.tsx
@@ -1,7 +1,5 @@
 import { ValueLicenseType } from "@snailycad/types";
-import { SelectField } from "@snailycad/ui";
-import { FormField } from "components/form/FormField";
-import { Toggle } from "components/form/Toggle";
+import { SelectField, SwitchField } from "@snailycad/ui";
 import { useFormikContext } from "formik";
 
 export const LICENSE_LABELS = {
@@ -16,7 +14,7 @@ const LICENSE_TYPES = Object.values(ValueLicenseType).map((v) => ({
 }));
 
 export function LicenseFields() {
-  const { values, errors, setFieldValue, handleChange } = useFormikContext<any>();
+  const { values, errors, setFieldValue } = useFormikContext<any>();
 
   return (
     <>
@@ -54,13 +52,13 @@ export function LicenseFields() {
 
       {!values.licenseType || values.licenseType === ValueLicenseType.LICENSE ? (
         <div className="flex flex-col w-full">
-          <FormField checkbox errorMessage={errors.isDefault as string} label="Default license">
-            <Toggle
-              name="isDefault"
-              value={values.isDefault ?? false}
-              onCheckedChange={handleChange}
-            />
-          </FormField>
+          <SwitchField
+            isSelected={values.isDefault ?? false}
+            onChange={(isSelected) => setFieldValue("isDefault", isSelected)}
+          >
+            Default License
+          </SwitchField>
+
           <p className="text-base italic">
             This license will be given to a citizen when they are first created.
           </p>

diff --git a/apps/client/src/components/business/CreateBusinessModal.tsx b/apps/client/src/components/business/CreateBusinessModal.tsx
@@ -1,5 +1,4 @@
-import { Loader, Button, TextField } from "@snailycad/ui";
-import { FormField } from "components/form/FormField";
+import { Loader, Button, TextField, SwitchField } from "@snailycad/ui";
 import { Modal } from "components/modal/Modal";
 import { useModal } from "state/modalState";
 import { Form, Formik } from "formik";
@@ -8,7 +7,6 @@ import { ModalIds } from "types/ModalIds";
 import { useTranslations } from "use-intl";
 import { CREATE_COMPANY_SCHEMA } from "@snailycad/schemas";
 import { handleValidate } from "lib/handleValidate";
-import { Toggle } from "components/form/Toggle";
 import { useRouter } from "next/router";
 import { toastMessage } from "lib/toastMessage";
 import { WhitelistStatus } from "@snailycad/types";
@@ -69,7 +67,7 @@ export function CreateBusinessModal({ onCreate }: Props) {
       onClose={handleClose}
     >
       <Formik validate={validate} onSubmit={onSubmit} initialValues={INITIAL_VALUES}>
-        {({ handleChange, setFieldValue, errors, values, isValid }) => (
+        {({ setFieldValue, errors, values, isValid }) => (
           <Form>
             <CitizenSuggestionsField
               autoFocus
@@ -90,13 +88,12 @@ export function CreateBusinessModal({ onCreate }: Props) {
 
             <AddressPostalSelect />
 
-            <FormField errorMessage={errors.whitelisted} label={t("whitelisted")}>
-              <Toggle
-                name="whitelisted"
-                onCheckedChange={handleChange}
-                value={values.whitelisted}
-              />
-            </FormField>
+            <SwitchField
+              isSelected={values.whitelisted}
+              onChange={(isSelected) => setFieldValue("whitelisted", isSelected)}
+            >
+              {t("whitelisted")}
+            </SwitchField>
 
             <footer className="flex justify-end mt-5">
               <Button type="reset" onPress={handleClose} variant="cancel">

diff --git a/apps/client/src/components/business/manage/tabs/employees-tab/manage-employee-modal.tsx b/apps/client/src/components/business/manage/tabs/employees-tab/manage-employee-modal.tsx
@@ -1,4 +1,4 @@
-import { Loader, Button } from "@snailycad/ui";
+import { Loader, Button, SwitchField } from "@snailycad/ui";
 import { FormField } from "components/form/FormField";
 import { Modal } from "components/modal/Modal";
 import { useModal } from "state/modalState";
@@ -9,7 +9,6 @@ import { ModalIds } from "types/ModalIds";
 import { useTranslations } from "use-intl";
 import { UPDATE_EMPLOYEE_SCHEMA } from "@snailycad/schemas";
 import { handleValidate } from "lib/handleValidate";
-import { Toggle } from "components/form/Toggle";
 import { Select } from "components/form/Select";
 import { FormRow } from "components/form/FormRow";
 import { useValues } from "context/ValuesContext";
@@ -101,7 +100,7 @@ export function ManageEmployeeModal({ onClose, onUpdate, employee, isAdmin }: Pr
       onClose={handleClose}
     >
       <Formik validate={validate} onSubmit={onSubmit} initialValues={INITIAL_VALUES}>
-        {({ handleChange, errors, values, isValid }) => (
+        {({ handleChange, setFieldValue, errors, values, isValid }) => (
           <Form>
             <FormField errorMessage={errors.roleId} label={t("role")}>
               <Select
@@ -116,39 +115,35 @@ export function ManageEmployeeModal({ onClose, onUpdate, employee, isAdmin }: Pr
             </FormField>
 
             <FormRow>
-              <FormField errorMessage={errors.canManageEmployees} label={t("canManageEmployees")}>
-                <Toggle
-                  name="canManageEmployees"
-                  onCheckedChange={handleChange}
-                  value={values.canManageEmployees}
-                />
-              </FormField>
-
-              <FormField errorMessage={errors.canManageVehicles} label={t("canManageVehicles")}>
-                <Toggle
-                  name="canManageVehicles"
-                  onCheckedChange={handleChange}
-                  value={values.canManageVehicles}
-                />
-              </FormField>
+              <SwitchField
+                isSelected={values.canManageEmployees}
+                onChange={(isSelected) => setFieldValue("canManageEmployees", isSelected)}
+              >
+                {t("canManageEmployees")}
+              </SwitchField>
+
+              <SwitchField
+                isSelected={values.canManageVehicles}
+                onChange={(isSelected) => setFieldValue("canManageVehicles", isSelected)}
+              >
+                {t("canManageVehicles")}
+              </SwitchField>
             </FormRow>
 
             <FormRow>
-              <FormField errorMessage={errors.canCreatePosts} label={t("canCreatePosts")}>
-                <Toggle
-                  name="canCreatePosts"
-                  onCheckedChange={handleChange}
-                  value={values.canCreatePosts}
-                />
-              </FormField>
-
-              <FormField errorMessage={errors.employeeOfTheMonth} label={t("employeeOfTheMonth")}>
-                <Toggle
-                  name="employeeOfTheMonth"
-                  onCheckedChange={handleChange}
-                  value={values.employeeOfTheMonth}
-                />
-              </FormField>
+              <SwitchField
+                isSelected={values.canCreatePosts}
+                onChange={(isSelected) => setFieldValue("canCreatePosts", isSelected)}
+              >
+                {t("canCreatePosts")}
+              </SwitchField>
+
+              <SwitchField
+                isSelected={values.employeeOfTheMonth}
+                onChange={(isSelected) => setFieldValue("employeeOfTheMonth", isSelected)}
+              >
+                {t("employeeOfTheMonth")}
+              </SwitchField>
             </FormRow>
 
             <footer className="flex justify-end mt-5">