From 1a92e3a64194663f6a3598305f8566d0e5b3c005 Mon Sep 17 00:00:00 2001
From: elisa33 <pipi.tdfuego@gmail.com>
Date: Fri, 29 Apr 2022 12:06:55 -0400
Subject: [PATCH] button changes & alimantes seccion

---
 src/components/FichaNutricional.jsx | 147 +++++++++++++++++-----------
 src/components/Home.jsx             |   4 +-
 src/components/Paciente.jsx         |  39 +++++---
 src/components/Pacientes.jsx        |   2 +-
 4 files changed, 119 insertions(+), 73 deletions(-)

diff --git a/src/components/FichaNutricional.jsx b/src/components/FichaNutricional.jsx
index 52399f6..29141c3 100644
--- a/src/components/FichaNutricional.jsx
+++ b/src/components/FichaNutricional.jsx
@@ -40,7 +40,7 @@ function FichaNutricional() {
       <div className="pt-10 wrapper">
       
         <form onSubmit={handleSubmit(onSubmit)} className="grid gap-8 pb-12">
-        <h1 className='font-bold'>Ficha nutricional</h1>
+          <h1 className='font-bold'>Ficha nutricional</h1>
           {/* Datos personales */}
           { formStep > 0 && (
             <section className="grid gap-5 md:grid-cols-2">
@@ -79,7 +79,10 @@ function FichaNutricional() {
             <label>Teléfono
               <input className='bottom-line' {...register("datos.telefono", { required: true })} />
             </label>
-            <button type="button" onClick={completeFormStep} className='w-full py-3 mt-3 text-white rounded-lg hover:bg-accent hover:shadow-lg bg-secondary'>Siguiente</button>
+            {
+              
+            }
+            <button type="button" onClick={completeFormStep} className={formStep > 1 ? 'hidden' : 'w-full py-3 mt-3 text-white rounded-lg hover:bg-accent hover:shadow-lg bg-secondary'}>Siguiente</button>
             </section>
           )}
           {/* HC */}
@@ -88,9 +91,11 @@ function FichaNutricional() {
               <h2>Historia Clínica</h2>
               <label className="flex items-center gap-4">
                 <span>¿Consume suplementos?</span>
-                <span>No</span>
-                  <input className="radio__toggle" type="checkbox" {...register('hc.suplementos')}/>
-                <span>Si</span>
+                <div className="flex items-center gap-2">
+                  <span>No</span>
+                    <input className="radio__toggle" type="checkbox" {...register('hc.suplementos')}/>
+                  <span>Si</span>
+                </div>
               </label>
               {
                 watch("hc.suplementos") && (
@@ -101,9 +106,11 @@ function FichaNutricional() {
               
               <label className="flex items-center gap-4">
                 <span>¿Realiza alguna dieta?</span>
-                <span>No</span>
-                  <input className="radio__toggle" type="checkbox" {...register('hc.dieta')}/>
-                <span>Si</span>
+                <div className="flex items-center gap-2">
+                  <span>No</span>
+                    <input className="radio__toggle" type="checkbox" {...register('hc.dieta')}/>
+                  <span>Si</span>
+                </div>
               </label>
 
               {
@@ -115,9 +122,11 @@ function FichaNutricional() {
 
               <label className="flex items-center gap-4">
                 <span>¿Come fuera del hogar?</span>
-                <span>No</span>
-                  <input className="radio__toggle" type="checkbox" {...register('hc.fuera')}/>
-                <span>Si</span>
+                <div className="flex items-center gap-2">
+                  <span>No</span>
+                    <input className="radio__toggle" type="checkbox" {...register('hc.fuera')}/>
+                  <span>Si</span>
+                </div>
               </label>
 
               {
@@ -129,9 +138,11 @@ function FichaNutricional() {
 
               <label className="flex items-center gap-4">
                 <span>¿Tiene alguna enfermedad metabólica de base?</span>
-                <span>No</span>
-                  <input className="radio__toggle" type="checkbox" {...register('hc.metabolica')}/>
-                <span>Si</span>
+                <div className="flex items-center gap-2">
+                  <span>No</span>
+                    <input className="radio__toggle" type="checkbox" {...register('hc.metabolica')}/>
+                  <span>Si</span>
+                </div>
               </label>
 
               {
@@ -142,9 +153,11 @@ function FichaNutricional() {
               }
               <label className="flex items-center gap-4">
                 <span>¿Alergias alimentarias?</span>
-                <span>No</span>
-                  <input className="radio__toggle" type="checkbox" {...register('hc.alergias')}/>
-                <span>Si</span>
+                <div className="flex items-center gap-2">
+                  <span>No</span>
+                    <input className="radio__toggle" type="checkbox" {...register('hc.alergias')}/>
+                  <span>Si</span>
+                </div>
               </label>
 
               {
@@ -155,9 +168,11 @@ function FichaNutricional() {
               }
               <label className="flex items-center gap-4">
                 <span>¿Intolerancia a la lactosa?</span>
-                <span>No</span>
-                  <input className="radio__toggle" type="checkbox" {...register('hc.lactosa')}/>
-                <span>Si</span>
+                <div className="flex items-center gap-2">
+                  <span>No</span>
+                    <input className="radio__toggle" type="checkbox" {...register('hc.lactosa')}/>
+                  <span>Si</span>
+                </div>
               </label>
 
               {
@@ -168,9 +183,11 @@ function FichaNutricional() {
               }
               <label className="flex items-center gap-4">
                 <span>¿Colon Irritable?</span>
-                <span>No</span>
-                  <input className="radio__toggle" type="checkbox" {...register('hc.irritable')}/>
-                <span>Si</span>
+                <div className="flex items-center gap-2">
+                  <span>No</span>
+                    <input className="radio__toggle" type="checkbox" {...register('hc.irritable')}/>
+                  <span>Si</span>
+                </div>
               </label>
 
               {
@@ -181,22 +198,26 @@ function FichaNutricional() {
               }
               <label className="flex items-center gap-4">
                 <span>¿Estreñimiento?</span>
-                <span>No</span>
-                  <input className="radio__toggle" type="checkbox" {...register('hc.estrenimientos')}/>
-                <span>Si</span>
+                <div className="flex items-center gap-2">
+                  <span>No</span>
+                    <input className="radio__toggle" type="checkbox" {...register('hc.estrenimiento')}/>
+                  <span>Si</span>
+                </div>
               </label>
 
               {
                 watch("hc.estrenimientos") && (
                   <label className='w-full'>Especificar
-                    <input className='bottom-line' {...register('hc.textoestrenimientos')} />
+                    <input className='bottom-line' {...register('hc.textoestrenimiento')} />
                   </label>)
               }
               <label className="flex items-center gap-4">
                 <span>¿Intolerancia alimentaria?</span>
-                <span>No</span>
-                  <input className="radio__toggle" type="checkbox" {...register('hc.intolerancia')}/>
-                <span>Si</span>
+                <div className="flex items-center gap-2">
+                  <span>No</span>
+                    <input className="radio__toggle" type="checkbox" {...register('hc.intolerancia')}/>
+                  <span>Si</span>
+                </div>
               </label>
 
               {
@@ -207,9 +228,11 @@ function FichaNutricional() {
               }
               <label className="flex items-center gap-4">
                 <span>¿Alteraciones de la vesícula biliar?</span>
-                <span>No</span>
-                  <input className="radio__toggle" type="checkbox" {...register('hc.vesicula')}/>
-                <span>Si</span>
+                <div className="flex items-center gap-2">
+                  <span>No</span>
+                    <input className="radio__toggle" type="checkbox" {...register('hc.vesicula')}/>
+                  <span>Si</span>
+                </div>
               </label>
 
               {
@@ -220,9 +243,11 @@ function FichaNutricional() {
               }
               <label className="flex items-center gap-4">
                 <span>¿Tiene o tuvo divertículos?</span>
-                <span>No</span>
-                  <input className="radio__toggle" type="checkbox" {...register('hc.diverticulos')}/>
-                <span>Si</span>
+                <div className="flex items-center gap-2">
+                  <span>No</span>
+                    <input className="radio__toggle" type="checkbox" {...register('hc.diverticulos')}/>
+                  <span>Si</span>
+                </div>
               </label>
 
               {
@@ -233,9 +258,11 @@ function FichaNutricional() {
               }
               <label className="flex items-center gap-4">
                 <span>¿Enfermedad renal?</span>
-                <span>No</span>
-                  <input className="radio__toggle" type="checkbox" {...register('hc.renal')}/>
-                <span>Si</span>
+                <div className="flex items-center gap-2">
+                  <span>No</span>
+                    <input className="radio__toggle" type="checkbox" {...register('hc.renal')}/>
+                  <span>Si</span>
+                </div>
               </label>
 
               {
@@ -246,9 +273,11 @@ function FichaNutricional() {
               }
               <label className="flex items-center gap-4">
                 <span>¿Toma medicación?</span>
-                <span>No</span>
-                  <input className="radio__toggle" type="checkbox" {...register('hc.medicacion')}/>
-                <span>Si</span>
+                <div className="flex items-center gap-2">
+                  <span>No</span>
+                    <input className="radio__toggle" type="checkbox" {...register('hc.medicacion')}/>
+                  <span>Si</span>
+                </div>
               </label>
 
               {
@@ -259,8 +288,10 @@ function FichaNutricional() {
               }
               <label className="flex items-center gap-4">
                 <span>¿Toma anticonceptivos?</span>
-                <span>No</span>
-                  <input className="radio__toggle" onClick={()=>{showInput('anticonceptivos')}} type="checkbox" {...register('hc.anticonceptivos')}/>
+                <div className="flex items-center gap-2">
+                  <span>No</span>
+                    <input className="radio__toggle" onClick={()=>{showInput('anticonceptivos')}} type="checkbox" {...register('hc.anticonceptivos')}/>
+                </div>
                 <span>Si</span>
               </label>
 
@@ -272,7 +303,7 @@ function FichaNutricional() {
               }
             
             
-            <button type="button" onClick={completeFormStep} className='w-full py-3 mt-3 text-white rounded-lg hover:bg-accent hover:shadow-lg bg-secondary'>Siguiente</button>
+            <button type="button" onClick={completeFormStep} className={formStep > 2 ? 'hidden' : 'w-full py-3 mt-3 text-white rounded-lg hover:bg-accent hover:shadow-lg bg-secondary'}>Siguiente</button>
             </section>
           )}
           {/* Alimentos */}
@@ -627,7 +658,7 @@ function FichaNutricional() {
               </label>
             
             
-            <button type="button" onClick={completeFormStep} className='w-full py-3 mt-3 text-white rounded-lg hover:bg-accent hover:shadow-lg bg-secondary'>Siguiente</button>
+            <button type="button" onClick={completeFormStep} className={formStep > 3 ? 'hidden' : 'w-full py-3 mt-3 text-white rounded-lg hover:bg-accent hover:shadow-lg bg-secondary'}>Siguiente</button>
           
             </section>
           )}
@@ -685,7 +716,7 @@ function FichaNutricional() {
 
             
             
-            <button type="button" onClick={completeFormStep} className='w-full py-3 mt-3 text-white rounded-lg hover:bg-accent hover:shadow-lg bg-secondary'>Siguiente</button>
+            <button type="button" onClick={completeFormStep} className={formStep > 4 ? 'hidden' : 'w-full py-3 mt-3 text-white rounded-lg hover:bg-accent hover:shadow-lg bg-secondary'}>Siguiente</button>
           
             </section>
           )}
@@ -719,7 +750,7 @@ function FichaNutricional() {
               </ul>
             
             
-            <button type="button" onClick={completeFormStep} className='w-full py-3 mt-3 text-white rounded-lg hover:bg-accent hover:shadow-lg bg-secondary'>Siguiente</button>
+            <button type="button" onClick={completeFormStep} className={formStep > 5 ? 'hidden' : 'w-full py-3 mt-3 text-white rounded-lg hover:bg-accent hover:shadow-lg bg-secondary'}>Siguiente</button>
           
             </section>
           )}
@@ -779,7 +810,7 @@ function FichaNutricional() {
               <input className='bottom-line' {...register('dieta.otras')} />
             
             
-            <button type="button" onClick={completeFormStep} className='w-full py-3 mt-3 text-white rounded-lg hover:bg-accent hover:shadow-lg bg-secondary'>Siguiente</button>
+            <button type="button" onClick={completeFormStep} className={formStep > 6 ? 'hidden' : 'w-full py-3 mt-3 text-white rounded-lg hover:bg-accent hover:shadow-lg bg-secondary'}>Siguiente</button>
           
             </section>
           )}
@@ -796,9 +827,11 @@ function FichaNutricional() {
                 </label>
                 <label className="flex items-center gap-4 py-4">
                   <span>¿Come algo antes de entrenar?</span>
-                  <span>No</span>
-                    <input className="radio__toggle" type="checkbox" {...register('actividad.comidaantes')}/>
-                  <span>Si</span>
+                  <div className="flex items-center gap-2">
+                    <span>No</span>
+                      <input className="radio__toggle" type="checkbox" {...register('actividad.comidaantes')}/>
+                    <span>Si</span>
+                  </div>
                 </label>
                 {
                   watch("actividad.comidaantes") && (
@@ -808,9 +841,11 @@ function FichaNutricional() {
                 }
                 <label className="flex items-center gap-4 py-4">
                   <span>¿Come algo despues de entrenar?</span>
-                  <span>No</span>
-                    <input className="radio__toggle" type="checkbox" {...register('actividad.comidadespues')}/>
-                  <span>Si</span>
+                  <div className="flex items-center gap-2">
+                    <span>No</span>
+                      <input className="radio__toggle" type="checkbox" {...register('actividad.comidadespues')}/>
+                    <span>Si</span>
+                  </div>
                 </label>
                 {
                   watch("actividad.comidadespues") && (
@@ -831,7 +866,7 @@ function FichaNutricional() {
                   <input className='bottom-line' {...register('otros.comoconociste')} />
                 </label>
               </div>
-              <button type="submit" className='w-full py-3 text-white rounded-lg hover:bg-accent hover:shadow-lg bg-secondary'>Enviar Formulario</button>
+              <button type="submit" className='w-full py-3 text-white rounded-lg hover:bg-accent hover:shadow-lg bg-primary'>Confirmar y enviar formulario</button>
               <div className="pt-4 text-center text-primary">{mensaje}</div>
             </section>
           )}
diff --git a/src/components/Home.jsx b/src/components/Home.jsx
index 870a814..565faa1 100644
--- a/src/components/Home.jsx
+++ b/src/components/Home.jsx
@@ -12,8 +12,8 @@ const Home = () => {
         <div className="flex flex-col items-center h-screen gap-5 p-16 wrapper">
           <h2 className="text-center text-white">Hola! soy tu nutricionista, te pido por favor que completes el siguiente formulario a fin de que...</h2>
     
-            <Link to="/ficha" className="p-3 bg-white rounded-lg text-green">Ficha Nutricional</Link>
-            <Link to="/pacientes" className="p-3 bg-white rounded-lg text-green">pacientes</Link>
+            <Link to="/ficha" className="w-40 p-3 text-center bg-white border-2 border-white rounded-lg text-green hover:text-white hover:bg-green">Ficha Nutricional</Link>
+            <Link to="/pacientes" className="w-40 p-3 text-center bg-white border-2 border-white rounded-lg text-green hover:text-white hover:bg-green">Lista Pacientes</Link>
        
         </div>
     </div>
diff --git a/src/components/Paciente.jsx b/src/components/Paciente.jsx
index 67cee9c..178d806 100644
--- a/src/components/Paciente.jsx
+++ b/src/components/Paciente.jsx
@@ -72,11 +72,22 @@ const Paciente = () => {
         
         <div>
           <h2>Historia Clinica</h2>
-          {
-             hc && Object.entries(hc).map(([key, value]) => (
-                  value &&  <p>{key} - {value}</p>
-             ))
-          }
+          
+          {hc.suplementos && <p>suplementos: {hc.textosuplementos}</p>}
+          {hc.dieta && <p>dieta: {hc.textodieta}</p>}
+          {hc.fuera && <p>fuera: {hc.textofuera}</p>}
+          {hc.metabolica && <p>metabolica: {hc.textometabolica}</p>}
+          {hc.alergias && <p>alergias: {hc.textoalergias}</p>}
+          {hc.lactosa && <p>lactosa: {hc.textolactosa}</p>}
+          {hc.irritable && <p>irritable: {hc.textoirritable}</p>}
+          {hc.estrenimiento && <p>estrenimiento: {hc.textoestrenimiento}</p>}
+          {hc.intoleracia && <p>intoleracia: {hc.textointoleracia}</p>}
+          {hc.vesicula && <p>vesicula: {hc.textovesicula}</p>}
+          {hc.diverticulos && <p>Anticonceptivos: {hc.textoanticonceptivos}</p>}
+          {hc.renal && <p>renal: {hc.textorenal}</p>}
+          {hc.medicacion && <p>medicacion: {hc.textomedicacion}</p>}
+          {hc.anticonceptivos && <p>Anticonceptivos: {hc.textoanticonceptivos}</p>}
+          
         </div>
         <div>
           <h2>Alimentos</h2>
@@ -147,17 +158,17 @@ const Paciente = () => {
           {
               dieta && (
                   <div>
-                    <p className='normal-case'>Desayuno: {dieta.desayuno} {dieta.desayunohora}hs</p>
+                    <p className='normal-case'>{dieta.desayunohora}hs Desayuno: {dieta.desayuno} </p>
                     {
-                      dieta.colacion &&  <p className='normal-case'>Colacion: {dieta.colacion} {dieta.colacionhora}hs</p>
+                      dieta.colacion &&  <p className='normal-case'>{dieta.colacionhora}hs Colacion: {dieta.colacion} </p>
                     }
                    
                     <p className='normal-case'>Almuerzo: {dieta.almuerzo} {dieta.almuerzohora}hs</p>
                     {
-                      dieta.colaciondos &&  <p className='normal-case'>Colaciondos: {dieta.colaciondos} {dieta.colaciondoshora}hs</p>
+                      dieta.colaciondos &&  <p className='normal-case'>{dieta.colaciondoshora} Colacion: {dieta.colaciondos} hs</p>
                     }
-                    <p className='normal-case'>Merienda: {dieta.merienda} {dieta.meriendahora}hs</p>
-                    <p className='normal-case'>Cena: {dieta.cena} {dieta.cenahora}hs</p>
+                    <p className='normal-case'>{dieta.meriendahora}hs Merienda: {dieta.merienda} </p>
+                    <p className='normal-case'>{dieta.cenahora}hs Cena: {dieta.cena} </p>
                     {
                       dieta.otros &&  <p className='normal-case'>otros: {dieta.otros} {dieta.otroshora}hs</p>
                     }
@@ -169,16 +180,16 @@ const Paciente = () => {
           <h2>Actividad fisica</h2>
          
           
-          {/* {actividad.tipo &&  <p className='normal-case'>Tipo: {actividad.tipo} </p>  }
+          {actividad.tipo &&  <p className='normal-case'>Tipo: {actividad.tipo} </p>  }
           {actividad.tiempo &&  <p className='normal-case'>tiempo: {actividad.tiempo} hs</p>   }
-          {actividad.bebidas &&  <p className='normal-case'>bebidas: {actividad.bebidas} </p>  } */}
+          {actividad.bebidas &&  <p className='normal-case'>bebidas: {actividad.bebidas} </p>  }
         </div>
         <div>
           <h2>Otros</h2>
           
-          {/* {otros.comidafavorita &&  <p className='normal-case'>Comida favorita: {otros.comidafavorita}</p>          }
+          {otros.comidafavorita &&  <p className='normal-case'>Comida favorita: {otros.comidafavorita}</p>          }
           {otros.motivoconsulta &&  <p className='normal-case'>Motivo consulta: {otros.motivoconsulta}</p>          }
-          {otros.comoconociste &&  <p className='normal-case'>Como me conociste: {otros.comoconociste} </p> }  */}        
+          {otros.comoconociste &&  <p className='normal-case'>Como me conociste: {otros.comoconociste} </p> }         
         </div>
         
         
diff --git a/src/components/Pacientes.jsx b/src/components/Pacientes.jsx
index e883a22..ed7f870 100644
--- a/src/components/Pacientes.jsx
+++ b/src/components/Pacientes.jsx
@@ -39,7 +39,7 @@ const Pacientes = () => {
           {respuestas.map((item)=>(
           
                   <li>
-                    <Link key={item.id} to={`/pacientes/${item.id}`} className="capitalize text-accent">
+                    <Link key={item.id} to={`/pacientes/${item.id}`} className="capitalize text-accent hover:text-white">
                     {item.data.datos.nombre} {item.data.datos.apellido}
                     </Link>
                   </li>