Add state to toggle

pedrolivaresanchez · Nov 7, 2024 · a0801ea · a0801ea
1 parent 4899ebf
commit a0801ea
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 13 deletions.
diff --git a/src/app/casos-activos/solicitudes/_components/PageContent.tsx b/src/app/casos-activos/solicitudes/_components/PageContent.tsx
@@ -52,8 +52,8 @@ export function PageContent({ currentCount, data, filters, towns }: PageContentP
     updateFilterAndUrlParams('currentPage', newPage);
   }
 
-  const handleVoluntariosChange: ChangeEventHandler<HTMLInputElement> = useCallback((e) => {
-    updateFilterAndUrlParams('soloSinVoluntarios', e.target.checked);
+  const handleVoluntariosChange = useCallback((state: boolean) => {
+    updateFilterAndUrlParams('soloSinVoluntarios', state);
   }, []);
 
   return (

diff --git a/src/components/Toggle.tsx b/src/components/Toggle.tsx
@@ -1,30 +1,43 @@
-import React from 'react';
+'use client';
 
-type ToggleProps = { handleChange: React.ChangeEventHandler<HTMLInputElement>; checked: boolean; label: string };
+import React, { useCallback, useEffect, useState } from 'react';
+
+type ToggleProps = { handleChange: (state: boolean) => void; initiallyChecked: boolean; label: string };
+
+export const Toggle = ({ initiallyChecked, handleChange, label }: ToggleProps) => {
+  const [isChecked, setChecked] = useState(initiallyChecked);
+  const onChange = useCallback(() => {
+    setChecked((prev) => !prev);
+  }, []);
+
+  useEffect(() => {
+    handleChange(isChecked);
+  }, [isChecked]);
 
-export const Toggle = ({ checked, handleChange, label }: ToggleProps) => {
   return (
     <div className="flex items-center space-x-2">
       <label htmlFor="toggle" className="font-medium">
         {label}
       </label>
       <div
         className={`relative inline-block w-10 h-6 rounded-full transition-colors duration-300 ${
-          checked ? 'bg-green-500' : 'bg-gray-300'
+          isChecked ? 'bg-green-500' : 'bg-gray-300'
         }`}
       >
         <input
           type="checkbox"
           id="toggle"
           className="absolute w-0 h-0 opacity-0"
-          checked={checked}
-          onChange={handleChange}
+          checked={isChecked}
+          onChange={onChange}
         />
-        <span
-          className={`absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-white transition-transform duration-300 transform ${
-            checked ? 'translate-x-4' : ''
-          }`}
-        ></span>
+        <label htmlFor="toggle">
+          <span
+            className={`absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-white transition-transform duration-300 transform ${
+              isChecked ? 'translate-x-4' : ''
+            }`}
+          ></span>
+        </label>
       </div>
     </div>
   );