Layout.tsx 2.87 KB
Newer Older
1
import * as React from 'react';
2
import { connect } from 'react-redux';
3 4
import { IFacility, CampusRegion } from '../models/facility.model';
import { IAlert } from '../models/alert.model';
5 6 7 8 9
import { ApplicationState } from '../store';
import { Dispatch } from 'redux';
import { fetchFacilities } from '../store/facility/facility.actions';
import { fetchAlerts } from '../store/alert/alert.actions';
import { setSidebarExpansion, setSelectedFacility } from '../store/ui/ui.actions';
10

Andrew Hrdy's avatar
Andrew Hrdy committed
11 12 13 14
import CardContainer from '../components/CardContainer';
import AppBar from '../components/AppBar';
import Sidebar from '../components/Sidebar';

15 16
class Layout extends React.Component<LayoutProps> {
    constructor(props: LayoutProps) {
Mattias J Duffy's avatar
Mattias J Duffy committed
17 18
        super(props);
    }
19

Mattias J Duffy's avatar
Mattias J Duffy committed
20
    componentWillMount = () => {
21 22
        this.props.fetchFacilities();
        this.props.fetchAlerts();
23
    }
Mattias J Duffy's avatar
Mattias J Duffy committed
24 25

    render() {
26
        const {isSidebarOpen, selectedFacility, facilities, searchTerm, campusRegion, setSidebarExpansion, setSelectedFacility} = this.props;
27

Mattias J Duffy's avatar
Mattias J Duffy committed
28
        return (
29
            <div className={'layout-root'}>
30
                <AppBar />
31 32
                <div className={'layout-container'}>
                    <div className={'layout-main-content'}>
Andrew Hrdy's avatar
Andrew Hrdy committed
33
                        <div className={'layout-card-container'}>
34
                            <CardContainer searchTerm={searchTerm}
35
                                           campusRegion={campusRegion} facilities={facilities}/>
Andrew Hrdy's avatar
Andrew Hrdy committed
36
                        </div>
37
                    </div>
38

39
                    <Sidebar facilities={facilities} facility={selectedFacility} isSidebarOpen={isSidebarOpen}
40
                             setSidebar={setSidebarExpansion} setSelectedFacility={setSelectedFacility}/>
41
                </div>
Mattias J Duffy's avatar
Mattias J Duffy committed
42
            </div>
43
        );
Mattias J Duffy's avatar
Mattias J Duffy committed
44 45 46
    }
}

47 48 49 50 51 52 53 54
export interface LayoutProps {
    facilities: IFacility[];
    alerts: IAlert[];
    favorites: string[];
    searchTerm: string;
    campusRegion: CampusRegion;
    selectedFacility: IFacility;
    isSidebarOpen: boolean;
55 56 57
    fetchFacilities: () => any;
    fetchAlerts: () => any;
    setSidebarExpansion: (isOpen: boolean) => any;
58 59 60
    setSelectedFacility: (facility: IFacility) => any;
}

61
const mapStateToProps = (state: ApplicationState) => ({
62 63 64 65 66 67 68 69 70
    facilities: state.facilities.facilities,
    alerts: state.alerts.alerts,
    favorites: state.ui.favorites,
    searchTerm: state.ui.search.searchTerm,
    campusRegion: state.ui.search.campusRegion,
    selectedFacility: state.ui.selectedFacility,
    isSidebarOpen: state.ui.sidebar.isOpen
});

71
const mapDispatchToProps = (dispatch: Dispatch) => ({
72 73 74 75
    fetchFacilities: () => dispatch(fetchFacilities()),
    fetchAlerts: () => dispatch(fetchAlerts()),
    setSidebarExpansion: (isOpen: boolean) => dispatch(setSidebarExpansion(isOpen)),
    setSelectedFacility: (facility: IFacility) => dispatch(setSelectedFacility(facility))
76
});
Mattias J Duffy's avatar
Mattias J Duffy committed
77

78
export default connect(mapStateToProps, mapDispatchToProps)(Layout);