Updates code and readme

Author: leoronne

.eslintrc.js

@@ -22,12 +22,11 @@ module.exports = {
     'react/jsx-filename-extension': 0,
     'import/extensions': 0,
     'import/no-unresolved': 0,
-    'array-callback-retur': 0,
-    '@typescript-eslint/no-explicit-any': 0,
-    'jsx-a11y/label-has-associated-control': 0,
-    'camelcase': 0,
-    '@typescript-eslint/explicit-module-boundary-types': 0,
-    'jsx-a11y/interactive-supports-focus': 0,
-    'jsx-a11y/click-events-have-key-events': 0
+    camelcase: 0,
+    'prettier/prettier': 0,
+    'no-use-before-define': 0,
+    'import/prefer-default-export': 0,
+    'jsx-a11y/click-events-have-key-events': 0,
+    'jsx-a11y/no-static-element-interactions': 0,
   },
 };

.gitignore

@@ -30,3 +30,4 @@ firebase.json
 /.firebase
 
 *.psd
+.eslintcache

README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <img src="src\assets\img\transparentBanner.png" width="70%"/>
+  <img src="src\assets\img\transparentBanner.png" width="50%"/>
 </p>
 
 <br>
@@ -18,23 +18,18 @@
   <a href="#project-star2">Project</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
   <a href="#techs-rocket">Techs</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
   <a href="#installation-wrench">Installation</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
-  <a href="#test-heavy_check_mark">Test</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
+  <a href="#start-on">Start</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
   <a href="#contributing-">Contributing</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
   <a href="#license-memo">License</a>
 </p>
 
 
 ##
 
-<br>
-
 <p align="center">
   <img src="src\assets\img\banner.png"/>
 </p>
 
-
-##
-
 <br>
 
 ## Project :star2:
@@ -43,7 +38,7 @@ This repo contains an UI clone (partial) from GitHub application using it's publ
 
 <br>
 
-Deployed [here](https://github-ui-clone.web.app).
+Deployed [here](https://github.ui-clone.ronne.dev).
 
 <br>
 
@@ -57,11 +52,13 @@ Deployed [here](https://github-ui-clone.web.app).
 
 ## Installation :wrench:
 
+First you need to clone the project using `git clone https://github.com/leoronne/github-ui-clone.git`.
+
 You can install the application using `npm install` or `yarn install` on the root dir.
 
 <br>
 
-## Test :heavy_check_mark:
+## Start :on:
 
 To start the application interface just run `npm start` or `yarn start` on the root dir.
 

package.json

@@ -1,34 +1,34 @@
 {
   "name": "github-ui-clone",
-  "version": "1.0.0",
   "description": "This app contains an UI clone (partial) from GitHub application",
+  "version": "1.0.0",
+  "main": "index.tsx",
   "repository": "https://github.com/leoronne/github-ui-clone",
-  "author": "Leonardo Ronne",
+  "author": "Leonardo Ronne <leoronne@gmail.com>",
   "license": "MIT",
   "dependencies": {
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
-    "@types/jest": "^24.0.0",
-    "@types/node": "^12.0.0",
-    "@types/react": "^16.9.0",
-    "@types/react-dom": "^16.9.0",
-    "axios": "^0.19.2",
-    "date-fns": "^2.15.0",
+    "@material-ui/core": "^4.11.2",
+    "@testing-library/jest-dom": "^5.11.6",
+    "@testing-library/react": "^11.2.2",
+    "@testing-library/user-event": "^12.6.0",
+    "@types/jest": "^26.0.19",
+    "@types/node": "^14.14.14",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "axios": "^0.21.1",
+    "date-fns": "^2.16.1",
     "history": "^5.0.0",
-    "react": "^16.13.1",
+    "react": "^17.0.1",
     "react-calendar-heatmap": "^1.8.1",
-    "react-dom": "^16.13.1",
-    "react-icons": "^3.10.0",
+    "react-dom": "^17.0.1",
+    "react-icons": "^4.1.0",
     "react-router": "^5.2.0",
     "react-router-dom": "^6.0.0-beta.0",
-    "react-scripts": "3.4.1",
-    "react-spinners": "^0.9.0",
-    "react-toastify": "^6.0.8",
-    "react-tooltip": "^4.2.7",
-    "react-use": "^15.3.3",
-    "styled-components": "^5.1.1",
-    "typescript": "^3.7.2"
+    "react-scripts": "^4.0.1",
+    "react-toastify": "^6.2.0",
+    "react-use": "^15.3.4",
+    "styled-components": "^5.2.1",
+    "typescript": "^4.1.3"
   },
   "scripts": {
     "start": "react-app-rewired start",
@@ -54,26 +54,26 @@
   "devDependencies": {
     "@types/react-calendar-heatmap": "^1.6.2",
     "@types/react-icons": "^3.0.0",
-    "@types/react-router-dom": "^5.1.5",
-    "@types/styled-components": "^5.1.2",
-    "@typescript-eslint/eslint-plugin": "^3.6.0",
-    "@typescript-eslint/parser": "^3.6.0",
+    "@types/react-router-dom": "^5.1.6",
+    "@types/styled-components": "^5.1.7",
+    "@typescript-eslint/eslint-plugin": "^4.11.0",
+    "@typescript-eslint/parser": "^4.11.0",
     "babel-eslint": "^10.0.3",
-    "babel-plugin-root-import": "^6.4.1",
-    "customize-cra": "^0.9.1",
+    "babel-plugin-root-import": "^6.6.0",
+    "customize-cra": "^1.0.0",
     "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.2",
-    "eslint": "^6.8.0",
-    "eslint-config-airbnb": "^18.1.0",
-    "eslint-config-prettier": "^6.11.0",
+    "enzyme-adapter-react-16": "^1.15.5",
+    "eslint": "^7.16.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-prettier": "^7.1.0",
     "eslint-import-resolver-babel-plugin-root-import": "^1.1.1",
-    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-import-helpers": "^1.0.2",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.19.0",
-    "eslint-plugin-react-hooks": "^2.5.1",
-    "prettier": "^2.0.5",
-    "react-app-rewired": "^2.1.6"
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-prettier": "^3.3.0",
+    "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "prettier": "^2.2.1",
+    "react-app-rewired": "^2.1.8"
   }
 }

public/.htaccess

@@ -0,0 +1,4 @@
+Options -MultiViews
+    RewriteEngine On
+    RewriteCond %{REQUEST_FILENAME} !-f
+    RewriteRule ^ index.html [QSA,L]

public/index.html

@@ -2,17 +2,38 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="manifest" href="./manifest.json" />
-    <meta name="msapplication-TileColor" content="#ffffff" />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet" />
+    <link rel="shortcut icon" type="image/x-icon" href="%PUBLIC_URL%/favicon.ico" />
+
+    <meta name="language" content="EN" />
+
+    <meta name="theme-color" content="#1D1D1D" />
+    <meta name="msapplication-TileColor" content="#1D1D1D" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="#1D1D1D" />
+    <meta name="msapplication-navbutton-color" content="#1D1D1D" />
+
     <meta name="msapplication-TileImage" content="./logo512.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
-    <meta name="theme-color" content="#1D1D1D" />
+
     <meta name="description" content="This app contains an UI clone (partial) from GitHub application using it's public APIs" />
-    <meta name="author" content="Leonardo Ronne" />
+    <meta name="subject" content="This is an UI clone (partial) from GitHub website." />
+
     <meta name="keywords" content="GitHub, GitHub-UI-Clone, Leonardo Ronne, Next Level Weel, NLW, OmniStack, Rocketseat, Guilherme Rodz, Diego Fernandes, Reactjs, Nodejs" />
+
+    <meta name="author" content="Leonardo Ronne, leoronne@gmail.com" />
+    <meta name="owner" content="Leonardo Ronne" />
+    <meta name="reply-to" content="leoronne@gmail.com" />
+
+    <meta name="designer" content="Leonardo Ronne" />
+    <meta name="copyright" content="Leonardo Ronne" />
+
+    <meta name="url" content="https://github.ui-clone.ronne.dev" />
+    <meta name="identifier-URL" content="https://github.ui-clone.ronne.dev" />
+
     <meta name="robots" content="index,follow" />
     <meta name="googlebot" content="index,follow" />
-    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
+
     <title>GitHub UI Clone</title>
   </head>
   <body>

public/logo1024.png

@@ -1,21 +1,38 @@
 {
-  "short_name": "github-ui-clone",
+  "short_name": "github-homepage-ui-clone",
   "name": "GitHub UI Clone",
+  "author": "Leonardo Ronne",
+  "description": "This application contains an UI clone from GitHub (partial) website.",
+  "developer": {
+    "name": "Leonardo Ronne",
+    "url": "https://github.com/leoronne"
+  },
+  "homepage_url": "https://github.ui-clone.ronne.dev",
   "icons": [
     {
       "src": "favicon.ico",
-      "sizes": "32x32",
+      "sizes": "256x256",
       "type": "image/x-icon"
     },
     {
       "src": "logo192.png",
       "type": "image/png",
       "sizes": "192x192"
     },
+    {
+      "src": "logo256.png",
+      "type": "image/png",
+      "sizes": "256x256"
+    },
     {
       "src": "logo512.png",
       "type": "image/png",
       "sizes": "512x512"
+    },
+    {
+      "src": "logo1024.png",
+      "type": "image/png",
+      "sizes": "1024x1024"
     }
   ],
   "start_url": "/",

public/logo256.png

@@ -13,7 +13,7 @@ import './styles/ReactToastify.css';
 
 import { ThemeName, themes } from './styles/themes';
 
-function App() {
+const App: React.FC = () => {
   const [themeName, setThemeName] = useState<ThemeName>(localStorage.getItem('@Github:theme') === 'dark' ? 'dark' : 'light');
   const currentTheme = themes[themeName];
 

public/manifest.json

@@ -1,7 +1,9 @@
 /* eslint-disable react/button-has-type */
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { Tooltip } from '@material-ui/core';
 
+import { useStyles } from '../../styles/MaterialUI';
 import { Container, GithubLogo, SearchForm, MoonIcon, SunIcon, SearchIcon } from './styles';
 
 import { ThemeName } from '../../styles/themes';
@@ -12,6 +14,8 @@ interface Props {
 }
 
 const Header: React.FC<Props> = ({ themeName, setThemeName }) => {
+  const classes = useStyles();
+
   const [search, setSearch] = useState('');
   const navigate = useNavigate();
 
@@ -28,18 +32,24 @@ const Header: React.FC<Props> = ({ themeName, setThemeName }) => {
 
   return (
     <Container>
-      <a href="/">
-        <GithubLogo data-tip="Go to homepage" />
-      </a>
+      <Tooltip title="Go to homepage" placement="bottom" arrow classes={{ tooltip: classes.tooltip }}>
+        <a href="/">
+          <GithubLogo />
+        </a>
+      </Tooltip>
       <SearchForm onSubmit={handleSubmit}>
-        <input placeholder="Search username" value={search} onChange={e => setSearch(e.currentTarget.value)} data-tip="Inform an username and press enter" />
-        <button type={search ? 'submit' : 'button'} data-tip="Search username on GitHub">
-          <SearchIcon />
-        </button>
+        <Tooltip title="Inform an username and press enter" placement="bottom" arrow classes={{ tooltip: classes.tooltip }}>
+          <input placeholder="Search username" value={search} onChange={e => setSearch(e.currentTarget.value)} />
+        </Tooltip>
+        <Tooltip title="Search username on GitHub" placement="bottom" arrow classes={{ tooltip: classes.tooltip }}>
+          <button type={search ? 'submit' : 'button'}>
+            <SearchIcon />
+          </button>
+        </Tooltip>
       </SearchForm>
-      <div className="theme" data-tip={`Activate ${themeName === 'light' ? 'Dark' : 'Light'} Mode`}>
-        {themeName === 'light' ? <MoonIcon onClick={toggleTheme} /> : <SunIcon onClick={toggleTheme} />}
-      </div>
+      <Tooltip title={`Activate ${themeName === 'light' ? 'Dark' : 'Light'} Mode`} placement="bottom" arrow classes={{ tooltip: classes.tooltip }}>
+        <div className="theme">{themeName === 'light' ? <MoonIcon onClick={toggleTheme} /> : <SunIcon onClick={toggleTheme} />}</div>
+      </Tooltip>
     </Container>
   );
 };

src/App.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { CircularProgress } from '@material-ui/core';
+
+import { Container } from './styles';
+
+const Loader: React.FC<{ color: string }> = ({ color = '#1D1D1D' }) => {
+  return (
+    <Container className="loader-container">
+      <CircularProgress size={15} style={{ color }} />
+    </Container>
+  );
+};
+export default Loader;

src/components/Header/index.tsx

@@ -0,0 +1,10 @@
+/* eslint-disable import/prefer-default-export */
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: calc(100vh - 18px);
+  overflow: hidden;
+`;