Remove apollo

Clean up
Restructure
Stick to Redux + Rematch

Author: modularcoder

docs/drafts.md

@@ -8,7 +8,6 @@ The points below are still in progress
 - 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
@@ -45,6 +44,15 @@ It improves the code quality, helps to avoid of lot's of runtime errors, during
 
 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.
 
+#### 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
+
+
+-----
+
+Not Valid
+
 #### Why do you use two different approaches for state management?
 
 Initially I was thinking about using Redux only as a state management with GraphQL Apollo Client as well, but it turns out that Appolo Client is also prefered way to manage the UI state.
@@ -58,7 +66,3 @@ https://www.apollographql.com/docs/react/essentials/local-state/
 
 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 data usage custom hook, which can be Redux state or Appolo state.
 The custom hook of the component abstracts away the state management implementation under the hood, so we can use the preferred method for the state management: Apollo GraphQL or Redux + Rematch
-
-#### 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

package.json

@@ -13,12 +13,8 @@
   },
   "homepage": "http://modular-material-admin-react.modularcode.io",
   "dependencies": {
-    "@apollo/react-hooks": "^3.0.0",
-    "@apollo/react-testing": "^3.0.0",
     "@material-ui/core": "^4.1.3",
     "@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",
@@ -30,9 +26,7 @@
     "@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",
-    "apollo-boost": "^0.4.4",
     "axios": "^0.19.0",
     "axios-mock-adapter": "^1.17.0",
     "chart.js": "^2.8.0",

src/App.tsx

@@ -1,34 +1,31 @@
 import React from 'react'
 import { Provider } from 'react-redux'
 import { ThemeProvider } from '@material-ui/styles'
-import { ApolloProvider } from '@apollo/react-hooks'
 
 import CssBaseline from '@material-ui/core/CssBaseline'
 
 import config from './config'
 import authService from './_services/authService'
 
-import apiRest from './_api/rest'
-import apiApollo from './_api/apollo'
-import storeRedux from './_store/redux'
+import api from './_api'
+import apiMocks from './_api/_mocks'
+
+import store from './_store'
 import theme from './_theme'
 
 import AppRouter from './AppRouter'
 
-// Init the authentication service
+// Init the API service
 authService.init({
   useSampleData: config.useSampleData,
 })
 
 // Init rest API client
-apiRest.init({
-  useSampleData: config.useSampleData,
-})
+const apiClient = api.init()
 
-// Init apollo client
-const apiApolloClient = apiApollo.init({
-  useSampleData: config.useSampleData,
-})
+if (config.useSampleData) {
+  apiMocks.init(apiClient)
+}
 
 const App: React.FC = () => {
   return (
@@ -38,13 +35,10 @@ const App: React.FC = () => {
     </div>
   )
 }
-
 export default () => (
   <ThemeProvider theme={theme}>
-    <ApolloProvider client={apiApolloClient}>
-      <Provider store={storeRedux}>
-        <App />
-      </Provider>
-    </ApolloProvider>
+    <Provider store={store}>
+      <App />
+    </Provider>
   </ThemeProvider>
 )

src/Dashboard/DashboardContainer.tsx

@@ -1,18 +1,20 @@
 import React from 'react'
 import LinearProgress from '@material-ui/core/LinearProgress'
 
-import { useStore } from './_store'
+import { useDashboardData } from './DashboardData'
 
 import Dashboard from './Dashboard'
 
 // Before showing the dashboard we need to be sure that the
 // User data is propperly requested
 const DashboardContainer: React.FC = props => {
-  const { loading, error, data } = useStore()
-
-  if (loading) return <LinearProgress />
-  if (error) return <p>Error :(</p>
+  const state = useDashboardData()
 
+  // if (loading) return <LinearProgress />
+  // if (error) {
+  //   console.log(error)
+  //   return <p>Error :(</p>
+  // }
   return <Dashboard />
 }
 

src/Dashboard/DashboardData.ts

@@ -0,0 +1,18 @@
+import { useEffect } from 'react'
+
+import { useDispatch, useSelector } from 'react-redux'
+import { RootState, RootDispatch } from '_store'
+
+export function useDashboardData() {
+  const state = useSelector((state: RootState) => state.dashboard)
+  const dispatch = useDispatch<RootDispatch>()
+
+  // Request user data
+  useEffect(() => {
+    dispatch.dashboard.request()
+  }, [dispatch])
+
+  return state
+}
+
+export default {}

src/Dashboard/_store/dashboardStore.ts

@@ -0,0 +1,66 @@
+import { createModel } from '@rematch/core' // RematchDispatch
+import User from '_types/User'
+import users from '_api/users'
+
+export interface DashboardStateStatus {
+  loading?: boolean
+  error?: Error
+}
+
+export interface DashboardStateData {
+  user?: User
+}
+export interface DashboardState extends DashboardStateStatus {
+  data?: DashboardStateData
+}
+
+const model = createModel({
+  state: {
+    loading: false,
+    error: null,
+    data: null,
+  },
+  reducers: {
+    setStatus: (
+      state: DashboardState,
+      payload: { loading?: boolean; error?: any },
+    ): DashboardState => ({
+      ...state,
+      ...payload,
+    }),
+    setData: (state: DashboardState, payload: DashboardStateData): DashboardState => ({
+      ...state,
+      data: {
+        ...state.data,
+        ...payload,
+      },
+    }),
+  },
+  // dispatch: RematchDispatch
+  effects: () => ({
+    async request() {
+      this.setStatus({
+        loading: true,
+        error: null,
+      })
+
+      try {
+        const currentUser = await users.getProfile()
+
+        this.setData({
+          user: currentUser,
+        })
+      } catch (e) {
+        this.setStatus({
+          error: e,
+        })
+      }
+
+      this.setStatus({
+        loading: false,
+      })
+    },
+  }),
+})
+
+export default model

src/Dashboard/_store/index.ts

@@ -1,37 +1 @@
-import { useEffect } from 'react'
-
-import { useDispatch, useSelector } from 'react-redux'
-import { RootState, RootDispatch } from '_store/redux'
-import { useQuery } from '@apollo/react-hooks'
-import { gql } from 'apollo-boost'
-
-export function useStore() {
-  return useStoreApollo()
-}
-
-function useStoreApollo() {
-  const { loading, error, data } = useQuery(gql`
-    {
-      rates(currency: "USD") {
-        currency
-        rate
-      }
-    }
-  `)
-
-  return { loading, error, data }
-}
-
-function useStoreRedux() {
-  const data = useSelector((state: RootState) => state.dashboard)
-  const dispatch = useDispatch<RootDispatch>()
-
-  // Request user data
-  useEffect(() => {
-    dispatch.dashboard.request()
-  })
-
-  return { data }
-}
-
-export default {}
+export { default } from './dashboardStore'