add check if there are no specialists with time blocks

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,6 +96,7 @@ export default function AgendarHorarioComponent() {
 
     const classes = useStyles();
 
+    if (disponibilidades.length > 0) {
         return (
             <Container component="main" maxWidth="sm">
                 <div className={classes.paper}>
@@ -127,4 +134,24 @@ export default function AgendarHorarioComponent() {
                 </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>
+        );
+    }
 }