Fix components and pages with eslint rules

TheeDouglasAM3 · Jan 26, 2021 · 5aa4f02 · 5aa4f02
1 parent 650b0f9
commit 5aa4f02
Show file tree

Hide file tree

Showing 8 changed files with 53 additions and 48 deletions.
diff --git a/pages/_app.js b/pages/_app.js
@@ -1,5 +1,9 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable react/jsx-props-no-spreading */
+import React from 'react'
 import { createGlobalStyle, ThemeProvider } from 'styled-components'
 import db from '../db.json'
+import Head from '../src/components/Head'
 
 const GlobalStyle = createGlobalStyle`
  * {
@@ -25,15 +29,16 @@ const GlobalStyle = createGlobalStyle`
  }
 `
 
-const theme = db.theme;
+const { theme } = db
 
 export default function App({ Component, pageProps }) {
  return (
  <>
+ <Head title={db.title} bg={db.bg} description={db.description} />
  <ThemeProvider theme={theme}>
  <GlobalStyle />
  <Component {...pageProps} />
  </ThemeProvider>
  </>
  )
-}
+}
diff --git a/pages/_document.js b/pages/_document.js
@@ -7,11 +7,9 @@ export default class MyDocument extends Document {
  const originalRenderPage = ctx.renderPage
 
  try {
- ctx.renderPage = () =>
- originalRenderPage({
- enhanceApp: (App) => (props) =>
- sheet.collectStyles(<App {...props} />),
- })
+ ctx.renderPage = () => originalRenderPage({
+ enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
+ })
 
  const initialProps = await Document.getInitialProps(ctx)
  return {

diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js
@@ -23,7 +23,7 @@ const FooterWrapper = styled.footer`
  text-decoration: underline;
  }
  }
-`;
+`
 
 export default function Footer(props) {
  return (
@@ -42,5 +42,5 @@ export default function Footer(props) {
  </a>
  </p>
  </FooterWrapper>
- );
-}
+ )
+}
diff --git a/src/components/GitHubCorner/index.js b/src/components/GitHubCorner/index.js
@@ -1,14 +1,14 @@
 // src/components/GitHubCorner/index.js
-import React from 'react';
-import styled from 'styled-components';
+import React from 'react'
+import styled from 'styled-components'
 
 const Wrapper = styled.div`
  position: absolute;
  top: 0;
  border: 0;
  right: 0;
  z-index: 20;
-`;
+`
 
 const SVGWrapper = styled.svg`
  fill: ${({ theme }) => theme.colors.secondary};
@@ -30,7 +30,7 @@ const SVGWrapper = styled.svg`
  animation:octocat-wave 560ms ease-in-out
  }
  }
-`;
+`
 
 // eslint-disable-next-line react/prop-types
 export default function GitHubCorner({ projectUrl }) {
@@ -44,5 +44,5 @@ export default function GitHubCorner({ projectUrl }) {
  </SVGWrapper>
  </a>
  </Wrapper>
- );
-}
+ )
+}
diff --git a/src/components/Head/index.js b/src/components/Head/index.js
@@ -2,21 +2,25 @@ import Head from 'next/head'
 
 export default function Home({ title, description, bg }) {
  return (
- <Head>
- <title>{title}</title>
- <meta charSet="utf-8" />
- <meta name="viewport" content="initial-scale=1.0, width=device-width" />
- <meta property="og:locale" content="pt_BR" />
+ <Head>
+ <title>{title}</title>
 
- <meta property="og:title" content={title} />
- <meta property="og:site_name" content="PatoQuiz" />
+ <meta charSet="utf-8" />
+ <meta name="viewport" content="initial-scale=1.0, width=device-width" />
+ <meta property="og:locale" content="pt_BR" />
 
- <meta property="og:description" content={description} />
- <meta property="og:image" content={bg} />
- <meta property="og:image:type" content="image/jpg" />
- <meta property="og:image:width" content="1920" />
- <meta property="og:image:height" content="1080" />
- <meta property="og:type" content="website"></meta>
- </Head>
+ <meta property="og:title" content={title} />
+ <meta property="og:site_name" content="PatoQuiz" />
+
+ <meta property="og:description" content={description} />
+ <meta property="og:image" content={bg} />
+ <meta property="og:image:type" content="image/jpg" />
+ <meta property="og:image:width" content="1920" />
+ <meta property="og:image:height" content="1080" />
+ <meta property="og:type" content="website" />
+
+ <link rel="preconnect" href="https://fonts.gstatic.com" />
+ <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet" />
+ </Head>
  )
-}
+}
diff --git a/src/components/QuizBackground/index.js b/src/components/QuizBackground/index.js
@@ -1,5 +1,5 @@
 // src/components/QuizBackground/index.js
-import styled from 'styled-components';
+import styled from 'styled-components'
 
 const QuizBackground = styled.div`
  width: 100%;
@@ -31,6 +31,6 @@ const QuizBackground = styled.div`
  z-index: 10;
  }
  }
-`;
+`
 
-export default QuizBackground;
+export default QuizBackground
diff --git a/src/components/QuizLogo/index.js b/src/components/QuizLogo/index.js
diff --git a/src/components/Widget/index.js b/src/components/Widget/index.js
@@ -4,9 +4,7 @@ const Widget = styled.div`
  margin-top: 24px;
  margin-bottom: 24px;
  border: 1px solid ${({ theme }) => theme.colors.primary};
- background-color: ${({ theme }) => {
- return theme.colors.mainBg;
- }};
+ background-color: ${({ theme }) => theme.colors.mainBg};
  border-radius: 4px;
  overflow: hidden;
  h1, h2, h3 {
@@ -20,7 +18,7 @@ const Widget = styled.div`
  font-weight: 400;
  line-height: 1;
  }
-`;
+`
 
 Widget.Header = styled.header`
  display: flex;
@@ -32,7 +30,7 @@ Widget.Header = styled.header`
  * {
  margin: 0;
  }
-`;
+`
 
 Widget.Content = styled.div`
  padding: 24px 32px 32px 32px;
@@ -46,6 +44,6 @@ Widget.Content = styled.div`
  list-style: none;
  padding: 0;
  }
-`;
+`
 
-export default Widget; 
+export default Widget