feat: add filter per space in dashboard

Author: pyphilia

src/components/dashboard/ActionBarChart.js

@@ -1,5 +1,4 @@
 import React, { PureComponent } from 'react';
-import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
@@ -15,7 +14,6 @@ import {
 } from 'recharts';
 import Typography from '@material-ui/core/Typography';
 import { withStyles } from '@material-ui/core';
-import { getDatabase, setDatabase } from '../../actions';
 import Loader from '../common/Loader';
 import Styles from '../../Styles';
 
@@ -47,29 +45,26 @@ class ActionBarChart extends PureComponent {
     i18n: PropTypes.shape({
       changeLanguage: PropTypes.func.isRequired,
     }).isRequired,
-    database: PropTypes.shape({
-      user: PropTypes.object,
-      spaces: PropTypes.array,
-      actions: PropTypes.array,
-    }),
     t: PropTypes.func.isRequired,
+    actions: PropTypes.arrayOf(PropTypes.object),
+    spaces: PropTypes.arrayOf(PropTypes.object),
   };
 
   static defaultProps = {
-    database: {},
+    actions: [],
+    spaces: [],
   };
 
   render() {
-    const { database, theme, t } = this.props;
+    const { spaces, theme, t, actions } = this.props;
     const {
       palette: { primary, type },
     } = theme;
 
-    if (!database || _.isEmpty(database)) {
+    if (!actions || _.isEmpty(actions) || !spaces || _.isEmpty(spaces)) {
       return <Loader />;
     }
 
-    const { spaces, actions } = database;
     const data =
       // group actions by space id
       Object.entries(_.groupBy(actions, 'spaceId'))
@@ -114,23 +109,7 @@ class ActionBarChart extends PureComponent {
   }
 }
 
-const mapStateToProps = ({ Developer }) => ({
-  database: Developer.get('database'),
-});
-
-const mapDispatchToProps = {
-  dispatchGetDatabase: getDatabase,
-  dispatchSetDatabase: setDatabase,
-};
-
-const ConnectedComponent = connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(ActionBarChart);
-
-const StyledComponent = withStyles(Styles, { withTheme: true })(
-  ConnectedComponent
-);
+const StyledComponent = withStyles(Styles, { withTheme: true })(ActionBarChart);
 
 const TranslatedComponent = withTranslation()(StyledComponent);
 

src/components/dashboard/ActionEditor.js

@@ -6,10 +6,10 @@ import PropTypes from 'prop-types';
 import Typography from '@material-ui/core/Typography';
 import { withTranslation } from 'react-i18next';
 import { withStyles } from '@material-ui/core';
-import { getDatabase, setDatabase } from '../../actions';
+import { getDatabase } from '../../actions';
 import Loader from '../common/Loader';
 import Styles from '../../Styles';
-import SampleDatabase from '../../data/sample.json';
+import { FILTER_ALL_SPACE_ID } from '../../config/constants';
 
 export class ActionEditor extends Component {
   static propTypes = {
@@ -18,44 +18,40 @@ export class ActionEditor extends Component {
       button: PropTypes.string.isRequired,
     }).isRequired,
     dispatchGetDatabase: PropTypes.func.isRequired,
-    dispatchSetDatabase: PropTypes.func.isRequired,
     database: PropTypes.shape({
       user: PropTypes.object,
-      spaces: PropTypes.array,
-      actions: PropTypes.array,
+      spaces: PropTypes.arrayOf(PropTypes.object),
+      actions: PropTypes.arrayOf(PropTypes.object),
     }),
+    spaceId: PropTypes.string,
   };
 
   static defaultProps = {
     database: {},
+    spaceId: FILTER_ALL_SPACE_ID,
   };
 
   componentDidMount() {
     const { dispatchGetDatabase } = this.props;
     dispatchGetDatabase();
   }
 
-  handleEdit = ({ updated_src: updatedSrc }) => {
-    const { dispatchSetDatabase } = this.props;
-    dispatchSetDatabase(updatedSrc);
-  };
-
-  handleUseSampleDatabase = () => {
-    const { dispatchSetDatabase } = this.props;
-    dispatchSetDatabase(SampleDatabase);
-  };
-
   render() {
-    const { database, t } = this.props;
+    const { database, t, spaceId } = this.props;
 
     if (!database || _.isEmpty(database)) {
       return <Loader />;
     }
 
+    let { actions } = database;
+    if (spaceId !== FILTER_ALL_SPACE_ID) {
+      actions = actions.filter(({ spaceId: id }) => id === spaceId);
+    }
+
     return (
       <div>
         <Typography variant="h6">{t('View Action Database')}</Typography>
-        <ReactJson name="actions" collapsed src={database.actions} />
+        <ReactJson name="actions" collapsed src={actions} />
       </div>
     );
   }
@@ -67,7 +63,6 @@ const mapStateToProps = ({ Developer }) => ({
 
 const mapDispatchToProps = {
   dispatchGetDatabase: getDatabase,
-  dispatchSetDatabase: setDatabase,
 };
 
 const StyledComponent = withStyles(Styles, { withTheme: true })(ActionEditor);

src/components/dashboard/ActionLineChart.js

@@ -1,5 +1,4 @@
 import React, { PureComponent } from 'react';
-import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
 import {
@@ -14,7 +13,6 @@ import {
 import _ from 'lodash';
 import { withStyles } from '@material-ui/core';
 import Typography from '@material-ui/core/Typography';
-import { getDatabase, setDatabase } from '../../actions';
 import Loader from '../common/Loader';
 import Styles from '../../Styles';
 
@@ -46,16 +44,12 @@ class ActionLineChart extends PureComponent {
     i18n: PropTypes.shape({
       changeLanguage: PropTypes.func.isRequired,
     }).isRequired,
-    database: PropTypes.shape({
-      user: PropTypes.object,
-      spaces: PropTypes.array,
-      actions: PropTypes.array,
-    }),
     t: PropTypes.func.isRequired,
+    actions: PropTypes.arrayOf(PropTypes.object),
   };
 
   static defaultProps = {
-    database: {},
+    actions: [],
   };
 
   formatDate = date => {
@@ -64,16 +58,15 @@ class ActionLineChart extends PureComponent {
   };
 
   render() {
-    const { database, theme, t } = this.props;
+    const { theme, t, actions } = this.props;
     const {
       palette: { primary, type },
     } = theme;
 
-    if (!database || _.isEmpty(database)) {
+    if (!actions || _.isEmpty(actions)) {
       return <Loader />;
     }
 
-    const { actions } = database;
     const dataWithDateFormatted = actions.map(action => ({
       date: [this.formatDate(action.createdAt)],
       data: action.data,
@@ -125,22 +118,8 @@ class ActionLineChart extends PureComponent {
   }
 }
 
-const mapStateToProps = ({ Developer }) => ({
-  database: Developer.get('database'),
-});
-
-const mapDispatchToProps = {
-  dispatchGetDatabase: getDatabase,
-  dispatchSetDatabase: setDatabase,
-};
-
-const ConnectedComponent = connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(ActionLineChart);
-
 const StyledComponent = withStyles(Styles, { withTheme: true })(
-  ConnectedComponent
+  ActionLineChart
 );
 const TranslatedComponent = withTranslation()(StyledComponent);
 

src/components/dashboard/ActionPieChart.js

@@ -1,12 +1,10 @@
 import React, { PureComponent } from 'react';
 import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip } from 'recharts';
-import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core';
 import Typography from '@material-ui/core/Typography';
-import { getDatabase, setDatabase } from '../../actions';
 import Loader from '../common/Loader';
 
 const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042'];
@@ -87,16 +85,12 @@ class ActionPieChart extends PureComponent {
     i18n: PropTypes.shape({
       changeLanguage: PropTypes.func.isRequired,
     }).isRequired,
-    database: PropTypes.shape({
-      user: PropTypes.object,
-      spaces: PropTypes.array,
-      actions: PropTypes.array,
-    }),
     t: PropTypes.func.isRequired,
+    actions: PropTypes.arrayOf(PropTypes.object),
   };
 
   static defaultProps = {
-    database: {},
+    actions: [],
   };
 
   renderCustomizedLabel = ({
@@ -125,13 +119,12 @@ class ActionPieChart extends PureComponent {
   };
 
   render() {
-    const { database, classes, t } = this.props;
+    const { actions, classes, t } = this.props;
 
-    if (!database || _.isEmpty(database)) {
+    if (!actions || _.isEmpty(actions)) {
       return <Loader />;
     }
 
-    const { actions } = database;
     const data =
       // group actions by space id
       Object.entries(_.groupBy(actions, 'verb'))
@@ -171,23 +164,7 @@ class ActionPieChart extends PureComponent {
   }
 }
 
-const mapStateToProps = ({ Developer }) => ({
-  database: Developer.get('database'),
-});
-
-const mapDispatchToProps = {
-  dispatchGetDatabase: getDatabase,
-  dispatchSetDatabase: setDatabase,
-};
-
-const ConnectedComponent = connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(ActionPieChart);
-
-const StyledComponent = withStyles(styles, { withTheme: true })(
-  ConnectedComponent
-);
+const StyledComponent = withStyles(styles, { withTheme: true })(ActionPieChart);
 
 const TranslatedComponent = withTranslation()(StyledComponent);
 

src/components/dashboard/ActionTotalCount.js

@@ -2,12 +2,10 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core';
 import { withTranslation } from 'react-i18next';
-import { connect } from 'react-redux';
 import Typography from '@material-ui/core/Typography';
 import Grid from '@material-ui/core/Grid';
 import CountUp from 'react-countup';
 import _ from 'lodash';
-import { getDatabase, setDatabase } from '../../actions';
 import Loader from '../common/Loader';
 
 const styles = () => ({
@@ -20,35 +18,24 @@ const styles = () => ({
 
 class ActionTotalCount extends PureComponent {
   static propTypes = {
-    database: PropTypes.shape({
-      user: PropTypes.object,
-      spaces: PropTypes.array,
-      actions: PropTypes.array,
-    }),
-    dispatchGetDatabase: PropTypes.func.isRequired,
+    actions: PropTypes.arrayOf(PropTypes.object),
     t: PropTypes.func.isRequired,
     classes: PropTypes.shape({
       actionCounter: PropTypes.string.isRequired,
     }).isRequired,
   };
 
   static defaultProps = {
-    database: {},
+    actions: [],
   };
 
-  componentDidMount() {
-    const { dispatchGetDatabase } = this.props;
-    dispatchGetDatabase();
-  }
-
   render() {
-    const { database, classes, t } = this.props;
+    const { classes, t, actions } = this.props;
 
-    if (!database || _.isEmpty(database)) {
+    if (!actions || _.isEmpty(actions)) {
       return <Loader />;
     }
 
-    const { actions } = database;
     const count = actions.length;
 
     return (
@@ -61,23 +48,8 @@ class ActionTotalCount extends PureComponent {
     );
   }
 }
-
-const mapStateToProps = ({ Developer }) => ({
-  database: Developer.get('database'),
-});
-
-const mapDispatchToProps = {
-  dispatchGetDatabase: getDatabase,
-  dispatchSetDatabase: setDatabase,
-};
-
-const ConnectedComponent = connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(ActionTotalCount);
-
 const StyledComponent = withStyles(styles, { withTheme: true })(
-  ConnectedComponent
+  ActionTotalCount
 );
 
 const TranslatedComponent = withTranslation()(StyledComponent);