import React, { useEffect } from "react"; import { withStyles, WithStyles, createStyles, LinearProgress, Grid, Typography, Container, } from "@material-ui/core"; import { RouteComponentProps } from "react-router-dom"; import { useSelector, useDispatch } from "react-redux"; import { siteDetailsSelector, siteLoadingSelector, siteErrorSelector, siteRequest, liveDataRequest, } from "../../store/Sites/selectedSiteSlice"; import NavBar from "../../common/NavBar"; import Footer from "../../common/Footer"; import NewSurvey from "./New"; import ViewSurvey from "./View"; const Surveys = ({ match, isView, classes }: SurveysProps) => { const siteDetails = useSelector(siteDetailsSelector); const loading = useSelector(siteLoadingSelector); const error = useSelector(siteErrorSelector); const dispatch = useDispatch(); const siteId = match.params.id; const surveyId = match.params.sid; useEffect(() => { if (!siteDetails || `${siteDetails.id}` !== siteId) { dispatch(siteRequest(siteId)); dispatch(liveDataRequest(siteId)); } }, [dispatch, siteId, siteDetails]); if (loading) { return ( <> <NavBar searchLocation={false} /> <LinearProgress /> </> ); } return ( <> <NavBar searchLocation /> <> {/* eslint-disable-next-line no-nested-ternary */} {siteDetails && !error ? ( isView ? ( <ViewSurvey site={siteDetails} surveyId={surveyId} /> ) : ( <NewSurvey site={siteDetails} /> ) ) : ( <Container className={classes.noData}> <Grid container direction="column" alignItems="center"> <Grid item> <Typography gutterBottom color="primary" variant="h2"> No Data Found </Typography> </Grid> </Grid> </Container> )} </> <Footer /> </> ); }; const styles = () => createStyles({ noData: { display: "flex", alignItems: "center", height: "100%", }, }); interface SurveysIncomingProps { isView: boolean; } interface MatchProps extends RouteComponentProps<{ id: string; sid: string }> {} type SurveysProps = MatchProps & SurveysIncomingProps & WithStyles<typeof styles>; export default withStyles(styles)(Surveys);