MobileLayout.tsx 2.68 KB
Newer Older
1
2
3
import * as React from 'react';
import { IFacility } from '../models/facility.model';
import { ApplicationState } from '../store';
4
5
import { fetchFacilitiesAction } from '../store/facility/facility.actions';
import { fetchAlertsAction } from '../store/alert/alert.actions';
6
import { useDispatch, useSelector } from 'react-redux';
Andrew Hrdy's avatar
Andrew Hrdy committed
7
import { filterFacilities } from '../utils/facility.util';
Andrew Hrdy's avatar
Andrew Hrdy committed
8
import AppBar from '../components/AppBar';
9
10
11
12
import CardContainer from '../components/CardContainer';
import FacilityDetail from './FacilityDetail';
import { Drawer } from '@material-ui/core';
import { SearchBarState } from '../store/ui/ui.reducer';
13
import { setSelectedFacilityAction } from '../store/ui/ui.actions';
14
15
import { useSwipeable } from 'react-swipeable';
import LoadingSpinner from '../components/LoadingSpinner';
16

17
export default () => {
18
19
20
21
    const facilities: IFacility[] = useSelector((state: ApplicationState) => state.facilities.facilities);
    const searchTerm: SearchBarState = useSelector((state: ApplicationState) => state.ui.search);
    const selectedFacilitySlug: string = useSelector((state: ApplicationState) => state.ui.selectedFacility);

22
23
    const isFetching = useSelector((state: ApplicationState) => state.facilities.isFetching);

24
25
    const dispatch = useDispatch();
    const fetch = () => {
26
27
        dispatch(fetchFacilitiesAction());
        dispatch(fetchAlertsAction());
28
    };
29
    const selectFacility = (slug: string) => dispatch(setSelectedFacilityAction(slug));
30
31
32

    const selectedFacility = facilities.find(f => f.slug === selectedFacilitySlug);

33
    const [drawerFacility, setDrawerFacility] = React.useState<IFacility>(selectedFacility);
34
35
36
37
38
39
40
41
42
43
44
45
46

    if ((drawerFacility === undefined && selectedFacility !== undefined) || (selectedFacility !== undefined && drawerFacility.slug !== selectedFacility.slug)) {
        setDrawerFacility(selectedFacility);
    }

    React.useEffect(() => {
        fetch();
    }, []);

    const closeDrawer = () => {
        selectFacility('');
    };

47
48
49
50
51
52
53
    const handlers = useSwipeable({
        onSwipedDown: () => closeDrawer(),
        preventDefaultTouchmoveEvent: true
    });

    const showSpinner = isFetching && (!facilities || facilities.length === 0);

54
55
    return (
      <div className={'mobile-layout-root'}>
Andrew Hrdy's avatar
Andrew Hrdy committed
56
        <AppBar isMobile={true} />
57

58
59
        {showSpinner && <LoadingSpinner />}

Andrew Hrdy's avatar
Andrew Hrdy committed
60
        <CardContainer facilities={filterFacilities(facilities, searchTerm.searchTerm, searchTerm.campusRegion)} showFavoriteIcons={false} />
61

62
        <Drawer {...handlers} anchor={'bottom'} open={selectedFacilitySlug !== ''} onClose={closeDrawer} transitionDuration={250}>
63
64
65
66
67
            <FacilityDetail facility={drawerFacility} onClose={closeDrawer} />
        </Drawer>
      </div>
    );
};