From 535cca759984874e6db985f3bd35b61298b291a0 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Wed, 27 Apr 2022 20:01:31 -0500 Subject: [PATCH] Convert a few files into TypeScript --- .../components/{hashtag.js => hashtag.tsx} | 15 ++++++------ ...r_ref_wrapper.js => hover_ref_wrapper.tsx} | 24 ++++++++----------- app/soapbox/components/{list.js => list.tsx} | 20 ++++++---------- package.json | 1 + yarn.lock | 7 ++++++ 5 files changed, 33 insertions(+), 34 deletions(-) rename app/soapbox/components/{hashtag.js => hashtag.tsx} (84%) rename app/soapbox/components/{hover_ref_wrapper.js => hover_ref_wrapper.tsx} (73%) rename app/soapbox/components/{list.js => list.tsx} (83%) diff --git a/app/soapbox/components/hashtag.js b/app/soapbox/components/hashtag.tsx similarity index 84% rename from app/soapbox/components/hashtag.js rename to app/soapbox/components/hashtag.tsx index 1b19bbff3..06d44d467 100644 --- a/app/soapbox/components/hashtag.js +++ b/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, +} + +const Hashtag: React.FC = ({ hashtag }) => { const count = Number(hashtag.getIn(['history', 0, 'accounts'])); const brandColor = useSelector((state) => getSoapboxConfig(state).get('brandColor')); @@ -41,7 +46,7 @@ const Hashtag = ({ hashtag }) => { day.get('uses')).toArray()} + data={hashtag.get('history').reverse().map((day: ImmutableMap) => day.get('uses')).toArray()} > @@ -51,8 +56,4 @@ const Hashtag = ({ hashtag }) => { ); }; -Hashtag.propTypes = { - hashtag: ImmutablePropTypes.map.isRequired, -}; - export default Hashtag; diff --git a/app/soapbox/components/hover_ref_wrapper.js b/app/soapbox/components/hover_ref_wrapper.tsx similarity index 73% rename from app/soapbox/components/hover_ref_wrapper.js rename to app/soapbox/components/hover_ref_wrapper.tsx index 64af2a370..239c27580 100644 --- a/app/soapbox/components/hover_ref_wrapper.js +++ b/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 = ({ accountId, children, inline = false }) => { const dispatch = useDispatch(); - const ref = useRef(); - const Elem = inline ? 'span' : 'div'; + const ref = useRef(); + 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 ( { ); }; -HoverRefWrapper.propTypes = { - accountId: PropTypes.string, - children: PropTypes.node, - inline: PropTypes.bool, -}; - -HoverRefWrapper.defaultProps = { - inline: false, -}; - export { HoverRefWrapper as default, showProfileHoverCard }; diff --git a/app/soapbox/components/list.js b/app/soapbox/components/list.tsx similarity index 83% rename from app/soapbox/components/list.js rename to app/soapbox/components/list.tsx index 02905efea..404fb8aa5 100644 --- a/app/soapbox/components/list.js +++ b/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 }) => (
{children}
); -List.propTypes = { - children: PropTypes.node, -}; +interface IListItem { + label: React.ReactNode, + hint?: React.ReactNode, + onClick?: () => void, +} -const ListItem = ({ label, hint, children, onClick }) => { +const ListItem: React.FC = ({ 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 }; diff --git a/package.json b/package.json index 18cf5ba40..28f467891 100644 --- a/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index 4a424404b..a5e5160fe 100644 --- a/yarn.lock +++ b/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"