Skip to content

Commit 5829b96

Browse files
mariocoskimariocoski
authored
Merge pull request #111 from kube-js/develop
fix: added section accordion
2 parents 563d570 + f65926f commit 5829b96

File tree

7 files changed

+203
-8
lines changed

7 files changed

+203
-8
lines changed

‎assets/jscpd-badge.svg‎

Lines changed: 2 additions & 2 deletions
Loading

‎k8s/Chart.yaml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ apiVersion: v1
22
description: A Helm chart for kube-ts-react-client
33
name: kube-ts-react-client
44
version: 1.0.0
5-
appVersion: 1.5.27
5+
appVersion: 1.5.28
66
home: https://cloud.docker.com/u/kubejs/repository/docker/kubejs/kube-ts-react-client
77
icon: https://avatars2.githubusercontent.com/u/47761918?s=200&v=4
88
sources:

‎k8s/values.yaml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ replicaCount: 2
66

77
image:
88
repository: kubejs/kube-ts-react-client
9-
tag: 1.5.27
9+
tag: 1.5.28
1010
pullPolicy: Always
1111
containerPort: 80
1212

‎src/atoms/CourseSection/index.tsx‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
// tslint:disable:no-magic-numbers
2+
import { List, ListItem, ListItemText } from '@material-ui/core';
3+
import MuiExpansionPanel from '@material-ui/core/ExpansionPanel';
4+
import MuiExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
5+
import MuiExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
6+
import { withStyles } from '@material-ui/core/styles';
7+
import Typography from '@material-ui/core/Typography';
8+
import PlayCircleOutlineIcon from '@material-ui/icons/PlayCircleOutline';
9+
import React from 'react';
10+
11+
const ExpansionPanel = withStyles({
12+
root: {
13+
'&$expanded': {
14+
margin: 'auto',
15+
},
16+
'&:before': {
17+
display: 'none',
18+
},
19+
'&:not(:last-child)': {
20+
borderBottom: 0,
21+
},
22+
border: '1px solid rgba(0, 0, 0, .125)',
23+
expanded: {},
24+
},
25+
})(MuiExpansionPanel);
26+
27+
const ExpansionPanelSummary = withStyles({
28+
content: {
29+
'&$expanded': {
30+
margin: '12px 0',
31+
},
32+
},
33+
expanded: {},
34+
root: {
35+
'&$expanded': {
36+
minHeight: 56,
37+
},
38+
backgroundColor: 'rgba(0, 0, 0, .03)',
39+
borderBottom: '1px solid rgba(0, 0, 0, .125)',
40+
marginBottom: -1,
41+
minHeight: 56,
42+
},
43+
})(MuiExpansionPanelSummary);
44+
45+
const ExpansionPanelDetails = withStyles(theme => ({
46+
root: {
47+
padding: theme.spacing(2),
48+
},
49+
}))(MuiExpansionPanelDetails);
50+
51+
export interface Unit {
52+
readonly title: string;
53+
}
54+
55+
export interface Section {
56+
readonly id: string;
57+
readonly title: string;
58+
readonly units: Unit[];
59+
}
60+
61+
interface Options {
62+
readonly section: Section;
63+
readonly expandedIds: string[];
64+
readonly onChange: (
65+
event: React.ChangeEvent<{}>,
66+
isExpanded: boolean
67+
) => void;
68+
}
69+
70+
const CourseSection = ({ section, expandedIds, onChange }: Options) => (
71+
<ExpansionPanel
72+
square
73+
expanded={expandedIds.includes(section.id)}
74+
onChange={onChange}
75+
>
76+
<ExpansionPanelSummary
77+
aria-controls={`panel-${section.id}-content`}
78+
id={`panel-header-${section.id}`}
79+
>
80+
<Typography>{section.title}</Typography>
81+
</ExpansionPanelSummary>
82+
<ExpansionPanelDetails>
83+
<List
84+
component="nav"
85+
/** TODO: move to classes */
86+
style={{
87+
backgroundColor: '#fff',
88+
width: '100%',
89+
}}
90+
aria-label="mailbox folders"
91+
>
92+
{section.units.map((unit: Unit, index: number) => (
93+
<ListItem divider={section.units.length - 1 !== index}>
94+
<>
95+
<PlayCircleOutlineIcon style={{marginRight: '1rem'}} />
96+
<ListItemText primary={unit.title}></ListItemText>
97+
</>
98+
</ListItem>
99+
))}
100+
</List>
101+
</ExpansionPanelDetails>
102+
</ExpansionPanel>
103+
);
104+
105+
// tslint:disable-next-line:max-file-line-count
106+
export default CourseSection;

‎src/atoms/CourseSections/index.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import React from 'react';
2+
import CourseSection, { Section } from '../CourseSection';
3+
4+
interface Options {
5+
readonly sections: Section[];
6+
}
7+
8+
const CourseSections = ({ sections }: Options) => {
9+
const [expandedIds, setExpandedIds] = React.useState<string[]>([
10+
sections[0].id,
11+
]);
12+
13+
const handleChange = (panelId: string) => (
14+
event: React.ChangeEvent<{}>,
15+
isExpanded: boolean
16+
) => {
17+
if (isExpanded) {
18+
const updatedIds = Array.from(new Set([...expandedIds, panelId]));
19+
setExpandedIds(updatedIds);
20+
} else {
21+
const updatedIds = expandedIds.filter(id => id !== panelId);
22+
setExpandedIds(updatedIds);
23+
}
24+
};
25+
26+
return (
27+
<div>
28+
{sections.map(section => (
29+
<CourseSection
30+
key={section.id}
31+
section={section}
32+
expandedIds={expandedIds}
33+
onChange={handleChange(section.id)}
34+
/>
35+
))}
36+
</div>
37+
);
38+
};
39+
40+
export default CourseSections;

‎src/components/CourseView/index.tsx‎

Lines changed: 48 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
// tslint:disable:no-magic-numbers
2-
import { Button, Container, Grid, Paper } from '@material-ui/core';
2+
import { Button, Container, Grid, Paper, Typography } from '@material-ui/core';
33
import _isNil from 'ramda/src/isNil';
44
import React, { memo, useEffect } from 'react';
55
import { useDispatch, useSelector } from 'react-redux';
66
import { RouteComponentProps } from 'react-router';
77
import CourseMetaInfo from '../../atoms/CourseMetaInfo';
8+
import CourseSections from '../../atoms/CourseSections';
89
import courseImagePlaceholder from '../../images/course_400x180.png';
910
import { getCourseDetailsRequested } from '../../redux/courseDetails/actionCreators';
1011
import { State } from '../../redux/rootReducer';
@@ -15,6 +16,43 @@ export interface Params {
1516
readonly courseSlug: string;
1617
}
1718

19+
// FETCH FROM API
20+
const sections = [
21+
{
22+
id: '1',
23+
title: 'Introduction and setup',
24+
},
25+
{
26+
id: '2',
27+
title: 'Helm basics',
28+
},
29+
{
30+
id: '3',
31+
title: 'Jenkins CI/CD setup',
32+
},
33+
{
34+
id: '4',
35+
title: 'Dockerizing node.js application',
36+
},
37+
{
38+
id: '5',
39+
title: 'Deployment on AWS',
40+
},
41+
].map(section => ({...section, units: [
42+
{
43+
title: 'Introduction and the goal of this course'
44+
},
45+
{
46+
title: 'V8 Under the Hood'
47+
},
48+
{
49+
title: 'The Javascript Core'
50+
},
51+
{
52+
title: 'RESTful APIs and JSON'
53+
}
54+
]}));
55+
1856
const CourseView = ({ match }: RouteComponentProps<Params>) => {
1957
const classes = useStyles();
2058

@@ -43,7 +81,7 @@ const CourseView = ({ match }: RouteComponentProps<Params>) => {
4381
<div className={classes.root}>
4482
<Container component="div" className={classes.metaInfo} maxWidth={false}>
4583
<Container component="div" maxWidth="lg">
46-
<Grid container spacing={4}>
84+
<Grid container spacing={3}>
4785
<Grid item xs={12} sm={9}>
4886
<CourseMetaInfo course={course} />
4987
</Grid>
@@ -66,11 +104,16 @@ const CourseView = ({ match }: RouteComponentProps<Params>) => {
66104
<Grid container spacing={3}>
67105
<Grid item xs={12} sm={9}>
68106
<Paper className={classes.paper}>
69-
<div
107+
{/* <div
70108
dangerouslySetInnerHTML={{
71109
__html: course.description as string,
72110
}}
73-
/>
111+
/> */}
112+
<Typography variant="h3" className={classes.contentHeadline}>
113+
Learning content:
114+
</Typography>
115+
116+
<CourseSections sections={sections} />
74117
</Paper>
75118
</Grid>
76119
<Grid item xs={12} sm={3}></Grid>
@@ -80,4 +123,5 @@ const CourseView = ({ match }: RouteComponentProps<Params>) => {
80123
);
81124
};
82125

126+
// tslint:disable-next-line:max-file-line-count
83127
export default memo(CourseView);

‎src/components/CourseView/styles.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,11 @@ const useStyles = makeStyles(theme => ({
77
color: '#fff',
88
margin: 10,
99
},
10+
contentHeadline: {
11+
fontSize: '1.5rem',
12+
lineHeight: '2rem',
13+
margin: '1rem 0',
14+
},
1015
metaInfo: {
1116
backgroundColor: '#24292e',
1217
padding: '0',

0 commit comments

Comments
 (0)