feat: fix review suggestions

* flexDirection was removed from App styles
* props were passed via spread operator in CmwlInput
* boolean props were explicitly passed in CmwlInput
* code style refactoring in CmwlTypographyLink
* inputChangedHandler was curried
* useClasses was added for combining class names via a map from string to boolean
* theme.spacing was used in styles instead of hardcoded px units
* localization provider was implemented using React contexts in combination with hooks
* locale switcher was implemented and added to the Dashboard

package.json

@@ -27,7 +27,7 @@
     "@material-ui/core": "^4.11.3",
     "@material-ui/icons": "^4.11.2",
     "axios": "^0.21.1",
-    "clsx": "^1.1.1",
+    "classnames": "^2.2.6",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-redux": "^7.2.2",
@@ -40,6 +40,7 @@
     "typescript": "^4.1.3"
   },
   "devDependencies": {
+    "@types/classnames": "^2.2.11",
     "@types/node": "^14.14.22",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",

src/App.tsx

@@ -1,14 +1,15 @@
-import React, { FunctionComponent } from 'react';
+import React, { FunctionComponent, useState } from 'react';
 import SignIn from './containers/Auth/SignIn/SignIn';
 import { Redirect, Route, Switch } from 'react-router';
 import { useSelector } from 'react-redux';
 import { RootState } from './store';
 import { Dashboard } from './containers/Dashboard/Dashboard';
-import { Box, Container, Grid, makeStyles, Paper } from '@material-ui/core';
-import clsx from 'clsx';
+import { Box, Container, Grid, makeStyles, Paper, Theme } from '@material-ui/core';
+import classNames from 'classnames';
+import { LocaleContext, LocaleLanguage } from './context/LocaleContext';
 
 
-export const useStyles = makeStyles((theme) => ({
+export const useStyles = makeStyles((theme: Theme) => ({
   appBarSpacer: theme.mixins.toolbar,
   content: {
     flexGrow: 1,
@@ -23,7 +24,7 @@ export const useStyles = makeStyles((theme) => ({
     padding: theme.spacing(2),
     display: 'flex',
     overflow: 'auto',
-    flexDirection: 'column'
+    justifyContent: 'center'
   },
   fixedHeight: {
     height: '85vh'
@@ -32,14 +33,19 @@ export const useStyles = makeStyles((theme) => ({
 
 const App: FunctionComponent = () => {
 
+  const [locale, setLocale] = useState(LocaleLanguage.en);
+
   const classes = useStyles();
-  const fixedHeightPaper = clsx(classes.paper, classes.fixedHeight);
+  const fixedHeightPaper = classNames({
+    [classes.paper]: true,
+    [classes.fixedHeight]: true
+  });
   const isAuthenticated = useSelector<RootState, boolean>(state => state.auth.isAuthenticated);
 
   const content = () => {
     if (isAuthenticated) {
       return (
-        <>
+        <LocaleContext.Provider value={{ locale, setLocale }}>
           <Dashboard>
             {/* Just for now, Dashboard's content is a PoC and this implementation will be removed in the nearest time */}
             <main className={classes.content}>
@@ -50,9 +56,9 @@ const App: FunctionComponent = () => {
                     <Paper className={fixedHeightPaper}>
                       <Switch>
                         {/*ToDo: rid off from the inline-renders */}
-                        <Route path='/projects' render={() => <h2>Projects content</h2>} />
-                        <Route path='/executions' render={() => <h2>Executions content</h2>} />
-                        <Route path='/' exact render={() => <h2>Main content</h2>} />
+                        <Route path='/projects' render={() => <h2>Projects content ({locale})</h2>} />
+                        <Route path='/executions' render={() => <h2>Executions content ({locale})</h2>} />
+                        <Route path='/' exact render={() => <h2>Main content ({locale})</h2>} />
                       </Switch>
                     </Paper>
                   </Grid>
@@ -61,7 +67,7 @@ const App: FunctionComponent = () => {
             </main>
           </Dashboard>
           <Redirect to='/' />
-        </>
+        </LocaleContext.Provider>
       );
     }
     return (

src/components/UI/AppButton/CmwlButtonStyles.ts

@@ -1,6 +1,6 @@
-import { createStyles, makeStyles } from '@material-ui/core';
+import { createStyles, makeStyles, Theme } from '@material-ui/core';
 
-export const useCmwlButtonStyles = makeStyles((theme) => createStyles({
+export const useCmwlButtonStyles = makeStyles((theme: Theme) => createStyles({
   submit: {
     margin: theme.spacing(3, 0, 2)
   }

src/components/UI/CmwInput.tsx → src/components/UI/CmwlInput.tsx

@@ -10,19 +10,14 @@ interface AppInputProps {
   onChange?: ChangeEventHandler
 }
 
-export const CmwInput: FC<AppInputProps> = props => {
+export const CmwlInput: FC<AppInputProps> = props => {
   return (
     <TextField
-      id={props.id}
-      type={props.type}
-      name={props.name}
-      label={props.label}
-      value={props.value}
-      onChange={props.onChange}
       variant="outlined"
       margin="normal"
-      required
-      fullWidth
+      required={true}
+      fullWidth={true}
+      {...props}
     />
   );
 };

src/components/UI/CmwlListItemLink/CmwlListItemLinkStyles.ts

@@ -1,6 +1,6 @@
-import { createStyles, makeStyles } from '@material-ui/core';
+import { createStyles, makeStyles, Theme } from '@material-ui/core';
 
-export const useCmwlListItemLinkStyles = makeStyles((theme) => createStyles({
+export const useCmwlListItemLinkStyles = makeStyles((theme: Theme) => createStyles({
   listItemLeft: {
     marginLeft: theme.spacing(1)
   }

src/components/UI/CmwlTypographyLink.tsx

@@ -29,6 +29,6 @@ export const CmwlTypographyLink: FC<TypographyLinkProps> = props => {
   );
 
   return (
-    <Typography component={memoLink}{...props} />
+    <Typography component={memoLink} {...props} />
   );
 };

src/components/UI/LocaleSwitcher/LocaleSwitcher.tsx

@@ -0,0 +1,55 @@
+import React, { ChangeEvent, FC, useContext } from 'react';
+import { LocaleContext, LocaleLanguage } from '../../../context/LocaleContext';
+import { Avatar, MenuItem, Select } from '@material-ui/core';
+import { ReactComponent as USAIcon } from '../../../assets/flags/UnitedStates.svg';
+import { ReactComponent as RussiaIcon } from '../../../assets/flags/Russia.svg';
+import { useLocaleSwitcherStyles } from './LocaleSwitcherStyles';
+
+export const LocaleSwitcher: FC = () => {
+  const classes = useLocaleSwitcherStyles();
+  const { locale, setLocale } = useContext(LocaleContext);
+
+  const localeItems = [
+    {
+      locale: LocaleLanguage.en,
+      icon: <USAIcon />
+    },
+    {
+      locale: LocaleLanguage.ru,
+      icon: <RussiaIcon />
+    }
+  ];
+
+  const menuItems = () => {
+    return localeItems.map(item => (
+      <MenuItem key={item.locale} value={item.locale} className={classes.menuItem}>
+        <Avatar className={classes.avatar}>
+          {item.icon}
+        </Avatar>
+      </MenuItem>
+    ));
+  };
+
+  const onChangeSelectHandler = (event: ChangeEvent<{ value: unknown }>) => {
+    setLocale(event.target.value as LocaleLanguage);
+  };
+
+  return (
+    <Select value={locale}
+            onChange={onChangeSelectHandler}
+            disableUnderline={true}
+            classes={{
+              icon: classes.hideIcon,
+              select: classes.select
+            }}
+            MenuProps={{
+              getContentAnchorEl: null,
+              anchorOrigin: {
+                vertical: 'bottom',
+                horizontal: 'left'
+              }
+            }}>
+      {menuItems()}
+    </Select>
+  );
+};