Claude/convert web-common to typescript [Claude Code Web]

packages/libs/web-common/src/App/Categories/CategoryIcon.jsx → packages/libs/web-common/src/App/Categories/CategoryIcon.tsx

@@ -6,13 +6,19 @@ import { Tooltip } from '@veupathdb/coreui';
 
 import { getCategoryColor } from './CategoryUtils';
 
-class CategoryIcon extends React.Component {
+interface CategoryIconProps {
+  category?: string;
+}
+
+class CategoryIcon extends React.Component<CategoryIconProps> {
   render() {
     const { category } = this.props;
     if (!category || category === 'Unknown') return null;
     const categoryName = capitalize(category);
     const categoryColor = getCategoryColor(category);
-    const categoryStyle = { backgroundColor: categoryColor };
+    const categoryStyle = categoryColor
+      ? { backgroundColor: categoryColor }
+      : undefined;
 
     return (
       <div style={{ position: 'relative' }}>

packages/libs/web-common/src/App/Categories/CategoryUtils.js → packages/libs/web-common/src/App/Categories/CategoryUtils.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-export function getCategoryColor(category) {
+export function getCategoryColor(category: string | null | undefined): string | null {
   if (!category) return null;
   switch (category.toLowerCase()) {
     // This contains a mix of disease variables from https://webprotege.stanford.edu/#projects/719dd1bd-ffbb-4c15-99cc-050a233977ee/edit/Classes?selection=Class(%3Chttp://purl.obolibrary.org/obo/DOID_4%3E),
@@ -37,7 +37,7 @@ export function getCategoryColor(category) {
   }
 }
 
-export function getCategoryName(category = '') {
+export function getCategoryName(category = ''): JSX.Element {
   switch (category.toLowerCase()) {
     case 'malarial':
     case 'malaria':

packages/libs/web-common/src/App/Header/Header.jsx → packages/libs/web-common/src/App/Header/Header.tsx

@@ -11,8 +11,38 @@ import './Header.scss';
 
 import HeaderNav from './HeaderNav';
 
+interface HeaderOwnProps {
+  getSiteData: (state: any) => any;
+  makeHeaderMenuItems: (state: any, props: any) => any;
+  heroImageUrl: string;
+  heroImagePosition: string;
+  titleWithoutDB: string;
+  subTitle: string;
+  tagline: string;
+  logoUrl: string;
+}
+
+interface HeaderStateProps {
+  user: any;
+  config: any;
+  siteConfig: any;
+  preferences: any;
+  siteData: any;
+  dataRestriction: any;
+  headerMenuItems: any;
+}
+
+interface HeaderDispatchProps {
+  actions: typeof UserActions &
+    typeof UserSessionActions & {
+      requestStudies: typeof requestStudies;
+    };
+}
+
+type HeaderProps = HeaderOwnProps & HeaderStateProps & HeaderDispatchProps;
+
 const enhance = connect(
-  (state, props) => {
+  (state: any, props: HeaderOwnProps) => {
     const { getSiteData, makeHeaderMenuItems } = props;
     const headerMenuItems = makeHeaderMenuItems(state, props);
     const siteData = getSiteData(state);
@@ -29,12 +59,12 @@ const enhance = connect(
     };
   },
   { ...UserActions, ...UserSessionActions, requestStudies },
-  (stateProps, actions, ownProps) => {
+  (stateProps: any, actions: any, ownProps: any) => {
     return { ...stateProps, ...ownProps, actions };
   }
 );
 
-class Header extends React.Component {
+class Header extends React.Component<HeaderProps> {
   componentDidMount() {
     this.props.actions.requestStudies();
   }

packages/libs/web-common/src/App/Header/HeaderNav.jsx → packages/libs/web-common/src/App/Header/HeaderNav.tsx

@@ -13,8 +13,48 @@ import { SiteSearchInput } from '../../components';
 
 import './HeaderNav.scss';
 
-class HeaderNav extends React.Component {
-  constructor(props) {
+interface MenuItem {
+  type?: string;
+  url?: string;
+  name?: string;
+  text?: string;
+}
+
+interface HeaderMenuItems {
+  mainMenu: any[];
+  iconMenu: MenuItem[];
+}
+
+interface HeaderNavProps {
+  headerMenuItems: HeaderMenuItems;
+  config?: {
+    buildNumber?: string;
+    releaseDate?: string;
+  };
+  siteConfig: {
+    webAppUrl: string;
+    rootUrl: string;
+  };
+  siteData?: any;
+  user?: {
+    isGuest: boolean;
+  };
+  actions: any;
+  titleWithoutDB: string;
+  subTitle: string;
+  logoUrl: string;
+  heroImageUrl: string;
+  tagline: string;
+}
+
+interface HeaderNavState {
+  stickyHeaderVisible: boolean;
+}
+
+class HeaderNav extends React.Component<HeaderNavProps, HeaderNavState> {
+  private scrollListener: any;
+
+  constructor(props: HeaderNavProps) {
     super(props);
     this.state = { stickyHeaderVisible: false };
 
@@ -107,7 +147,7 @@ class HeaderNav extends React.Component {
     );
   }
 
-  renderBranding({ config = {}, titleWithoutDB, subTitle, logoUrl }) {
+  renderBranding({ config = {}, titleWithoutDB, subTitle, logoUrl }: any) {
     const { buildNumber, releaseDate } = config;
 
     return (
@@ -129,7 +169,7 @@ class HeaderNav extends React.Component {
     );
   }
 
-  getIconByType(type = '') {
+  getIconByType(type: string = '') {
     if (typeof type !== 'string' || !type.length) return 'globe';
     switch (type.toLowerCase()) {
       case 'facebook':
@@ -152,7 +192,7 @@ class HeaderNav extends React.Component {
     }
   }
 
-  renderIconMenuItem({ type, url = '', name, text }) {
+  renderIconMenuItem({ type, url = '', name, text }: MenuItem) {
     const icon = this.getIconByType(type);
     return (
       <a
@@ -167,7 +207,7 @@ class HeaderNav extends React.Component {
     );
   }
 
-  renderIconMenu({ items }) {
+  renderIconMenu({ items }: { items: MenuItem[] }) {
     const IconMenuItem = this.renderIconMenuItem;
     return (
       <div className="row HeaderNav-Social nowrap">

packages/libs/web-common/src/App/Hero/Hero.jsx → packages/libs/web-common/src/App/Hero/Hero.tsx

@@ -2,11 +2,13 @@ import React from 'react';
 
 import './Hero.scss';
 
-class Hero extends React.Component {
-  constructor(props) {
-    super(props);
-  }
+interface HeroProps {
+  image: string;
+  position?: string;
+  children?: React.ReactNode;
+}
 
+class Hero extends React.Component<HeroProps> {
   render() {
     const { image, position, children } = this.props;
     return (

packages/libs/web-common/src/App/Home/Home.jsx → packages/libs/web-common/src/App/Home/Home.tsx

@@ -8,6 +8,25 @@ import { News } from '../../App/NewsSidebar';
 
 import './HomePage.scss';
 
+interface HomePageProps {
+  newsSidebar: {
+    news?: {
+      records: any[];
+    };
+    error?: boolean;
+  };
+  twitterUrl: string;
+  webAppUrl: string;
+  projectId: string;
+  siteData: {
+    studies: {
+      entities: any[];
+    };
+  };
+  attemptAction?: (action: any) => void;
+  homeContent: any[];
+}
+
 export default function HomePage({
   newsSidebar,
   twitterUrl,
@@ -16,7 +35,7 @@ export default function HomePage({
   siteData,
   attemptAction,
   homeContent,
-}) {
+}: HomePageProps) {
   const { wdkService } = useContext(WdkDependenciesContext);
   const analysisClient = useMemo(
     () =>

packages/libs/web-common/src/App/ImageCard/ImageCard.jsx → packages/libs/web-common/src/App/ImageCard/ImageCard.tsx

@@ -4,11 +4,21 @@ import './ImageCard.scss';
 
 import { IconAlt as Icon } from '@veupathdb/wdk-client/lib/Components';
 
-class ImageCard extends React.Component {
-  constructor(props) {
-    super(props);
-  }
+interface ImageCardProps {
+  card: {
+    appImage?: string;
+    image?: string;
+    appUrl?: string;
+    url?: string;
+    title: string;
+    description: string;
+    linkText: string;
+    linkTarget?: string;
+  };
+  prefix?: string;
+}
 
+class ImageCard extends React.Component<ImageCardProps> {
   render() {
     const { card, prefix = '' } = this.props;
     const {

packages/libs/web-common/src/App/Modal/Modal.jsx → packages/libs/web-common/src/App/Modal/Modal.tsx

@@ -4,7 +4,12 @@ import { useBodyScrollManager } from '@veupathdb/wdk-client/lib/Components/Overl
 
 import './Modal.scss';
 
-function Modal(props) {
+interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
+  when?: boolean;
+  wrapperClassName?: string;
+}
+
+function Modal(props: ModalProps) {
   const { when, wrapperClassName, ...divProps } = props;
   const active = typeof when === 'undefined' ? true : when;
   const finalWrapperClassName =

packages/libs/web-common/src/App/NewsSidebar/News.jsx → packages/libs/web-common/src/App/NewsSidebar/News.tsx

@@ -24,7 +24,24 @@ function useNewsUrl() {
   return `${STATIC_ROUTE_PATH}/${(config || {}).displayName}/news.html`;
 }
 
-const News = ({ twitterUrls, news, error }) => {
+interface NewsRecord {
+  attributes: {
+    date: string;
+    tag: string;
+    headline: string;
+    item: string;
+  };
+}
+
+interface NewsProps {
+  twitterUrls: string[];
+  news?: {
+    records: NewsRecord[];
+  };
+  error?: boolean;
+}
+
+const News: React.FC<NewsProps> = ({ twitterUrls, news, error }) => {
   const newsUrl = useNewsUrl();
 
   return (