Setup rematch

Setup demo routes
Docs update
Init store
Init sample data
Init axios mocks

Author: modularcoder

.eslintrc.js

@@ -30,6 +30,7 @@ module.exports = {
     '@typescript-eslint/no-empty-interface': [0],
     '@typescript-eslint/explicit-member-accessibility': [0],
     '@typescript-eslint/no-explicit-any': [0],
+    'react/prop-types': [0],
     'react/display-name': [0],
     'no-console': [0],
   },

README.md

@@ -49,28 +49,3 @@ See the section about [deployment](https://facebook.github.io/create-react-app/d
 You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
 
 To learn React, check out the [React documentation](https://reactjs.org/).
-
-
-## Useful links
-
-#### Icons
-https://material.io/resources/icons/
-
-
-#### Adding polls
-https://github.com/isaacs/github/issues/1533
-
-
-#### React
-https://www.robinwieruch.de/react-state-usereducer-usestate-usecontext/
-
-#### TypeScript
-
-Infering React properties TypeScript definition from React runtime PropTypes
-https://dev.to/busypeoples/notes-on-typescript-inferring-react-proptypes-1g88
-
-https://dev.to/ferdaber/typescript-and-jsx-part-iii---typing-the-props-for-a-component-1pg2
-https://dev.to/benweiser/how-to-set-up-eslint-typescript-prettier-with-create-react-app-3675
-https://medium.com/@dors718/linting-your-react-typescript-project-with-eslint-and-prettier-2423170c3d42
-https://medium.com/quick-code/how-to-integrate-eslint-prettier-in-react-6efbd206d5c4
-https://dev.to/robertcoopercode/using-eslint-and-prettier-in-a-typescript-project-53jb

docs/drafts.md

@@ -0,0 +1,56 @@
+## This is just a draft document with a thoughts :)
+
+The points below are still in progress
+
+
+### Features
+
+- Static typecheckign with TypeScript for large scale projects
+- Modular and scalable architecture
+- Built in JWT authentication
+- Built in interchangable REST and GraphQL API interaction services, pick the prefered option
+- Typed data entities
+- Not just a dummy template
+- Uses react hooks
+- State management with Redux + Rematch for reducing Redux code boilerplate
+- Material UI kit
+- Smart basic applications with real-world usage
+- Users/Organizations roles with many-to-many relations
+- Designed in SAAS setup in mind, with subscription planes and global system roles
+- and more...
+
+
+## FAQ
+
+#### Who is Modular Material Admin for?
+
+Modular Material Admin is a good fit for the more-advanced developers who want to build a large-scale dashboard application with a good coding practicies.
+
+#### How Modular Material Admin is different from hundreds of other admin templates out there?
+
+The most of the dashboard themes and templates are more focused on the UI components. This brings to the situation, that for the
+
+
+#### Why do you call it modular?
+
+I've been working on different large scale apps for years already, and have developed my own way of structuring and naming the application parts. This turned out a really successfull approach, which helped me to ofocus on a single functionality module. The modules are like lego building blocks and mostly represent the application logical structure. If you think about our app in a small pieces, it's all about a tree! There are also directories starting with underscore, e.g. `_services`, which combine files or modules of the same type or purpose.
+
+
+#### Why do use TypeScript?
+
+I beleive that the fucture of the JavaScript in large scale applications is TypeScript.
+It improves the code quality, helps to avoid of lot's of runtime errors, during refactoring and maintenance. In addition it provides a great intelisense, which boosts the productivity. TypeScript comes with it's overhead cost though, so if you want to build something small, it might be a bit of complicated to use.
+
+#### Why do you use MaterialUI?
+
+Although I'm not a big fan of material design, but the MaterialUI gives a huge solid fundation for building user interfaces. I never enjoyed using any UI framework that much as I did with MaterialUI. Big appreciation and my credits to the MaterialUI team.
+
+
+#### So REST or GraphQL?
+
+I'm trying to build the Modular Material Admin in a way that you would be able to use your desired approach. Each component that needs an ASYNC data, has it's own {ComponentName}Service.tsx file, in which the ASYNC data can be obtained both from REST or GraphQL and resolved to the component. So it should be easy to pick the solution which fits better.
+
+
+#### Why Redux + Rematch for the state management?
+
+Redux has became de-facto standart solution for the React state management. Unfortunately you need to write lot's of boilerplate code by default. Rematch solves that issue

docs/references.md

@@ -0,0 +1,29 @@
+## Useful links
+
+#### Icons
+https://material.io/resources/icons/
+
+
+#### Adding polls
+https://github.com/isaacs/github/issues/1533
+
+
+#### React
+https://www.robinwieruch.de/react-state-usereducer-usestate-usecontext/
+
+React with Redux and hooks
+https://medium.com/@koss_lebedev/rematch-with-hooks-50a8380c46e4
+
+#### TypeScript
+
+Typescript Book:
+https://basarat.gitbooks.io/typescript/docs/promise.html
+
+Infering React properties TypeScript definition from React runtime PropTypes
+https://dev.to/busypeoples/notes-on-typescript-inferring-react-proptypes-1g88
+
+https://dev.to/ferdaber/typescript-and-jsx-part-iii---typing-the-props-for-a-component-1pg2
+https://dev.to/benweiser/how-to-set-up-eslint-typescript-prettier-with-create-react-app-3675
+https://medium.com/@dors718/linting-your-react-typescript-project-with-eslint-and-prettier-2423170c3d42
+https://medium.com/quick-code/how-to-integrate-eslint-prettier-in-react-6efbd206d5c4
+https://dev.to/robertcoopercode/using-eslint-and-prettier-in-a-typescript-project-53jb

package-lock.json

@@ -17,16 +17,21 @@
     "@material-ui/icons": "^4.2.1",
     "@nivo/core": "^0.59.1",
     "@nivo/line": "^0.59.3",
+    "@rematch/core": "^1.1.0",
+    "@types/axios": "^0.14.0",
     "@types/chart.js": "^2.7.56",
     "@types/jest": "24.0.15",
     "@types/lodash": "^4.14.136",
     "@types/moment": "^2.13.0",
     "@types/node": "12.0.10",
     "@types/react": "16.8.22",
     "@types/react-dom": "16.8.4",
+    "@types/react-redux": "^7.1.1",
     "@types/react-router-dom": "^4.3.4",
     "@types/recharts": "^1.1.17",
     "@types/store": "^2.0.2",
+    "axios": "^0.19.0",
+    "axios-mock-adapter": "^1.17.0",
     "chart.js": "^2.8.0",
     "cross-env": "^5.2.0",
     "disqus-react": "^1.0.6",
@@ -39,10 +44,13 @@
     "react": "^16.8.6",
     "react-chartist": "^0.13.3",
     "react-dom": "^16.8.6",
+    "react-redux": "^7.1.0",
     "react-router-dom": "^5.0.1",
     "react-scripts": "3.0.1",
     "recharts": "^1.6.2",
+    "redux": "^4.0.4",
     "rematch": "^0.1.3",
+    "reselect": "^4.0.0",
     "store": "^2.0.12",
     "typeface-roboto": "0.0.75",
     "typescript": "3.5.2"

package.json

@@ -1,33 +1,40 @@
 import React from 'react'
+import { Provider, connect } from 'react-redux'
 import { ThemeProvider } from '@material-ui/styles'
 import { HashRouter, BrowserRouter, Route, RouteProps, Redirect } from 'react-router-dom' //
 import CssBaseline from '@material-ui/core/CssBaseline'
 
 import config from './config'
+import store from './_store'
+import api from './_api'
 import authService from './_services/authService'
-import theme from './_theme/index'
+import theme from './_theme'
 
 import Auth from './Auth/Auth'
 import { DashboardContainer } from './Dashboard'
 
-// Use different router type depending on configuration
-const Router: React.ComponentType<any> =
-  config.navigationType === 'history' ? BrowserRouter : HashRouter
+api.init()
 
 // Init the authentication service
 authService.init({
   useDemoToken: true,
 })
 
+// Use different router type depending on configuration
+const AppRouter: React.ComponentType<any> =
+  config.navigationType === 'history' ? BrowserRouter : HashRouter
+
 const App: React.FC = () => {
   return (
     <div className="App">
       <CssBaseline />
       <ThemeProvider theme={theme}>
-        <Router>
-          <Route path="/auth" component={Auth} />
-          <PrivateRoute path="/" component={DashboardContainer} />
-        </Router>
+        <Provider store={store}>
+          <AppRouter>
+            <Route path="/auth" component={Auth} />
+            <PrivateRoute path="/" component={DashboardContainer} />
+          </AppRouter>
+        </Provider>
       </ThemeProvider>
     </div>
   )

src/App.tsx

@@ -0,0 +1,3 @@
+# App module
+
+This is the application entry component. It handles the main routing and authentication redirects.