From 7fd86e046328585a22911da3239b24c747924c17 Mon Sep 17 00:00:00 2001 From: Victor Lin <13424970+victorlin@users.noreply.github.com> Date: Thu, 7 Nov 2024 16:48:38 -0800 Subject: [PATCH 1/2] Inline prop types Removes unnecessary intermediate variables. --- .../src/components/ExpandableTiles/index.tsx | 19 ++++++----- .../ListResources/IndividualResource.tsx | 31 +++++++++++------- .../src/components/ListResources/Modal.tsx | 9 +++--- .../ListResources/ResourceGroup.tsx | 32 ++++++++++++------- .../src/components/ListResources/index.tsx | 18 +++++------ 5 files changed, 65 insertions(+), 44 deletions(-) diff --git a/static-site/src/components/ExpandableTiles/index.tsx b/static-site/src/components/ExpandableTiles/index.tsx index d5e56e186..84c580139 100644 --- a/static-site/src/components/ExpandableTiles/index.tsx +++ b/static-site/src/components/ExpandableTiles/index.tsx @@ -8,14 +8,17 @@ const expandPreviewHeight = 60 //pixels const transitionDuration = "0.3s" const transitionTimingFunction = "ease" -interface ExpandableTilesProps { - tiles: AnyTile[] - tileWidth: number - tileHeight: number - TileComponent: React.FunctionComponent<{ tile: AnyTile }> -} - -export const ExpandableTiles = ({tiles, tileWidth, tileHeight, TileComponent}: ExpandableTilesProps) => { +export const ExpandableTiles = ({ + tiles, + tileWidth, + tileHeight, + TileComponent, +}: { + tiles: AnyTile[] + tileWidth: number + tileHeight: number + TileComponent: React.FunctionComponent<{ tile: AnyTile }> +}) => { const [tilesContainerHeight, setTilesContainerHeight] = useState(0); const [isExpanded, setIsExpanded] = useState(false); diff --git a/static-site/src/components/ListResources/IndividualResource.tsx b/static-site/src/components/ListResources/IndividualResource.tsx index 91db2798a..2a1136dd3 100644 --- a/static-site/src/components/ListResources/IndividualResource.tsx +++ b/static-site/src/components/ListResources/IndividualResource.tsx @@ -45,13 +45,15 @@ export const ResourceLink = styled.a` } `; -interface NameProps { +function Name({ + displayName, + href, + topOfColumn, +}: { displayName: ResourceDisplayName href: string topOfColumn: boolean -} - -function Name({displayName, href, topOfColumn}: NameProps) { +}) { const [hovered, setHovered] = useState(false); return ( @@ -88,15 +90,19 @@ export function TooltipWrapper({description, children}) { ) } -interface IconContainerProps { +export function IconContainer({ + Icon, + text, + handleClick, + color, + hoverColor, +}: { Icon: IconType text: string handleClick?: () => void color?: string hoverColor?: string -} - -export function IconContainer({Icon, text, handleClick, color, hoverColor}: IconContainerProps) { +}) { const [hovered, setHovered] = useState(false); const defaultColor = '#aaa'; const defaultHoverColor = "rgb(79, 75, 80)"; @@ -115,12 +121,13 @@ export function IconContainer({Icon, text, handleClick, color, hoverColor}: Icon } -interface IndividualResourceProps { +export const IndividualResource = ({ + resource, + isMobile, +}: { resource: Resource isMobile: boolean -} - -export const IndividualResource = ({resource, isMobile}: IndividualResourceProps) => { +}) => { const setModalResource = useContext(SetModalResourceContext); if (!setModalResource) throw new Error("Context not provided!") diff --git a/static-site/src/components/ListResources/Modal.tsx b/static-site/src/components/ListResources/Modal.tsx index c7831731c..585b84515 100644 --- a/static-site/src/components/ListResources/Modal.tsx +++ b/static-site/src/components/ListResources/Modal.tsx @@ -12,12 +12,13 @@ export const RAINBOW20 = ["#511EA8", "#4432BD", "#3F4BCA", "#4065CF", "#447ECC const lightGrey = 'rgba(0,0,0,0.1)'; -interface ResourceModalProps { +export const ResourceModal = ({ + resource, + dismissModal, +}: { resource?: Resource dismissModal: () => void -} - -export const ResourceModal = ({resource, dismissModal}: ResourceModalProps) => { +}) => { const [ref, setRef] = useState(null); const handleRef = useCallback((node) => {setRef(node)}, []) diff --git a/static-site/src/components/ListResources/ResourceGroup.tsx b/static-site/src/components/ListResources/ResourceGroup.tsx index b0a801af4..f44438e43 100644 --- a/static-site/src/components/ListResources/ResourceGroup.tsx +++ b/static-site/src/components/ListResources/ResourceGroup.tsx @@ -7,7 +7,15 @@ import { IndividualResource, getMaxResourceWidth, TooltipWrapper, IconContainer, import { SetModalResourceContext } from "./Modal"; import { Group, QuickLink, Resource } from './types'; -interface ResourceGroupHeaderProps { +const ResourceGroupHeader = ({ + group, + isMobile, + setCollapsed, + collapsible, + isCollapsed, + resourcesToShowWhenCollapsed, + quickLinks, +}: { group: Group isMobile: boolean setCollapsed: React.Dispatch> @@ -15,9 +23,7 @@ interface ResourceGroupHeaderProps { isCollapsed: boolean resourcesToShowWhenCollapsed: number quickLinks: QuickLink[] -} - -const ResourceGroupHeader = ({group, isMobile, setCollapsed, collapsible, isCollapsed, resourcesToShowWhenCollapsed, quickLinks}: ResourceGroupHeaderProps) => { +}) => { const setModalResource = useContext(SetModalResourceContext); if (!setModalResource) throw new Error("Context not provided!") @@ -112,18 +118,22 @@ const ResourceGroupHeader = ({group, isMobile, setCollapsed, collapsible, isColl ) } -interface ResourceGroupProps { +/** + * Displays a single resource group (e.g. a single pathogen) + */ +export const ResourceGroup = ({ + group, + elWidth, + numGroups, + sortMethod, + quickLinks, +}: { group: Group elWidth: number numGroups: number sortMethod: string quickLinks: QuickLink[] -} - -/** - * Displays a single resource group (e.g. a single pathogen) - */ -export const ResourceGroup = ({group, elWidth, numGroups, sortMethod, quickLinks}: ResourceGroupProps) => { +}) => { const {collapseThreshold, resourcesToShowWhenCollapsed} = collapseThresolds(numGroups); const collapsible = group.resources.length > collapseThreshold; const [isCollapsed, setCollapsed] = useState(collapsible); // if it is collapsible, start collapsed diff --git a/static-site/src/components/ListResources/index.tsx b/static-site/src/components/ListResources/index.tsx index 5d219b1c9..b8a6a6c1a 100644 --- a/static-site/src/components/ListResources/index.tsx +++ b/static-site/src/components/ListResources/index.tsx @@ -15,10 +15,6 @@ import { ExpandableTiles } from "../ExpandableTiles"; import { FilterTile, FilterOption, Group, QuickLink, Resource, ResourceListingInfo, SortMethod } from './types'; import { HugeSpacer } from "../../layouts/generalComponents"; -interface ListResourcesProps extends ListResourcesResponsiveProps { - elWidth: number -} - const LIST_ANCHOR = "list"; const SetSelectedFilterOptions = createContext> | null>(null); @@ -40,7 +36,9 @@ function ListResources({ groupDisplayNames, tileData, resourceListingCallback: resourceListingCallback, -}: ListResourcesProps) { +}: ListResourcesResponsiveProps & { + elWidth: number +}) { const {groups, dataFetchError} = useDataFetch( versioned, defaultGroupLinks, @@ -208,13 +206,15 @@ function SortOptions({sortMethod, changeSortMethod}: { ) } -interface FilterProps { +function Filter({ + options, + selectedFilterOptions, + setSelectedFilterOptions, +}: { options: FilterOption[] selectedFilterOptions: readonly FilterOption[] setSelectedFilterOptions: React.Dispatch> -} - -function Filter({options, selectedFilterOptions, setSelectedFilterOptions}: FilterProps) { +}) { const onChange = (options: MultiValue) => { if (options) { From 13d17d9ca0567cc3492722bc1e26d3168fe52721 Mon Sep 17 00:00:00 2001 From: Victor Lin <13424970+victorlin@users.noreply.github.com> Date: Tue, 12 Nov 2024 17:29:11 -0800 Subject: [PATCH 2/2] Other formatting improvements Apply formatting used elsewhere for consistency and readability. --- static-site/src/components/ListResources/index.tsx | 4 ++-- .../src/components/ListResources/useDataFetch.ts | 13 +++++++++++-- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/static-site/src/components/ListResources/index.tsx b/static-site/src/components/ListResources/index.tsx index b8a6a6c1a..da3e0f86a 100644 --- a/static-site/src/components/ListResources/index.tsx +++ b/static-site/src/components/ListResources/index.tsx @@ -176,9 +176,9 @@ export default ListResourcesResponsive function SortOptions({sortMethod, changeSortMethod}: { sortMethod: SortMethod, - changeSortMethod: React.Dispatch> + changeSortMethod: React.Dispatch>, }) { - function onChangeValue(event:FormEvent): void { + function onChangeValue(event: FormEvent): void { changeSortMethod(event.currentTarget.value as SortMethod); } return ( diff --git a/static-site/src/components/ListResources/useDataFetch.ts b/static-site/src/components/ListResources/useDataFetch.ts index d8c0e7bb2..270f7c81e 100644 --- a/static-site/src/components/ListResources/useDataFetch.ts +++ b/static-site/src/components/ListResources/useDataFetch.ts @@ -56,7 +56,11 @@ export function useDataFetch( * representing group names (pathogen names) and values which are arrays of * resource objects. */ -function partitionByPathogen(pathVersions: Record, pathPrefix: string, versioned: boolean) { +function partitionByPathogen( + pathVersions: Record, + pathPrefix: string, + versioned: boolean, +) { return Object.entries(pathVersions).reduce((store: Record, [name, dates]) => { const sortedDates = [...dates].sort(); @@ -91,7 +95,12 @@ function partitionByPathogen(pathVersions: Record, pathPrefix: * Turn the provided partitions (an object mapping groupName to an array of resources) * into an array of groups. */ -function groupsFrom(partitions: Record, pathPrefix: string, defaultGroupLinks: boolean, groupDisplayNames: Record) { +function groupsFrom( + partitions: Record, + pathPrefix: string, + defaultGroupLinks: boolean, + groupDisplayNames: Record, +) { return Object.entries(partitions).map(([groupName, resources]) => { const groupInfo: Group = { groupName: groupName,