From a0801ea4bf32cf499fd45d903a51da6f865a1be5 Mon Sep 17 00:00:00 2001
From: Pablo Gracia Gil <pablo.graciag@gmail.com>
Date: Thu, 7 Nov 2024 18:55:15 +0100
Subject: [PATCH] Add state to toggle

---
 .../solicitudes/_components/PageContent.tsx   |  4 +--
 src/components/Toggle.tsx                     | 35 +++++++++++++------
 2 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/src/app/casos-activos/solicitudes/_components/PageContent.tsx b/src/app/casos-activos/solicitudes/_components/PageContent.tsx
index 59d551e4..51fcb2d7 100644
--- 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
index bf52a258..e16cb228 100644
--- a/src/components/Toggle.tsx
+++ b/src/components/Toggle.tsx
@@ -1,8 +1,19 @@
-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">
@@ -10,21 +21,23 @@ export const Toggle = ({ checked, handleChange, label }: ToggleProps) => {
       </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>
   );