Refactoring the componets structure and CSS styles

Support absolute imports

.env

@@ -0,0 +1 @@
+NODE_PATH=src/

.eslintrc.js

@@ -28,4 +28,11 @@ module.exports = {
     "no-console": "off",
     "semi": ["error", "never"]
   },
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "paths": ["src"]
+      }
+    },
+  }
 };

.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,
+    }
+}

jsconfig.json

@@ -0,0 +1,9 @@
+{
+    "compilerOptions": {
+      "module": "commonjs",
+      "target": "es2016",
+      "jsx": "preserve",
+      "baseUrl": "./src"
+    },
+    "exclude": ["node_modules", "**/node_modules/*"]
+}

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'
   }
 })

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,

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

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 = () => (
   <>

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>
       )}

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: {

src/components/InputMessage.jsx → 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: {

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

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

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