All files / nav-sidebar/components Channels.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 
 
 
 
 
 
1x
 
 
 
 
6x
 
 
 
6x
6x
3x
3x
3x
 
 
 
3x
 
 
1x
2x
 
 
 
6x
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import Label from './Label';
import Item from './Item';
 
const Group = styled.div`
  margin: 0 0 2rem;
`;
 
function capitalizeChannels(name) {
  return `${name.charAt(0).toUpperCase()}${name.slice(1)}`;
}
 
function getTabFromRoute(route, channel) {
  const match = route.match(/^.*\/(.*)\/.+$/);
  if (match && match[1]) {
    const currentTab = match[1];
    Eif (channel.supportedTabs.includes(currentTab)) {
      return currentTab;
    }
  }
 
  return channel.supportedTabs[0];
}
 
const Channels = ({ channels, ...props }) =>
  <Group>
    {channels.length > 0 && <div>
      <Label>Channels</Label>
      {channels.map(channel =>
        <Item href={`/${channel.service}/${getTabFromRoute(props.route, channel)}/${channel.id}`} {...props}>{capitalizeChannels(channel.service)}</Item>,
      )}
    </div>
    }
  </Group>;
 
Channels.propTypes = {
  channels: PropTypes.arrayOf(
    PropTypes.shape({
      profileId: PropTypes.string,
      service: PropTypes.string,
      supportedTabs: PropTypes.arrayOf(PropTypes.string),
    }),
  ),
  route: PropTypes.string.isRequired,
};
 
Channels.defaultProps = {
  channels: [],
};
 
export default Channels;