Modernize components

src/components/Disclaimer.tsx

@@ -5,12 +5,10 @@ import React from 'react'
 import ReactModal from 'react-modal'
 import Link from 'gatsby-link'
 import '../css/components/Disclaimer.scss'
+import { DisclaimerProps } from '../types'
 
-type tPROPS = {
-  showModal: boolean,
-  setIsModal: (val: boolean) => void;
-  validated: boolean
-};
+const modalLabel = 'Disclaimer Modal'
+const overlayClassName = 'modal-overlay'
 
 /**
  * @description [renders meta data (yaml usually) as the hero el below breadcrumbs]
@@ -21,7 +19,7 @@ type tPROPS = {
  * @param {string} type [endpoint or not, used for styling and tabs]
  * @return {React.Element}
  */
-const Disclaimer = (props: tPROPS) => {
+const Disclaimer = (props: DisclaimerProps) => {
   const {
     showModal,
     setIsModal
@@ -35,15 +33,18 @@ const Disclaimer = (props: tPROPS) => {
       return () => clearTimeout(forceUpdate);
   }}, [showModal]);
 
-
+  const handleAccept = () => {
+    setIsModal(false)
+    sessionStorage.setItem('hasSeenDisclaimer', 'true')
+    sessionStorage.setItem('validated', 'true')
+  }
+
   return (
     <ReactModal
       isOpen={showModal}
       className='modal-container'
-      overlayClassName='modal-overlay'
-      contentLabel='Disclaimer Modal'
-      // shouldCloseOnOverlayClick={false}
-      // shouldReturnFocusAfterClose={false}
+      overlayClassName={overlayClassName}
+      contentLabel={modalLabel}
       shouldFocusAfterRender={true}
       ariaHideApp={false}
       shouldCloseOnEsc={false}
@@ -54,15 +55,10 @@ const Disclaimer = (props: tPROPS) => {
         <p>Do not rely on openFDA to make decisions regarding medical care. Always speak to your health provider about the risks and benefits of FDA-regulated products.  We may limit or otherwise restrict your access to the API in line with our <Link className='underline' to='/terms/'> Terms of Service</Link></p>
         <p>This warning banner provides privacy and security notices consistent with applicable federal laws, directives, and other federal guidance for accessing this Government system, which includes all devices/storage media attached to this system. This system is provided for Government-authorized use only. Unauthorized or improper use of this system is prohibited and may result in disciplinary action and/or civil and criminal penalties. At any time, and for any lawful Government purpose, the government may monitor, record, and audit your system usage and/or intercept, search and seize any communication or data transiting or stored on this system. Therefore, you have no reasonable expectation of privacy. Any communication or data transiting or stored on this system may be disclosed or used for any lawful Government purpose.</p>
       </div>
-      <button className='button bg-primary clr-white' onClick={() => {
-        setIsModal(false)
-        sessionStorage.setItem('hasSeenDisclaimer', 'true')
-        sessionStorage.setItem('validated', 'true')
-      }}>ACCEPT</button>
+      <button className='button bg-primary clr-white' onClick={handleAccept}>ACCEPT</button>
     </ReactModal>
   )
 }
 
 Disclaimer.displayName = 'components/Disclaimer'
 export default Disclaimer
-

src/components/FieldExplorer.tsx

@@ -2,14 +2,14 @@ import React from 'react'
 import {marked} from 'marked'
 import Scrollbars from 'react-custom-scrollbars'
 import Select from 'react-select'
-//import 'react-select/dist/react-select.css'
 import Values from './RenderContentObject/Values'
 import yamlGet from '../utils/yamlGet'
 import FieldDownload from './FieldDownload'
 import FieldExplorerContainer from '../containers/FieldExplorerContainer'
 import '../css/components/FieldExplorer.scss'
+import type { fieldExplorerProps, FieldExplorerContainerProps, fieldExplorerRenderObjectProps, FieldOption } from '../types'
 
-const _renderLi = (props: { field: any; updateSelected: any; key: any; i: any; isFDA: any }) => {
+const _renderLi = (props: FieldExplorerContainerProps) => {
   const {
     field,
     updateSelected,
@@ -31,7 +31,9 @@ const _renderLi = (props: { field: any; updateSelected: any; key: any; i: any; i
   // whether field has .exact
   let isExact: boolean = false
   // keys in the selected field
-  let field_keys: Array<any> = Object.keys(field)
+  let field_keys: Array<any> = field ? Object.keys(field) : []
+
+  const divCx: string = 'col t-range-marg-t-2 marg-b-2 t-range-6'
 
   if (field) {
     desc = field.description
@@ -50,7 +52,6 @@ const _renderLi = (props: { field: any; updateSelected: any; key: any; i: any; i
     type2 = field.items.type
   }
 
-
   if (field_keys.indexOf("type") === -1 || typeof field.type !== "string") {
     return (
       render_object({
@@ -62,8 +63,6 @@ const _renderLi = (props: { field: any; updateSelected: any; key: any; i: any; i
     )
   }
 
-  const divCx: string = 'col t-range-marg-t-2 marg-b-2 t-range-6'
-
   return (
     <div
       className='flex-box flex-wrap dir-column pad-2 b-t-light-1'
@@ -139,7 +138,7 @@ const _renderLi = (props: { field: any; updateSelected: any; key: any; i: any; i
   )
 }
 
-function render_object(props: { fields: any; updateSelected: any; selectedField: any; i: any }) {
+function render_object(props: fieldExplorerRenderObjectProps) {
   const {
     fields,
     selectedField,
@@ -151,7 +150,7 @@ function render_object(props: { fields: any; updateSelected: any; selectedField:
     <div className='row marg-t-2' key={i}>
       <ul className='field-list flex-box dir-column flex-wrap marg-l-2 marg-r-2'>
         {
-          Object.keys(fields).map((v: string, k) => (
+          Object?.keys(fields).map((v: string, k) => (
             <li
               className="field-list-item"
               key={k}>
@@ -173,8 +172,6 @@ function render_object(props: { fields: any; updateSelected: any; selectedField:
   )
 }
 
-type FieldOption = { label: string; value: string };
-
 function get_fields(fields: { [x: string]: any }, prefix?: string): FieldOption[] {
   return Object.keys(fields).reduce<FieldOption[]>(function(acc, key){
     let value = fields[key];
@@ -191,16 +188,6 @@ function get_fields(fields: { [x: string]: any }, prefix?: string): FieldOption[
   }, []);
 }
 
-import { ActionMeta, SingleValue } from 'react-select';
-
-type tPROPS = {
-  k: number;
-  fields: { properties: any };
-  meta: { status: string; [key: string]: any };
-  selectedField: string;
-  updateField: (newValue: SingleValue<{ label: string; value: string }>, actionMeta: ActionMeta<{ label: string; value: string }>) => void;
-  updateSelected: Function;
-};
 
 // called by Content
 // normally _content.yaml contains string content that
@@ -210,10 +197,9 @@ type tPROPS = {
 // sometimes though we have object in _content, usually
 // for api examples or for rendering out fields for an
 // endpoint. this component handles rendering the objects
-const FieldExplorer = (props: tPROPS) => {
+const FieldExplorer = (props: fieldExplorerProps) => {
   const {
-    // key basically. can't pass key as prop
-    k,
+    k, // key basically. can't pass key as prop
     // big pre blocks (code examples) on some pages
     fields,
     meta,
@@ -222,17 +208,17 @@ const FieldExplorer = (props: tPROPS) => {
     updateSelected
   } = props
 
-  let field_names = get_fields(fields.properties)
+  let fieldNames = get_fields(fields.properties)
   // Find the selected option object based on selectedField string
-  const selectedOption = field_names.find(opt => opt.value === selectedField) || null;
+  const selectedOption = fieldNames.find(opt => opt.value === selectedField) || null;
 
   return (
     <section key={k} className="field-explorer">
       <Select
         name="form-field-name"
         aria-label="form-field-name"
         value={selectedOption}
-        options={field_names}
+        options={fieldNames}
         onChange={updateField}
         placeholder="Search the fields"
       />

src/containers/DisclaimerContainer.tsx

@@ -2,19 +2,12 @@
 /* @flow */
 
 import React from 'react'
-
-type tSTATE = {
-  showModal: boolean;
-};
-
-type HOCProps = {
-  validated: boolean;
-};
+import { DisclaimerContainerState, HOCProps } from '../types'
 
 const DisclaimerContainer = function (ComposedDisclaimer: React.ComponentType<{ showModal: boolean; setIsModal: (val: boolean) => void; validated: boolean }>): React.ComponentType<HOCProps> {
 
-  class HOC extends React.Component<HOCProps, tSTATE> {
-    state: tSTATE;
+  class HOC extends React.Component<HOCProps, DisclaimerContainerState> {
+    state: DisclaimerContainerState;
     constructor(props: HOCProps) {
       super(props);
       this.state = {

src/containers/FieldExplorerContainer.tsx

@@ -1,18 +1,16 @@
 /* @flow */
 
 import React from 'react'
+import type { fieldExplorerContainerState } from '../types'
+import type { ComponentType } from 'react'
 
-type tSTATE = {
-  selectedField: string
-};
-
-const FieldExplorerContainer = function (ComposedFieldExplorer: ReactClass): ReactClass {
+const FieldExplorerContainer = function (ComposedFieldExplorer: ComponentType<any>): ComponentType<any> {
   class HOC extends React.Component {
-    state: tSTATE = {
+    state: fieldExplorerContainerState = {
       selectedField: 'fields'
     };
 
-    _updateField (val) {
+    _updateField (val: any) {
       if (val !== 'fields') {
         this.setState({
           selectedField: val.value,
@@ -25,7 +23,7 @@ const FieldExplorerContainer = function (ComposedFieldExplorer: ReactClass): Rea
       )
     }
 
-    _updateSelected (e) {
+    _updateSelected (e: any) {
       const title = e.target.getAttribute('title')
       if (this.state.selectedField !== title) {
         this.setState({
@@ -34,7 +32,7 @@ const FieldExplorerContainer = function (ComposedFieldExplorer: ReactClass): Rea
       }
     }
 
-    render (): React.Element {
+    render () {
       return (
         <ComposedFieldExplorer
           {...this.props}

src/types/disclaimer.types.ts

@@ -0,0 +1,14 @@
+
+export type DisclaimerContainerState = {
+  showModal: boolean;
+};
+
+export type HOCProps = {
+  validated: boolean;
+};
+
+export type DisclaimerProps = {
+  showModal: boolean,
+  setIsModal: (val: boolean) => void;
+  validated: boolean
+};

src/types/download.types.ts

@@ -1,13 +1,13 @@
 
 export type DownloadProps = {
-  allPartitions: Array<Object>;
-  k: number;
-  api_path: string;
-  title: string;
-  results: Object;
-  showAllResults: boolean;
-  toggle: Function;
-  updated: string;
+  allPartitions?: Array<Object>;
+  k?: number;
+  api_path?: string;
+  title?: string;
+  results?: Object;
+  showAllResults?: boolean;
+  toggle?: Function;
+  updated?: string;
   meta?: any
 };
 

src/types/field_explorer.types.ts

@@ -0,0 +1,31 @@
+import { ActionMeta, SingleValue } from 'react-select';
+
+export type fieldExplorerProps = {
+  k: number;
+  fields: { properties: any };
+  meta: { status: string; [key: string]: any };
+  selectedField: string;
+  updateField: (newValue: SingleValue<{ label: string; value: string }>, actionMeta: ActionMeta<{ label: string; value: string }>) => void;
+  updateSelected: Function;
+};
+
+export type FieldExplorerContainerProps = {
+  key: any;
+  field: any;
+  updateSelected: any;
+  i: any;
+  isFDA: any;
+};
+
+export type fieldExplorerRenderObjectProps = {
+  fields: any;
+  updateSelected: any;
+  selectedField: any;
+  i: any;
+};
+
+export type FieldOption = { label: string; value: string };
+
+export type fieldExplorerContainerState = {
+  selectedField: string
+};

src/types/index.ts

@@ -3,3 +3,5 @@ export * from './endpoint.types';
 export * from './sidebar.types';
 export * from './content.types';
 export * from './download.types';
+export * from './field_explorer.types';
+export * from './disclaimer.types';

src/types/query.types.ts

@@ -6,6 +6,8 @@ export type queryTour = {
   desc: string,
   title: string,
   query: string,
+  noun?: string,
+  endpoint?: string,
   params: Array<string>,
   k: number,
   closeTour?: () => void,