From b68e1011143411ad9e4e546c028cec9b11c59b3d Mon Sep 17 00:00:00 2001
From: gabriel-roque <gabrielrms.dll@gmail.com>
Date: Tue, 5 Jan 2021 09:27:52 -0300
Subject: [PATCH] refactor: reorganize project

---
 LICENSE                                       |  2 +-
 README.md                                     | 48 ++++++++++++-------
 api/package-lock.json                         |  3 +-
 package.json                                  |  7 +--
 web-app/src/App.tsx                           |  7 ++-
 web-app/src/assets/css/global.css             |  9 ++++
 web-app/src/config/redux/store.ts             |  4 +-
 .../store/{actions.ts => auth.actions.ts}     |  2 +-
 .../store/{reducer.ts => auth.reducer.ts}     |  4 +-
 .../auth/store/{state.ts => auth.state.ts}    |  0
 web-app/src/modules/auth/store/auth.types.ts  |  1 +
 web-app/src/modules/auth/store/types.ts       |  1 -
 .../status-repositore/status.component.tsx    |  3 +-
 web-app/src/modules/home/home.routes.tsx      |  4 +-
 .../src/modules/home/pages/Home/home.page.tsx |  2 +-
 .../store/{actions.ts => home.actions.ts}     |  2 +-
 .../store/{reducer.ts => home.reducer.ts}     |  4 +-
 .../home/store/{state.ts => home.state.ts}    |  0
 web-app/src/modules/home/store/home.types.ts  |  4 ++
 web-app/src/modules/home/store/types.ts       |  4 --
 web-app/src/shared/index.ts                   |  1 +
 .../loading-circle/loading.component.tsx      | 28 +++++++++++
 22 files changed, 98 insertions(+), 42 deletions(-)
 rename web-app/src/modules/auth/store/{actions.ts => auth.actions.ts} (75%)
 rename web-app/src/modules/auth/store/{reducer.ts => auth.reducer.ts} (69%)
 rename web-app/src/modules/auth/store/{state.ts => auth.state.ts} (100%)
 create mode 100644 web-app/src/modules/auth/store/auth.types.ts
 delete mode 100644 web-app/src/modules/auth/store/types.ts
 rename web-app/src/modules/home/store/{actions.ts => home.actions.ts} (96%)
 rename web-app/src/modules/home/store/{reducer.ts => home.reducer.ts} (87%)
 rename web-app/src/modules/home/store/{state.ts => home.state.ts} (100%)
 create mode 100644 web-app/src/modules/home/store/home.types.ts
 delete mode 100644 web-app/src/modules/home/store/types.ts
 create mode 100644 web-app/src/shared/loading-circle/loading.component.tsx

diff --git a/LICENSE b/LICENSE
index 2c6be4d..9bf65f1 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 Gabriel Roque
+Copyright (c) 2021 Gabriel Roque
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
diff --git a/README.md b/README.md
index dc968dc..aa300e0 100644
--- a/README.md
+++ b/README.md
@@ -35,7 +35,6 @@
   - [Run App](#-run-app)
 - [Web-App](#-web-app)
   - [Advantages](#advantages)
-  - [Why Typescript](#why-typescript)
   - [Directory Structure](#directory-structure)
     - [Core](#core)
     - [Modules](#modules)
@@ -152,17 +151,32 @@ Ao executar em produção você terá um resultado semelhante a 2 instâncias da
 
 [🔝 back to top](#-summary)
 
-#### JWT
-
-Soon more explanations...(under implemetation)
-
 #### Redux
 
 Soon more explanations...
 
 #### React Router
 
-Soon more explanations...
+🇺🇸
+
+To simplify route management, each module has a route file
+which you are responsible for grouping and organizing. In this boilerplate, the route file has a property called **public** that aims to point out whether it is a public or private route. It is up to you to implement the best route security strategy.
+
+🇧🇷
+
+Para simplificar o gerenciamento de rotas, cada módulo possui um arquivo de rotas
+do qual é responsável de agrupar e organizar. Neste boilerplate o arquivo de rotas possui a uma propriedade chamada de **public** que tem como o propósito apontar se é uma rota pública ou privada. Fica a seu critério implementar a melhor estratégia de segurança de rotas.
+
+```ts
+export const routesHome = [
+  {
+    path: '/',
+    component: HomePage,
+    name: 'home.home',
+    public: true,
+  },
+];
+```
 
 #### Conventional Changelog
 
@@ -292,14 +306,8 @@ Se você desejar adotar outro Style Guide fique completamente a vontade para def
 
 <hr>
 
-### Why Typescript
-
-Soon more explanations...
-
 ### Directory Structure
 
-<hr>
-
 #### Core
 
 🇺🇸
@@ -609,7 +617,7 @@ export const routesAuth = [
 | CamelCase         | `case types.<NAME_TYPE>` | `INITIAL_STATE = {...}` | UPPER_CASE |
 | actions.ts        | reducer.ts               | state.ts                | types.ts   |
 
-**actions.ts**
+**<name_module>.actions.ts**
 
 ```ts
 import * as types from './types';
@@ -621,7 +629,7 @@ export const setData = (data) => {
 };
 ```
 
-**reducer.ts**
+**<name_module>.reducer.ts**
 
 ```ts
 import { INITIAL_STATE } from './state';
@@ -637,7 +645,7 @@ export default (state = INITIAL_STATE, action) => {
 };
 ```
 
-**state.ts**
+**<name_module>.state.ts**
 
 ```ts
 export const INITIAL_STATE = {
@@ -645,18 +653,24 @@ export const INITIAL_STATE = {
 };
 ```
 
-**types.ts**
+**<name_module>.types.ts**
 
 ```ts
-export const SET_DATA_EXAMPLE = 'SET_DATA_EXAMPLE';
+export const SET_DATA_EXAMPLE = '[<NAME_MODULE>] SET_DATA_EXAMPLE';
 ```
 
+### Import Helpers
+
 🇺🇸
 
+In order to keep imports within our React components organized, we use a library called **Import Helpers**, it helps us to self-organize imports. Being completely customizable.
+
 To understand more of the advantages of this code style click [here](#advantages).
 
 🇧🇷
 
+A fim de manter organizado as importações dentro de nossos componentes React, usamos uma biblioteca chamada de **Import Helpers**, ele nos auxilia a auto organizar as importações. Sendo completamente customizável.
+
 Para entender mais das vantagens desse code style clique [aqui](#advantages).
 
 [🔝 back to top](#-summary)
diff --git a/api/package-lock.json b/api/package-lock.json
index 34b1ea3..21d1564 100644
--- a/api/package-lock.json
+++ b/api/package-lock.json
@@ -5354,7 +5354,8 @@
     "systeminformation": {
       "version": "4.34.2",
       "resolved": "https://registry.npmjs.org/systeminformation/-/systeminformation-4.34.2.tgz",
-      "integrity": "sha512-1LynQMla38gIjzyupKBnBLIo4B0TQf3vdhs2bjKPtN02EymuSWpoAM1KX/6+gtFLVmn91MfllE3wSVGQcVTHDw=="
+      "integrity": "sha512-1LynQMla38gIjzyupKBnBLIo4B0TQf3vdhs2bjKPtN02EymuSWpoAM1KX/6+gtFLVmn91MfllE3wSVGQcVTHDw==",
+      "optional": true
     },
     "tarn": {
       "version": "1.1.5",
diff --git a/package.json b/package.json
index c7167d0..fda6921 100644
--- a/package.json
+++ b/package.json
@@ -1,11 +1,8 @@
 {
   "name": "react-donis-docker-starter",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "A simple templete start with ReactJs and AdonisJs",
   "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/gabriel-roque/react-donis-docker-starter.git"
@@ -39,4 +36,4 @@
       "prepare-commit-msg": "exec < /dev/tty && git cz --hook || true"
     }
   }
-}
+}
\ No newline at end of file
diff --git a/web-app/src/App.tsx b/web-app/src/App.tsx
index d073cf5..34cde19 100644
--- a/web-app/src/App.tsx
+++ b/web-app/src/App.tsx
@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import { Provider } from 'react-redux';
 import { BrowserRouter as Router } from 'react-router-dom';
 
 import { router as RouterView, store } from 'config';
+import { LoadingCircle } from 'shared'
 
 import 'assets/css/global.css';
 
@@ -10,7 +11,9 @@ export default function App() {
   return (
     <Provider store={store}>
       <Router>
-        <RouterView />
+        <Suspense fallback={<LoadingCircle />}>
+          <RouterView />
+        </Suspense>
       </Router>
     </Provider>
   );
diff --git a/web-app/src/assets/css/global.css b/web-app/src/assets/css/global.css
index e69de29..7bb556a 100644
--- a/web-app/src/assets/css/global.css
+++ b/web-app/src/assets/css/global.css
@@ -0,0 +1,9 @@
+#root,
+body,
+html {
+  height: 100%;
+}
+
+* {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
diff --git a/web-app/src/config/redux/store.ts b/web-app/src/config/redux/store.ts
index 191aec7..5753282 100644
--- a/web-app/src/config/redux/store.ts
+++ b/web-app/src/config/redux/store.ts
@@ -2,8 +2,8 @@ import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
 import thunk from 'redux-thunk';
 
 // Import new modules redux here
-import auth from 'modules/auth/store/reducer';
-import home from 'modules/home/store/reducer';
+import auth from 'modules/auth/store/auth.reducer';
+import home from 'modules/home/store/home.reducer';
 
 // Connect new modules redux here
 const reducers = combineReducers({ auth, home });
diff --git a/web-app/src/modules/auth/store/actions.ts b/web-app/src/modules/auth/store/auth.actions.ts
similarity index 75%
rename from web-app/src/modules/auth/store/actions.ts
rename to web-app/src/modules/auth/store/auth.actions.ts
index f57d592..2ba9373 100644
--- a/web-app/src/modules/auth/store/actions.ts
+++ b/web-app/src/modules/auth/store/auth.actions.ts
@@ -1,4 +1,4 @@
-import * as types from './types';
+import * as types from './auth.types';
 
 export const setData = data => {
   return dispatch => {
diff --git a/web-app/src/modules/auth/store/reducer.ts b/web-app/src/modules/auth/store/auth.reducer.ts
similarity index 69%
rename from web-app/src/modules/auth/store/reducer.ts
rename to web-app/src/modules/auth/store/auth.reducer.ts
index 8b53a3d..a3a366e 100644
--- a/web-app/src/modules/auth/store/reducer.ts
+++ b/web-app/src/modules/auth/store/auth.reducer.ts
@@ -1,5 +1,5 @@
-import { INITIAL_STATE } from './state';
-import * as types from './types';
+import { INITIAL_STATE } from './auth.state';
+import * as types from './auth.types';
 
 export default (state = INITIAL_STATE, action) => {
   switch (action.type) {
diff --git a/web-app/src/modules/auth/store/state.ts b/web-app/src/modules/auth/store/auth.state.ts
similarity index 100%
rename from web-app/src/modules/auth/store/state.ts
rename to web-app/src/modules/auth/store/auth.state.ts
diff --git a/web-app/src/modules/auth/store/auth.types.ts b/web-app/src/modules/auth/store/auth.types.ts
new file mode 100644
index 0000000..4f13d59
--- /dev/null
+++ b/web-app/src/modules/auth/store/auth.types.ts
@@ -0,0 +1 @@
+export const SET_DATA_EXAMPLE = '[AUTH] SET_DATA_EXAMPLE';
diff --git a/web-app/src/modules/auth/store/types.ts b/web-app/src/modules/auth/store/types.ts
deleted file mode 100644
index 6e87c5a..0000000
--- a/web-app/src/modules/auth/store/types.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const SET_DATA_EXAMPLE = 'SET_DATA_EXAMPLE';
diff --git a/web-app/src/modules/home/components/status-repositore/status.component.tsx b/web-app/src/modules/home/components/status-repositore/status.component.tsx
index 9cacad4..b714c68 100644
--- a/web-app/src/modules/home/components/status-repositore/status.component.tsx
+++ b/web-app/src/modules/home/components/status-repositore/status.component.tsx
@@ -9,7 +9,7 @@ import { faCodeBranch, faStar, faEye } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Chip } from 'modules/home/components';
 import { LoadingBar } from 'modules/home/components';
-import { getForksRepositores, getStarsRepositores, getWatchsRepositores } from 'modules/home/store/actions';
+import { getForksRepositores, getStarsRepositores, getWatchsRepositores } from 'modules/home/store/home.actions';
 
 function StatusRepositore(props: any) {
   const classes = useStyles();
@@ -18,6 +18,7 @@ function StatusRepositore(props: any) {
     props.getStars();
     props.getForks();
     props.getWatchs();
+    // eslint-disable-next-line
   }, []);
 
   return (
diff --git a/web-app/src/modules/home/home.routes.tsx b/web-app/src/modules/home/home.routes.tsx
index 0cda712..93b84b4 100644
--- a/web-app/src/modules/home/home.routes.tsx
+++ b/web-app/src/modules/home/home.routes.tsx
@@ -1,4 +1,6 @@
-import { HomePage } from './pages/Home/home.page';
+import { lazy } from 'react'
+
+const HomePage = lazy(() => import('./pages/Home/home.page'))
 
 export const routesHome = [
   {
diff --git a/web-app/src/modules/home/pages/Home/home.page.tsx b/web-app/src/modules/home/pages/Home/home.page.tsx
index df70802..58a8341 100644
--- a/web-app/src/modules/home/pages/Home/home.page.tsx
+++ b/web-app/src/modules/home/pages/Home/home.page.tsx
@@ -10,7 +10,7 @@ import { useStyles } from './home.styles';
 
 import { Banner, Card } from 'modules/home/components';
 
-export function HomePage() {
+export default function HomePage() {
   const classes = useStyles();
 
   return (
diff --git a/web-app/src/modules/home/store/actions.ts b/web-app/src/modules/home/store/home.actions.ts
similarity index 96%
rename from web-app/src/modules/home/store/actions.ts
rename to web-app/src/modules/home/store/home.actions.ts
index ebc2e11..91644fb 100644
--- a/web-app/src/modules/home/store/actions.ts
+++ b/web-app/src/modules/home/store/home.actions.ts
@@ -1,4 +1,4 @@
-import * as types from './types';
+import * as types from './home.types';
 
 import { github } from 'core/providers';
 
diff --git a/web-app/src/modules/home/store/reducer.ts b/web-app/src/modules/home/store/home.reducer.ts
similarity index 87%
rename from web-app/src/modules/home/store/reducer.ts
rename to web-app/src/modules/home/store/home.reducer.ts
index 2c62da9..0427982 100644
--- a/web-app/src/modules/home/store/reducer.ts
+++ b/web-app/src/modules/home/store/home.reducer.ts
@@ -1,5 +1,5 @@
-import { INITIAL_STATE } from './state';
-import * as types from './types';
+import { INITIAL_STATE } from './home.state';
+import * as types from './home.types';
 
 export default (state = INITIAL_STATE, action) => {
   switch (action.type) {
diff --git a/web-app/src/modules/home/store/state.ts b/web-app/src/modules/home/store/home.state.ts
similarity index 100%
rename from web-app/src/modules/home/store/state.ts
rename to web-app/src/modules/home/store/home.state.ts
diff --git a/web-app/src/modules/home/store/home.types.ts b/web-app/src/modules/home/store/home.types.ts
new file mode 100644
index 0000000..0f0c35b
--- /dev/null
+++ b/web-app/src/modules/home/store/home.types.ts
@@ -0,0 +1,4 @@
+export const GET_STARS_REPOSITORE = '[HOME] GET_STARS_REPOSITORE';
+export const GET_FORKS_REPOSITORE = '[HOME] GET_FORKS_REPOSITORE';
+export const GET_WATCHS_REPOSITORE = '[HOME] GET_WATCHS_REPOSITORE';
+export const FAILED_GITHUB_API = '[HOME] FAILED_GITHUB_API';
diff --git a/web-app/src/modules/home/store/types.ts b/web-app/src/modules/home/store/types.ts
deleted file mode 100644
index dfe1807..0000000
--- a/web-app/src/modules/home/store/types.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export const GET_STARS_REPOSITORE = 'GET_STARS_REPOSITORE';
-export const GET_FORKS_REPOSITORE = 'GET_FORKS_REPOSITORE';
-export const GET_WATCHS_REPOSITORE = 'GET_WATCHS_REPOSITORE';
-export const FAILED_GITHUB_API = 'FAILED_GITHUB_API';
diff --git a/web-app/src/shared/index.ts b/web-app/src/shared/index.ts
index 4bdb442..2794ac0 100644
--- a/web-app/src/shared/index.ts
+++ b/web-app/src/shared/index.ts
@@ -1 +1,2 @@
 export { default as Button } from './button/button.component';
+export { LoadingCircle } from './loading-circle/loading.component';
diff --git a/web-app/src/shared/loading-circle/loading.component.tsx b/web-app/src/shared/loading-circle/loading.component.tsx
new file mode 100644
index 0000000..75bbe40
--- /dev/null
+++ b/web-app/src/shared/loading-circle/loading.component.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+import { CircularProgress, Grid, makeStyles, createStyles } from '@material-ui/core';
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    root: {
+      height: '100%',
+      width: '100%',
+    },
+    circle: {
+      color: '#ed2945',
+    },
+  }),
+);
+
+export function LoadingCircle() {
+  const classes = useStyles();
+
+  return (
+    <Grid container justify="center" alignContent="center" className={classes.root}>
+      <Grid container item justify="center">
+        <CircularProgress className={classes.circle} />
+      </Grid>
+      <h3>Carregando...</h3>
+    </Grid>
+  );
+}