Merge pull request #112 from kube-js/develop

feat: added internalisation

Author: mariocoski

assets/jscpd-badge.svg

@@ -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.5.28
+appVersion: 1.6.0
 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/Chart.yaml

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

k8s/values.yaml

@@ -19,6 +19,9 @@
     "downshift": "3.4.1",
     "formik": "1.5.8",
     "history": "4.10.1",
+    "i18n": "^0.8.4",
+    "i18next": "^19.0.0",
+    "i18next-browser-languagedetector": "^4.0.1",
     "jscpd": "2.0.16",
     "jscpd-badge-reporter": "1.1.3",
     "ky": "0.15.0",
@@ -28,8 +31,8 @@
     "ramda": "0.26.1",
     "react": "16.11.0",
     "react-dom": "16.11.0",
-    "react-intl": "3.4.0",
     "react-redux": "7.1.3",
+    "react-i18next": "^11.1.0",
     "react-router": "5.1.2",
     "react-router-dom": "5.1.2",
     "react-scripts": "2.1.8",
@@ -50,11 +53,11 @@
     "@testing-library/react-hooks": "3.2.1",
     "@types/flat": "0.0.28",
     "@types/jest": "24.0.22",
+    "@types/i18n": "^0.8.6",
     "@types/node": "11.15.2",
     "@types/ramda": "0.26.33",
     "@types/react": "16.9.11",
     "@types/react-dom": "16.9.4",
-    "@types/react-intl": "3.0.0",
     "@types/react-redux": "7.1.5",
     "@types/react-router": "5.1.2",
     "@types/react-router-dom": "5.1.2",

package-lock.json

@@ -8,6 +8,7 @@ import SearchIcon from '@material-ui/icons/Search';
 import Downshift from 'downshift';
 import _isNil from 'ramda/src/isNil';
 import React, { useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { autocompleteRequested } from '../../redux/autocomplete/actionCreators';
@@ -115,6 +116,7 @@ const POPPER_OFFSET = 4;
 
 const Autocomplete = ({ id, type }: Options) => {
   const classes = useStyles();
+  const { t } = useTranslation();
 
   const additionalOptions = autocompleteOptions[type];
 
@@ -166,7 +168,7 @@ const Autocomplete = ({ id, type }: Options) => {
           selectedItem,
         }) => {
           const { onBlur, onFocus, ...inputProps } = getInputProps({
-            placeholder: 'Search for anything...',
+            placeholder: t(`${[type]}.search.placeholder`),
             ...additionalOptions.inputProps,
           });
 

package.json

@@ -7,6 +7,7 @@ import { withStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import PlayCircleOutlineIcon from '@material-ui/icons/PlayCircleOutline';
 import React from 'react';
+import Section from '../../types/items/Section';
 
 const ExpansionPanel = withStyles({
   root: {
@@ -52,12 +53,6 @@ export interface Unit {
   readonly title: string;
 }
 
-export interface Section {
-  readonly id: string;
-  readonly title: string;
-  readonly units: Unit[];
-}
-
 interface Options {
   readonly section: Section;
   readonly expandedIds: string[];
@@ -90,7 +85,7 @@ const CourseSection = ({ section, expandedIds, onChange }: Options) => (
         aria-label="mailbox folders"
       >
         {section.units.map((unit: Unit, index: number) => (
-          <ListItem divider={section.units.length - 1 !== index}>
+          <ListItem key={index} divider={section.units.length - 1 !== index}>
             <>
               <PlayCircleOutlineIcon style={{marginRight: '1rem'}} />
               <ListItemText primary={unit.title}></ListItemText>

src/atoms/Autocomplete/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import CourseSection, { Section } from '../CourseSection';
+import Section from '../../types/items/Section';
+import CourseSection from '../CourseSection';
 
 interface Options {
   readonly sections: Section[];
@@ -23,9 +24,11 @@ const CourseSections = ({ sections }: Options) => {
     }
   };
 
+  const sortedSections = sections.sort((x: Section, y: Section) => x.order - y.order);
+
   return (
     <div>
-      {sections.map(section => (
+      {sortedSections.map(section => (
         <CourseSection
           key={section.id}
           section={section}

src/atoms/CourseSection/index.tsx

@@ -0,0 +1,96 @@
+import Button from '@material-ui/core/Button';
+import ListItemText from '@material-ui/core/ListItemText';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+import { withStyles } from '@material-ui/core/styles';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import LanguageIcon from '@material-ui/icons/Language';
+import { useTranslation } from 'react-i18next';
+
+import React from 'react';
+
+const StyledMenu = withStyles({
+  paper: {
+    border: '1px solid #d3d4d5',
+  },
+})((props: any) => (
+  <Menu
+    elevation={0}
+    getContentAnchorEl={null}
+    anchorOrigin={{
+      horizontal: 'center',
+      vertical: 'bottom',
+    }}
+    transformOrigin={{
+      horizontal: 'center',
+      vertical: 'top',
+    }}
+    {...props}
+  />
+));
+
+const StyledMenuItem = withStyles(theme => ({
+  root: {
+    '&:focus': {
+      '& .MuiListItemIcon-root, & .MuiListItemText-primary': {
+        color: theme.palette.common.white,
+      },
+      backgroundColor: theme.palette.primary.main,
+    },
+  },
+}))(MenuItem);
+
+const langLabels: {[keyof: string]: string} = {
+  'en-GB': 'English',
+  'pl-PL': 'Polski'
+}
+
+export default function LanguageDropdown() {
+  // TODO: refactor component
+  const [anchorEl, setAnchorEl] = React.useState(null);
+
+  const handleClick = (event: any) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  
+  const { i18n } = useTranslation();
+
+  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'}}>
+      <Button
+        aria-controls="customized-menu"
+        aria-haspopup="true"
+        variant="contained"
+        color="primary"
+        onClick={handleClick}
+      >
+        <LanguageIcon style={{marginRight: '5'}} /> {langLabels[currentLang]} <ExpandMoreIcon  style={{marginLeft: '5'}} />
+      </Button>
+      <StyledMenu
+        id="customized-menu"
+        anchorEl={anchorEl}
+        keepMounted
+        open={Boolean(anchorEl)}
+        onClose={handleClose}
+      >
+        <StyledMenuItem onClick={() => changeLanguage('en-GB')}>
+          <ListItemText primary={langLabels['en-GB']} />
+        </StyledMenuItem>
+        <StyledMenuItem onClick={() => changeLanguage('pl-PL')}>
+          <ListItemText primary={langLabels['pl-PL']} />
+        </StyledMenuItem>
+      </StyledMenu>
+    </div>
+  );
+}

src/atoms/CourseSections/index.tsx

@@ -15,44 +15,6 @@ import useStyles from './styles';
 export interface Params {
   readonly courseSlug: string;
 }
-
-// FETCH FROM API
-const sections = [
-  {
-    id: '1',
-    title: 'Introduction and setup',
-  },
-  {
-    id: '2',
-    title: 'Helm basics',
-  },
-  {
-    id: '3',
-    title: 'Jenkins CI/CD setup',
-  },
-  {
-    id: '4',
-    title: 'Dockerizing node.js application',
-  },
-  {
-    id: '5',
-    title: 'Deployment on AWS',
-  },
-].map(section => ({...section, units: [
-  {
-    title: 'Introduction and the goal of this course'
-  },
-  {
-    title: 'V8 Under the Hood'
-  },
-  {
-    title: 'The Javascript Core'
-  },
-  {
-    title: 'RESTful APIs and JSON'
-  }
-]}));
-
 const CourseView = ({ match }: RouteComponentProps<Params>) => {
   const classes = useStyles();
 
@@ -76,6 +38,23 @@ const CourseView = ({ match }: RouteComponentProps<Params>) => {
     ? assetsUrl(course.imageUrl)
     : courseImagePlaceholder;
   const coursePrice = Number(Math.random() * 10 + 9).toFixed(2);
+  const sections = course.sections.map(section => ({
+    ...section,
+    units: [
+      {
+        title: 'Introduction and the goal of this course',
+      },
+      {
+        title: 'V8 Under the Hood',
+      },
+      {
+        title: 'The Javascript Core',
+      },
+      {
+        title: 'RESTful APIs and JSON',
+      },
+    ],
+  }));
 
   return (
     <div className={classes.root}>
@@ -103,18 +82,12 @@ const CourseView = ({ match }: RouteComponentProps<Params>) => {
       <Container>
         <Grid container spacing={3}>
           <Grid item xs={12} sm={9}>
-            <Paper className={classes.paper}>
-              {/* <div
-                dangerouslySetInnerHTML={{
-                  __html: course.description as string,
-                }}
-              /> */}
-              <Typography variant="h3" className={classes.contentHeadline}>
-                Learning content:
-              </Typography>
-              
-              <CourseSections sections={sections} />
-            </Paper>
+  
+            <Typography variant="h3" className={classes.contentHeadline}>
+              Learning content:
+            </Typography>
+
+            <CourseSections sections={sections} />
           </Grid>
           <Grid item xs={12} sm={3}></Grid>
         </Grid>