App restructure

Author: modularcoder

src/App.tsx

@@ -1,80 +1,48 @@
 import React from 'react'
 import { Provider } from 'react-redux'
-import { gql } from 'apollo-boost'
 import { ThemeProvider } from '@material-ui/styles'
-import { HashRouter, BrowserRouter, Route, RouteProps, Redirect } from 'react-router-dom' //
 import { ApolloProvider } from '@apollo/react-hooks'
 
-import ApolloClient from 'apollo-boost'
 import CssBaseline from '@material-ui/core/CssBaseline'
 
 import config from './config'
-import store from './_storeRedux'
-import api from './_apiREST'
 import authService from './_services/authService'
-import theme from './_theme'
-
-import Auth from './Auth/Auth'
-import { DashboardContainer } from './Dashboard'
 
-const client = new ApolloClient({
-  uri: 'https://48p1r2roz4.sse.codesandbox.io',
-})
+import apiRest from './_api/rest'
+import apiApollo from './_api/apollo'
+import storeRedux from './_store/redux'
+import theme from './_theme'
 
-api.init()
+import AppRouter from './AppRouter'
 
 // Init the authentication service
 authService.init({
-  useDemoToken: true,
+  useSampleData: config.useSampleData,
+})
+
+// Init rest API client
+apiRest.init({
+  useSampleData: config.useSampleData,
 })
 
-// Use different router type depending on configuration
-const AppRouter: React.ComponentType<any> =
-  config.navigationType === 'history' ? BrowserRouter : HashRouter
+// Init apollo client
+const apiApolloClient = apiApollo.init({
+  useSampleData: config.useSampleData,
+})
 
 const App: React.FC = () => {
   return (
     <div className="App">
       <CssBaseline />
-      <AppRouter>
-        <Route path="/auth" component={Auth} />
-        <PrivateRoute path="/" component={DashboardContainer} />
-      </AppRouter>
+      <AppRouter />
     </div>
   )
 }
 
-// See https://reacttraining.com/react-router/web/example/auth-workflow
-const PrivateRoute: React.FC<RouteProps> = ({
-  component: Component,
-  ...rest
-}: RouteProps) => {
-  if (!Component) {
-    return <Route {...rest} />
-  }
-
-  return (
-    <Route
-      {...rest}
-      render={props =>
-        authService.isAuthenticated() ? (
-          <Component {...props} />
-        ) : (
-          <Redirect
-            to={{
-              pathname: '/auth/login',
-            }}
-          />
-        )
-      }
-    />
-  )
-}
-
 export default () => (
   <ThemeProvider theme={theme}>
-    <ApolloProvider client={client}>
-      <Provider store={store}>
+    <ApolloProvider client={apiApolloClient}>
+      <Provider store={storeRedux}>
         <App />
       </Provider>
     </ApolloProvider>

src/AppRouter.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import { HashRouter, BrowserRouter, Route, RouteProps, Redirect } from 'react-router-dom' //
+
+import config from './config'
+import authService from './_services/authService'
+
+import Auth from './Auth/Auth'
+import { DashboardContainer } from './Dashboard'
+
+// Use different router type depending on configuration
+const AppRouterComponent: React.ComponentType<any> =
+  config.navigationType === 'history' ? BrowserRouter : HashRouter
+
+const AppRouter: React.FC = () => (
+  <AppRouterComponent>
+    <Route path="/auth" component={Auth} />
+    <PrivateRoute path="/" component={DashboardContainer} />
+  </AppRouterComponent>
+)
+
+// See https://reacttraining.com/react-router/web/example/auth-workflow
+const PrivateRoute: React.FC<RouteProps> = ({
+  component: Component,
+  ...rest
+}: RouteProps) => {
+  if (!Component) {
+    return <Route {...rest} />
+  }
+
+  return (
+    <Route
+      {...rest}
+      render={props =>
+        authService.isAuthenticated() ? (
+          <Component {...props} />
+        ) : (
+          <Redirect
+            to={{
+              pathname: '/auth/login',
+            }}
+          />
+        )
+      }
+    />
+  )
+}
+
+export default AppRouter

src/Dashboard/DashboardContainer.tsx

@@ -1,54 +1,19 @@
-import React, { useEffect } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
+import React from 'react'
 import LinearProgress from '@material-ui/core/LinearProgress'
-import { useQuery } from '@apollo/react-hooks'
-import { gql } from 'apollo-boost'
 
-import { RootState, RootDispatch } from '../_storeRedux'
-import Dashboard from './Dashboard'
-
-function useDashboardData() {
-  const { loading, error, data } = useQuery(gql`
-    {
-      rates(currency: "USD") {
-        currency
-        rate
-      }
-    }
-  `)
+import { useStore } from './_store'
 
-  return { loading, error, data }
-}
+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 } = useDashboardData()
-
-  // const user = useSelector((state: RootState) => state.user)
-  // const dispatch = useDispatch<RootDispatch>()
-
-  // // Request user data
-  // useEffect(() => {
-  //   dispatch.user.request()
-  // })
+  const { loading, error, data } = useStore()
 
   if (loading) return <LinearProgress />
   if (error) return <p>Error :(</p>
 
-  return data.rates.map(({ currency, rate }: { currency: any; rate: any }) => (
-    <div key={currency}>
-      <p>
-        {currency}: {rate}
-      </p>
-    </div>
-  ))
-
-  // if (!user) {
-  //   return <LinearProgress />
-  // } else {
-  //   return <Dashboard />
-  // }
+  return <Dashboard />
 }
 
 export default DashboardContainer

src/Dashboard/_store/index.ts

@@ -0,0 +1,37 @@
+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 {}

src/_api/apollo/index.ts

@@ -0,0 +1,16 @@
+import ApolloClient from 'apollo-boost'
+// import config from './config'
+
+export interface ApiApolloInitOptions {
+  useSampleData?: boolean
+}
+
+export default {
+  init({ useSampleData }: ApiApolloInitOptions) {
+    const client = new ApolloClient({
+      uri: 'https://48p1r2roz4.sse.codesandbox.io',
+    })
+
+    return client
+  },
+}

src/_api/graphql/index.ts

@@ -1,16 +1,18 @@
-import config from '../../config'
-
 import instance from './apiService'
 import accounts from './accountsService'
 import users from './usersService'
 
-const init = () => {
+export interface ApiRestInitOptions {
+  useSampleData?: boolean
+}
+
+const init = ({ useSampleData }: ApiRestInitOptions) => {
   // Respond with a sample data
-  if (config.api.useSampleData) {
+  if (useSampleData) {
     console.log('should mock rest api!')
-
-    // apiSampleData.init(instance)
   }
+
+  return instance
 }
 
 export default { instance, accounts, users, init }

src/_api/rest/index.ts

@@ -7,7 +7,7 @@ import store from 'store'
 
 // import config from '../config'
 
-const demoToken =
+const sampleToken =
   'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.Db8fjZU7MkBZoJDjmjuvv2EeDgG9RSaZ1xKm__qHelw'
 
 export interface AuthService {
@@ -20,14 +20,14 @@ export interface AuthService {
 }
 
 interface AuthServiceInitOptions {
-  useDemoToken?: boolean
+  useSampleData?: boolean
 }
 
 const authService: AuthService = {
   token: null,
-  init<AuthServiceInitOptions>({ useDemoToken = false } = {}) {
-    if (useDemoToken) {
-      this.token = demoToken
+  init<AuthServiceInitOptions>({ useSampleData = false } = {}) {
+    if (useSampleData) {
+      this.token = sampleToken
     } else {
       this.token = store.get('token') || null
     }

src/_services/authService.tsx

@@ -1,9 +1,9 @@
 import { init, RematchRootState, RematchDispatch } from '@rematch/core'
 
-import user from './userStore'
+import dashboard from 'Dashboard/_store/redux/dashboardStore'
 
 const models = {
-  user,
+  dashboard,
 }
 
 export const store = init({