Remove mobx

Author: isdenmois

package.json

@@ -24,8 +24,6 @@
   "dependencies": {
     "hoist-non-react-statics": "~3.3.2",
     "jszip": "~3.2.2",
-    "mobx": "~5.15.4",
-    "mobx-react": "~6.1.8",
     "preact": "~10.3.4",
     "preact-compat": "~3.19.0",
     "prop-types": "~15.7.2",
@@ -72,7 +70,6 @@
     "json-loader": "~0.5.7",
     "lodash": "~4.17.15",
     "mini-css-extract-plugin": "~0.9.0",
-    "mobx-react-devtools": "~6.1.1",
     "optimize-css-assets-webpack-plugin": "~5.0.3",
     "postcss-import": "~12.0.1",
     "postcss-loader": "~3.0.0",

src/components/Confirm.tsx

@@ -10,6 +10,8 @@ interface State {
   positive: boolean
 }
 
+// const context
+
 export default class Confirm extends React.PureComponent<Props> {
   state: State = {
     buttons: [],

src/components/Tabs.tsx

@@ -6,7 +6,7 @@ import Page from './page'
 const s = require('./style/tabs.css')
 
 interface Props {
-  data: TabData[]
+  children: TabData[]
   name: string
 }
 
@@ -20,11 +20,17 @@ export default class Tabs extends React.PureComponent<Props> {
 
   render() {
     const active = this.state.active
-    const tab = this.props.data[active]
+    const tab = this.props.children[active]
 
     return (
-      <Page shadow tabsTop name={this.props.name} tabbar={map(this.props.data, this.renderButton)} fixed={tab.fixed}>
-        {map(this.props.data, this.renderTab)}
+      <Page
+        shadow
+        tabsTop
+        name={this.props.name}
+        tabbar={map(this.props.children, this.renderButton)}
+        fixed={tab.fixed}
+      >
+        {map(this.props.children, this.renderTab)}
       </Page>
     )
   }

src/components/list-tab.tsx

@@ -14,7 +14,7 @@ interface Props {
   onLoadMore?: () => void
 }
 
-export default class ListTab extends React.PureComponent<Props> {
+export default class ListTab extends React.Component<Props> {
   constructor(props: Props) {
     super(props)
     this.renderRow = this.renderRow.bind(this)

src/components/rsql.tsx

@@ -1,17 +1,16 @@
 import * as React from 'react'
-import { runInAction } from 'mobx'
-import { RSQLStore } from 'models/rsql'
+import { Loading } from './loading'
 const request = require('utils/request').default
 const queryParams = require('utils/queryParams').default
-const each = require('utils/each').default
 
 const ENDPOINT = '/api/sql'
 
 interface Props {
-  variables: any
-  children: (params: any) => any
-  store: RSQLStore
-  queries: any
+  queries: any[]
+  children: (data: any[], totals?: number[], loadMores?: boolean[]) => any
+  variables?: any
+  mapData?: (data: any[]) => any[]
+  loading?: React.ReactNode
 }
 
 export class RsqlFetcher extends React.Component<Props> {
@@ -23,19 +22,29 @@ export class RsqlFetcher extends React.Component<Props> {
 
   state = {
     variables: this.props.variables,
-    data: {},
+    data: [],
+    totals: [],
+    loadMores: [],
+    fetching: true,
+  }
+
+  componentDidMount() {
+    this.fetchData()
   }
 
   render() {
-    return this.props.children(this.state.data)
+    if (this.state.fetching) {
+      return this.props.loading || <Loading />
+    }
+
+    return this.props.children(this.state.data, this.state.totals, this.state.loadMores)
   }
 
-  async fetchData() {
-    const store: RSQLStore = this.props.store
+  async fetchData(fetching = true) {
     const variables = this.state.variables
     const promiseList = []
     const totalsPromiseList = []
-    store.setFetching(true)
+    this.setState({ fetching })
 
     for (let q of this.props.queries) {
       const query = q.query(variables)
@@ -44,10 +53,10 @@ export class RsqlFetcher extends React.Component<Props> {
         query.limit += offset
       }
 
-      const promise = request(`${ENDPOINT}?${queryParams(query)}`).then((data: any[]) => ({ key: q.prop, data }))
+      const promise = request(`${ENDPOINT}?${queryParams(query)}`)
       promiseList.push(promise)
 
-      if (q.pagination && store.setTotal) {
+      if (q.pagination) {
         const totalParams = queryParams({
           fields: ['COUNT(*) as count'],
           table: query.table,
@@ -59,14 +68,14 @@ export class RsqlFetcher extends React.Component<Props> {
       }
     }
 
-    const result: any = await Promise.all(promiseList)
-    const totals: any = await Promise.all(totalsPromiseList)
-    runInAction('set book data', () => {
-      each(result, (qr: any) => store.setData(qr.key, qr.data))
-      each(totals, (tr: any) => store.setTotal(tr.key, tr.count))
-      store.setFetching(false)
-      this.setState({})
-    })
+    let data: any = await Promise.all(promiseList)
+    const totals: any = await Promise.all(totalsPromiseList).then(result => result.map(r => r?.count ?? 0))
+
+    if (this.props.mapData) {
+      data = this.props.mapData(data)
+    }
+
+    this.setState({ data, totals, fetching: false })
   }
 
   setVariables(newVariables: any) {
@@ -76,28 +85,51 @@ export class RsqlFetcher extends React.Component<Props> {
   }
 
   async loadMore(type: string, count: number = 20) {
-    const store: RSQLStore = this.props.store
     const variables = this.state.variables
+    const index = this.getIndex(type)
 
-    const q = this.props.queries.find(q => q.prop === type)
+    if (index < 0) return
+    const q = this.props.queries[index]
 
-    if (!q) {
-      return
-    }
-    store.setLoadMore(type, true)
+    this.setLoadMore(index, true)
 
     const query = q.query(variables)
     let offset = (this.offsets[q.prop] || 0) as number
-    query.offset = (store as any)[type].length
+    query.offset = this.state.data[index].length
     query.limit = count
     this.offsets[q.prop] = offset + count
 
-    const result = await request(`${ENDPOINT}?${queryParams(query)}`)
+    const data = await request(`${ENDPOINT}?${queryParams(query)}`)
 
-    runInAction(() => {
-      store.appendData(q.prop, result)
-      store.setLoadMore(type, false)
-      this.setState({})
-    })
+    this.appendData(index, data)
+    this.setLoadMore(index, false)
+  }
+
+  getData(prop: string) {
+    return this.state.data[this.getIndex(prop)]
+  }
+
+  updateData(prop: string, data) {
+    this.state.data[this.getIndex(prop)] = data
+
+    this.setState({ data: [...this.state.data] })
+  }
+
+  private getIndex(prop: string) {
+    return this.props.queries.findIndex(q => q.prop === prop)
+  }
+
+  private setLoadMore(index: number, value: boolean) {
+    const loadMores = [...this.state.loadMores]
+    loadMores[index] = value
+
+    this.setState({ loadMores })
+  }
+
+  private appendData(index: number, data: any[]) {
+    const result = [...this.state.data]
+    result[index] = result[index].concat(data)
+
+    this.setState({ data: result })
   }
 }

src/main.tsx

@@ -1,32 +1,16 @@
 import * as React from 'react'
 import * as ReactDOM from 'react-dom'
-import { Provider as MobxProvider } from 'mobx-react'
 
-// Both configureStore and Root are required conditionally.
-import BookStore from './stores/BookStore'
-import HomePageStore from './stores/HomePageStore'
 require('./theme/global.css')
 require('./theme/variables.css')
 
-const homePageStore = new HomePageStore()
-const stores = {
-  bookStore: new BookStore(homePageStore),
-  homePageStore,
-}
-
 const rootEl = document.getElementById('root')
 
 // necessary for hot reloading
 let renderDom = () => {
   const Root = require('./containers/Root/index').default
-  const Provider: any = MobxProvider
 
-  ReactDOM.render(
-    <Provider {...stores}>
-      <Root />
-    </Provider>,
-    rootEl,
-  )
+  ReactDOM.render(<Root />, rootEl)
 }
 
 if ((module as any).hot) {