refactor: reorganize project

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

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,26 +645,32 @@ export default (state = INITIAL_STATE, action) => {
 };
 ```
 
-**state.ts**
+**<name_module>.state.ts**
 
 ```ts
 export const INITIAL_STATE = {
   data: 'example data share in redux',
 };
 ```
 
-**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)

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"
     }
   }
-}
+}

web-app/src/App.tsx

@@ -1,16 +1,19 @@
-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';
 
 export default function App() {
   return (
     <Provider store={store}>
       <Router>
-        <RouterView />
+        <Suspense fallback={<LoadingCircle />}>
+          <RouterView />
+        </Suspense>
       </Router>
     </Provider>
   );

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;
+}

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 });

web-app/src/modules/auth/store/actions.ts → 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 => {

web-app/src/modules/auth/store/reducer.ts → 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) {

web-app/src/modules/auth/store/auth.types.ts

@@ -0,0 +1 @@
+export const SET_DATA_EXAMPLE = '[AUTH] SET_DATA_EXAMPLE';

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 (

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 = [
   {

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 (

web-app/src/modules/home/store/actions.ts → 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';
 

web-app/src/modules/home/store/reducer.ts → 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) {

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';

web-app/src/shared/index.ts

@@ -1 +1,2 @@
 export { default as Button } from './button/button.component';
+export { LoadingCircle } from './loading-circle/loading.component';

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>
+  );
+}