Merge pull request #6 from codigofalado/development

Feature: Removing the dependabot from fighters list

.env.example

@@ -0,0 +1 @@
+GATSBY_GITHUB_TOKEN=

.eslintrc.json

@@ -6,9 +6,9 @@
   "extends": [
     "plugin:react/recommended",
     "airbnb",
-    "plugin:prettier/recommended",
-    "plugin:@typescript-eslint/eslint-recommended",
-    "plugin:@typescript-eslint/recommended"
+    "plugin:@typescript-eslint/recommended",
+    "prettier/@typescript-eslint",
+    "plugin:prettier/recommended"
   ],
   "globals": {
     "Atomics": "readonly",
@@ -19,12 +19,8 @@
     "ecmaFeatures": {
       "jsx": true
     },
-    "ecmaVersion": 2018,
-    "sourceType": "module",
-    "project": "./tsconfig.json",
-
-    "allowImportExportEverywhere": true,
-    "tsconfigRootDir": "."
+    "ecmaVersion": 11,
+    "sourceType": "module"
   },
   "plugins": [
     "react",
@@ -36,24 +32,30 @@
   "rules": {
     "prettier/prettier": "error",
 
+    "class-methods-use-this": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/explicit-function-return-type": [
+      "error",
+      {
+        "allowExpressions": true
+      }
+    ],
+
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "warn",
 
     "react/prop-types": "off",
     "react/jsx-props-no-spreading": "off",
-    "react/jsx-filename-extension": [1, { "extensions": [".tsx"] }],
-
-    "no-unused-expressions": "off",
-
-    "@typescript-eslint/camelcase": "off",
-    "@typescript-eslint/explicit-function-return-type": [
+    "react/jsx-filename-extension": [
       "error",
       {
-        "allowExpressions": true
+        "extensions": [".tsx"]
       }
     ],
 
+    "no-unused-expressions": "off",
     "import/prefer-default-export": "off",
+    "import/no-duplicates": "off",
     "import/extensions": [
       "error",
       "ignorePackages",
@@ -70,20 +72,20 @@
         "groups": [
           "/^(react|styled-components)/",
           "module",
-          ["/^~/components/", "/^~/Layout/"],
-          "/^~/hooks/",
-          "/^~/contexts/",
+          "/^.*components/",
+          "/^.*Layout/",
+          "/^.*hooks/",
+          "/^.*pages/",
+          "/^.*service/",
           ["parent", "sibling", "index"],
-          "/^~/assets/",
-          "/^(~|.)/styles/"
+          "/^.*assets/",
+          "/^.*styles/"
         ],
         "alphabetize": { "order": "asc", "ignoreCase": true }
       }
     ]
   },
   "settings": {
-    "import/extensions": ["js", "jsx", ".ts", ".tsx"],
-
     "import/resolver": {
       "typescript": {}
     }

.gitignore

@@ -53,6 +53,7 @@ typings/
 
 # dotenv environment variable files
 .env*
+!.env.example
 
 # gatsby files
 .cache/

CODEOWNERS

@@ -0,0 +1 @@
+* @henry-ns

README.md

@@ -98,7 +98,7 @@ run `yarn start` or `npm start` command to start a local server and get a test!
 
 ### :package: Packages
 - [Apollo](https://www.apollographql.com/docs/react/)
-- [React Helmet Async](https://github.com/staylor/react-helmet-async)
+- [React Helmet](https://github.com/nfl/react-helmet)
 - [React Icons](https://react-icons.netlify.com/#/)
 - [Styled Compoments](https://www.styled-components.com/)
 - [Polished](https://polished.js.org/)
@@ -113,7 +113,7 @@ run `yarn start` or `npm start` command to start a local server and get a test!
 - [Page Creator](https://www.gatsbyjs.org/packages/gatsby-plugin-page-creator/)
 - [Polished](https://www.gatsbyjs.org/packages/gatsby-plugin-polished/)
 - [Preload Fonts](https://www.gatsbyjs.org/packages/gatsby-plugin-preload-fonts/)
-- [React Helmet Async](https://www.gatsbyjs.org/packages/gatsby-plugin-sharp/)
+- [React Helmet](https://www.gatsbyjs.org/packages/gatsby-plugin-react-helmet/)
 - [Sharp](https://www.gatsbyjs.org/packages/gatsby-plugin-sharp/)
 - [Styled Components](https://www.gatsbyjs.org/packages/gatsby-plugin-styled-components/)
 

font-preload-cache.json

@@ -1 +1 @@
-{"timestamp":1585927005472,"hash":"53260b0eb5ca3cf626e0786300172b67","assets":{"/":{"/static/lato-latin-700-1efbd38aa76ddae2580fedf378276333.woff2":true}}}
+{"timestamp":1598194155286,"hash":"9793e6f763870c321663cfe5f7b34b4c","assets":{"/":{"/static/lato-latin-700-1efbd38aa76ddae2580fedf378276333.woff2":true},"/dev-404-page/":{"/static/lato-latin-700-1efbd38aa76ddae2580fedf378276333.woff2":true},"/404/":{"/static/lato-latin-700-1efbd38aa76ddae2580fedf378276333.woff2":true},"/battlefield/":{"/static/lato-latin-700-1efbd38aa76ddae2580fedf378276333.woff2":true,"/static/lato-latin-400-b4d2c4c39853ee244272c04999b230ba.woff2":true},"/fighters/":{"/static/lato-latin-700-1efbd38aa76ddae2580fedf378276333.woff2":true},"/result/":{"/static/lato-latin-700-1efbd38aa76ddae2580fedf378276333.woff2":true},"/404.html":{"/static/lato-latin-700-1efbd38aa76ddae2580fedf378276333.woff2":true}}}

gatsby-config.js

@@ -2,31 +2,31 @@ require('dotenv').config();
 
 const path = require('path');
 
-const siteMetadata = require('./config/metadata');
+const siteMetadata = require('./src/assets/data/metadata.json');
 
 module.exports = {
   siteMetadata,
   plugins: [
-    'gatsby-plugin-react-helmet-async',
+    'gatsby-plugin-react-helmet',
     {
       resolve: 'gatsby-source-filesystem',
       options: {
         name: 'images',
-        path: `${__dirname}/src/assets`,
+        path: `${__dirname}/src/assets/images`,
       },
     },
     'gatsby-transformer-sharp',
     'gatsby-plugin-sharp',
     {
       resolve: 'gatsby-plugin-manifest',
       options: {
-        name: 'Github Fight',
+        name: siteMetadata.title,
         short_name: 'Github Fight',
         start_url: '/',
         background_color: '#B23F42',
         theme_color: '#B23F42',
         display: 'minimal-ui',
-        icon: 'src/assets/icon.png',
+        icon: 'src/assets/images/icon.png',
       },
     },
     {
@@ -36,7 +36,7 @@ module.exports = {
         fieldName: 'github',
         url: 'https://api.github.com/graphql',
         headers: {
-          Authorization: `token ${process.env.GITHUB_TOKEN}`,
+          Authorization: `token ${process.env.GATSBY_GITHUB_TOKEN}`,
         },
       },
     },

gatsby/wrapRootElement.tsx

@@ -1,22 +1,19 @@
-import React, { FC } from 'react';
-import { ApolloProvider } from 'react-apollo';
-import { HelmetProvider } from 'react-helmet-async';
+import React from 'react';
+import { ApolloProvider } from '@apollo/client';
 import { ThemeProvider } from 'styled-components';
 
-import { client } from '../src/hooks/apollo';
+import apolloClient from '../src/service/apolloClient';
 import { RepositoryProvider } from '../src/hooks/repository';
 import theme from '../src/styles/theme';
 
 interface Props {
   element: React.ReactNode;
 }
 
-export const wrapRootElement: FC<Props> = ({ element }) => (
-  <HelmetProvider>
-    <ThemeProvider theme={theme}>
-      <ApolloProvider client={client}>
-        <RepositoryProvider>{element}</RepositoryProvider>
-      </ApolloProvider>
-    </ThemeProvider>
-  </HelmetProvider>
+export const wrapRootElement: React.FC<Props> = ({ element }) => (
+  <ThemeProvider theme={theme}>
+    <ApolloProvider client={apolloClient}>
+      <RepositoryProvider>{element}</RepositoryProvider>
+    </ApolloProvider>
+  </ThemeProvider>
 );

package.json

@@ -2,64 +2,63 @@
   "name": "github-fight",
   "private": true,
   "description": "A simple way to compare Github Reactions",
-  "version": "0.1.0",
-  "author": "Henrique M. Miranda <me@thehenry.dev>",
+  "version": "1.0.0",
+  "author": "Henrique Miranda <hey@thehenry.dev>",
   "dependencies": {
-    "@apollo/react-hooks": "^3.1.4",
-    "apollo-boost": "^0.4.7",
+    "@apollo/client": "^3.1.3",
     "babel-plugin-polished": "^1.1.0",
     "dotenv": "^8.2.0",
-    "gatsby": "^2.19.9",
-    "gatsby-image": "^2.2.39",
-    "gatsby-plugin-manifest": "^2.2.39",
-    "gatsby-plugin-netlify": "^2.1.31",
+    "gatsby": "^2.24.47",
+    "gatsby-image": "^2.4.16",
+    "gatsby-plugin-manifest": "^2.4.23",
+    "gatsby-plugin-netlify": "^2.3.13",
     "gatsby-plugin-netlify-cache": "^1.2.0",
-    "gatsby-plugin-offline": "^3.0.32",
-    "gatsby-plugin-page-creator": "^2.1.38",
+    "gatsby-plugin-offline": "^3.2.23",
+    "gatsby-plugin-page-creator": "^2.3.22",
     "gatsby-plugin-polished": "^1.0.4",
-    "gatsby-plugin-preload-fonts": "^1.1.1",
-    "gatsby-plugin-react-helmet-async": "^1.0.16",
-    "gatsby-plugin-sharp": "^2.4.3",
-    "gatsby-plugin-styled-components": "^3.1.18",
-    "gatsby-plugin-typescript": "^2.1.26",
-    "gatsby-source-filesystem": "^2.1.46",
-    "gatsby-source-graphql": "2.1.32",
-    "gatsby-transformer-sharp": "^2.3.13",
-    "graphql-tag": "^2.10.3",
-    "gsap": "^3.2.6",
+    "gatsby-plugin-preload-fonts": "^1.2.20",
+    "gatsby-plugin-react-helmet": "^3.3.10",
+    "gatsby-plugin-sharp": "^2.6.27",
+    "gatsby-plugin-styled-components": "^3.3.10",
+    "gatsby-plugin-typescript": "^2.4.18",
+    "gatsby-source-filesystem": "^2.3.24",
+    "gatsby-source-graphql": "2.7.1",
+    "gatsby-transformer-sharp": "^2.5.13",
+    "graphql-tag": "^2.11.0",
+    "gsap": "^3.5.0",
     "isomorphic-fetch": "^2.2.1",
-    "polished": "^3.5.1",
+    "polished": "^3.6.5",
     "react": "^16.12.0",
-    "react-apollo": "^3.1.4",
     "react-dom": "^16.12.0",
-    "react-helmet-async": "^1.0.4",
-    "react-icons": "^3.9.0",
-    "styled-components": "^5.0.0",
+    "react-helmet": "^6.1.0",
+    "react-icons": "^3.11.0",
+    "styled-components": "^5.1.1",
     "typeface-lato": "^0.0.75"
   },
   "devDependencies": {
     "@types/isomorphic-fetch": "^0.0.35",
-    "@types/node": "^13.5.1",
-    "@types/react": "^16.9.19",
-    "@types/react-dom": "^16.9.5",
+    "@types/node": "^14.6.0",
+    "@types/react": "^16.9.46",
+    "@types/react-dom": "^16.9.8",
+    "@types/react-helmet": "^6.1.0",
     "@types/react-icons": "^3.0.0",
-    "@types/styled-components": "^4.4.2",
-    "@typescript-eslint/eslint-plugin": "^2.30.0",
-    "@typescript-eslint/parser": "^2.30.0",
-    "eslint": "^6.8.0",
-    "eslint-config-airbnb": "^18.1.0",
-    "eslint-config-prettier": "^6.10.0",
+    "@types/styled-components": "^5.1.2",
+    "@typescript-eslint/eslint-plugin": "^3.9.1",
+    "@typescript-eslint/parser": "^3.9.1",
+    "eslint": "^7.7.0",
+    "eslint-config-airbnb": "^18.2.0",
+    "eslint-config-prettier": "^6.11.0",
     "eslint-import-resolver-alias": "^1.1.2",
-    "eslint-import-resolver-typescript": "^2.0.0",
-    "eslint-plugin-import": "^2.20.0",
-    "eslint-plugin-import-helpers": "^1.0.2",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-prettier": "^3.1.2",
-    "eslint-plugin-react": "^7.19.0",
-    "eslint-plugin-react-hooks": "^2.3.0",
+    "eslint-import-resolver-typescript": "^2.2.1",
+    "eslint-plugin-import": "^2.22.0",
+    "eslint-plugin-import-helpers": "^1.1.0",
+    "eslint-plugin-jsx-a11y": "^6.3.1",
+    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-react": "^7.20.6",
+    "eslint-plugin-react-hooks": "^4.1.0",
     "gatsby-plugin-root-import": "^2.0.5",
-    "prettier": "^1.19.1",
-    "typescript": "^3.7.5"
+    "prettier": "^2.0.5",
+    "typescript": "^4.0.2"
   },
   "keywords": [
     "gatsby"

src/assets/data/metadata.json

@@ -0,0 +1,5 @@
+{
+  "title": "Github Fight",
+  "description": "A simple way to compare Github Reactions.",
+  "author": "@henry-ns"
+}

src/components/Button/index.tsx

@@ -1,8 +1,8 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { Container, Props } from './styles';
 
-const Button: FC<Props> = ({
+const Button: React.FC<Props> = ({
   children,
   className,
   secundary,

src/components/Fighter/index.tsx

@@ -1,17 +1,16 @@
-import React, { FC, useState } from 'react';
+import React, { useState } from 'react';
 import { FaPlus, FaCheck } from 'react-icons/fa';
 
 import { PullRequest, useRepository } from '~/hooks/repository';
 
 import { SearchButton } from '../SearchRepository/styles';
-
 import { Container } from './styles';
 
 interface Props {
   data: PullRequest;
 }
 
-const Fighter: FC<Props> = ({ data }) => {
+const Fighter: React.FC<Props> = ({ data }) => {
   const [selected, setSelected] = useState(false);
   const { fighters, setFighters } = useRepository();
 

src/Layout/index.tsx → src/components/Layout/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import SEO from '~/components/SEO';
 
@@ -8,7 +8,7 @@ interface Props {
   title: string;
 }
 
-const Layout: FC<Props> = ({ children, title }) => (
+const Layout: React.FC<Props> = ({ children, title }) => (
   <>
     <GlobalStyle />
     <SEO title={title} />

src/components/Repository/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { Container } from './styles';
 
@@ -24,7 +24,7 @@ interface Props {
   data: Data;
 }
 
-const Repository: FC<Props> = ({ data }) => (
+const Repository: React.FC<Props> = ({ data }) => (
   <Container>
     <div>
       <img src={data.owner.avatarUrl} alt={data.owner.login} />