fix: trees page (#487)

* fix: remove superfluous stringify

* fix: add tests for bug and remove unused code

client/src/App.js

@@ -11,7 +11,6 @@ class App extends Component {
   componentDidMount() {
     // in the future we want to maybe restore the users last filter set from the server
     // as well as deal with all the login state stuff.
-    this.props.requestTreeCount()
     setLocaleLanguage(navigator.language);
   }
 
@@ -34,9 +33,6 @@ const mapState = (state) => {
   return state
 }
 
-const mapDispatch = (dispatch) => ({
-  requestTreeCount: () => dispatch.trees.requestTreeCount(),
-  requestTrees: () => dispatch.trees.requestTrees(),
-})
+const mapDispatch = (dispatch) => ({})
 
 export default connect(mapState, mapDispatch)(App)

client/src/models/trees.js

@@ -39,7 +39,7 @@ const trees = {
       }
     },
     receiveTreeCount(state, payload) {
-      return { ...state, treeCount: payload.count, invalidateTreeCount: false }
+      return { ...state, treeCount: payload, invalidateTreeCount: false }
     },
     invalidateTreeCount(state, payload) {
       return { ...state, invalidateTreeCount: payload }
@@ -111,8 +111,8 @@ const trees = {
           },
         }
       )
-      const data = response.data
-      this.receiveTreeCount(data)
+      const {count} = response.data
+      this.receiveTreeCount(count)
     },
 
     async getTreesAsync(payload, rootState) {
@@ -126,22 +126,9 @@ const trees = {
         await this.getTreeCount(payload, rootState);
       }
 
-      let response = await Axios.get(
-        `${process.env.REACT_APP_API_ROOT}/api/${getOrganization()}trees/count?
-         where=${JSON.stringify(filter ? filter.getWhereObj(): {})}`,
-        {
-          headers: {
-            'content-type': 'application/json',
-            Authorization: session.token,
-          },
-        }
-      )
-      const data = response.data
-      this.receiveTreeCount(data)
-
       const where = filter ? filter.getWhereObj() : {}
 
-      const lbFilter = JSON.stringify({
+      const lbFilter = {
         where: {...where, active: true},
         order: [`${orderBy} ${order}`],
         limit: rowsPerPage,
@@ -153,11 +140,11 @@ const trees = {
           planterId: true,
           treeTags: true,
         },
-      })
+      }
 
       const query = `${process.env.REACT_APP_API_ROOT}/api/${getOrganization()}trees?filter=${JSON.stringify(lbFilter)}`
 
-      response = await Axios.get(query, {
+      const response = await Axios.get(query, {
         headers: {
           'content-type': 'application/json',
           Authorization: session.token,
@@ -171,17 +158,6 @@ const trees = {
         filter,
       })
     },
-    async requestTreeCount(payload, rootState) {
-      Axios.get(`${process.env.REACT_APP_API_ROOT}/api/${getOrganization()}trees/count`, {
-        headers: {
-          'content-type': 'application/json',
-          Authorization: session.token,
-        },
-      }).then((response) => {
-        const data = response.data
-        this.receiveTreeCount(data)
-      })
-    },
     async getTreeAsync(id) {
       const query = `${process.env.REACT_APP_API_ROOT}/api/${getOrganization()}trees/${id}`
       Axios.get(query, {

client/src/models/trees.test.js

@@ -0,0 +1,78 @@
+import { init } from "@rematch/core";
+import trees from "./trees";
+import * as loglevel from "loglevel";
+import Axios from 'axios';
+
+const log = loglevel.getLogger("../models/trees.test");
+
+jest.mock('axios');
+
+describe('trees', () => {
+
+  let store;
+
+  beforeEach(() => {
+  });
+
+  describe('with a default store', () => {
+    beforeEach(async () => {
+      store = init({
+        models: {
+          trees,
+        },
+      });
+    });
+
+    it('should have no trees', () => {
+      expect(store.getState().trees.data).toHaveLength(0);
+    });
+
+    it('should be on page 0', () => {
+      expect(store.getState().trees.page).toBe(0);
+    });
+
+    describe('getTreesAsync()', () => {
+      beforeEach(async () => {
+        const data = [{
+          id: '1'
+        }];
+        // Mock the call to trees/count first
+        Axios.get.mockReturnValueOnce({data: {count: data.length}}).mockReturnValueOnce({data});
+        await store.dispatch.trees.getTreesAsync();
+      });
+
+      it('should get a tree count', () => {
+        expect(store.getState().trees.treeCount).toBe(1);
+      });
+
+      it('should get some trees', () => {
+        expect(store.getState().trees.data).toHaveLength(1);
+      });
+
+      it('should get the tree count first', () => {
+        expect(Axios.get.mock.calls[0][0]).toContain(`trees/count`);
+      });
+
+      it('should call trees API with a valid filter', () => {
+        const filter = JSON.stringify({
+          where: { active: true },
+          order: ['id asc'],
+          limit: 25,
+          skip: 0,
+          fields: {
+            id: true,
+            timeCreated: true,
+            status: true,
+            planterId: true,
+            treeTags: true,
+          },
+        });
+
+        // The first arg (URL) should include a stringified default filter object
+        expect(Axios.get).toHaveBeenCalled();
+        const lastCallIdx = Axios.get.mock.calls.length - 1;
+        expect(Axios.get.mock.calls[lastCallIdx][0]).toContain(`trees?filter=${filter}`);
+      });
+    });
+  });
+});