feedback: use formik and Yup for preferences form

packages/bruno-app/src/components/Preferences/General/index.js

@@ -1,69 +1,96 @@
-import React, { useState } from 'react';
+import React from 'react';
+import { useFormik } from 'formik';
 import { useSelector, useDispatch } from 'react-redux';
 import { savePreferences } from 'providers/ReduxStore/slices/app';
 import StyledWrapper from './StyledWrapper';
+import * as Yup from 'yup';
+import toast from 'react-hot-toast';
 
 const General = ({ close }) => {
   const preferences = useSelector((state) => state.app.preferences);
   const dispatch = useDispatch();
 
-  const [sslVerification, setSslVerification] = useState(preferences.request.sslVerification);
+  const preferencesSchema = Yup.object().shape({
-  const [timeout, setTimeout] = useState(preferences.request.timeout);
+    sslVerification: Yup.boolean(),
+    timeout: Yup.number('Request Timeout must be a number')
+      .positive('Request Timeout must be a positive number')
+      .typeError('Request Timeout must be a number')
+      .optional()
+  });
 
-  const handleSave = () => {
+  const formik = useFormik({
+    initialValues: {
+      sslVerification: preferences.request.sslVerification,
+      timeout: preferences.request.timeout
+    },
+    validationSchema: preferencesSchema,
+    onSubmit: async (values) => {
+      try {
+        const newPreferences = await proxySchema.validate(values, { abortEarly: true });
+        handleSave(newPreferences);
+      } catch (error) {
+        console.error('Preferences validation error:', error.message);
+      }
+    }
+  });
+
+  const handleSave = (newPreferences) => {
     dispatch(
       savePreferences({
         ...preferences,
         request: {
-          sslVerification,
+          sslVerification: newPreferences.sslVerification,
-          timeout
+          timeout: newPreferences.timeout
         }
       })
-    ).then(() => {
+    )
+      .then(() => {
         close();
-    });
+      })
-  };
+      .catch((err) => console.log(err) && toast.error('Failed to update preferences'));
-
-  const handleTimeoutChange = (value) => {
-    if (/^[0-9]\d*$/.test(value) || value === '') {
-      setTimeout(value);
-    }
   };
 
   return (
     <StyledWrapper>
+      <form className="bruno-form" onSubmit={formik.handleSubmit}>
         <div className="flex items-center mt-2">
-        <label className="mr-2 select-none" style={{ minWidth: 200 }} htmlFor="ssl-cert-verification">
+          <label className="block font-medium mr-2 select-none" style={{ minWidth: 200 }} htmlFor="sslVerification">
             SSL Certificate Verification
           </label>
           <input
             id="ssl-cert-verification"
             type="checkbox"
-          checked={sslVerification}
+            name="sslVerification"
-          onChange={() => setSslVerification(!sslVerification)}
+            checked={formik.values.sslVerification}
+            onChange={formik.handleChange}
             className="mousetrap mr-0"
           />
         </div>
         <div className="flex flex-col mt-6">
-        <label className="block font-medium select-none">Request Timeout (in ms)</label>
+          <label className="block font-medium select-none" htmlFor="timeout">
+            Request Timeout (in ms)
+          </label>
           <input
             type="text"
-          className="block textbox mt-2 w-1/3"
+            name="timeout"
+            className="block textbox mt-2 w-16"
             autoComplete="off"
             autoCorrect="off"
             autoCapitalize="off"
             spellCheck="false"
-          onChange={(e) => handleTimeoutChange(e.target.value)}
+            onChange={formik.handleChange}
-          defaultValue={timeout === 0 ? '' : timeout}
+            value={formik.values.timeout}
-          value={timeout}
           />
         </div>
-
+        {formik.touched.timeout && formik.errors.timeout ? (
+          <div className="text-red-500">{formik.errors.timeout}</div>
+        ) : null}
         <div className="mt-10">
-        <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
+          <button type="submit" className="submit btn btn-sm btn-secondary">
             Save
           </button>
         </div>
+      </form>
     </StyledWrapper>
   );
 };

packages/bruno-app/src/providers/ReduxStore/slices/app.js

@@ -9,7 +9,8 @@ const initialState = {
   showHomePage: false,
   preferences: {
     request: {
-      sslVerification: true
+      sslVerification: true,
+      timeout: 0
     },
     font: {
       codeFont: 'default'