Refact some files

.babelrc

@@ -1,8 +1,9 @@
 {
     "presets": [
-        "@babel/react", 
+        "@babel/react",
     ],
     "plugins": [
-        "@babel/plugin-proposal-class-properties"
+        "@babel/plugin-proposal-class-properties",
+        "react-hot-loader/babel"
     ]
 }

.eslintignore

@@ -1,3 +1,2 @@
 node_modules/
 public/
-webpack.config.js

package.json

@@ -13,6 +13,7 @@
     "husky": "^1.3.1",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
+    "react-hot-loader": "^4.12.10",
     "react-markdown": "^4.0.6",
     "react-scripts": "2.1.3",
     "webpack-merge": "^4.2.1"
@@ -23,7 +24,7 @@
     }
   },
   "scripts": {
-    "start": "webpack-dev-server --config ./webpack/webpack.dev.js --progress --colors --inline --hot --host 0.0.0.0",
+    "start": "webpack-dev-server --config ./webpack/webpack.dev.js --progress --colors",
     "build": "webpack --config ./webpack/webpack.prod.js",
     "lint": "eslint ."
   },

src/components/app/App.css

@@ -1,6 +1,6 @@
 .main {
     height: 100%;
     display: grid;
-    grid-template-rows: auto max-content;
+    grid-template-rows: auto 14%;
 }
 

src/components/app/App.js

@@ -6,10 +6,12 @@ import Footer from "./Footer/Footer"
 import './App.css';
 
 const App = () => (
-    <div className={"main"}>
-        <Route path="/:term?" component={GlossaryPage}/>
-        <Footer className={"main__footer"}/>
-    </div>
+  <div className="main">
+    <main>
+      <Route path="/:term?" component={GlossaryPage}/>
+    </main>
+    <Footer/>
+  </div>
 );
 
 export default App;

src/components/app/Footer/Footer.css

@@ -2,12 +2,10 @@
     display: grid;
     grid-template-areas:
         "contribute about";
-    grid-template-columns: max-content max-content;
     grid-template-rows: 100%;
     grid-gap: 5em;
-    align-items: center;
-    justify-content: center;
-    padding: 24px;
+    place-content: center;
+    place-items: center;
 }
 
 @media screen and (max-width: 475px){
@@ -19,5 +17,4 @@
         grid-template-rows: max-content max-content;
         grid-gap: 0.5em;
     }
-
 }

src/components/app/Footer/Footer.js

@@ -1,20 +1,21 @@
 import React from 'react';
-import "./Footer.css"
 
-import { IconWithText } from "../../common/index"
+import { IconWithText } from "../../common"
+import "./Footer.css"
 
 const contributionLink = "https://github.com/OpenDevUFCG/glossario-ufcg/blob/master/CONTRIBUTING.md";
 const aboutLink = "https://opendevufcg.org/";
+const linkClass = "pointer-hover no-decoration lighter-hover";
 
 const Footer = () => (
-    <div className={'glossary-footer'}>
-        <a className={"pointer-hover no-decoration lighter-hover"} href={contributionLink}>
-            <IconWithText icon={"inbox"} text={"Como contribuir?"}/>
-        </a>
-        <a className={"pointer-hover no-decoration lighter-hover"} href={aboutLink}>
-            <IconWithText icon={"people"} text={"Quem somos?"}/>
-        </a>
-    </div>
+  <footer className='glossary-footer'>
+    <a className={linkClass} href={contributionLink}>
+      <IconWithText icon='inbox' text='Como contribuir?'/>
+    </a>
+    <a className={linkClass} href={aboutLink}>
+      <IconWithText icon='people' text='Quem somos?'/>
+    </a>
+  </footer>
 );
 
 

src/components/common/Icon/Icon.js

@@ -1,8 +1,8 @@
 import React from 'react';
 
-const Icon = (props) => (
-    <i className="material-icons" style={{color: props.iconColor, fontSize: props.size}}>
-        {props.icon}
+const Icon = ({ icon, iconColor, size }) => (
+    <i className="material-icons" style={{color: iconColor, fontSize: size}}>
+        {icon}
     </i>
 );
 

src/components/common/Icon/IconButton/IconButton.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import Icon from "../Icon";
+
+const IconButton = ({ icon, iconColor, action}) => (
+  <button
+    className='odu-icon-button align-self-center'
+    onClick={action}
+  >
+    <Icon icon={icon} iconColor={iconColor}/>
+  </button>
+);
+
+export default IconButton;

src/components/common/IconWithText/IconWithText.css → src/components/common/Icon/IconWithText/IconWithText.css

@@ -8,5 +8,6 @@
     align-items: center;
     justify-content: center;
     font-weight: bold;
+    margin: 0;
     font-size: 1.2em;
 }

src/components/common/Icon/IconWithText/IconWithText.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import "./IconWithText.css"
+
+import Icon from "../Icon"
+
+const IconWithText = ({ icon, text }) => (
+    <figure className='icon-with-text light-accent'>
+        <Icon icon={icon} size='30px'/>
+        <figcaption>{text}</figcaption>
+    </figure>
+);
+
+export default IconWithText;

src/components/common/Icon/index.js

@@ -0,0 +1,9 @@
+import Icon from './Icon'
+import IconButton from './IconButton/IconButton'
+import IconWithText from './IconWithText/IconWithText'
+
+export {
+    Icon,
+    IconButton,
+    IconWithText
+}

src/components/common/Search/Search.js

@@ -1,31 +1,34 @@
 import * as React from 'react';
 import "./Search.css";
 import { AutoComplete, Select } from 'antd';
-import Icon from "../Icon/Icon";
+import { Icon } from "../Icon";
 
 const renderOption = (item) => (
     <Select.Option key={item}>
       {item}
     </Select.Option>
 );
 
-const CustomSearchButton = (props) => (
-    <button className={"search__button-container pointer-hover lighter-hover"} onClick={props.handleClick}>
-        <Icon className={"search__button"} icon={"search"} iconColor={"#FFFFFF"}/>
-    </button>
+const CustomSearchButton = ({ handleClick }) => (
+  <button
+    className='search__button-container pointer-hover lighter-hover'
+    onClick={handleClick}
+  >
+    <Icon className='search__button' icon='search' iconColor='#FFFFFF"'/>
+  </button>
 );
 
-const Search = (props) => (
-  <div className={"search"}>
+const Search = ({ items, handleSelect }) => (
+  <aside className='search'>
     <AutoComplete
-        dataSource={props.items.map(renderOption)}
-        optionLabelProp="meaning"
-        placeholder="Pesquise..."
-        onSelect={e => props.handleSelect(e)}
-        filterOption={(inputValue, option) => option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1}
+      dataSource={items.map(renderOption)}
+      optionLabelProp='meaning'
+      placeholder='Pesquise...'
+      onSelect={e => handleSelect(e)}
+      filterOption={(inputValue, option) => option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1}
     />
     <CustomSearchButton/>
-  </div>
+  </aside>
 );
 
 export default Search;

src/components/common/index.js

@@ -1,9 +1,13 @@
-import Icon from './Icon/Icon';
-import IconButton from './IconButton/IconButton';
-import IconWithText from './IconWithText/IconWithText';
+import { Icon, IconButton, IconWithText } from './Icon';
 import Search from './Search/Search';
 import TermCard from './TermCard/TermCard';
 import Markdown from './Markdown/Markdown';
 
-
-export { Icon, IconButton, IconWithText, Search, TermCard, Markdown };
+export {
+  Icon,
+  IconButton,
+  IconWithText,
+  Search,
+  TermCard,
+  Markdown
+};

src/components/glossary/GlossaryPage.js

@@ -48,15 +48,13 @@ class GlossaryPage extends Component {
                     <Search className={"glossary__search"}
                             items={Object.keys(terms).sort()}
                             handleSelect={this.handleAcronymChange}/>
-                    {this.isSearchEmpty() ?
-                        <DayPhrase entry={randomEntry}/> :
-                        ""
-                    }
+                    {this.isSearchEmpty() && (
+                        <DayPhrase entry={randomEntry}/>
+                    )}
                 </div>
-                {!this.isSearchEmpty() ?
-                    <SearchResults term={this.getTerm()}/> :
-                    ""
-                }
+                {!this.isSearchEmpty() && (
+                    <SearchResults term={this.getTerm()}/>
+                )}
             </div>
         );
     }

src/index.css

@@ -4,6 +4,7 @@ html, body {
     font-family: 'Krub', sans-serif;
     font-size: 16px;
     margin: 0;
+    padding: 0;
 }
 
 @font-face {

src/index.html

@@ -4,7 +4,7 @@
     <title>Glossario UFCG</title>
     <meta name="viewport" charset="UTF-8" content="width=device-width, initial-scale=1">
     <meta charset="utf-8" />
-    <link href="assets/images/favicon.ico" rel="icon">
+    <link href="../assets/images/favicon.ico" type="image/png" rel="shortcut icon"/>
     <link href="https://fonts.googleapis.com/css?family=Krub:400,500" rel="stylesheet">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   </head>

src/index.js

@@ -4,7 +4,6 @@ import App from './components/app/App'
 import { HashRouter } from 'react-router-dom'
 
 import './index.css';
-import './styles/material/colors.css';
 import './styles/odu/odu.css';
 import './styles/odu/colors.css';
 import './styles/utils.css';

webpack/webpack.common.js

@@ -1,12 +1,11 @@
-const webpack = require('webpack');
 const path = require('path');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const HtmlWebPackPlugin = require("html-webpack-plugin");
 
 const parentDir = path.join(__dirname, '../');
 
 const config = {
-    entry: [`${parentDir}/src/index.js`],
+    entry: [`${parentDir}src/index.js`],
     output: {
         path: `${parentDir}public/`,
         filename: 'bundle.[hash].js',
@@ -16,7 +15,7 @@ const config = {
             {
                 test: /\.(js|jsx)$/,
                 exclude: /node_modules/,
-                use: 'babel-loader',
+                use: 'babel-loader'
             },
             {
                 test: /\.(jpg|jpeg|gif|png|svg)$/,
@@ -51,7 +50,7 @@ const config = {
             filename: 'style.css',
         }),
         new HtmlWebPackPlugin({
-            template: `${parentDir}/src/index.html`,
+            template: `${parentDir}src/index.html`,
             filename: "index.html"
         })
     ]

webpack/webpack.dev.js

@@ -1,16 +1,20 @@
-const webpack = require('webpack');
 const merge = require('webpack-merge');
 const path = require('path');
 const common = require('./webpack.common');
 
 const parentDir = path.join(__dirname, '../');
 
 module.exports = merge(common, {
-    entry: ['react-dev-utils/webpackHotDevClient'],
+    entry: ['react-hot-loader/patch'],
     devServer: {
         port: 8000,
-        contentBase: `${parentDir}public`,
+        contentBase: [`${parentDir}public`],
         historyApiFallback: true,
+        watchContentBase: true,
+        hot: true,
+        inline: true,
+        host: '0.0.0.0',
     },
     mode: 'development',
 });
+

webpack/webpack.prod.js

@@ -1,4 +1,3 @@
-const webpack = require('webpack');
 const merge = require('webpack-merge');
 const common = require('./webpack.common');