Skip to content

Commit 791c66b

Browse files
mariocoskimariocoski
authored
Merge pull request #110 from kube-js/develop
fix: changed course view page
2 parents cd5172b + 9d3e8ac commit 791c66b

File tree

11 files changed

+115
-37
lines changed

11 files changed

+115
-37
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.25
5+
appVersion: 1.5.27
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/templates/ingress.yaml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
{{- $ingressPaths := .Values.ingress.paths -}}
44
{{- $servicePort := .Values.service.port }}
55
{{- $ingressPath := .Values.ingress.path }}
6+
67
apiVersion: extensions/v1beta1
78
kind: Ingress
89
metadata:

‎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.25
9+
tag: 1.5.27
1010
pullPolicy: Always
1111
containerPort: 80
1212

‎src/atoms/Autocomplete/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -166,7 +166,7 @@ const Autocomplete = ({ id, type }: Options) => {
166166
selectedItem,
167167
}) => {
168168
const { onBlur, onFocus, ...inputProps } = getInputProps({
169-
placeholder: 'What would you like to learn?',
169+
placeholder: 'Search for anything...',
170170
...additionalOptions.inputProps,
171171
});
172172

‎src/atoms/CourseMetaInfo/index.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { Typography } from '@material-ui/core';
2+
import React from 'react';
3+
import { EnhancedCourse } from '../../redux/discoveryItems/actionCreators';
4+
import CourseRating from '../CourseRating';
5+
import useStyles from './styles';
6+
7+
export interface Options {
8+
readonly course: EnhancedCourse;
9+
}
10+
11+
const CourseMetaInfo = ({ course }: Options) => {
12+
const classes = useStyles();
13+
// TODO: get the real value
14+
const courseRating = 3.5;
15+
const courseLabel = `${courseRating} (1132 ratings)`;
16+
17+
return (
18+
<div className={classes.root}>
19+
<Typography variant="h1" className={classes.mainHeadline}>
20+
{course.title}
21+
</Typography>
22+
23+
<CourseRating value={courseRating} label={courseLabel} />
24+
25+
<Typography variant="h3" className={classes.autorInfo}>
26+
Instructor: {course.user.firstName} {course.user.lastName}
27+
</Typography>
28+
29+
</div>
30+
);
31+
};
32+
33+
export default CourseMetaInfo;

‎src/atoms/CourseMetaInfo/styles.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
// tslint:disable:no-magic-numbers
2+
import { makeStyles } from '@material-ui/core/styles';
3+
4+
const useStyles = makeStyles(() => ({
5+
autorInfo: {
6+
color: '#fff',
7+
fontSize: '1rem',
8+
marginBottom: '1rem',
9+
marginTop: '1rem',
10+
},
11+
mainHeadline: {
12+
fontSize: '1.8rem',
13+
fontWeight: 'bold',
14+
marginBottom: '1rem',
15+
marginTop: '2rem',
16+
},
17+
root: {
18+
color: '#fff'
19+
}
20+
}));
21+
22+
export default useStyles;

‎src/atoms/CourseRating/index.tsx‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,26 @@ import useStyles from './styles';
44

55
export interface Options {
66
readonly value: number;
7+
readonly label: string;
78
}
89

910
const PRECISION = 0.1;
1011

11-
const CourseRating = ({ value }: Options) => {
12+
const CourseRating = ({ label, value }: Options) => {
1213
const classes = useStyles();
1314

1415
return (
1516
<div className={classes.rating}>
16-
<Rating value={value} size="small" precision={PRECISION} readOnly />{' '}
17-
<div className={classes.ratingValue}>{value}</div>
17+
<Rating
18+
classes={{
19+
iconEmpty: classes.iconEmpty,
20+
}}
21+
value={value}
22+
size="small"
23+
precision={PRECISION}
24+
readOnly
25+
/>{' '}
26+
<div className={classes.ratingValue}>{label}</div>
1827
</div>
1928
);
2029
};

‎src/atoms/CourseRating/styles.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,15 @@
22
import { makeStyles } from '@material-ui/core/styles';
33

44
const useStyles = makeStyles(() => ({
5+
iconEmpty: {
6+
color: '#dce2e8'
7+
},
58
rating: {
69
alignItems: 'center',
710
display: 'flex',
811
},
912
ratingValue: {
10-
color: 'grey',
13+
color: '#fff',
1114
fontSize: '12px',
1215
fontWeight: 600,
1316
marginLeft: '6px'

‎src/components/CourseView/index.tsx‎

Lines changed: 26 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
// tslint:disable:no-magic-numbers
2-
import { Avatar, Button, Container, Grid, Paper } from '@material-ui/core';
2+
import { Button, Container, Grid, Paper } 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';
7-
import { Redirect } from 'react-router-dom';
8-
import { ROOT } from '../../constants/routes';
7+
import CourseMetaInfo from '../../atoms/CourseMetaInfo';
98
import courseImagePlaceholder from '../../images/course_400x180.png';
109
import { getCourseDetailsRequested } from '../../redux/courseDetails/actionCreators';
1110
import { State } from '../../redux/rootReducer';
@@ -19,17 +18,14 @@ export interface Params {
1918
const CourseView = ({ match }: RouteComponentProps<Params>) => {
2019
const classes = useStyles();
2120

22-
if (match.params.courseSlug.trim() === '') {
23-
return <Redirect to={ROOT} />;
24-
}
2521
const { course, getCourseDetailsLoading } = useSelector(
2622
(state: State) => state.courseDetails
2723
);
2824

2925
const dispatch = useDispatch();
3026

3127
useEffect(() => {
32-
if(course === undefined || course.slug !== match.params.courseSlug){
28+
if (course === undefined || course.slug !== match.params.courseSlug) {
3329
dispatch(getCourseDetailsRequested(match.params.courseSlug));
3430
}
3531
}, [match.params.courseSlug]);
@@ -45,37 +41,39 @@ const CourseView = ({ match }: RouteComponentProps<Params>) => {
4541

4642
return (
4743
<div className={classes.root}>
48-
<Container component="main" maxWidth="lg">
44+
<Container component="div" className={classes.metaInfo} maxWidth={false}>
45+
<Container component="div" maxWidth="lg">
46+
<Grid container spacing={4}>
47+
<Grid item xs={12} sm={9}>
48+
<CourseMetaInfo course={course} />
49+
</Grid>
50+
<Grid item xs={12} sm={3} className={classes.metaInfoSidebar}>
51+
<Paper className={[classes.sidebarCard, classes.paper].join(' ')}>
52+
<img src={imageUrl} style={{ width: '100%' }} />
53+
<h4>{`£${coursePrice}`}</h4>
54+
<Button variant="contained" fullWidth color="primary">
55+
Add to cart
56+
</Button>
57+
<Button variant="contained" fullWidth color="secondary">
58+
Buy now
59+
</Button>
60+
</Paper>
61+
</Grid>
62+
</Grid>
63+
</Container>
64+
</Container>
65+
<Container>
4966
<Grid container spacing={3}>
5067
<Grid item xs={12} sm={9}>
5168
<Paper className={classes.paper}>
52-
<h3>{course.title}</h3>
53-
<h4>
54-
<Avatar className={classes.avatar}>
55-
{`${(course.user.firstName as string).substr(0, 1)}${(course
56-
.user.lastName as string).substr(0, 1)}`}
57-
</Avatar>
58-
{course.user.firstName} {course.user.lastName}
59-
</h4>
6069
<div
6170
dangerouslySetInnerHTML={{
6271
__html: course.description as string,
6372
}}
6473
/>
6574
</Paper>
6675
</Grid>
67-
<Grid item xs={12} sm={3}>
68-
<Paper className={classes.paper}>
69-
<img src={imageUrl} style={{ width: '100%' }} />
70-
<h4>{`£${coursePrice}`}</h4>
71-
<Button variant="contained" fullWidth color="primary">
72-
Add to cart
73-
</Button>
74-
<Button variant="contained" fullWidth color="secondary">
75-
Buy now
76-
</Button>
77-
</Paper>
78-
</Grid>
76+
<Grid item xs={12} sm={3}></Grid>
7977
</Grid>
8078
</Container>
8179
</div>

0 commit comments

Comments
 (0)