Merge pull request #311 from factly/feat/info

feat: space info

src/actions/info.js

@@ -0,0 +1,22 @@
+import axios from 'axios';
+import { ADD_INFO, INFO_API } from '../constants/info';
+import getError from '../utils/getError';
+import { addErrorNotification } from './notifications';
+
+export const getInfo = () => {
+  return (dispatch) => {
+    return axios
+      .get(INFO_API)
+      .then((response) => {
+        dispatch(addInfo(response.data));
+      })
+      .catch((error) => {
+        dispatch(addErrorNotification(getError(error)));
+      });
+  };
+};
+
+export const addInfo = (data) => ({
+  type: ADD_INFO,
+  payload: data,
+});

src/constants/info.js

@@ -0,0 +1,2 @@
+export const ADD_INFO = 'ADD_INFO';
+export const INFO_API = '/core/info';

src/pages/dashboard/index.js

@@ -1,15 +1,73 @@
-import React from 'react';
-import { Space, Typography } from 'antd';
+import React, { useEffect } from 'react';
+import { Col, Row, Space, Statistic, Typography } from 'antd';
 import Features from './components/Features';
 import getUserPermission from '../../utils/getUserPermission';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
+import { getInfo } from '../../actions/info';
 
 function Dashboard() {
-  const spaces = useSelector(({ spaces }) => spaces);
+  const { spaces, info } = useSelector(({ spaces, info }) => ({
+    spaces,
+    info,
+  }));
   const actions = getUserPermission({ resource: 'dashboard', action: 'get', spaces });
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    fetchInfo();
+  }, []);
+
+  const fetchInfo = () => {
+    dispatch(getInfo());
+  };
+
+  const { article, factCheck } = info;
+
   return (
     <Space direction="vertical">
       <Typography.Title>Dashboard</Typography.Title>
+      <Row gutter={16}>
+        <Col span={12}>
+          <Statistic title="Categories" value={info.categories} />
+        </Col>
+        <Col span={12}>
+          <Statistic title="Tags" value={info.tags} />
+        </Col>
+      </Row>
+      <Row gutter={16}>
+        <Col span={6}>
+          <Statistic
+            title="Total Posts"
+            value={article.publish + article.draft + article.template}
+          />
+        </Col>
+        <Col span={6}>
+          <Statistic title="Published Posts" value={info.article.publish} />
+        </Col>
+        <Col span={6}>
+          <Statistic title="Draft Posts" value={info.article.draft} />
+        </Col>
+        <Col span={6}>
+          <Statistic title="Template Posts" value={info.article.template} />
+        </Col>
+      </Row>
+      <Row gutter={16}>
+        <Col span={6}>
+          <Statistic
+            title="Total Fact Checks"
+            value={factCheck.publish + factCheck.draft + factCheck.template}
+          />
+        </Col>
+        <Col span={6}>
+          <Statistic title="Published Fact Checks" value={info.factCheck.publish} />
+        </Col>
+        <Col span={6}>
+          <Statistic title="Draft Fact Checks" value={info.factCheck.draft} />
+        </Col>
+        <Col span={6}>
+          <Statistic title="Template Fact Checks" value={info.factCheck.template} />
+        </Col>
+      </Row>
       {actions.includes('admin') ? <Features /> : null}
     </Space>
   );

src/reducers/index.js

@@ -26,9 +26,11 @@ import sidebar from './sidebarReducer';
 import episodes from './episodesReducer';
 import podcasts from './podcastReducer';
 import redirect from './redirectReducer';
+import info from './infoReducer';
 
 const appReducer = combineReducers({
   admin,
+  info,
   settings,
   spaces,
   organisations,

src/reducers/infoReducer.js

@@ -0,0 +1,53 @@
+import { ADD_INFO } from '../constants/info';
+
+const initialState = {
+  categories: 0,
+  tag: 0,
+  article: {
+    draft: 0,
+    template: 0,
+    publish: 0,
+  },
+  factCheck: {
+    draft: 0,
+    template: 0,
+    publish: 0,
+  },
+  podcasts: 0,
+};
+
+export default function infoReducer(state = initialState, action = {}) {
+  if (!action.payload) {
+    return state;
+  }
+  switch (action.type) {
+    case ADD_INFO:
+      const posts = action.payload.posts;
+      let article = {
+        draft: 0,
+        template: 0,
+        publish: 0,
+      };
+      let factCheck = {
+        draft: 0,
+        template: 0,
+        publish: 0,
+      };
+
+      posts.forEach((each) => {
+        if (each.slug === 'article') {
+          article[each.status] = each.count;
+        }
+        if (each.slug === 'fact-check') {
+          factCheck[each.status] = each.count;
+        }
+      });
+      return {
+        ...action.payload,
+        article,
+        factCheck,
+      };
+    default:
+      return state;
+  }
+}