Merge pull request #1071: Reformat TypeScript files

static-site/src/components/ExpandableTiles/index.tsx

@@ -8,14 +8,17 @@ const expandPreviewHeight = 60 //pixels
 const transitionDuration = "0.3s"
 const transitionTimingFunction = "ease"
 
-interface ExpandableTilesProps<AnyTile extends Tile> {
-    tiles: AnyTile[]
-    tileWidth: number
-    tileHeight: number
-    TileComponent: React.FunctionComponent<{ tile: AnyTile }>
-}
-
-export const ExpandableTiles = <AnyTile extends Tile>({tiles, tileWidth, tileHeight, TileComponent}: ExpandableTilesProps<AnyTile>) => {
+export const ExpandableTiles = <AnyTile extends Tile>({
+  tiles,
+  tileWidth,
+  tileHeight,
+  TileComponent,
+}: {
+  tiles: AnyTile[]
+  tileWidth: number
+  tileHeight: number
+  TileComponent: React.FunctionComponent<{ tile: AnyTile }>
+}) => {
 
   const [tilesContainerHeight, setTilesContainerHeight] = useState<number>(0);
   const [isExpanded, setIsExpanded] = useState<boolean>(false);

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!")
 

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)}, [])
 

static-site/src/components/ListResources/ResourceGroup.tsx

@@ -7,17 +7,23 @@ 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<React.SetStateAction<boolean>>
   collapsible: boolean
   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

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<React.Dispatch<React.SetStateAction<readonly FilterOption[]>> | null>(null);
@@ -40,7 +36,9 @@ function ListResources({
   groupDisplayNames,
   tileData,
   resourceListingCallback: resourceListingCallback,
-}: ListResourcesProps) {
+}: ListResourcesResponsiveProps & {
+  elWidth: number
+}) {
   const {groups, dataFetchError} = useDataFetch(
     versioned,
     defaultGroupLinks,
@@ -178,9 +176,9 @@ export default ListResourcesResponsive
 
 function SortOptions({sortMethod, changeSortMethod}: {
   sortMethod: SortMethod,
-  changeSortMethod: React.Dispatch<React.SetStateAction<SortMethod>>
+  changeSortMethod: React.Dispatch<React.SetStateAction<SortMethod>>,
 }) {
-  function onChangeValue(event:FormEvent<HTMLInputElement>): void {
+  function onChangeValue(event: FormEvent<HTMLInputElement>): void {
     changeSortMethod(event.currentTarget.value as SortMethod);
   }
   return (
@@ -208,13 +206,15 @@ function SortOptions({sortMethod, changeSortMethod}: {
   )
 }
 
-interface FilterProps {
+function Filter({
+  options,
+  selectedFilterOptions,
+  setSelectedFilterOptions,
+}: {
   options: FilterOption[]
   selectedFilterOptions: readonly FilterOption[]
   setSelectedFilterOptions: React.Dispatch<React.SetStateAction<readonly FilterOption[]>>
-}
-
-function Filter({options, selectedFilterOptions, setSelectedFilterOptions}: FilterProps) {
+}) {
 
   const onChange = (options: MultiValue<FilterOption>) => {
     if (options) {

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<string, string[]>, pathPrefix: string, versioned: boolean) {
+function partitionByPathogen(
+  pathVersions: Record<string, string[]>,
+  pathPrefix: string,
+  versioned: boolean,
+) {
   return Object.entries(pathVersions).reduce((store: Record<string, Resource[]>, [name, dates]) => {
     const sortedDates = [...dates].sort();
 
@@ -91,7 +95,12 @@ function partitionByPathogen(pathVersions: Record<string, string[]>, pathPrefix:
  * Turn the provided partitions (an object mapping groupName to an array of resources)
  * into an array of groups.
  */
-function groupsFrom(partitions: Record<string, Resource[]>, pathPrefix: string, defaultGroupLinks: boolean, groupDisplayNames: Record<string, string>) {
+function groupsFrom(
+  partitions: Record<string, Resource[]>,
+  pathPrefix: string,
+  defaultGroupLinks: boolean,
+  groupDisplayNames: Record<string, string>,
+) {
   return Object.entries(partitions).map(([groupName, resources]) => {
     const groupInfo: Group = {
       groupName: groupName,