fix code-related console warnings

Author: kulgavy

src/components/Header/HeaderView.js

@@ -3,7 +3,6 @@ import {
   AppBar,
   Toolbar,
   IconButton,
-  Button,
   InputBase,
   Menu,
   MenuItem,

src/components/Sidebar/SidebarContainer.js

@@ -23,7 +23,6 @@ export default compose(
     componentWillMount() {
       window.addEventListener('resize', this.props.handleWindowWidthChange);
       this.props.handleWindowWidthChange();
-      console.log(this.props);
     },
     componentWillUnmount() {
       window.removeEventListener('resize', this.props.handleWindowWidthChange);

src/components/Sidebar/SidebarView.js

@@ -2,13 +2,9 @@ import React from 'react';
 import {
   Drawer,
   IconButton,
-  Divider,
   List,
-  Typography,
   withStyles } from "@material-ui/core";
 import {
-  ChevronRight as ChevronRightIcon,
-  ChevronLeft as ChevronLeftIcon,
   Home as HomeIcon,
   NotificationsNone as NotificationsIcon,
   FormatSize as TypographyIcon,
@@ -25,11 +21,12 @@ import SidebarLink from './components/SidebarLink';
 import Dot from './components/Dot';
 
 const structure = [
-  { label: 'Dashboard', link: '/app/dashboard', icon: <HomeIcon /> },
-  { label: 'Typography', link: '/app/typography', icon: <TypographyIcon /> },
-  { label: 'Tables', link: '/app/tables', icon: <TableIcon /> },
-  { label: 'Notifications', link: '/app/notifications', icon: <NotificationsIcon />},
+  { id: 0, label: 'Dashboard', link: '/app/dashboard', icon: <HomeIcon /> },
+  { id: 1, label: 'Typography', link: '/app/typography', icon: <TypographyIcon /> },
+  { id: 2, label: 'Tables', link: '/app/tables', icon: <TableIcon /> },
+  { id: 3, label: 'Notifications', link: '/app/notifications', icon: <NotificationsIcon />},
   {
+    id: 4,
     label: 'UI Elements',
     link: '/app/ui',
     icon: <UIElementsIcon />,
@@ -39,16 +36,16 @@ const structure = [
       { label: 'Maps', link: '/app/ui/maps' },
     ],
   },
-  { type: 'divider' },
-  { type: 'title', label: 'HELP' },
-  { label: 'Library', link: '', icon: <LibraryIcon /> },
-  { label: 'Support', link: '', icon: <SupportIcon /> },
-  { label: 'FAQ', link: '', icon: <FAQIcon />},
-  { type: 'divider' },
-  { type: 'title', label: 'PROJECTS' },
-  { label: 'My recent', link: '', icon: <Dot size="large" color="warning" /> },
-  { label: 'Starred', link: '', icon: <Dot size="large" color="primary" /> },
-  { label: 'Background', link: '', icon: <Dot size="large" color="secondary" /> },
+  { id: 5, type: 'divider' },
+  { id: 6, type: 'title', label: 'HELP' },
+  { id: 7, label: 'Library', link: '', icon: <LibraryIcon /> },
+  { id: 8, label: 'Support', link: '', icon: <SupportIcon /> },
+  { id: 9, label: 'FAQ', link: '', icon: <FAQIcon />},
+  { id: 10, type: 'divider' },
+  { id: 11, type: 'title', label: 'PROJECTS' },
+  { id: 12, label: 'My recent', link: '', icon: <Dot size="large" color="warning" /> },
+  { id: 13, label: 'Starred', link: '', icon: <Dot size="large" color="primary" /> },
+  { id: 14, label: 'Background', link: '', icon: <Dot size="large" color="secondary" /> },
 ];
 
 const SidebarView = ({ classes, theme, toggleSidebar, isSidebarOpened, isPermanent }) => {
@@ -70,14 +67,13 @@ const SidebarView = ({ classes, theme, toggleSidebar, isSidebarOpened, isPermane
       <div className={classes.toolbar} />
       <div className={classes.mobileBackButton}>
         <IconButton
-          color="textSecondary"
           onClick={toggleSidebar}
         >
           <ArrowBackIcon classes={{ root: classNames(classes.headerIcon, classes.headerIconCollapse) }} />
         </IconButton>
       </div>
       <List className={classes.sidebarList}>
-        {structure.map(link => <SidebarLink isSidebarOpened={isSidebarOpened} key={link && link.link || link.label} {...link} />)}
+        {structure.map(link => <SidebarLink key={link.id} isSidebarOpened={isSidebarOpened} {...link} />)}
       </List>
     </Drawer>
   );

src/components/Sidebar/components/SidebarLink.js

@@ -64,8 +64,8 @@ class SidebarLink extends Component {
       return (
         <ListItem
           button
-          component={Link}
-          to={!!link && link}
+          component={link && Link}
+          to={link}
           className={classes.link}
           classes={{
             root: classnames(classes.linkRoot, {
@@ -98,7 +98,7 @@ class SidebarLink extends Component {
       <React.Fragment>
         <ListItem
           button
-          component={Link}
+          component={link && Link}
           onClick={this.toggleCollapse}
           className={classes.link}
           to={link}

src/components/Widget/WidgetContainer.js

@@ -1,4 +1,4 @@
-import { compose, withState, withHandlers } from 'recompose';
+import { compose, withState } from 'recompose';
 
 import WidgetView from './WidgetView';
 

src/components/Wrappers/Wrappers.js

@@ -65,10 +65,10 @@ const createStyled = (styles, options) => {
   return withStyles(styles, options)(Styled);
 };
 
-const BadgeExtended = ({ classes, theme, children, ...props }) => {
+const BadgeExtended = ({ classes, theme, children, colorBrightness, ...props }) => {
   const Styled = createStyled({
     badge: {
-      backgroundColor: getColor(props.color, theme, props.colorBrightness)
+      backgroundColor: getColor(props.color, theme, colorBrightness)
     }
   });
 
@@ -99,10 +99,10 @@ export const Badge = withStyles(
   { withTheme: true }
 )(BadgeExtended);
 
-const TypographyExtended = ({ theme, children, weight, size, ...props }) => (
+const TypographyExtended = ({ theme, children, weight, size, colorBrightness, ...props }) => (
   <TypographyBase
     style={{
-      color: getColor(props.color, theme, props.colorBrightness),
+      color: getColor(props.color, theme, colorBrightness),
       fontWeight: getFontWeight(weight),
       fontSize: getFontSize(size, props.variant, theme)
     }}

src/pages/dashboard/Dashboard.js

@@ -1,33 +1,25 @@
 import React from "react";
 import {
   Grid,
-  Paper,
   LinearProgress,
-  FormControl,
-  InputLabel,
   Select,
   OutlinedInput,
   MenuItem,
   withStyles,
-  withTheme
 } from "@material-ui/core";
-import { ShowChart as ShowChartIcon } from "@material-ui/icons";
 import {
   ResponsiveContainer,
   ComposedChart,
   AreaChart,
   LineChart,
-  CartesianGrid,
   Line,
   Area,
-  Tooltip,
   PieChart,
   Pie,
   Cell,
   YAxis,
   XAxis
 } from "recharts";
-import classnames from "classnames";
 
 import mock from "./mock";
 import Widget from "../../components/Widget";
@@ -128,15 +120,15 @@ const Dashboard = ({ classes, theme, ...props }) => {
               justify="space-between"
               alignItems="center"
             >
-              <Grid item direction="column" alignItems="center">
+              <Grid item>
                 <Typography color="textSecondary">Registrations</Typography>
                 <Typography size="md">860</Typography>
               </Grid>
-              <Grid item direction="column" alignItems="center">
+              <Grid item>
                 <Typography color="textSecondary">Sign Out</Typography>
                 <Typography size="md">32</Typography>
               </Grid>
-              <Grid item direction="column" alignItems="center">
+              <Grid item>
                 <Typography color="textSecondary">Rate</Typography>
                 <Typography size="md">3.25%</Typography>
               </Grid>
@@ -170,7 +162,7 @@ const Dashboard = ({ classes, theme, ...props }) => {
               <Grid item sm={6}>
                 <div className={classes.pieChartLegendWrapper}>
                   {PieChartData.map(({ name, value, color }, index) => (
-                    <div className={classes.legendItemContainer}>
+                    <div key={color} className={classes.legendItemContainer}>
                       <Dot color={color} />
                       <Typography>&nbsp;{name}&nbsp;</Typography>
                       <Typography color="textSecondary">
@@ -343,6 +335,7 @@ const Dashboard = ({ classes, theme, ...props }) => {
                   onChange={e => props.setMainChartState(e.target.value)}
                   input={
                     <OutlinedInput
+                      labelWidth={0}
                       classes={{ input: classes.mainChartSelect }}
                     />
                   }
@@ -378,7 +371,6 @@ const Dashboard = ({ classes, theme, ...props }) => {
                   type="natural"
                   dataKey="desktop"
                   fill={theme.palette.background.light}
-                  stroke={false}
                   activeDot={false}
                 />
                 <Line
@@ -405,7 +397,7 @@ const Dashboard = ({ classes, theme, ...props }) => {
           </Widget>
         </Grid>
         {mock.bigStat.map(stat => (
-          <Grid item md={4} sm={6} xs={12}>
+          <Grid item md={4} sm={6} xs={12} key={stat.product}>
             <BigStat {...stat} />
           </Grid>
         ))}

src/pages/dashboard/components/BigStat/BigStat.js

@@ -1,6 +1,5 @@
 import React, { PureComponent } from "react";
 import { Grid, Select, MenuItem, Input, withStyles } from "@material-ui/core";
-import { grey, green, red } from "@material-ui/core/colors";
 import { ArrowForward as ArrowForwardIcon } from "@material-ui/icons";
 import { BarChart, Bar } from "recharts";
 import classnames from "classnames";
@@ -59,7 +58,7 @@ class BigStat extends PureComponent {
       >
         <div className={classes.totalValueContainer}>
           <div className={classes.totalValue}>
-            <Typography size="xxl" color="textSecondary-">
+            <Typography size="xxl" color="textSecondary">
               {total[value]}
             </Typography>
             <Typography color={total.percent.profit ? "success" : "secondary"}>

src/pages/dashboard/components/Table/Table.js

@@ -27,8 +27,8 @@ const TableComponent = ({ data }) => {
         </TableRow>
       </TableHead>
       <TableBody>
-        {data.map(({ name, email, product, price, date, city, status }) => (
-          <TableRow>
+        {data.map(({ id, name, email, product, price, date, city, status }) => (
+          <TableRow key={id}>
             <TableCell className="pl-3 fw-normal">{name}</TableCell>
             <TableCell>{email}</TableCell>
             <TableCell>{product}</TableCell>

src/pages/icons/IconsView.js

@@ -2,7 +2,6 @@ import React from "react";
 import {
   Typography,
   Grid,
-  AppBar,
   Tabs,
   Tab,
   Paper,