All files / web/modules/admin Dashboard.tsx

0% Statements 0/34
0% Branches 0/4
0% Functions 0/6
0% Lines 0/28

Press n or j to go to the next uncovered block, b, p or k for the previous block.

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 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110                                                                                                                                                                                                                           
import Icon from 'antd/lib/icon';
import Menu from 'antd/lib/menu';
import * as React from 'react';
import { connect } from 'react-redux';
import { Route, Switch } from 'react-router-dom';
import styled from 'styled-components';
import {
  articleAvailablePermissions,
  categoryAvailablePermissions,
  editorsAvailablePermissions,
  reportsAvailablePermissions,
  usersAvailablePermissions,
} from '../../../shared/permissions';
import { IState } from '../../types';
import { selectHasPermission, selectIsLoading } from '../auth/reducer';
import Loader from '../components/Loader';
import withRouter from '../hoc/withRouter';
import { Routes } from '../router/routes';
import ArticleList from './article/list/ArticleList';
import CategoryList from './category/list/CategoryList';
import Editors from './editors/Editors';
import Reports from './reports/Reports';
import UserList from './users/list/UserList';
 
const Content = styled.div`
  padding: 10px 20px;
`;
const Wrapper = styled.div`
  background-color: #fff;
  min-height: 100vh;
`;
 
const modules = [
  {
    label: 'Články',
    component: ArticleList,
    permissions: articleAvailablePermissions,
    path: Routes.articles,
  },
  {
    label: 'Redakce',
    component: Editors,
    permissions: editorsAvailablePermissions,
    path: Routes.editors,
  },
  {
    label: 'Kategorie',
    component: CategoryList,
    permissions: categoryAvailablePermissions,
    path: Routes.categories,
  },
  {
    label: 'Přehledy',
    component: Reports,
    permissions: reportsAvailablePermissions,
    path: Routes.reports,
  },
  {
    label: 'Uživatelé',
    component: UserList,
    permissions: usersAvailablePermissions,
    path: Routes.users,
  },
];
 
const Dashboard = ({ children, push, isLoading, hasPermission }: any) => {
  if (isLoading) {
    return <Loader />;
  }
 
  const modulesWithPermission = modules.filter(module =>
    hasPermission(module.permissions),
  );
 
  const handleClick = ({ key }: any) => push(key);
 
  return (
    <Wrapper>
      <Menu onClick={handleClick} selectedKeys={[]} mode="horizontal">
        <Menu.Item key={Routes.home}>
          <Icon type="left" />
        </Menu.Item>
        {modulesWithPermission.map(module => (
          <Menu.Item key={module.path}>{module.label}</Menu.Item>
        ))}
      </Menu>
 
      <Content>
        <Switch>
          {modulesWithPermission.map(module => (
            <Route
              key={module.path}
              path={module.path}
              component={module.component}
            />
          ))}
        </Switch>
      </Content>
    </Wrapper>
  );
};
 
export default connect(
  (state: IState) => ({
    hasPermission: selectHasPermission(state),
    isLoading: selectIsLoading(state),
  }),
  {},
)(withRouter(Dashboard));