Modernize downloads component

src/components/Downloads.tsx

@@ -4,6 +4,7 @@ import React from 'react'
 import Link from 'gatsby-link'
 import cx from 'classnames'
 import DownloadsContainer from '../containers/DownloadsContainer'
+import type { DownloadProps } from '../types/download.types'
 
 const liCx: string = 'marg-b-1 row col grow-none t-2 d-2'
 const mbCx: string = 'clr-gray inline-block'
@@ -71,18 +72,7 @@ const _renderByYear = (results: any, years: any) => {
   })
 }
 
-type tPROPS = {
-  allPartitions: Array<Object>;
-  k: number;
-  api_path: string;
-  title: string;
-  results: Object;
-  showAllResults: boolean;
-  toggle: Function;
-  updated: string;
-};
-
-const Downloads = (props: tPROPS) => {
+const Downloads = (props: DownloadProps) => {
   const {
     allPartitions,
     k,

src/components/FieldDownload.tsx

@@ -1,103 +1,9 @@
 import React from 'react'
 import '../css/components/FieldDownload.scss'
+import type { DownloadProps } from '../types/download.types'
+import { pdfDownloadMap, xlsxDownloadMap, yamlDownloadMap } from '../constants/file_download'
 
-const pdfDownloadMap: Readonly<Record<string, string>> = Object.freeze({
-  'animalandveterinarydrugevent': '/fields/animalandveterinaryevent_reference.pdf',
-  'foodevent': '/fields/foodevent_reference.pdf',
-  'foodenforcement': '/fields/foodenforcement_reference.pdf',
-  'cosmeticevent': '/fields/cosmeticevent_reference.pdf',
-  'drugevent': '/fields/drugevent_reference.pdf',
-  'druglabel': '/fields/druglabel_reference.pdf',
-  'drugndc': '/fields/drugndc_reference.pdf',
-  'drugenforcement': '/fields/drugenforcement_reference.pdf',
-  'drugsfda': '/fields/drugsfda_reference.pdf',
-  'drugshortages': '/fields/drugshortages_reference.pdf',
-  'deviceevent': '/fields/deviceevent_reference.pdf',
-  'devicerecall': '/fields/devicerecall_reference.pdf',
-  'deviceclass': '/fields/deviceclass_reference.pdf',
-  'devicereglist': '/fields/devicereglist_reference.pdf',
-  'deviceclearance': '/fields/deviceclearance_reference.pdf',
-  'devicepma': '/fields/devicepma_reference.pdf',
-  'deviceudi': '/fields/deviceudi_reference.pdf',
-  'deviceenforcement': '/fields/deviceenforcement_reference.pdf',
-  'covid19serology': '/fields/devicecovid19serology_reference.pdf',
-  'otherhistoricaldocument': '/fields/otherhistoricaldocument_reference.pdf',
-  'othernsde': '/fields/othernsde_reference.pdf',
-  'othersubstance': '/fields/othersubstance_reference.pdf',
-  'tobaccoproblem': '/fields/tobaccoproblem_reference.pdf',
-  'tobaccoresearchpreventionads': '/fields/tobaccotobaccoresearchpreventionads_reference.pdf',
-  'tobaccoresearchdigitalads': '/fields/tobaccotobaccoresearchdigitalads_reference.pdf',
-  'transparencycrl': '/fields/transparencycrl_reference.pdf'
-});
-
-const xlsxDownloadMap: Readonly<Record<string, string>> = Object.freeze({
-  'animalandveterinarydrugevent': '/fields/animalandveterinaryevent_reference.xlsx',
-  'foodevent': '/fields/foodevent_reference.xlsx',
-  'foodenforcement': '/fields/foodenforcement_reference.xlsx',
-  'cosmeticevent': '/fields/cosmeticevent_reference.xlsx',
-  'drugevent': '/fields/drugevent_reference.xlsx',
-  'druglabel': '/fields/druglabel_reference.xlsx',
-  'drugndc': '/fields/drugndc_reference.xlsx',
-  'drugenforcement': '/fields/drugenforcement_reference.xlsx',
-  'drugsfda': '/fields/drugsfda_reference.xlsx',
-  'drugshortages': '/fields/drugshortages_reference.xlsx',
-  'deviceevent': '/fields/deviceevent_reference.xlsx',
-  'devicerecall': '/fields/devicerecall_reference.xlsx',
-  'deviceclass': '/fields/deviceclass_reference.xlsx',
-  'devicereglist': '/fields/devicereglist_reference.xlsx',
-  'deviceclearance': '/fields/deviceclearance_reference.xlsx',
-  'devicepma': '/fields/devicepma_reference.xlsx',
-  'deviceudi': '/fields/deviceudi_reference.xlsx',
-  'deviceenforcement': '/fields/deviceenforcement_reference.xlsx',
-  'covid19serology': '/fields/devicecovid19serology_reference.xlsx',
-  'otherhistoricaldocument': '/fields/otherhistoricaldocument_reference.xlsx',
-  'othernsde': '/fields/othernsde_reference.xlsx',
-  'othersubstance': '/fields/othersubstance_reference.xlsx',
-  'tobaccoproblem': '/fields/tobaccoproblem_reference.xlsx',
-  'tobaccoresearchpreventionads': '/fields/tobaccotobaccoresearchpreventionads_reference.xlsx',
-  'tobaccoresearchdigitalads': '/fields/tobaccotobaccoresearchdigitalads_reference.xlsx',
-  'transparencycrl': '/fields/transparencycrl_reference.xlsx'
-});
-
-const yamlDownloadMap: Readonly<Record<string, string>> = Object.freeze({
-  'animalandveterinarydrugevent': '/fields/animalandveterinaryevent.yaml',
-  'foodevent': '/fields/foodevent.yaml',
-  'foodenforcement': '/fields/foodenforcement.yaml',
-  'cosmeticevent': '/fields/cosmeticevent.yaml',
-  'drugevent': '/fields/drugevent.yaml',
-  'druglabel': '/fields/druglabel.yaml',
-  'drugndc': '/fields/drugndc.yaml',
-  'drugenforcement': '/fields/drugenforcement.yaml',
-  'drugsfda': '/fields/drugsfda.yaml',
-  'drugshortages': '/fields/drugshortages.yaml',
-  'deviceevent': '/fields/deviceevent.yaml',
-  'devicerecall': '/fields/devicerecall.yaml',
-  'deviceclass': '/fields/deviceclass.yaml',
-  'devicereglist': '/fields/devicereglist.yaml',
-  'deviceclearance': '/fields/deviceclearance.yaml',
-  'devicepma': '/fields/devicepma.yaml',
-  'deviceudi': '/fields/deviceudi.yaml',
-  'deviceenforcement': '/fields/deviceenforcement.yaml',
-  'covid19serology': '/fields/devicecovid19serology.yaml',
-  'otherhistoricaldocument': '/fields/otherhistoricaldocument.yaml',
-  'othernsde': '/fields/othernsde.yaml',
-  'othersubstance': '/fields/othersubstance.yaml',
-  'tobaccoproblem': '/fields/tobaccoproblem.yaml',
-  'tobaccoresearchpreventionads': '/fields/tobaccotobaccoresearchpreventionads.yaml',
-  'tobaccoresearchdigitalads': '/fields/tobaccotobaccoresearchdigitalads.yaml',
-  'transparencycrl': '/fields/transparencycrl.yaml'
-});
-
-
-type tPROPS = {
-  k: string | number;
-  meta: {
-    status: string;
-    [key: string]: any;
-  };
-};
-
-const FieldDownload = (props: tPROPS) => {
+const FieldDownload = (props: DownloadProps) => {
   const {
     // key basically. can't pass key as prop
     k,

src/components/SideBar/DownloadsMenu.tsx

@@ -6,6 +6,7 @@ import cx from 'classnames'
 
 import ARIA from '../../constants/aria'
 import RenderContentObject from '../RenderContentObject'
+import type { DownloadsMenuProps } from '../../types/download.types'
 
 /**
  * @description [semantic menu means no links. we don't leave the page]
@@ -26,13 +27,6 @@ const _scrollIntoView = (e: React.MouseEvent<HTMLButtonElement>) => {
   })
 }
 
-interface DownloadsMenuProps {
-  bottomPos: number;
-  content: (string | Object)[];
-  isBottom: boolean;
-  isFixed?: boolean;
-}
-
 const DownloadsMenu = (props: DownloadsMenuProps) => {
   const {
     bottomPos,

src/constants/file_download.ts

@@ -0,0 +1,81 @@
+
+export const pdfDownloadMap: Readonly<Record<string, string>> = Object.freeze({
+  'animalandveterinarydrugevent': '/fields/animalandveterinaryevent_reference.pdf',
+  'foodevent': '/fields/foodevent_reference.pdf',
+  'foodenforcement': '/fields/foodenforcement_reference.pdf',
+  'cosmeticevent': '/fields/cosmeticevent_reference.pdf',
+  'drugevent': '/fields/drugevent_reference.pdf',
+  'druglabel': '/fields/druglabel_reference.pdf',
+  'drugndc': '/fields/drugndc_reference.pdf',
+  'drugenforcement': '/fields/drugenforcement_reference.pdf',
+  'drugsfda': '/fields/drugsfda_reference.pdf',
+  'drugshortages': '/fields/drugshortages_reference.pdf',
+  'deviceevent': '/fields/deviceevent_reference.pdf',
+  'devicerecall': '/fields/devicerecall_reference.pdf',
+  'deviceclass': '/fields/deviceclass_reference.pdf',
+  'devicereglist': '/fields/devicereglist_reference.pdf',
+  'deviceclearance': '/fields/deviceclearance_reference.pdf',
+  'devicepma': '/fields/devicepma_reference.pdf',
+  'deviceudi': '/fields/deviceudi_reference.pdf',
+  'deviceenforcement': '/fields/deviceenforcement_reference.pdf',
+  'covid19serology': '/fields/devicecovid19serology_reference.pdf',
+  'otherhistoricaldocument': '/fields/otherhistoricaldocument_reference.pdf',
+  'othernsde': '/fields/othernsde_reference.pdf',
+  'othersubstance': '/fields/othersubstance_reference.pdf',
+  'tobaccoproblem': '/fields/tobaccoproblem_reference.pdf',
+  'transparencycrl': '/fields/transparencycrl_reference.pdf'
+});
+
+export const xlsxDownloadMap: Readonly<Record<string, string>> = Object.freeze({
+  'animalandveterinarydrugevent': '/fields/animalandveterinaryevent_reference.xlsx',
+  'foodevent': '/fields/foodevent_reference.xlsx',
+  'foodenforcement': '/fields/foodenforcement_reference.xlsx',
+  'cosmeticevent': '/fields/cosmeticevent_reference.xlsx',
+  'drugevent': '/fields/drugevent_reference.xlsx',
+  'druglabel': '/fields/druglabel_reference.xlsx',
+  'drugndc': '/fields/drugndc_reference.xlsx',
+  'drugenforcement': '/fields/drugenforcement_reference.xlsx',
+  'drugsfda': '/fields/drugsfda_reference.xlsx',
+  'drugshortages': '/fields/drugshortages_reference.xlsx',
+  'deviceevent': '/fields/deviceevent_reference.xlsx',
+  'devicerecall': '/fields/devicerecall_reference.xlsx',
+  'deviceclass': '/fields/deviceclass_reference.xlsx',
+  'devicereglist': '/fields/devicereglist_reference.xlsx',
+  'deviceclearance': '/fields/deviceclearance_reference.xlsx',
+  'devicepma': '/fields/devicepma_reference.xlsx',
+  'deviceudi': '/fields/deviceudi_reference.xlsx',
+  'deviceenforcement': '/fields/deviceenforcement_reference.xlsx',
+  'covid19serology': '/fields/devicecovid19serology_reference.xlsx',
+  'otherhistoricaldocument': '/fields/otherhistoricaldocument_reference.xlsx',
+  'othernsde': '/fields/othernsde_reference.xlsx',
+  'othersubstance': '/fields/othersubstance_reference.xlsx',
+  'tobaccoproblem': '/fields/tobaccoproblem_reference.xlsx',
+  'transparencycrl': '/fields/transparencycrl_reference.xlsx'
+});
+
+export const yamlDownloadMap: Readonly<Record<string, string>> = Object.freeze({
+  'animalandveterinarydrugevent': '/fields/animalandveterinaryevent.yaml',
+  'foodevent': '/fields/foodevent.yaml',
+  'foodenforcement': '/fields/foodenforcement.yaml',
+  'cosmeticevent': '/fields/cosmeticevent.yaml',
+  'drugevent': '/fields/drugevent.yaml',
+  'druglabel': '/fields/druglabel.yaml',
+  'drugndc': '/fields/drugndc.yaml',
+  'drugenforcement': '/fields/drugenforcement.yaml',
+  'drugsfda': '/fields/drugsfda.yaml',
+  'drugshortages': '/fields/drugshortages.yaml',
+  'deviceevent': '/fields/deviceevent.yaml',
+  'devicerecall': '/fields/devicerecall.yaml',
+  'deviceclass': '/fields/deviceclass.yaml',
+  'devicereglist': '/fields/devicereglist.yaml',
+  'deviceclearance': '/fields/deviceclearance.yaml',
+  'devicepma': '/fields/devicepma.yaml',
+  'deviceudi': '/fields/deviceudi.yaml',
+  'deviceenforcement': '/fields/deviceenforcement.yaml',
+  'covid19serology': '/fields/devicecovid19serology.yaml',
+  'otherhistoricaldocument': '/fields/otherhistoricaldocument.yaml',
+  'othernsde': '/fields/othernsde.yaml',
+  'othersubstance': '/fields/othersubstance.yaml',
+  'tobaccoproblem': '/fields/tobaccoproblem.yaml',
+  'transparencycrl': '/fields/transparencycrl.yaml'
+});

src/constants/index.ts

@@ -1 +1,2 @@
-export * from './endpoint_box';
+export * from './endpoint_box';
+export * from './file_download';

src/containers/DownloadsContainer.tsx

@@ -4,15 +4,11 @@ import React from 'react'
 import get from 'lodash/get'
 import xhrGET from '../utils/xhr'
 import { API_LINK } from '../constants/api'
+import type { DownloadsContainerState } from '../types/download.types'
 
-type tSTATE = {
-  data: Object | null | undefined;
-  showAllResults: boolean;
-};
-
-const DownloadsContainer = function (ComposedDownloads: ReactClass): ReactClass {
+const DownloadsContainer = function (ComposedDownloads: React.ComponentType<any>): React.ComponentType<any> {
   class HOC extends React.Component {
-    state: tSTATE = {
+    state: DownloadsContainerState = {
       data: null,
       showAllResults: false,
     };
@@ -22,7 +18,7 @@ const DownloadsContainer = function (ComposedDownloads: ReactClass): ReactClass
     }
 
     _fetchDownloads () {
-      const _handleResponse = data => {
+      const _handleResponse = (data: any) => {
 
         this.setState({
           data,
@@ -46,12 +42,12 @@ const DownloadsContainer = function (ComposedDownloads: ReactClass): ReactClass
      * @param {Array<Object>} results [original results array]
      * @returns {Object} [map, where each year is an array]
      */
-    _getResultsByCategory (results: Array<Object>): Object {
+    _getResultsByCategory (results: Array<any>): Object {
       // handle data sorted by years
       // or data sorted by set
       // or data that is just all lumped together for some reason
       const yearRe: RegExp = /(\d{4} )|(All other data)|^(\w|\/)+/
-      const resultsByYear: Object = {}
+      const resultsByYear: { [key: string]: any } = {}
 
       for (const result of results) {
         if (result.size_mb < 0.01) {
@@ -76,7 +72,7 @@ const DownloadsContainer = function (ComposedDownloads: ReactClass): ReactClass
       // drug/event => results.drug.event
       const key: string = `results${api_path.split('/').join('.')}`
       // data = { results: { drug: { event: relevantData } } }
-      const results: Object = get(this.state.data, key)
+      const results: any = get(this.state.data, key)
 
       // some endpoint won't have download data
       if (typeof results !== 'object') return <span />
@@ -85,13 +81,13 @@ const DownloadsContainer = function (ComposedDownloads: ReactClass): ReactClass
       const resultsByCat: Object = this._getResultsByCategory(results.partitions)
       // type so flow knows meta can't be undefined
       // NOT the same as this.props.meta
-      const meta: Object = get(this.state.data, 'meta')
+      const meta: any = get(this.state.data, 'meta') || {}
 
       return (
         <ComposedDownloads
-          k={this.props.k}
+          k={this.props?.k}
           api_path={api_path}
-          title={this.props.meta.title}
+          title={this.props?.meta?.title}
           allPartitions={results.partitions}
           results={resultsByCat}
           showAllResults={this.state.showAllResults}

src/types/download.types.ts

@@ -0,0 +1,65 @@
+
+export type DownloadProps = {
+  allPartitions: Array<Object>;
+  k: number;
+  api_path: string;
+  title: string;
+  results: Object;
+  showAllResults: boolean;
+  toggle: Function;
+  updated: string;
+  meta?: any
+};
+
+export interface DownloadsMenuProps {
+  bottomPos: number;
+  content: (string | Object)[];
+  isBottom: boolean;
+  isFixed?: boolean;
+}
+
+export type DownloadsContainerState = {
+  data: Object | null | undefined;
+  showAllResults: boolean;
+};
+
+
+export interface DownloadResult {
+  size_mb: number;
+  display_name: string;
+  [key: string]: any;
+}
+
+export interface DownloadResults {
+  partitions: Array<DownloadResult>;
+  [key: string]: any;
+}
+
+export interface WithMetaProps {
+  meta: {
+    api_path: string;
+    title: string;
+    [key: string]: any;
+  };
+  k?: any;
+  api_path?: string;
+  title?: string;
+  allPartitions?: Array<DownloadResult>;
+  results?: Record<string, DownloadResult[]>;
+  showAllResults?: boolean;
+  toggle?: () => void;
+  updated?: string;
+}
+
+export interface MetaData {
+  last_updated: string;
+  [key: string]: any;
+}
+
+export type FileDownloadProps = {
+  k: string | number;
+  meta: {
+    status: string;
+    [key: string]: any;
+  };
+};

src/types/index.ts

@@ -1,5 +1,5 @@
 export * from './query.types';
 export * from './endpoint.types';
-
 export * from './sidebar.types';
 export * from './content.types';
+export * from './download.types';