Merge pull request #113 from kube-js/develop

fix: changed course view

Author: mariocoski

k8s/Chart.yaml

@@ -2,7 +2,7 @@ apiVersion: v1
 description: A Helm chart for kube-ts-react-client
 name: kube-ts-react-client
 version: 1.0.0
-appVersion: 1.6.0
+appVersion: 1.6.1
 home: https://cloud.docker.com/u/kubejs/repository/docker/kubejs/kube-ts-react-client
 icon: https://avatars2.githubusercontent.com/u/47761918?s=200&v=4
 sources:

k8s/values.yaml

@@ -6,7 +6,7 @@ replicaCount: 2
 
 image:
   repository: kubejs/kube-ts-react-client
-  tag: 1.6.0
+  tag: 1.6.1
   pullPolicy: Always
   containerPort: 80
 

src/atoms/Autocomplete/index.tsx

@@ -4,6 +4,8 @@ import Paper from '@material-ui/core/Paper';
 import Popper from '@material-ui/core/Popper';
 import TextField from '@material-ui/core/TextField';
 import CloseIcon from '@material-ui/icons/Close';
+import OndemandVideoOutlinedIcon from '@material-ui/icons/OndemandVideoOutlined';
+import PersonOutlineOutlinedIcon from '@material-ui/icons/PersonOutlineOutlined';
 import SearchIcon from '@material-ui/icons/Search';
 import Downshift from 'downshift';
 import _isNil from 'ramda/src/isNil';
@@ -22,6 +24,9 @@ export interface GetFormattedResultsOptions {
   readonly users: User[];
 }
 
+const USERS_RESULT_COUNT = 2;
+const COURSES_RESULT_COUNT = 4;
+
 const getFormattedResults = ({
   courses,
   users,
@@ -32,7 +37,7 @@ const getFormattedResults = ({
       label: course.title,
       type: 'course',
     }))
-    .slice(0, 4);
+    .slice(0, COURSES_RESULT_COUNT);
   const updatedUsers = users
     .map((user: User) => ({
       ...user,
@@ -41,7 +46,7 @@ const getFormattedResults = ({
         : user.email,
       type: 'user',
     }))
-    .slice(0, 2);
+    .slice(0, USERS_RESULT_COUNT);
 
   return [...updatedCourses, ...updatedUsers];
 };
@@ -65,7 +70,7 @@ function renderInput(inputProps: any) {
   );
 }
 
-function renderSuggestion(suggestionProps: any) {
+const renderSuggestion = (suggestionProps: any) => {
   const {
     suggestion,
     index,
@@ -75,21 +80,27 @@ function renderSuggestion(suggestionProps: any) {
   } = suggestionProps;
   const isHighlighted = highlightedIndex === index;
   const isSelected = (selectedItem || '').indexOf(suggestion.label) > -1;
+  const otherProps = isSelected
+    ? {
+        style: {
+          fontWeight: isSelected ? 600 : 400,
+        },
+      }
+    : {};
+  const icon = suggestion.type === 'course' ? <OndemandVideoOutlinedIcon /> : <PersonOutlineOutlinedIcon />;
 
   return (
     <MenuItem
       {...itemProps}
       key={suggestion.label}
       selected={isHighlighted}
       component="div"
-      style={{
-        fontWeight: isSelected ? 500 : 400,
-      }}
+      {...otherProps}
     >
-      {suggestion.label}
+      <>{icon} <span style={{marginLeft: '5px'}}>{suggestion.label}</span></>
     </MenuItem>
   );
-}
+};
 
 type AutocompleteType = 'navbar' | 'heroContent';
 
@@ -144,8 +155,10 @@ const Autocomplete = ({ id, type }: Options) => {
       const link =
         item.type === 'course'
           ? `/courses/${item.slug}`
-          // TODO: create username property as uniq db field
-          : `/instructors/${String(item.firstName + item.lastName).toLowerCase()}`;
+          : // TODO: create username property as uniq db field
+            `/instructors/${String(
+              item.firstName + item.lastName
+            ).toLowerCase()}`;
       setValue('');
       history.push(link);
     } else if (changes.hasOwnProperty('inputValue')) {
@@ -183,7 +196,7 @@ const Autocomplete = ({ id, type }: Options) => {
                 classes,
                 fullWidth: true,
                 inputProps,
-                ref: popperNode
+                ref: popperNode,
               })}
               {String(inputProps.value).length > 0 && (
                 <div className={[classes.icon, classes.closeIcon].join(' ')}>
@@ -200,7 +213,10 @@ const Autocomplete = ({ id, type }: Options) => {
                     square
                     style={{
                       marginTop: '4px',
-                      width: popperNode.current && popperNode.current.clientWidth ? popperNode.current.clientWidth - POPPER_OFFSET : undefined,
+                      width:
+                        popperNode.current && popperNode.current.clientWidth
+                          ? popperNode.current.clientWidth - POPPER_OFFSET
+                          : undefined,
                     }}
                   >
                     {results.map((suggestion: any, index: number) =>
@@ -221,7 +237,6 @@ const Autocomplete = ({ id, type }: Options) => {
       </Downshift>
     </div>
   );
-  // tslint:disable-next-line:max-file-line-count
 };
 
 // tslint:disable-next-line:max-file-line-count

src/atoms/CourseMetaInfo/index.tsx

@@ -1,5 +1,6 @@
 import { Typography } from '@material-ui/core';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import { EnhancedCourse } from '../../redux/discoveryItems/actionCreators';
 import CourseRating from '../CourseRating';
 import useStyles from './styles';
@@ -10,6 +11,7 @@ export interface Options {
 
 const CourseMetaInfo = ({ course }: Options) => {
   const classes = useStyles();
+  const { t } = useTranslation();
   // TODO: get the real value
   const courseRating = 3.5;
   const courseLabel = `${courseRating} (1132 ratings)`;
@@ -23,7 +25,7 @@ const CourseMetaInfo = ({ course }: Options) => {
       <CourseRating value={courseRating} label={courseLabel} />
 
       <Typography variant="h3" className={classes.autorInfo}>
-        Instructor: {course.user.firstName} {course.user.lastName}
+        {t('courseView.instructor')}: {course.user.firstName} {course.user.lastName}
       </Typography>
 
     </div>

src/atoms/CourseSection/index.tsx

@@ -5,6 +5,8 @@ import MuiExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
 import MuiExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
 import { withStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
+import ExpandLessIcon from '@material-ui/icons/ExpandLess';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import PlayCircleOutlineIcon from '@material-ui/icons/PlayCircleOutline';
 import React from 'react';
 import Section from '../../types/items/Section';
@@ -18,7 +20,7 @@ const ExpansionPanel = withStyles({
       display: 'none',
     },
     '&:not(:last-child)': {
-      borderBottom: 0,
+      margin: '12px 0',
     },
     border: '1px solid rgba(0, 0, 0, .125)',
     expanded: {},
@@ -27,25 +29,24 @@ const ExpansionPanel = withStyles({
 
 const ExpansionPanelSummary = withStyles({
   content: {
-    '&$expanded': {
-      margin: '12px 0',
-    },
+    margin: '12px 0',
   },
   expanded: {},
   root: {
     '&$expanded': {
       minHeight: 56,
     },
+    alignItems: 'center',
     backgroundColor: 'rgba(0, 0, 0, .03)',
     borderBottom: '1px solid rgba(0, 0, 0, .125)',
-    marginBottom: -1,
+    display: 'flex',
     minHeight: 56,
   },
 })(MuiExpansionPanelSummary);
 
 const ExpansionPanelDetails = withStyles(theme => ({
   root: {
-    padding: theme.spacing(2),
+    padding: theme.spacing(1),
   },
 }))(MuiExpansionPanelDetails);
 
@@ -62,40 +63,46 @@ interface Options {
   ) => void;
 }
 
-const CourseSection = ({ section, expandedIds, onChange }: Options) => (
-  <ExpansionPanel
-    square
-    expanded={expandedIds.includes(section.id)}
-    onChange={onChange}
-  >
-    <ExpansionPanelSummary
-      aria-controls={`panel-${section.id}-content`}
-      id={`panel-header-${section.id}`}
+const CourseSection = ({ section, expandedIds, onChange }: Options) => {
+  const expanded = expandedIds.includes(section.id);
+
+  return (
+    <ExpansionPanel
+      square
+      elevation={0}
+      expanded={expanded}
+      onChange={onChange}
     >
-      <Typography>{section.title}</Typography>
-    </ExpansionPanelSummary>
-    <ExpansionPanelDetails>
-      <List
-        component="nav"
-        /** TODO: move to classes */
-        style={{
-          backgroundColor: '#fff',
-          width: '100%',
-        }}
-        aria-label="mailbox folders"
+      <ExpansionPanelSummary
+        aria-controls={`panel-${section.id}-content`}
+        id={`panel-header-${section.id}`}
       >
-        {section.units.map((unit: Unit, index: number) => (
-          <ListItem key={index} divider={section.units.length - 1 !== index}>
-            <>
-              <PlayCircleOutlineIcon style={{marginRight: '1rem'}} />
-              <ListItemText primary={unit.title}></ListItemText>
-            </>
-          </ListItem>
-        ))}
-      </List>
-    </ExpansionPanelDetails>
-  </ExpansionPanel>
-);
+        {expanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
+        <Typography style={{marginLeft: '10px'}}>{section.title}</Typography>
+      </ExpansionPanelSummary>
+      <ExpansionPanelDetails>
+        <List
+          component="nav"
+          /** TODO: move to classes */
+          style={{
+            backgroundColor: '#fff',
+            width: '100%',
+          }}
+          aria-label="course section"
+        >
+          {section.units.map((unit: Unit, index: number) => (
+            <ListItem key={index} divider={section.units.length - 1 !== index}>
+              <>
+                <PlayCircleOutlineIcon style={{ marginRight: '1rem' }} />
+                <ListItemText primary={unit.title}></ListItemText>
+              </>
+            </ListItem>
+          ))}
+        </List>
+      </ExpansionPanelDetails>
+    </ExpansionPanel>
+  );
+};
 
 // tslint:disable-next-line:max-file-line-count
 export default CourseSection;

src/atoms/CourseSections/index.tsx

@@ -7,8 +7,10 @@ interface Options {
 }
 
 const CourseSections = ({ sections }: Options) => {
+  const sortedSections = sections.sort((x: Section, y: Section) => x.order - y.order);
+
   const [expandedIds, setExpandedIds] = React.useState<string[]>([
-    sections[0].id,
+    sortedSections[0].id,
   ]);
 
   const handleChange = (panelId: string) => (
@@ -24,8 +26,6 @@ const CourseSections = ({ sections }: Options) => {
     }
   };
 
-  const sortedSections = sections.sort((x: Section, y: Section) => x.order - y.order);
-
   return (
     <div>
       {sortedSections.map(section => (

src/atoms/LanguageDropdown/index.tsx

@@ -40,12 +40,12 @@ const StyledMenuItem = withStyles(theme => ({
   },
 }))(MenuItem);
 
-const langLabels: {[keyof: string]: string} = {
+const langLabels: { [keyof: string]: string } = {
   'en-GB': 'English',
-  'pl-PL': 'Polski'
-}
+  'pl-PL': 'Polski',
+};
 
-export default function LanguageDropdown() {
+const LanguageDropdown = () => {
   // TODO: refactor component
   const [anchorEl, setAnchorEl] = React.useState(null);
 
@@ -56,26 +56,29 @@ export default function LanguageDropdown() {
   const handleClose = () => {
     setAnchorEl(null);
   };
-  
+
   const { i18n } = useTranslation();
 
-  const currentLang = (Array.isArray(i18n.languages)) ? i18n.languages[0] : i18n.languages;
+  const currentLang = Array.isArray(i18n.languages)
+    ? i18n.languages[0]
+    : i18n.languages;
 
   const changeLanguage = (lng: string) => {
     i18n.changeLanguage(lng);
     setAnchorEl(null);
   };
 
   return (
-    <div style={{display: 'flex', alignItems: 'center'}}>
+    <div style={{ display: 'flex', alignItems: 'center' }}>
       <Button
         aria-controls="customized-menu"
         aria-haspopup="true"
-        variant="contained"
-        color="primary"
+        variant="outlined"
+        color="inherit"
         onClick={handleClick}
       >
-        <LanguageIcon style={{marginRight: '5'}} /> {langLabels[currentLang]} <ExpandMoreIcon  style={{marginLeft: '5'}} />
+        <LanguageIcon style={{ marginRight: '5' }} /> {langLabels[currentLang]}{' '}
+        <ExpandMoreIcon style={{ marginLeft: '5' }} />
       </Button>
       <StyledMenu
         id="customized-menu"
@@ -93,4 +96,7 @@ export default function LanguageDropdown() {
       </StyledMenu>
     </div>
   );
-}
+};
+
+// tslint:disable-next-line:max-file-line-count
+export default LanguageDropdown;