Show favorite user records

add table for user favoriting

User model to favorite controllers and results

store favorite records in the localStorage

Displaying favorite records in separate Table

There will be two tables in Controllers and Results page, one reflecting all
records and the other is for user-favorite records

Author: aquibbaig

src/app.js

@@ -14,7 +14,7 @@ const persistConfig = {
   throttle: 1000,
   key: getAppPath(),
   storage,
-  whitelist: ['global'],
+  whitelist: ['global', 'user'],
 };
 
 const persistEnhancer = () => createStore => (reducer, initialState, enhancer) => {

src/models/user.js

@@ -0,0 +1,38 @@
+export default {
+  namespace: 'user',
+
+  state: {
+    favoriteControllers: [],
+    favoriteResults: [],
+  },
+
+  effects: {
+    *favoriteController({ payload }, { put }) {
+      yield put({
+        type: 'modifyFavoritedControllers',
+        payload,
+      });
+    },
+    *favoriteResult({ payload }, { put }) {
+      yield put({
+        type: 'modifyFavoritedResults',
+        payload,
+      });
+    },
+  },
+
+  reducers: {
+    modifyFavoritedControllers(state, { payload }) {
+      return {
+        ...state,
+        favoriteControllers: [...state.favoriteControllers, payload],
+      };
+    },
+    modifyFavoritedResults(state, { payload }) {
+      return {
+        ...state,
+        favoriteResults: [...state.favoriteResults, payload],
+      };
+    },
+  },
+};

src/pages/Controllers/index.js

@@ -1,18 +1,21 @@
 import React, { Component } from 'react';
 import { connect } from 'dva';
 import { routerRedux } from 'dva/router';
-import { Card, Form } from 'antd';
+import { Card, Form, Icon, Tabs } from 'antd';
 
 import SearchBar from '@/components/SearchBar';
 import MonthSelect from '@/components/MonthSelect';
 import Table from '@/components/Table';
 import PageHeaderLayout from '../../layouts/PageHeaderLayout';
 
-@connect(({ datastore, global, dashboard, loading }) => ({
+const { TabPane } = Tabs;
+
+@connect(({ datastore, global, dashboard, loading, user }) => ({
   controllers: dashboard.controllers,
   indices: datastore.indices,
   selectedIndices: global.selectedIndices,
   datastoreConfig: datastore.datastoreConfig,
+  favoriteControllers: user.favoriteControllers,
   loadingControllers:
     loading.effects['dashboard/fetchControllers'] ||
     loading.effects['datastore/fetchMonthIndices'] ||
@@ -133,9 +136,20 @@ class Controllers extends Component {
     });
   };
 
+  favoriteRecord = (event, value, controller) => {
+    // Stop propagation from going to the next page
+    event.stopPropagation();
+    const { dispatch } = this.props;
+    // dispatch an action to favorite controller
+    dispatch({
+      type: 'user/favoriteController',
+      payload: controller,
+    });
+  };
+
   render() {
     const { controllers } = this.state;
-    const { loadingControllers, selectedIndices, indices } = this.props;
+    const { loadingControllers, selectedIndices, indices, favoriteControllers } = this.props;
     const columns = [
       {
         title: 'Controller',
@@ -155,6 +169,29 @@ class Controllers extends Component {
         key: 'results',
         sorter: (a, b) => a.results - b.results,
       },
+      {
+        title: 'Actions',
+        dataIndex: 'actions',
+        key: 'actions',
+        render: (value, row) => {
+          // if already favorited return a filled star,
+          // else allow user to favorite a record
+          let isFavorite = false;
+          favoriteControllers.forEach(item => {
+            if (item.key === row.key) {
+              isFavorite = true;
+            }
+          });
+          if (isFavorite) {
+            return <Icon type="star" theme="filled" />;
+          }
+          return (
+            <a onClick={e => this.favoriteRecord(e, null, row)}>
+              <Icon type="star" />
+            </a>
+          );
+        },
+      },
     ];
 
     return (
@@ -173,17 +210,34 @@ class Controllers extends Component {
               value={selectedIndices}
             />
           </Form>
-          <Table
-            style={{ marginTop: 20 }}
-            columns={columns}
-            dataSource={controllers}
-            onRow={record => ({
-              onClick: () => {
-                this.retrieveResults(record);
-              },
-            })}
-            loading={loadingControllers}
-          />
+          <Tabs type="card">
+            <TabPane tab="Controllers" key="controllers">
+              <Table
+                style={{ marginTop: 20 }}
+                columns={columns}
+                dataSource={controllers}
+                onRow={record => ({
+                  onClick: () => {
+                    this.retrieveResults(record);
+                  },
+                })}
+                loading={loadingControllers}
+              />
+            </TabPane>
+            <TabPane tab="Favorites" key="favorites">
+              <Table
+                style={{ marginTop: 20 }}
+                columns={columns}
+                dataSource={favoriteControllers}
+                onRow={record => ({
+                  onClick: () => {
+                    this.retrieveResults(record);
+                  },
+                })}
+                loading={loadingControllers}
+              />
+            </TabPane>
+          </Tabs>
         </Card>
       </PageHeaderLayout>
     );

src/pages/Controllers/index.test.js

@@ -25,7 +25,7 @@ describe('test Controllers page component', () => {
   });
 
   it('render Table component', () => {
-    expect(wrapper.find(Table).length).toBe(1);
+    expect(wrapper.find(Table).length).toBe(2);
   });
 
   it('render SearchBar component', () => {

src/pages/Results/index.js

@@ -1,20 +1,23 @@
 import React, { Component } from 'react';
 import { connect } from 'dva';
 import { routerRedux } from 'dva/router';
-import { Card, Form } from 'antd';
+import { Card, Form, Icon, Tabs } from 'antd';
 
 import SearchBar from '@/components/SearchBar';
 import RowSelection from '@/components/RowSelection';
 import Table from '@/components/Table';
 import PageHeaderLayout from '../../layouts/PageHeaderLayout';
 
-@connect(({ datastore, global, dashboard, loading }) => ({
+const { TabPane } = Tabs;
+
+@connect(({ datastore, global, dashboard, loading, user }) => ({
   selectedIndices: global.selectedIndices,
   results: dashboard.results[global.selectedControllers[0]]
     ? dashboard.results[global.selectedControllers[0]]
     : [],
   selectedControllers: global.selectedControllers,
   datastoreConfig: datastore.datastoreConfig,
+  favoriteResults: user.favoriteResults,
   loading: loading.effects['dashboard/fetchResults'],
 }))
 class Results extends Component {
@@ -121,9 +124,20 @@ class Results extends Component {
     );
   };
 
+  favoriteRecord = (event, value, result) => {
+    // Stop propagation from going to the next page
+    event.stopPropagation();
+    const { dispatch } = this.props;
+    // dispatch an action to favorite result
+    dispatch({
+      type: 'user/favoriteResult',
+      payload: result,
+    });
+  };
+
   render() {
     const { results, selectedRows } = this.state;
-    const { selectedControllers, loading } = this.props;
+    const { selectedControllers, loading, favoriteResults } = this.props;
     const rowSelection = {
       // eslint-disable-next-line no-shadow
       onSelect: (record, selected, selectedRows) => this.onSelectChange(selectedRows),
@@ -152,6 +166,29 @@ class Results extends Component {
         dataIndex: 'run.end',
         key: 'run.end',
       },
+      {
+        title: 'Actions',
+        dataIndex: 'actions',
+        key: 'actions',
+        render: (value, row) => {
+          // if already favorited return a filled star,
+          // else allow user to favorite a record
+          let isFavorite = false;
+          favoriteResults.forEach(item => {
+            if (item.key === row.key) {
+              isFavorite = true;
+            }
+          });
+          if (isFavorite) {
+            return <Icon type="star" theme="filled" />;
+          }
+          return (
+            <a onClick={e => this.favoriteRecord(e, null, row)}>
+              <Icon type="star" />
+            </a>
+          );
+        },
+      },
     ];
 
     return (
@@ -169,19 +206,36 @@ class Results extends Component {
               onCompare={this.compareResults}
             />
           </Form>
-          <Table
-            style={{ marginTop: 16 }}
-            rowSelection={rowSelection}
-            columns={columns}
-            dataSource={results}
-            onRow={record => ({
-              onClick: () => {
-                this.retrieveResults([record]);
-              },
-            })}
-            loading={loading}
-            bordered
-          />
+          <Tabs type="card" style={{ marginTop: 16 }}>
+            <TabPane tab="Results" key="results">
+              <Table
+                rowSelection={rowSelection}
+                columns={columns}
+                dataSource={results}
+                onRow={record => ({
+                  onClick: () => {
+                    this.retrieveResults([record]);
+                  },
+                })}
+                loading={loading}
+                bordered
+              />
+            </TabPane>
+            <TabPane tab="Favorites" key="favorites">
+              <Table
+                rowSelection={rowSelection}
+                columns={columns}
+                dataSource={favoriteResults}
+                onRow={record => ({
+                  onClick: () => {
+                    this.retrieveResults([record]);
+                  },
+                })}
+                loading={loading}
+                bordered
+              />
+            </TabPane>
+          </Tabs>
         </Card>
       </PageHeaderLayout>
     );

src/pages/Results/index.test.js

@@ -23,7 +23,7 @@ describe('test Results page component', () => {
   });
 
   it('render Table component', () => {
-    expect(wrapper.find(Table).length).toBe(1);
+    expect(wrapper.find(Table).length).toBe(2);
   });
 
   it('render RowSelection component', () => {