Implement order mocks

Author: modularcoder

docs/drafts.md

@@ -5,9 +5,9 @@ The points below are still in progress
 
 ### Features
 
-- Static typecheckign with TypeScript for large scale projects
 - Modular and scalable architecture
-- Function ready with pre-set REST API entities, sample data and a state management
+- Data driven and function ready with pre-set REST API entities, sample data and state management system
+- Static typechecking with TypeScript for large scale projects
 - Built in authentication with JWT
 - Typed data entities
 - Uses react hooks

package-lock.json

@@ -28,6 +28,7 @@
     "@types/react-redux": "^7.1.1",
     "@types/react-router-dom": "^4.3.4",
     "@types/store": "^2.0.2",
+    "@types/uuid": "^3.4.5",
     "axios": "^0.19.0",
     "axios-mock-adapter": "^1.17.0",
     "chart.js": "^2.8.0",

package.json

@@ -8,7 +8,6 @@ import config from './config'
 import authService from './_services/authService'
 
 import api from './_api'
-import apiMocks from './_api/_mocks'
 
 import store from './_store'
 import theme from './_theme'
@@ -21,11 +20,9 @@ authService.init({
 })
 
 // Init rest API client
-const apiClient = api.init()
-
-if (config.useSampleData) {
-  apiMocks.init(apiClient)
-}
+api.init({
+  useSampleData: config.useSampleData,
+})
 
 const App: React.FC = () => {
   return (

src/App.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { makeStyles, createStyles } from '@material-ui/core/styles'
 import Disqus from 'disqus-react'
-import Typography from '@material-ui/core/Typography'
+// import Typography from '@material-ui/core/Typography'
 import Paper from '@material-ui/core/Paper'
 
 import { Theme } from '_theme'

src/Dashboard/Demo/Discuss/Discuss.tsx

@@ -1,10 +1,10 @@
-import React, { useState, useEffect, useRef } from 'react'
+import React, { useEffect, useRef } from 'react' //useState
 import { makeStyles } from '@material-ui/core/styles'
 import Card from '@material-ui/core/Card'
 import CardContent from '@material-ui/core/CardContent'
 import { Chart } from 'chart.js'
 
-import mainHistoryService from './MainHistoryService'
+import mainHistoryService from './ordersHistoryService'
 
 // ref: https://www.robinwieruch.de/react-hooks-fetch-data/
 const MainHistory = () => {

src/Dashboard/Sales/Locations/.gitkeep

@@ -0,0 +1 @@
+export { default } from './OrdersHistory'

src/Dashboard/Sales/SalesDashboard/MainHistory.tsx renamed to src/Dashboard/Sales/SalesDashboard/OrdersHistory/OrdersHistory.tsx

@@ -1,16 +1,23 @@
-// import rand from 'lodash/random'
+import { Chart } from 'chart.js'
 import { random } from 'lodash'
 import moment from 'moment'
 
+// import ordersData from '../../_api/_data/ordersData'
+import api from '../../_api'
+
 export default {
   getRandomNumber(min = 0, max = 1): number {
     return random(min, max)
   },
-  getChartData(): Chart.ChartData {
+  async getChartData(): Promise<Chart.ChartData> {
     interface ChartDataSet extends Chart.ChartDataSets {
       data: number[]
     }
 
+    const orders = await api.orders.getList()
+
+    console.log('orders', orders)
+
     const timeFormat = 'MM/DD/YYYY'
 
     const today = moment().startOf('day')
@@ -112,11 +119,11 @@ export default {
     }
   },
   // In real life this would be an http call
-  getChartConfiguration(): Promise<Chart.ChartConfiguration> {
+  async getChartConfiguration(): Promise<Chart.ChartConfiguration> {
     const configuration = {
       type: 'bar',
       options: this.getChartOptions(),
-      data: this.getChartData(),
+      data: await this.getChartData(),
     }
 
     return new Promise(resolve => setTimeout(() => resolve(configuration), 300))

src/Dashboard/Sales/SalesDashboard/OrdersHistory/index.tsx

@@ -10,7 +10,6 @@ import TableBody from '@material-ui/core/TableBody'
 import TableCell from '@material-ui/core/TableCell'
 import TableHead from '@material-ui/core/TableHead'
 import TableRow from '@material-ui/core/TableRow'
-import Title from './Title'
 
 // Generate Order Data
 function createData(
@@ -51,7 +50,6 @@ const MainOrders: React.FC<any> = () => {
   return (
     <Card>
       <CardContent>
-        <Title>Recent Orders</Title>
         <Table size="small">
           <TableHead>
             <TableRow>