Fix: clones from admin

ISPP-G5 · Mar 4, 2024 · 80c7a44 · 80c7a44
1 parent c63ae20
commit 80c7a44
Showing 7 changed files with 138 additions and 191 deletions.
diff --git a/src/components/AdminLayout.js b/src/components/AdminLayout.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import HeaderAdmin from '../components/HeaderAdmin';
+import MenuAdmin from '../components/MenuAdmin';
+
+const AdminLayout = ({ children, selected }) => (
+  <div className='App'>
+    <HeaderAdmin />
+    <div className='admin-main'>
+      <MenuAdmin selected={selected} />
+      <div className='vertical-line'></div>
+      <div className='admin-container'>
+        {children}
+      </div>
+    </div>
+  </div>
+);
+
+export default AdminLayout;
diff --git a/src/components/FamilyCard.js b/src/components/FamilyCard.js
@@ -0,0 +1,16 @@
+// FamilyCard.js
+import React from 'react';
+
+const FamilyCard = ({ familyName, kidName }) => (
+  <div className='card-info'>
+    <div className='family-request'>
+      <img src='https://via.placeholder.com/150' alt='placeholder' />
+      <div className='family-info'>
+        <p>{familyName}</p>
+        <p>{kidName}</p>
+      </div>
+    </div>
+  </div>
+);
+
+export default FamilyCard;
diff --git a/src/screens/AdminClases.js b/src/screens/AdminClases.js
@@ -3,8 +3,7 @@ import { makeStyles } from '@material-ui/core/styles';
 import AddCircleIcon from '@material-ui/icons/AddCircle';
 import EditIcon from '@material-ui/icons/Edit';
 import DeleteIcon from '@material-ui/icons/Delete';
-import HeaderAdmin from '../components/HeaderAdmin';
-import MenuAdmin from '../components/MenuAdmin';
+import AdminLayout from '../components/AdminLayout';
 import Dialog from '@material-ui/core/Dialog';
 import Button from '@material-ui/core/Button';
 import '../styles/styles.css';
@@ -43,6 +42,7 @@ const Box = ({ lesson, index, handleDelete }) => {
   };
 
   return (
+
     <div className="box">
       <div className="clase">
         <div className="overlap-group">
@@ -115,22 +115,14 @@ const AdminClases = () => {
   };
 
   return (
-    <div className="App">
-      <HeaderAdmin />
-      <div className='admin-main'>
-        <MenuAdmin selected='Clases' />
-        <div className='vertical-line'></div>
-        <div className='admin-container'>
-          <AddClass />
-          <div className={classes.lessonsContainer} style={{ marginRight: '20rem' }}>
-            {lessons.map((lesson, index) => (
-              <Box key={index} index={index} lesson={lesson} handleDelete={handleDelete} />
-            ))}
-          </div>
-        </div>
-      </div>
-      <div className="main"></div>
+    <AdminLayout selected='Clases'> {/* Use AdminLayout here */}
+    <AddClass />
+    <div className={classes.lessonsContainer} style={{ marginRight: '20rem' }}>
+      {lessons.map((lesson, index) => (
+        <Box key={index} index={index} lesson={lesson} handleDelete={handleDelete} />
+      ))}
     </div>
+  </AdminLayout>
   );
 };
 

diff --git a/src/screens/AdminCrearProyecto.js b/src/screens/AdminCrearProyecto.js
@@ -1,30 +1,17 @@
 import React from 'react';
 import '../styles/styles.css';
-import HeaderAdmin from '../components/HeaderAdmin';
-import MenuAdmin from '../components/MenuAdmin';
+import AdminLayout from '../components/AdminLayout';
 
 function AdminProyectos() {
   return (
-    <div className='App'>
-        <HeaderAdmin />
-        <div className='admin-main'>
-
-            {/* Change selected for the name of your screen */}
-            <MenuAdmin selected='Proyectos' />
-            <div className='vertical-line'></div>  
-
-            <div className='admin-container'>
-
-                {/* Example of screen with several screens inside */}
-                <div className='pantallas'>
-                    <a href='/AdminProyectos'>Nuestros Proyectos</a>
-                    <a href='/AdminCrearProyecto' className='selected-pantalla'>Añadir Proyecto</a>
-                </div>
-
-            </div>
-        </div>        
-    </div>
+    <AdminLayout selected='Proyectos'> 
+      <div className='admin-container'>
+        <div className='pantallas'>
+          <a href='/AdminProyectos'>Nuestros Proyectos</a>
+          <a href='/AdminCrearProyecto' className='selected-pantalla'>Añadir Proyecto</a>
+        </div>
+      </div>
+    </AdminLayout>
   );
 }
-
 export default AdminProyectos;
diff --git a/src/screens/AdminEventos.js b/src/screens/AdminEventos.js
@@ -1,11 +1,10 @@
 import '../styles/styles.css';
-import HeaderAdmin from '../components/HeaderAdmin';
-import MenuAdmin from '../components/MenuAdmin';
 import React, { useState } from 'react';
 import { Calendar, momentLocalizer } from 'react-big-calendar';
 import moment from 'moment';
 import 'react-big-calendar/lib/css/react-big-calendar.css';
 import { Button, Dialog, DialogActions, DialogContent, DialogTitle, TextField, makeStyles } from '@material-ui/core';
+import AdminLayout from '../components/AdminLayout';
 
 function AdminEventos() {
   const localizer = momentLocalizer(moment);
@@ -131,69 +130,54 @@ function AdminEventos() {
     }
 
     return (
-      <div className='App'>
-        <HeaderAdmin />
-        <div className='admin-main'>
-          {/* Change selected for the name of your screen */}
-          <MenuAdmin selected='Eventos' />
-          <div className='vertical-line'></div>
-
-          <div className='admin-container'>
-            {/* Example of blue card for info */}
-
-
-            {/* INTRODUCE HERE YOUR IMPLEMENTATIONS */}
-            <button
-                className= 'button'
-                onClick={() => setOpenAddDialog(true)}
-              > Crear Evento              
-            </button>
-            <div className={classes.calendarContainer}>
-              <Calendar
-                localizer={localizer}
-                events={events}
-                startAccessor='start'
-                endAccessor='end'
-                onSelectSlot={handleSelect}
-                onSelectEvent={handleEventClick}
-                views={['month', 'week', 'day']}
-                selectable={true}
-                step={15}
-                timeslots={4}
-                style={{ minHeight: '600px' }}
-              />
-
-
-            </div>
-            <Dialog open={openAddDialog} onClose={() => setOpenAddDialog(false)}>
-            <DialogTitle>Add Event</DialogTitle>
-            <DialogContent>
-              {renderTextFieldComponents()}
-
-            </DialogContent>
-            <DialogActions>
-              <Button onClick={() => setOpenAddDialog(false)} color="primary">Not</Button>
-              <Button onClick={handleEventAdd} color="primary">Add</Button>
-            </DialogActions>
-          </Dialog>
-          <Dialog open={openEditDialog} onClose={() => setOpenEditDialog(false)}>
-            <DialogTitle>Edit Event</DialogTitle>
-            <DialogContent>
-              {renderTextFieldComponents()}
-            </DialogContent>
-            <DialogActions>
-              <Button onClick={() => setOpenEditDialog(false)} color="primary">Not Edit</Button>
-              <Button onClick={handleEventEdit} color="primary">Edit</Button>
-              <Button onClick={handleEventDelete} color="secondary">Delete</Button>
-            </DialogActions>
-          </Dialog>
-          </div>
+      <AdminLayout selected='Eventos'>
+        <button
+          className='button'
+          onClick={() => setOpenAddDialog(true)}
+        >
+          Crear Evento
+        </button>
+        <div className={classes.calendarContainer}>
+          <Calendar
+            localizer={localizer}
+            events={events}
+            startAccessor='start'
+            endAccessor='end'
+            onSelectSlot={handleSelect}
+            onSelectEvent={handleEventClick}
+            views={['month', 'week', 'day']}
+            selectable={true}
+            step={15}
+            timeslots={4}
+            style={{ minHeight: '600px' }}
+          />
         </div>
-      </div>
+        <Dialog open={openAddDialog} onClose={() => setOpenAddDialog(false)}>
+          <DialogTitle>Add Event</DialogTitle>
+          <DialogContent>
+            {renderTextFieldComponents()}
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={() => setOpenAddDialog(false)} color="primary">Not</Button>
+            <Button onClick={handleEventAdd} color="primary">Add</Button>
+          </DialogActions>
+        </Dialog>
+        <Dialog open={openEditDialog} onClose={() => setOpenEditDialog(false)}>
+          <DialogTitle>Edit Event</DialogTitle>
+          <DialogContent>
+            {renderTextFieldComponents()}
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={() => setOpenEditDialog(false)} color="primary">Not Edit</Button>
+            <Button onClick={handleEventEdit} color="primary">Edit</Button>
+            <Button onClick={handleEventDelete} color="secondary">Delete</Button>
+          </DialogActions>
+        </Dialog>
+      </AdminLayout>
     );
-  };
-
+  }
   return <AdminEvents />;
+
 }
 
 export default AdminEventos;
diff --git a/src/screens/AdminFamily.js b/src/screens/AdminFamily.js
@@ -1,6 +1,5 @@
 import '../styles/styles.css';
-import HeaderAdmin from '../components/HeaderAdmin';
-import MenuAdmin from '../components/MenuAdmin';
+import AdminLayout from '../components/AdminLayout';
 
 const families = [
     {
@@ -29,43 +28,33 @@ const families = [
     },
   ];
 
-function AdminFamily() {
-  return (
-    <div className='App'>
-        <HeaderAdmin />
-        <div className='admin-main'>
-
-            <MenuAdmin selected='Familias' /> 
-            <div className='vertical-line'></div>  
-
-            <div className='admin-container'>
-                <div className='pantallas'>
-                    <a href='/AdminFamilias' className='selected-pantalla'>Nuestras familias</a>
-                    <a href='/AdminFamiliasSolicitudes'>Solicitudes</a>
-                </div>
-                {families.map((family, index) => (
-                <div className='card-info' key={index}>
-                    <div className='family-info'>
-                        <p>Name: {family.name}</p>
-                        <p>Information: {family.info}</p>
-                        <p>Number of kids: {family.kids.length}</p>
-                    </div>
-                    <div className='vertical-line'></div>
-                    <div className='kids-info'>
-                        {family.kids.map((kid, kidIndex) => (
-                            <div className='kid' key={kidIndex}>
-                                <p>Kid's Name: {kid.name}</p>
-                                <p>Class: {kid.class}</p>
-                                <p>Evaluation: {kid.evaluation}</p>
-                            </div>
-                        ))}
-                    </div>
+  function AdminFamily() {
+    return (
+      <AdminLayout selected='Familias'>
+        <div className='pantallas'>
+          <a href='/AdminFamilias' className='selected-pantalla'>Nuestras familias</a>
+          <a href='/AdminFamiliasSolicitudes'>Solicitudes</a>
+        </div>
+        {families.map((family, index) => (
+          <div className='card-info' key={index}>
+            <div className='family-info'>
+              <p>Name: {family.name}</p>
+              <p>Information: {family.info}</p>
+              <p>Number of kids: {family.kids.length}</p>
+            </div>
+            <div className='vertical-line'></div>
+            <div className='kids-info'>
+              {family.kids.map((kid, kidIndex) => (
+                <div className='kid' key={kidIndex}>
+                  <p>Kid's Name: {kid.name}</p>
+                  <p>Class: {kid.class}</p>
+                  <p>Evaluation: {kid.evaluation}</p>
                 </div>
-                ))}
+              ))}
             </div>
-        </div>        
-    </div>
-  );
-}
-
+          </div>
+        ))}
+      </AdminLayout>
+    );
+  }
 export default AdminFamily;
diff --git a/src/screens/AdminFamilyRequests.js b/src/screens/AdminFamilyRequests.js
@@ -1,58 +1,19 @@
+// AdminFamilyRequests.js
 import '../styles/styles.css';
-import HeaderAdmin from '../components/HeaderAdmin';
-import MenuAdmin from '../components/MenuAdmin';
-
+import AdminLayout from '../components/AdminLayout';
+import FamilyCard from '../components/FamilyCard';
 
 function AdminFamilyRequests() {
   return (
-    <div className='App'>
-        <HeaderAdmin />
-        <div className='admin-main'>
-            <MenuAdmin selected='Familias' />
-            <div className='vertical-line'></div>
-
-            <div className='admin-container'>
-                <div className='pantallas'>
-                    <a href='/AdminFamilias'>Nuestras familias</a>
-                    <a href='/AdminFamiliasSolicitudes' className='selected-pantalla'>Solicitudes</a>
-                </div>
-                <div className='card-info'>
-                    <div className='family-request'>
-                        <img src='https://via.placeholder.com/150' alt='placeholder' />
-                        <div className='family-info'>
-                            <p>Family Name</p>
-                            <p>Kid's Name</p>
-                        </div>
-                    </div>
-                    <div className='buttons'>
-                        <button className='button-contrast'>Descargar Archivos Adjuntos</button>
-                        <div className='buttons-acceptance'>
-                            <button className='button-accept'>Aceptar</button>
-                            <button className='button-decline'>Rechazar</button>   
-                        </div>
-                    </div>
-                </div>
-                <div className='card-info'>
-                    <div className='family-request'>
-                        <img src='https://via.placeholder.com/150' alt='placeholder' />
-                        <div className='family-info'>
-                            <p>Family Name</p>
-                            <p>Kid's Name</p>
-                        </div>
-                    </div>
-                    <div className='buttons'>
-                        <button className='button-contrast'>Descargar Archivos Adjuntos</button>
-                        <div className='buttons-acceptance'>
-                            <button className='button-accept'>Aceptar</button>
-                            <button className='button-decline'>Rechazar</button>   
-                        </div>
-                    </div>
-                </div>
-
-            </div>
-        </div>        
-    </div>
+    <AdminLayout selected='Familias'>
+      <div className='pantallas'>
+        <a href='/AdminFamilias'>Nuestras familias</a>
+        <a href='/AdminFamiliasSolicitudes' className='selected-pantalla'>Solicitudes</a>
+      </div>
+      <FamilyCard familyName="Family Name" kidName="Kid's Name" />
+      <FamilyCard familyName="Family Name" kidName="Kid's Name" />
+    </AdminLayout>
   );
 }
 
-export default AdminFamilyRequests;
+export default AdminFamilyRequests;