From d428a6264c7edf44b53e36f26324c84591fed768 Mon Sep 17 00:00:00 2001 From: Ayer <59009@icf.com> Date: Wed, 18 Mar 2026 12:51:08 -0500 Subject: [PATCH 1/3] Modernize Field Explorer Component --- src/components/FieldExplorer.tsx | 40 ++++++++--------------- src/containers/FieldExplorerContainer.tsx | 16 ++++----- src/types/download.types.ts | 16 ++++----- src/types/field_explorer.types.ts | 31 ++++++++++++++++++ src/types/index.ts | 1 + src/types/query.types.ts | 2 ++ 6 files changed, 62 insertions(+), 44 deletions(-) create mode 100644 src/types/field_explorer.types.ts diff --git a/src/components/FieldExplorer.tsx b/src/components/FieldExplorer.tsx index b6c18d310..528d10979 100644 --- a/src/components/FieldExplorer.tsx +++ b/src/components/FieldExplorer.tsx @@ -1,15 +1,15 @@ -import React from 'react' +import React, { useCallback, useMemo, useState } 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 = Object.keys(field) + let field_keys: Array = 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 (
    { - Object.keys(fields).map((v: string, k) => ( + Object?.keys(fields).map((v: string, 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(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,9 +208,9 @@ 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 (
    @@ -232,7 +218,7 @@ const FieldExplorer = (props: tPROPS) => { name="form-field-name" aria-label="form-field-name" value={selectedOption} - options={field_names} + options={fieldNames} onChange={updateField} placeholder="Search the fields" /> diff --git a/src/containers/FieldExplorerContainer.tsx b/src/containers/FieldExplorerContainer.tsx index aea61eb6b..7ab5e1956 100644 --- a/src/containers/FieldExplorerContainer.tsx +++ b/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): ComponentType { 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 ( ; - k: number; - api_path: string; - title: string; - results: Object; - showAllResults: boolean; - toggle: Function; - updated: string; + allPartitions?: Array; + k?: number; + api_path?: string; + title?: string; + results?: Object; + showAllResults?: boolean; + toggle?: Function; + updated?: string; meta?: any }; diff --git a/src/types/field_explorer.types.ts b/src/types/field_explorer.types.ts new file mode 100644 index 000000000..1c0be9683 --- /dev/null +++ b/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 +}; \ No newline at end of file diff --git a/src/types/index.ts b/src/types/index.ts index 02714d91c..ec5cd93e9 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -3,3 +3,4 @@ export * from './endpoint.types'; export * from './sidebar.types'; export * from './content.types'; export * from './download.types'; +export * from './field_explorer.types'; diff --git a/src/types/query.types.ts b/src/types/query.types.ts index 86222043e..6a3ed9412 100644 --- a/src/types/query.types.ts +++ b/src/types/query.types.ts @@ -6,6 +6,8 @@ export type queryTour = { desc: string, title: string, query: string, + noun?: string, + endpoint?: string, params: Array, k: number, closeTour?: () => void, From 1b159249854d1af46ad4caef25f388c06ae24ab1 Mon Sep 17 00:00:00 2001 From: Ayer <59009@icf.com> Date: Wed, 18 Mar 2026 12:53:30 -0500 Subject: [PATCH 2/3] Modernize Disclaimer Component --- src/components/Disclaimer.tsx | 30 +++++++++++--------------- src/containers/DisclaimerContainer.tsx | 13 +++-------- src/types/disclaimer.types.ts | 14 ++++++++++++ src/types/index.ts | 1 + 4 files changed, 31 insertions(+), 27 deletions(-) create mode 100644 src/types/disclaimer.types.ts diff --git a/src/components/Disclaimer.tsx b/src/components/Disclaimer.tsx index d78465220..e785ea16c 100644 --- a/src/components/Disclaimer.tsx +++ b/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 ( {

    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 Terms of Service

    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.

    - +     ) } Disclaimer.displayName = 'components/Disclaimer' export default Disclaimer - diff --git a/src/containers/DisclaimerContainer.tsx b/src/containers/DisclaimerContainer.tsx index 9e43c1a81..171c18fcd 100644 --- a/src/containers/DisclaimerContainer.tsx +++ b/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 { - class HOC extends React.Component { - state: tSTATE; + class HOC extends React.Component { + state: DisclaimerContainerState; constructor(props: HOCProps) { super(props); this.state = { diff --git a/src/types/disclaimer.types.ts b/src/types/disclaimer.types.ts new file mode 100644 index 000000000..889fb3e77 --- /dev/null +++ b/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 +}; \ No newline at end of file diff --git a/src/types/index.ts b/src/types/index.ts index ec5cd93e9..16552e417 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -4,3 +4,4 @@ export * from './sidebar.types'; export * from './content.types'; export * from './download.types'; export * from './field_explorer.types'; +export * from './disclaimer.types'; From d02b7b709e37db9882a68397664c31886ee11fdb Mon Sep 17 00:00:00 2001 From: "violet.wren" Date: Wed, 18 Mar 2026 12:28:50 -0700 Subject: [PATCH 3/3] Removed unused imports --- src/components/FieldExplorer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/FieldExplorer.tsx b/src/components/FieldExplorer.tsx index 528d10979..f123ee940 100644 --- a/src/components/FieldExplorer.tsx +++ b/src/components/FieldExplorer.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useMemo, useState } from 'react' +import React from 'react' import {marked} from 'marked' import Scrollbars from 'react-custom-scrollbars' import Select from 'react-select'