Merge pull request #372 from Coko-Foundation/369-date-range-fix

fix(ui): move report type

Author: vukilelanga

packages/client/app/components/component-reporting/src/Report.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import { forEach, map } from 'lodash'
@@ -383,8 +383,11 @@ const getReport = (
 }
 
 const Report = ({
+  reportType,
+  reportTypes,
   startDate,
   endDate,
+  setReportType,
   setStartDate,
   setEndDate,
   getSummaryData,
@@ -393,19 +396,6 @@ const Report = ({
   getReviewersData,
   getAuthorsData,
 }) => {
-  const reportTypes = [
-    { label: i18next.t('reportsPage.reportTypes.Summmary'), value: 'Summary' },
-    {
-      label: i18next.t('reportsPage.reportTypes.Manuscript'),
-      value: 'Manuscript',
-    },
-    { label: i18next.t('reportsPage.reportTypes.Editor'), value: 'Editor' },
-    { label: i18next.t('reportsPage.reportTypes.Reviewer'), value: 'Reviewer' },
-    { label: i18next.t('reportsPage.reportTypes.Author'), value: 'Author' },
-  ]
-
-  const [reportType, setReportType] = useState(reportTypes[0].value)
-
   const { t } = useTranslation()
   return (
     <Page>
@@ -456,10 +446,18 @@ const Report = ({
 }
 
 Report.propTypes = {
+  reportType: PropTypes.string.isRequired,
+  reportTypes: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string.isRequired,
+      value: PropTypes.string.isRequired,
+    }),
+  ).isRequired,
   /** Start of range for reporting, ms since epoch */
   startDate: PropTypes.number.isRequired,
   /** End of range for reporting, ms since epoch */
   endDate: PropTypes.number.isRequired,
+  setReportType: PropTypes.func.isRequired,
   setStartDate: PropTypes.func.isRequired,
   setEndDate: PropTypes.func.isRequired,
   getSummaryData: PropTypes.func.isRequired,

packages/client/app/components/component-reporting/src/ReportPage.js

@@ -1,5 +1,6 @@
 import React, { useContext, useState } from 'react'
 import { useQuery, gql } from '@apollo/client'
+import i18next from 'i18next'
 import Report from './Report'
 import { getStartOfDay, getEndOfDay } from '../../../shared/dateUtils'
 import { Spinner, CommsErrorBanner } from '../../shared'
@@ -138,6 +139,17 @@ const removeTypeName = rows => {
 
 const defaultReportDuration = 31 * 24 * 60 * 60 * 1000 // 31 days
 
+const reportTypes = [
+  { label: i18next.t('reportsPage.reportTypes.Summmary'), value: 'Summary' },
+  {
+    label: i18next.t('reportsPage.reportTypes.Manuscript'),
+    value: 'Manuscript',
+  },
+  { label: i18next.t('reportsPage.reportTypes.Editor'), value: 'Editor' },
+  { label: i18next.t('reportsPage.reportTypes.Reviewer'), value: 'Reviewer' },
+  { label: i18next.t('reportsPage.reportTypes.Author'), value: 'Author' },
+]
+
 const ReportPage = () => {
   const config = useContext(ConfigContext)
 
@@ -147,6 +159,8 @@ const ReportPage = () => {
 
   const [endDate, setEndDate] = useState(getEndOfDay(Date.now()).getTime())
 
+  const [reportType, setReportType] = useState(reportTypes[0].value)
+
   const { data, loading, error } = useQuery(getReportData, {
     variables: {
       startDate,
@@ -168,7 +182,10 @@ const ReportPage = () => {
       getManuscriptsData={() => removeTypeName(data?.manuscriptsActivity)}
       getReviewersData={() => removeTypeName(data?.reviewersActivity)}
       getSummaryData={() => data?.summaryActivity}
+      reportType={reportType}
+      reportTypes={reportTypes}
       setEndDate={setEndDate}
+      setReportType={setReportType}
       setStartDate={setStartDate}
       startDate={startDate}
     />