// tslint:disable:no-magic-numbers import Box from '@material-ui/core/Box'; import { makeStyles } from '@material-ui/core/styles'; import Tab from '@material-ui/core/Tab'; import Tabs from '@material-ui/core/Tabs'; import Typography from '@material-ui/core/Typography'; import _pluck from 'ramda/src/pluck'; import React from 'react'; import { EnhancedCourse } from '../../redux/discoveryItems/actionCreators'; import Category from '../../types/items/Category'; import CoursesSlider from '../CoursesSlider'; export interface TabPanelOptions { readonly children: React.ReactNode; readonly index: number; readonly value: number; } const TabPanel = ({ children, value, index, ...other }: TabPanelOptions) => ( ); const a11yProps = (index: number) => ({ 'aria-controls': `vertical-tabpanel-${index}`, id: `vertical-tab-${index}`, }); const useStyles = makeStyles(theme => ({ root: { backgroundColor: theme.palette.background.paper, display: 'flex', flexGrow: 1, }, tabs: { borderRight: `1px solid ${theme.palette.divider}`, }, })); export interface Options { readonly categories: Category[]; readonly courses: EnhancedCourse[]; } const getCoursesByCategoryId = ( courses: EnhancedCourse[], categoryId: string ) => courses.filter(course => course.categoryId === categoryId); const CoursesTabs = ({ categories, courses }: Options) => { const classes = useStyles(); const [value, setValue] = React.useState(0); // tslint:disable-next-line:variable-name function handleChange(_event: any, newValue: any) { setValue(newValue); } return (
{categories.map((category: Category, index: number) => ( ))} {categories.map((category: Category, index: number) => ( {/* TODO: redux selectors? */} ))}
); }; export default CoursesTabs;