Merge pull request #21 from coder-mind-project/develop

Master integration - Articles list, generic components refactor, added styled-components, update to Node.js 15.5.0

Author: allanalves23

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:latest as node
+FROM node:15.5.0-alpine3.10 as node
 WORKDIR /app
 ENV PATH /app/node_modules/.bin:$PATH
 COPY package.json ./

src/App.js

@@ -3,8 +3,8 @@ import React from 'react';
 import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
 import {Box} from '@material-ui/core';
 
-import Menu from './components/Menu.jsx';
-import Footer from './components/Footer.jsx';
+import Menu from './components/Menu/Menu.jsx';
+import Footer from './components/Footer/Footer.jsx';
 import Home from './pages/Home/Home.jsx';
 import ArticlesList from './pages/Articles/ArticlesList.jsx';
 import Article from './pages/Articles/Article.jsx';
@@ -20,13 +20,12 @@ import {standard} from './config/themes';
 import './index.css';
 import './config/axios';
 
-
 const App = () => {
   const theme = standard();
 
   return (
     <MuiThemeProvider theme={theme}>
-      <Box className="App">
+      <Box>
         <Router>
           <Menu />
           <ScrollToTop>

src/components/Footer/FakeLink.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {makeStyles} from '@material-ui/core';
+
+import {styles} from './styles/Footer';
+
+const useStyles = makeStyles(styles);
+
+const FakeLink = (props) => {
+  const {
+    children,
+    href,
+    target,
+    rel,
+  } = props;
+
+  const classes = useStyles();
+
+  return (
+    <a
+      href={href}
+      target={target}
+      rel={rel}
+      className={classes.fakeLink}
+    >
+      {children}
+    </a>);
+};
+
+FakeLink.propTypes =
+    {
+      children: PropTypes.node,
+      href: PropTypes.string.isRequired,
+      target: PropTypes.string,
+      rel: PropTypes.string,
+    };
+
+FakeLink.defaultProps = {
+  children: null,
+  target: '_self',
+  rel: null,
+};
+
+export default FakeLink;

src/components/Footer.jsx renamed to src/components/Footer/Footer.jsx

@@ -1,24 +1,21 @@
 import React from 'react';
 import {Grid, Box, Typography} from '@material-ui/core';
-import {makeStyles} from '@material-ui/core/styles';
-import {Link} from 'react-router-dom';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faGithub} from '@fortawesome/free-brands-svg-icons';
 
-import {styles} from './styles/Footer';
+import {fakeLink} from './styles/Footer';
+import FakeLink from './FakeLink';
+
 import {
   FooterContainer,
   FooterIconArea,
   FooterIconDescription,
   FooterIcon,
   FooterBox,
-} from './styles';
-
-const useStyles = makeStyles(styles);
+  FooterFakeLink,
+} from '../styles';
 
 const Footer = () => {
-  const classes = useStyles();
-
   return (
     <Grid item xs={12}>
       <FooterContainer component="footer">
@@ -43,15 +40,15 @@ const Footer = () => {
             </FooterIconDescription>
           </FooterBox>
           <FooterBox>
-            <a href="https://github.com/coder-mind-project" rel="noopener noreferrer" target="_blank" className={classes.fakeLink}>
+            <FakeLink href="https://github.com/coder-mind-project" target="_blank" rel="noopener noreferrer" styles={fakeLink}>
               <FontAwesomeIcon icon={faGithub} size="2x"/>
-            </a>
-            <Link to="/privacidade" className={classes.fakeLink}>
+            </FakeLink>
+            <FooterFakeLink to="/privacidade">
               <Typography component="span" variant="body1">
                 Políticas de Uso
               </Typography>
-            </Link>
-            <Link to="/sobre" className={classes.fakeLink}> Sobre </Link>
+            </FooterFakeLink>
+            <FooterFakeLink to="/sobre"> Sobre </FooterFakeLink>
           </FooterBox>
         </Box>
       </FooterContainer>

src/components/Footer/styles/Footer.js

@@ -0,0 +1,16 @@
+export const styles = () => ({
+  fakeLink,
+});
+
+export const fakeLink = {
+  'display': 'flex',
+  'alignItems': 'center',
+  'justifyContent': 'center',
+  'color': '#fff',
+  'marginTop': 2,
+  'marginBottom': 2,
+  'cursor': 'pointer',
+  '&:hover': {
+    color: 'rgba(255,255,255,.8)',
+  },
+};