TrackPanel.tsx 2.42 KB
Newer Older
1
import React, { FunctionComponent, useEffect } from 'react';
2
import { connect } from 'react-redux';
3

4 5 6 7
import TrackPanelBar from './track-panel-bar/TrackPanelBar';
import TrackPanelList from './track-panel-list/TrackPanelList';

import { RootState } from 'src/rootReducer';
8

9
import {
10
  toggleDrawer,
11
  toggleTrackPanel,
12
  changeCurrentTrack
13
} from '../browserActions';
14

15 16 17 18
import {
  getCurrentTrack,
  getDrawerOpened,
  getTrackPanelOpened
19 20 21
} from '../browserSelectors';

import { getLaunchbarExpanded } from 'src/header/headerSelectors';
22 23
import { getBreakpointWidth } from 'src/globalSelectors';
import { BreakpointWidth } from 'src/globalConfig';
24 25

import styles from './TrackPanel.scss';
26

27
type StateProps = {
28 29
  currentTrack: string;
  drawerOpened: boolean;
30
  breakpointWidth: BreakpointWidth;
31
  launchbarExpanded: boolean;
32
  trackPanelOpened: boolean;
33 34
};

35 36 37 38 39 40 41 42 43 44
type DispatchProps = {
  changeCurrentTrack: (currentTrack: string) => void;
  toggleDrawer: (drawerOpened: boolean) => void;
  toggleTrackPanel: (trackPanelOpened?: boolean) => void;
};

type OwnProps = {};

type TrackPanelProps = StateProps & DispatchProps & OwnProps;

45 46 47
const TrackPanel: FunctionComponent<TrackPanelProps> = (
  props: TrackPanelProps
) => {
48 49 50 51 52 53 54 55
  useEffect(() => {
    if (props.breakpointWidth !== BreakpointWidth.LARGE) {
      props.toggleTrackPanel(false);
    } else {
      props.toggleTrackPanel(true);
    }
  }, [props.breakpointWidth, props.toggleTrackPanel]);

56 57 58 59 60
  return (
    <section className={`${styles.trackPanel} reactSlideDrawer`}>
      <TrackPanelBar
        drawerOpened={props.drawerOpened}
        launchbarExpanded={props.launchbarExpanded}
61
        toggleDrawer={props.toggleDrawer}
62
        toggleTrackPanel={props.toggleTrackPanel}
63
        trackPanelOpened={props.trackPanelOpened}
64 65 66 67
      />
      {props.trackPanelOpened ? (
        <TrackPanelList
          currentTrack={props.currentTrack}
68
          toggleDrawer={props.toggleDrawer}
69
          updateTrack={props.changeCurrentTrack}
70
        />
71 72 73 74
      ) : null}
    </section>
  );
};
75

76
const mapStateToProps = (state: RootState) => ({
77
  breakpointWidth: getBreakpointWidth(state),
78 79
  currentTrack: getCurrentTrack(state),
  drawerOpened: getDrawerOpened(state),
80
  launchbarExpanded: getLaunchbarExpanded(state),
81
  trackPanelOpened: getTrackPanelOpened(state)
82 83
});

84 85
const mapDispatchToProps = {
  changeCurrentTrack,
86
  toggleDrawer,
87 88 89
  toggleTrackPanel
};

90 91 92 93
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(TrackPanel);