From 90c3733d33cab909627735f310f37935f4cf9fb1 Mon Sep 17 00:00:00 2001
From: Chris Cromer <chris@cromer.cl>
Date: Tue, 4 Jan 2022 17:45:20 -0300
Subject: [PATCH] add check if there are no specialists with time blocks

---
 .../views/Agendar/AgendarHorarioComponent.js  | 99 ++++++++++++-------
 1 file changed, 63 insertions(+), 36 deletions(-)

diff --git a/frontend/src/views/Agendar/AgendarHorarioComponent.js b/frontend/src/views/Agendar/AgendarHorarioComponent.js
index 35c1de0..e4b23ed 100644
--- a/frontend/src/views/Agendar/AgendarHorarioComponent.js
+++ b/frontend/src/views/Agendar/AgendarHorarioComponent.js
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
-import { Container, makeStyles, Grid, Button, Card, CardContent, Box } from '@material-ui/core';
+import { Container, makeStyles, Grid, Button, Card, CardContent, Box, Typography } from '@material-ui/core';
 import axios from 'axios';
 
 const useStyles = makeStyles((theme) => ({
@@ -22,6 +22,12 @@ const useStyles = makeStyles((theme) => ({
     },
     gridButton: {
         textAlign: 'right'
+    },
+    gridTitle: {
+        textAlign: 'center'
+    },
+    boldFont: {
+        fontWeight: 'bold'
     }
 }));
 
@@ -90,41 +96,62 @@ export default function AgendarHorarioComponent() {
 
     const classes = useStyles();
 
-    return (
-        <Container component="main" maxWidth="sm">
-            <div className={classes.paper}>
-                <Grid className={classes.cardGrid} container spacing={2}>
-                    {disponibilidades.map((disponibilidad) => (
-                        <Box key={disponibilidad._id} mt={2}>
-                            <Card className={classes.card} variant="outlined">
-                                <CardContent>
-                                    <Grid container spacing={2}>
-                                        <Grid item xs={8}>
-                                            {new Date(disponibilidad.fecha).toLocaleDateString("es-CL",
-                                                {
-                                                    weekday: 'long',
-                                                    year: 'numeric',
-                                                    month: 'long',
-                                                    day: 'numeric' 
-                                                })} {disponibilidad.horario} horas
+    if (disponibilidades.length > 0) {
+        return (
+            <Container component="main" maxWidth="sm">
+                <div className={classes.paper}>
+                    <Grid className={classes.cardGrid} container spacing={2}>
+                        {disponibilidades.map((disponibilidad) => (
+                            <Box key={disponibilidad._id} mt={2}>
+                                <Card className={classes.card} variant="outlined">
+                                    <CardContent>
+                                        <Grid container spacing={2}>
+                                            <Grid item xs={8}>
+                                                {new Date(disponibilidad.fecha).toLocaleDateString("es-CL",
+                                                    {
+                                                        weekday: 'long',
+                                                        year: 'numeric',
+                                                        month: 'long',
+                                                        day: 'numeric' 
+                                                    })} {disponibilidad.horario} horas
+                                            </Grid>
+                                            <Grid className={classes.gridButton} item xs={4}>
+                                                <Button
+                                                    fullWidth
+                                                    variant="contained"
+                                                    color="primary"
+                                                    onClick={() => confirmar(disponibilidad._id)}
+                                                >
+                                                    Confirmar
+                                                </Button>
+                                            </Grid>
                                         </Grid>
-                                        <Grid className={classes.gridButton} item xs={4}>
-                                            <Button
-                                                fullWidth
-                                                variant="contained"
-                                                color="primary"
-                                                onClick={() => confirmar(disponibilidad._id)}
-                                            >
-                                                Confirmar
-                                            </Button>
-                                        </Grid>
-                                    </Grid>
-                                </CardContent>
-                            </Card>
+                                    </CardContent>
+                                </Card>
+                            </Box>
+                        ))}
+                    </Grid>
+                </div>
+            </Container>
+        );
+    }
+    else {
+        return (
+            <Container component="main" maxWidth="md">
+                <div className={classes.paper}>
+                    <Grid className={classes.cardGrid} container spacing={2}>
+                        <Box mt={2}>
+                            <Grid container spacing={2}>
+                                <Grid item xs={12}>
+                                    <Typography variant="h4" className={classes.boldFont} gutterBottom>
+                                        La especialista elegida no tiene horarios disponibles.
+                                    </Typography>
+                                </Grid>
+                            </Grid>
                         </Box>
-                    ))}
-                </Grid>
-            </div>
-        </Container>
-    );
+                    </Grid>
+                </div>
+            </Container>
+        );
+    }
 }