DesktopLayout.tsx 2.34 KB
Newer Older
1
import * as React from 'react';
2
3
import { useSelector, useDispatch } from 'react-redux';
import { IFacility } from '../models/facility.model';
4
import { ApplicationState } from '../store';
Andrew Hrdy's avatar
Andrew Hrdy committed
5
import { filterFacilities } from '../utils/facility.util';
6

Andrew Hrdy's avatar
Andrew Hrdy committed
7
8
9
import CardContainer from '../components/CardContainer';
import AppBar from '../components/AppBar';
import Sidebar from '../components/Sidebar';
10
import { setSelectedFacilityAction } from '../store/ui/ui.actions';
11
12
import LoadingSpinner from '../components/LoadingSpinner';
import { SearchBarState } from '../store/ui/ui.reducer';
Andrew Hrdy's avatar
Andrew Hrdy committed
13

14
export default () => {
15
16
17
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);

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

    const dispatch = useDispatch();
22
    const selectFacility = (slug: string) => dispatch(setSelectedFacilityAction(slug));
23
24
25

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

26
    const [sidebarFacility, setSidebarFacility] = React.useState<IFacility>(selectedFacility);
27
28
29
30
31
32
33
34
35
36
37
38

    if ((sidebarFacility === undefined && selectedFacility !== undefined) || (selectedFacility !== undefined && sidebarFacility.slug !== selectedFacility.slug)) {
        setSidebarFacility(selectedFacility);
    }

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

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

    return (
39
        <div className={'desktop-layout-root'}>
40
41
42
43
            <AppBar />
            
            {showSpinner && <LoadingSpinner />}

44
45
46
            <div className={'desktop-layout-container'}>
                <div className={'desktop-layout-main-content'}>
                    <div className={'desktop-layout-card-container'}>
Andrew Hrdy's avatar
Andrew Hrdy committed
47
                        <CardContainer facilities={filterFacilities(facilities, searchTerm.searchTerm, searchTerm.campusRegion)} showFavoriteIcons={true} />
48
49
                    </div>
                </div>
50
51

                <Sidebar facility={sidebarFacility} closeSidebar={closeSidebar} isVisible={selectedFacility !== undefined} />
52
            </div>
53
        </div>
54
55
    );
};