From 86b8b1f70f441d77b79654801b2324f45dfbc737 Mon Sep 17 00:00:00 2001
From: Gilmarllen <gilmarllen@gmail.com>
Date: Sun, 17 May 2020 15:47:28 -0300
Subject: [PATCH] Refactoring the componets structure and CSS styles Support
 absolute imports

---
 .env                                          |   1 +
 .eslintrc.js                                  |   7 ++
 .vscode/settings.json                         |  12 +++
 jsconfig.json                                 |   9 +++
 src/App-styles.js                             |  15 ----
 src/App.jsx                                   |   2 +-
 .../LeftContainer/LeftContainer.jsx           |  33 +++++---
 .../LeftHeader/LeftHeader-Icons.jsx           |   2 +-
 .../LeftContainer/LeftHeader/LeftHeader.jsx   |  26 +-----
 .../LeftContainer/NotificationBanner.jsx      |   2 +-
 src/components/RightContainer.jsx             |  74 ------------------
 .../{ => RightContainer}/InputMessage.jsx     |   2 +-
 .../RightContainer/RightContainer.jsx         |  55 +++++++++++++
 .../RightHeader/RightHeader-Icons.jsx         |  42 ++++++++++
 .../RightHeader/RightHeader.jsx               |  20 +++++
 .../{ => RightContainer}/bg-chat.png          | Bin
 src/custom-components/CardHeader.jsx          |  19 +++++
 src/custom-components/IconButton.jsx          |  11 +--
 18 files changed, 199 insertions(+), 133 deletions(-)
 create mode 100644 .env
 create mode 100644 .vscode/settings.json
 create mode 100644 jsconfig.json
 delete mode 100644 src/components/RightContainer.jsx
 rename src/components/{ => RightContainer}/InputMessage.jsx (96%)
 create mode 100644 src/components/RightContainer/RightContainer.jsx
 create mode 100644 src/components/RightContainer/RightHeader/RightHeader-Icons.jsx
 create mode 100644 src/components/RightContainer/RightHeader/RightHeader.jsx
 rename src/components/{ => RightContainer}/bg-chat.png (100%)
 create mode 100644 src/custom-components/CardHeader.jsx

diff --git a/.env b/.env
new file mode 100644
index 0000000..66de2fe
--- /dev/null
+++ b/.env
@@ -0,0 +1 @@
+NODE_PATH=src/
\ No newline at end of file
diff --git a/.eslintrc.js b/.eslintrc.js
index 6208853..ee538c8 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -28,4 +28,11 @@ module.exports = {
     "no-console": "off",
     "semi": ["error", "never"]
   },
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "paths": ["src"]
+      }
+    },
+  }
 };
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..272d3be
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,12 @@
+{
+    "javascript.updateImportsOnFileMove.enabled": "always",
+    "javascript.preferences.importModuleSpecifier": "non-relative",
+    "[javascriptreact]": {
+        "editor.defaultFormatter": "vscode.typescript-language-features"
+    },
+    "editor.formatOnSave": false,
+    "editor.codeActionsOnSave": {
+        // For ESLint
+        "source.fixAll.eslint": true,
+    }
+}
\ No newline at end of file
diff --git a/jsconfig.json b/jsconfig.json
new file mode 100644
index 0000000..317b405
--- /dev/null
+++ b/jsconfig.json
@@ -0,0 +1,9 @@
+{
+    "compilerOptions": {
+      "module": "commonjs",
+      "target": "es2016",
+      "jsx": "preserve",
+      "baseUrl": "./src"
+    },
+    "exclude": ["node_modules", "**/node_modules/*"]
+}
\ No newline at end of file
diff --git a/src/App-styles.js b/src/App-styles.js
index 260a1c2..0ce8ab5 100644
--- a/src/App-styles.js
+++ b/src/App-styles.js
@@ -8,13 +8,6 @@ export default () => ({
       padding: '20px 0'
     }
   },
-  cardHeader: {
-    background: '#ededed',
-    padding: '6px 16px'
-  },
-  'cardHeader-action': {
-    marginTop: '0'
-  },
   card: {
     borderRadius: 'unset',
     display: 'flex',
@@ -84,13 +77,5 @@ export default () => ({
   },
   inputMessage: {
     height: '25px'
-  },
-  information: {
-    color: '#444'
-  },
-  leftGrid: {
-    height: '100%',
-    display: 'flex',
-    'flex-direction': 'column'
   }
 })
diff --git a/src/App.jsx b/src/App.jsx
index 15480e8..f91179f 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -12,7 +12,7 @@ import { Card, Grid } from '@material-ui/core'
 
 import appStyles from './App-styles'
 import LeftContainer from './components/LeftContainer/LeftContainer'
-import RightContainer from './components/RightContainer'
+import RightContainer from './components/RightContainer/RightContainer'
 
 const generateInitialList = (qtd) => [...Array(qtd).keys()].map((idx) => ({
   id: idx,
diff --git a/src/components/LeftContainer/LeftContainer.jsx b/src/components/LeftContainer/LeftContainer.jsx
index 17142d9..c90b23d 100644
--- a/src/components/LeftContainer/LeftContainer.jsx
+++ b/src/components/LeftContainer/LeftContainer.jsx
@@ -1,21 +1,32 @@
 import React from 'react'
 
-import {
-  Grid
-} from '@material-ui/core'
+import { makeStyles } from '@material-ui/core/styles'
+import { Grid } from '@material-ui/core'
 
 import InputSearch from './InputSearch/InputSearch'
 import LeftHeader from './LeftHeader/LeftHeader'
 import NotificationBanner from './NotificationBanner'
 import ContactList from './ContactList/ContactList'
 
-const LeftContainer = ({ classes, chats, changeCurrent }) => (
-  <Grid item className={classes.leftGrid} style={{ width: '30%' }}>
-    <LeftHeader />
-    <NotificationBanner />
-    <InputSearch />
-    <ContactList chats={chats} changeCurrent={changeCurrent} />
-  </Grid>
-)
+const useStyles = makeStyles({
+  grid: {
+    width: '30%',
+    height: '100%',
+    display: 'flex',
+    'flex-direction': 'column'
+  }
+})
+
+const LeftContainer = ({ chats, changeCurrent }) => {
+  const classes = useStyles()
+  return (
+    <Grid item className={classes.grid}>
+      <LeftHeader />
+      <NotificationBanner />
+      <InputSearch />
+      <ContactList chats={chats} changeCurrent={changeCurrent} />
+    </Grid>
+  )
+}
 
 export default LeftContainer
diff --git a/src/components/LeftContainer/LeftHeader/LeftHeader-Icons.jsx b/src/components/LeftContainer/LeftHeader/LeftHeader-Icons.jsx
index a115bfb..b19cdd7 100644
--- a/src/components/LeftContainer/LeftHeader/LeftHeader-Icons.jsx
+++ b/src/components/LeftContainer/LeftHeader/LeftHeader-Icons.jsx
@@ -3,7 +3,7 @@ import React from 'react'
 import MoreVertIcon from '@material-ui/icons/MoreVert'
 import Message from '@material-ui/icons/Message'
 
-import IconButton from '../../../custom-components/IconButton'
+import IconButton from 'custom-components/IconButton'
 
 const LeftHeaderIcons = () => (
   <>
diff --git a/src/components/LeftContainer/LeftHeader/LeftHeader.jsx b/src/components/LeftContainer/LeftHeader/LeftHeader.jsx
index 2ccaa51..4beeab6 100644
--- a/src/components/LeftContainer/LeftHeader/LeftHeader.jsx
+++ b/src/components/LeftContainer/LeftHeader/LeftHeader.jsx
@@ -1,37 +1,19 @@
 import React from 'react'
 
-import { CardHeader, Avatar } from '@material-ui/core'
+import { Avatar } from '@material-ui/core'
 import { makeStyles } from '@material-ui/core/styles'
 
+import CardHeader from 'custom-components/CardHeader'
 import LeftHeaderIcons from './LeftHeader-Icons'
 
-const useStyles = makeStyles({
-  rightBorder: {
-    borderRight: 'solid #d0D0D0 1px',
-    background: '#ededed'
-  },
-  cardHeader: {
-    background: '#ededed',
-    padding: '6px 16px'
-  }
-})
-
-const cardHeaderStyles = makeStyles({
-  root: {
-    flexShrink: '0'
-  },
-  action: {
-    marginTop: '0'
-  }
-})
+const useStyles = makeStyles({})
 
 const LeftHeader = () => {
   const classes = useStyles()
 
   return (
     <CardHeader
-      className={`${classes.rightBorder} ${classes.cardHeader}`}
-      classes={cardHeaderStyles()}
+      classes={classes}
       avatar={(
         <Avatar aria-label="Recipe">G</Avatar>
       )}
diff --git a/src/components/LeftContainer/NotificationBanner.jsx b/src/components/LeftContainer/NotificationBanner.jsx
index 5c8c986..9b4a512 100644
--- a/src/components/LeftContainer/NotificationBanner.jsx
+++ b/src/components/LeftContainer/NotificationBanner.jsx
@@ -7,7 +7,7 @@ import {
 
 import NotificationsOffIcon from '@material-ui/icons/NotificationsOff'
 
-import IconButton from '../../custom-components/IconButton'
+import IconButton from 'custom-components/IconButton'
 
 const useStyles = makeStyles({
   paper: {
diff --git a/src/components/RightContainer.jsx b/src/components/RightContainer.jsx
deleted file mode 100644
index 42542c1..0000000
--- a/src/components/RightContainer.jsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import React from 'react'
-import {
-  Grid, Card, CardHeader, CardContent, Avatar, IconButton,
-  Paper, Typography, CardActions, List, ListItem
-} from '@material-ui/core'
-
-import MoreVertIcon from '@material-ui/icons/MoreVert'
-import SearchIcon from '@material-ui/icons/Search'
-import AttachFileIcon from '@material-ui/icons/AttachFile'
-
-import backgroundChat from './bg-chat.png'
-import InputMessage from './InputMessage'
-
-const RightContainer = ({ classes, chat, sendMessage }) => (
-  <Grid item id="rightGrid" className={classes.rightGrid} style={{ width: '70%' }}>
-    <Card className={classes.rightCard}>
-      <CardHeader
-        style={{ zIndex: '2' }}
-        className={classes.cardHeader}
-        classes={{ action: classes['cardHeader-action'] }}
-        avatar={
-          <Avatar alt={chat.name} src={chat.image} aria-label="Recipe" className={classes.avatar} />
-            }
-        action={(
-          <>
-            <IconButton style={{ backgroundColor: 'transparent', color: '#919191' }}>
-              <SearchIcon />
-            </IconButton>
-            <IconButton
-              aria-label="attach"
-              style={{
-                marginLeft: '6px', transform: 'rotate(50deg)', backgroundColor: 'transparent', color: '#919191'
-              }}
-            >
-              <AttachFileIcon />
-            </IconButton>
-            <IconButton style={{ marginLeft: '6px', backgroundColor: 'transparent', color: '#919191' }}>
-              <MoreVertIcon />
-            </IconButton>
-          </>
-              )}
-        title={chat.name}
-      />
-      <div style={{
-        backgroundImage: `url(${backgroundChat})`, opacity: '0.06', position: 'absolute', width: '100%', height: '100%'
-      }}
-      />
-      <CardContent className={classes.chatArea} style={{ background: '#e5ddd5' }}>
-        <List>
-          {chat.messages.map((message) => (
-            <ListItem
-              key={message.id}
-              className={classes['message-wrapper']}
-            >
-              <Paper
-                className={classes.message}
-                elevation={1}
-              >
-                <Typography className={classes.information} variant="body2">
-                  {message.m}
-                </Typography>
-              </Paper>
-            </ListItem>
-          ))}
-        </List>
-      </CardContent>
-      <CardActions style={{ background: '#f0f0f0', zIndex: '2', padding: '10px' }}>
-        <InputMessage sendMessage={sendMessage} />
-      </CardActions>
-    </Card>
-  </Grid>
-)
-
-export default RightContainer
diff --git a/src/components/InputMessage.jsx b/src/components/RightContainer/InputMessage.jsx
similarity index 96%
rename from src/components/InputMessage.jsx
rename to src/components/RightContainer/InputMessage.jsx
index 1a16691..4257a24 100644
--- a/src/components/InputMessage.jsx
+++ b/src/components/RightContainer/InputMessage.jsx
@@ -7,7 +7,7 @@ import InputBase from '@material-ui/core/InputBase'
 import InsertEmoticonIcon from '@material-ui/icons/InsertEmoticon'
 import MicIcon from '@material-ui/icons/Mic'
 
-import IconButton from '../custom-components/IconButton'
+import IconButton from 'custom-components/IconButton'
 
 const useStyles = makeStyles((theme) => ({
   root: {
diff --git a/src/components/RightContainer/RightContainer.jsx b/src/components/RightContainer/RightContainer.jsx
new file mode 100644
index 0000000..c0a463b
--- /dev/null
+++ b/src/components/RightContainer/RightContainer.jsx
@@ -0,0 +1,55 @@
+import React from 'react'
+import {
+  Grid, Card, CardContent,
+  Paper, Typography, CardActions, List, ListItem
+} from '@material-ui/core'
+
+
+import backgroundChat from './bg-chat.png'
+import InputMessage from './InputMessage'
+import RightHeader from './RightHeader/RightHeader'
+
+const Background = () => (
+  <div style={{
+    backgroundImage: `url(${backgroundChat})`,
+    opacity: '0.06',
+    position: 'absolute',
+    width: '100%',
+    height: '100%'
+  }}
+  />
+)
+
+const RightContainer = ({ classes, chat, sendMessage }) => (
+  <Grid item id="rightGrid" className={classes.rightGrid} style={{ width: '70%' }}>
+    <Card className={classes.rightCard}>
+      <RightHeader chat={chat} style={{ zIndex: '2' }} />
+      <Background />
+
+      <CardContent className={classes.chatArea} style={{ background: '#e5ddd5' }}>
+        <List>
+          {chat.messages.map((message) => (
+            <ListItem
+              key={message.id}
+              className={classes['message-wrapper']}
+            >
+              <Paper
+                className={classes.message}
+                elevation={1}
+              >
+                <Typography className={classes.information} variant="body2">
+                  {message.m}
+                </Typography>
+              </Paper>
+            </ListItem>
+          ))}
+        </List>
+      </CardContent>
+      <CardActions style={{ background: '#f0f0f0', zIndex: '2', padding: '10px' }}>
+        <InputMessage sendMessage={sendMessage} />
+      </CardActions>
+    </Card>
+  </Grid>
+)
+
+export default RightContainer
diff --git a/src/components/RightContainer/RightHeader/RightHeader-Icons.jsx b/src/components/RightContainer/RightHeader/RightHeader-Icons.jsx
new file mode 100644
index 0000000..4193680
--- /dev/null
+++ b/src/components/RightContainer/RightHeader/RightHeader-Icons.jsx
@@ -0,0 +1,42 @@
+import React from 'react'
+
+import { makeStyles } from '@material-ui/core/styles'
+
+import MoreVertIcon from '@material-ui/icons/MoreVert'
+import SearchIcon from '@material-ui/icons/Search'
+import AttachFileIcon from '@material-ui/icons/AttachFile'
+
+import IconButton from 'custom-components/IconButton'
+
+const iconMarginStyle = makeStyles({
+  root: {
+    marginLeft: '6px'
+  }
+})
+
+const RightHeaderIcons = () => {
+  const iconMargin = iconMarginStyle()
+  return (
+    <>
+      <IconButton>
+        <SearchIcon />
+      </IconButton>
+      <IconButton
+        classes={iconMargin}
+        aria-label="attach"
+        style={{
+          transform: 'rotate(50deg)'
+        }}
+      >
+        <AttachFileIcon />
+      </IconButton>
+      <IconButton
+        classes={iconMargin}
+      >
+        <MoreVertIcon />
+      </IconButton>
+    </>
+  )
+}
+
+export default RightHeaderIcons
diff --git a/src/components/RightContainer/RightHeader/RightHeader.jsx b/src/components/RightContainer/RightHeader/RightHeader.jsx
new file mode 100644
index 0000000..34c2ad6
--- /dev/null
+++ b/src/components/RightContainer/RightHeader/RightHeader.jsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import {
+  Avatar
+} from '@material-ui/core'
+
+import CardHeader from 'custom-components/CardHeader'
+import RightHeaderIcons from './RightHeader-Icons'
+
+const RightHeader = ({ chat, style }) => (
+  <CardHeader
+    style={style}
+    avatar={
+      <Avatar alt={chat.name} src={chat.image} aria-label="Recipe" />
+    }
+    action={(<RightHeaderIcons />)}
+    title={chat.name}
+  />
+)
+
+export default RightHeader
diff --git a/src/components/bg-chat.png b/src/components/RightContainer/bg-chat.png
similarity index 100%
rename from src/components/bg-chat.png
rename to src/components/RightContainer/bg-chat.png
diff --git a/src/custom-components/CardHeader.jsx b/src/custom-components/CardHeader.jsx
new file mode 100644
index 0000000..ca1bc14
--- /dev/null
+++ b/src/custom-components/CardHeader.jsx
@@ -0,0 +1,19 @@
+import React from 'react'
+
+import { CardHeader } from '@material-ui/core'
+import { withStyles } from '@material-ui/core/styles'
+
+const styles = () => ({
+  root: {
+    flexShrink: '0',
+    background: '#ededed',
+    padding: '6px 16px'
+  },
+  action: {
+    marginTop: '0'
+  }
+})
+
+const CardHeaderCustom = (props) => <CardHeader {...props} />
+
+export default withStyles(styles)(CardHeaderCustom)
diff --git a/src/custom-components/IconButton.jsx b/src/custom-components/IconButton.jsx
index 21131f5..84ba95e 100644
--- a/src/custom-components/IconButton.jsx
+++ b/src/custom-components/IconButton.jsx
@@ -1,9 +1,9 @@
 import React from 'react'
 
 import { IconButton } from '@material-ui/core'
-import { makeStyles } from '@material-ui/core/styles'
+import { withStyles } from '@material-ui/core/styles'
 
-const useStyles = makeStyles({
+const styles = () => ({
   root: {
     '&:hover': {
       backgroundColor: 'transparent'
@@ -12,9 +12,6 @@ const useStyles = makeStyles({
   }
 })
 
-// TODO merge classes (from props + default)
-export default (props) => {
-  const classes = useStyles()
+const IconButtonCustom = (props) => <IconButton {...props} />
 
-  return <IconButton {...props} classes={classes} />
-}
+export default withStyles(styles)(IconButtonCustom)