treehouse
/
mastodon
19
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

Convert `Permalink` to Typescript

th-new
Claire 2024-01-14 14:15:23 +01:00
parent 16499bc097
commit 52c023a305
15 changed files with 56 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/javascript/flavours/glitch/components/account.jsx
View File

@ -17,7 +17,7 @@ import { Avatar } from './avatar';
import { Button } from './button';
import { FollowersCounter } from './counters';
import { DisplayName } from './display_name';
import Permalink from './permalink';
import { Permalink } from './permalink';
import { RelativeTimestamp } from './relative_timestamp';
const messages = defineMessages({

2
app/javascript/flavours/glitch/components/hashtag.jsx
View File

@ -13,7 +13,7 @@ import { Sparklines, SparklinesCurve } from 'react-sparklines';
import { ShortNumber } from 'flavours/glitch/components/short_number';
import { Skeleton } from 'flavours/glitch/components/skeleton';
import Permalink from './permalink';
import { Permalink } from './permalink';
class SilentErrorBoundary extends Component {

38
app/javascript/flavours/glitch/components/permalink.jsx
View File

@ -1,38 +0,0 @@
import PropTypes from 'prop-types';
import { useCallback } from 'react';
import { useAppHistory } from './router';
const Permalink = ({ className, href, to, children, onInterceptClick, ...props }) => {
const history = useAppHistory();
const handleClick = useCallback((e) => {
if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
if (onInterceptClick && onInterceptClick()) {
e.preventDefault();
return;
}
if (history) {
e.preventDefault();
history.push(to);
}
}
}, [onInterceptClick, history, to]);
return (
<a target='_blank' href={href} onClick={handleClick} className={`permalink${className ? ' ' + className : ''}`} {...props}>
{children}
</a>
);
};
Permalink.propTypes = {
className: PropTypes.string,
href: PropTypes.string.isRequired,
to: PropTypes.string.isRequired,
children: PropTypes.node,
onInterceptClick: PropTypes.func,
};
export default Permalink;

41
app/javascript/flavours/glitch/components/permalink.tsx Normal file
View File

@ -0,0 +1,41 @@
import { useCallback } from 'react';
import { useAppHistory } from './router';
interface Props extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
to: string;
}
export const Permalink: React.FC<Props> = ({
className,
href,
to,
children,
...props
}) => {
const history = useAppHistory();
const handleClick = useCallback<React.MouseEventHandler<HTMLAnchorElement>>(
(e) => {
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- history can actually be undefined as the component can be mounted outside a router context
if (e.button === 0 && !(e.ctrlKey || e.metaKey) && history) {
e.preventDefault();
history.push(to);
}
},
[history, to],
);
return (
<a
target='_blank'
rel='noreferrer'
href={href}
onClick={handleClick}
className={`permalink${className ? ' ' + className : ''}`}
{...props}
>
{children}
</a>
);
};

2
app/javascript/flavours/glitch/components/status_content.jsx
View File

@ -19,7 +19,7 @@ import { Icon } from 'flavours/glitch/components/icon';
import { autoPlayGif, languages as preloadedLanguages } from 'flavours/glitch/initial_state';
import { decode as decodeIDNA } from 'flavours/glitch/utils/idna';
import Permalink from './permalink';
import { Permalink } from './permalink';
const textMatchesTarget = (text, origin, host) => {
return (text === origin || text === host

2
app/javascript/flavours/glitch/features/compose/components/navigation_bar.jsx
View File

@ -5,7 +5,7 @@ import { FormattedMessage } from 'react-intl';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import Permalink from 'flavours/glitch/components/permalink';
import { Permalink } from 'flavours/glitch/components/permalink';
import { profileLink } from 'flavours/glitch/utils/backend_links';
import { Avatar } from '../../../components/avatar';

2
app/javascript/flavours/glitch/features/direct_timeline/components/conversation.jsx
View File

@ -15,7 +15,7 @@ import { HotKeys } from 'react-hotkeys';
import AttachmentList from 'flavours/glitch/components/attachment_list';
import AvatarComposite from 'flavours/glitch/components/avatar_composite';
import { IconButton } from 'flavours/glitch/components/icon_button';
import Permalink from 'flavours/glitch/components/permalink';
import { Permalink } from 'flavours/glitch/components/permalink';
import { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp';
import StatusContent from 'flavours/glitch/components/status_content';
import DropdownMenuContainer from 'flavours/glitch/containers/dropdown_menu_container';

2
app/javascript/flavours/glitch/features/directory/components/account_card.jsx
View File

@ -19,7 +19,7 @@ import { Avatar } from 'flavours/glitch/components/avatar';
import { Button } from 'flavours/glitch/components/button';
import { DisplayName } from 'flavours/glitch/components/display_name';
import { IconButton } from 'flavours/glitch/components/icon_button';
import Permalink from 'flavours/glitch/components/permalink';
import { Permalink } from 'flavours/glitch/components/permalink';
import { ShortNumber } from 'flavours/glitch/components/short_number';
import { autoPlayGif, me, unfollowModal } from 'flavours/glitch/initial_state';
import { makeGetAccount } from 'flavours/glitch/selectors';

2
app/javascript/flavours/glitch/features/follow_requests/components/account_authorize.jsx
View File

@ -11,7 +11,7 @@ import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/
import { Avatar } from '../../../components/avatar';
import { DisplayName } from '../../../components/display_name';
import { IconButton } from '../../../components/icon_button';
import Permalink from '../../../components/permalink';
import { Permalink } from '../../../components/permalink';
const messages = defineMessages({
authorize: { id: 'follow_request.authorize', defaultMessage: 'Authorize' },

2
app/javascript/flavours/glitch/features/notifications/components/admin_report.jsx
View File

@ -12,7 +12,7 @@ import { ReactComponent as FlagIcon } from '@material-symbols/svg-600/outlined/f
import { HotKeys } from 'react-hotkeys';
import { Icon } from 'flavours/glitch/components/icon';
import Permalink from 'flavours/glitch/components/permalink';
import { Permalink } from 'flavours/glitch/components/permalink';
import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
import NotificationOverlayContainer from '../containers/overlay_container';

2
app/javascript/flavours/glitch/features/notifications/components/admin_signup.jsx
View File

@ -12,7 +12,7 @@ import { ReactComponent as PersonAddIcon } from '@material-symbols/svg-600/outli
import { HotKeys } from 'react-hotkeys';
import { Icon } from 'flavours/glitch/components/icon';
import Permalink from 'flavours/glitch/components/permalink';
import { Permalink } from 'flavours/glitch/components/permalink';
import AccountContainer from 'flavours/glitch/containers/account_container';
import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';

2
app/javascript/flavours/glitch/features/notifications/components/follow.jsx
View File

@ -12,7 +12,7 @@ import { ReactComponent as PersonAddIcon } from '@material-symbols/svg-600/outli
import { HotKeys } from 'react-hotkeys';
import { Icon } from 'flavours/glitch/components/icon';
import Permalink from 'flavours/glitch/components/permalink';
import { Permalink } from 'flavours/glitch/components/permalink';
import AccountContainer from 'flavours/glitch/containers/account_container';
import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';

2
app/javascript/flavours/glitch/features/notifications/components/follow_request.jsx
View File

@ -17,7 +17,7 @@ import { Avatar } from 'flavours/glitch/components/avatar';
import { DisplayName } from 'flavours/glitch/components/display_name';
import { Icon } from 'flavours/glitch/components/icon';
import { IconButton } from 'flavours/glitch/components/icon_button';
import Permalink from 'flavours/glitch/components/permalink';
import { Permalink } from 'flavours/glitch/components/permalink';
import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
import NotificationOverlayContainer from '../containers/overlay_container';

2
app/javascript/flavours/glitch/features/ui/components/header.jsx
View File

@ -14,7 +14,7 @@ import { fetchServer } from 'flavours/glitch/actions/server';
import { Avatar } from 'flavours/glitch/components/avatar';
import { Icon } from 'flavours/glitch/components/icon';
import { WordmarkLogo, SymbolLogo } from 'flavours/glitch/components/logo';
import Permalink from 'flavours/glitch/components/permalink';
import { Permalink } from 'flavours/glitch/components/permalink';
import { registrationsOpen, me, sso_redirect } from 'flavours/glitch/initial_state';
const Account = connect(state => ({

6
app/javascript/flavours/glitch/features/ui/index.jsx
View File

@ -15,7 +15,7 @@ import { HotKeys } from 'react-hotkeys';
import { changeLayout } from 'flavours/glitch/actions/app';
import { synchronouslySubmitMarkers, submitMarkers, fetchMarkers } from 'flavours/glitch/actions/markers';
import { INTRODUCTION_VERSION } from 'flavours/glitch/actions/onboarding';
import PermaLink from 'flavours/glitch/components/permalink';
import { Permalink } from 'flavours/glitch/components/permalink';
import PictureInPicture from 'flavours/glitch/features/picture_in_picture';
import { layoutFromWindow } from 'flavours/glitch/is_mobile';
import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
@ -649,9 +649,9 @@ class UI extends PureComponent {
id='moved_to_warning'
defaultMessage='This account is marked as moved to {moved_to_link}, and may thus not accept new follows.'
values={{ moved_to_link: (
<PermaLink href={moved.get('url')} to={`/@${moved.get('acct')}`}>
<Permalink href={moved.get('url')} to={`/@${moved.get('acct')}`}>
@{moved.get('acct')}
</PermaLink>
</Permalink>
) }}
/>
</div>)}