Convert a few files into TypeScript

app/soapbox/components/hashtag.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
 import { FormattedMessage } from 'react-intl';
 import { useSelector } from 'react-redux';
 import { Sparklines, SparklinesCurve } from 'react-sparklines';
@@ -11,7 +10,13 @@ import { shortNumberFormat } from '../utils/numbers';
 import Permalink from './permalink';
 import { HStack, Stack, Text } from './ui';
 
-const Hashtag = ({ hashtag }) => {
+import type { Map as ImmutableMap } from 'immutable';
+
+interface IHashtag {
+  hashtag: ImmutableMap<string, any>,
+}
+
+const Hashtag: React.FC<IHashtag> = ({ hashtag }) => {
   const count = Number(hashtag.getIn(['history', 0, 'accounts']));
   const brandColor = useSelector((state) => getSoapboxConfig(state).get('brandColor'));
 
@@ -41,7 +46,7 @@ const Hashtag = ({ hashtag }) => {
           <Sparklines
             width={40}
             height={28}
-            data={hashtag.get('history').reverse().map(day => day.get('uses')).toArray()}
+            data={hashtag.get('history').reverse().map((day: ImmutableMap<string, any>) => day.get('uses')).toArray()}
           >
             <SparklinesCurve style={{ fill: 'none' }} color={brandColor} />
           </Sparklines>
@@ -51,8 +56,4 @@ const Hashtag = ({ hashtag }) => {
   );
 };
 
-Hashtag.propTypes = {
-  hashtag: ImmutablePropTypes.map.isRequired,
-};
-
 export default Hashtag;

app/soapbox/components/hover_ref_wrapper.tsx

@@ -1,5 +1,4 @@
 import { debounce } from 'lodash';
-import PropTypes from 'prop-types';
 import React, { useRef } from 'react';
 import { useDispatch } from 'react-redux';
 
@@ -13,10 +12,16 @@ const showProfileHoverCard = debounce((dispatch, ref, accountId) => {
   dispatch(openProfileHoverCard(ref, accountId));
 }, 600);
 
-export const HoverRefWrapper = ({ accountId, children, inline }) => {
+interface IHoverRefWrapper {
+  accountId: string,
+  inline: boolean,
+}
+
+/** Makes a profile hover card appear when the wrapped element is hovered. */
+export const HoverRefWrapper: React.FC<IHoverRefWrapper> = ({ accountId, children, inline = false }) => {
   const dispatch = useDispatch();
-  const ref = useRef();
+  const ref = useRef<HTMLElement>();
-  const Elem = inline ? 'span' : 'div';
+  const Elem: keyof JSX.IntrinsicElements = inline ? 'span' : 'div';
 
   const handleMouseEnter = () => {
     if (!isMobile(window.innerWidth)) {
@@ -36,6 +41,7 @@ export const HoverRefWrapper = ({ accountId, children, inline }) => {
 
   return (
     <Elem
+      // @ts-ignore: not sure how to fix :\
       ref={ref}
       className='hover-ref-wrapper'
       onMouseEnter={handleMouseEnter}
@@ -47,14 +53,4 @@ export const HoverRefWrapper = ({ accountId, children, inline }) => {
   );
 };
 
-HoverRefWrapper.propTypes = {
-  accountId: PropTypes.string,
-  children: PropTypes.node,
-  inline: PropTypes.bool,
-};
-
-HoverRefWrapper.defaultProps = {
-  inline: false,
-};
-
 export { HoverRefWrapper as default, showProfileHoverCard };

app/soapbox/components/list.tsx

@@ -1,19 +1,20 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import * as React from 'react';
 import { v4 as uuidv4 } from 'uuid';
 
 import Icon from './icon';
 
-const List = ({ children }) => (
+const List: React.FC = ({ children }) => (
   <div className='space-y-0.5'>{children}</div>
 );
 
-List.propTypes = {
+interface IListItem {
-  children: PropTypes.node,
+  label: React.ReactNode,
-};
+  hint?: React.ReactNode,
+  onClick?: () => void,
+}
 
-const ListItem = ({ label, hint, children, onClick }) => {
+const ListItem: React.FC<IListItem> = ({ label, hint, children, onClick }) => {
   const id = uuidv4();
   const domId = `list-group-${id}`;
 
@@ -60,11 +61,4 @@ const ListItem = ({ label, hint, children, onClick }) => {
   );
 };
 
-ListItem.propTypes = {
-  label: PropTypes.node.isRequired,
-  hint: PropTypes.node,
-  children: PropTypes.node,
-  onClick: PropTypes.func,
-};
-
 export { List as default, ListItem };

package.json

@@ -81,6 +81,7 @@
     "@types/react-helmet": "^6.1.5",
     "@types/react-motion": "^0.0.32",
     "@types/react-router-dom": "^5.3.3",
+    "@types/react-sparklines": "^1.7.2",
     "@types/react-swipeable-views": "^0.13.1",
     "@types/react-toggle": "^4.0.3",
     "@types/redux-mock-store": "^1.0.3",

yarn.lock

@@ -2242,6 +2242,13 @@
     "@types/history" "^4.7.11"
     "@types/react" "*"
 
+"@types/react-sparklines@^1.7.2":
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/@types/react-sparklines/-/react-sparklines-1.7.2.tgz#c14e80623abd3669a10f18d13f6fb9fbdc322f70"
+  integrity sha512-N1GwO7Ri5C5fE8+CxhiDntuSw1qYdGytBuedKrCxWpaojXm4WnfygbdBdc5sXGX7feMxDXBy9MNhxoUTwrMl4A==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-swipeable-views@^0.13.1":
   version "0.13.1"
   resolved "https://registry.yarnpkg.com/@types/react-swipeable-views/-/react-swipeable-views-0.13.1.tgz#381c8513deef5426623aa851033ff4f4831ae15c"