StarMC/Astral-nook
StarMC/Astral-nook
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix excessive re-rendering due to route changesd

Browse source
This commit is contained in:
DaneEveritt 2022-06-20 13:19:40 -04:00
parent 7b0e2ce99d
commit 8bd518048e
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
7 changed files with 51 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

16
resources/scripts/components/elements/activity/ActivityLogEntry.tsx
View file

@ -4,13 +4,13 @@ import Tooltip from '@/components/elements/tooltip/Tooltip';
import Translate from '@/components/elements/Translate';
import { format, formatDistanceToNowStrict } from 'date-fns';
import { ActivityLog } from '@definitions/user';
import { useLocation } from 'react-router';
import ActivityLogMetaButton from '@/components/elements/activity/ActivityLogMetaButton';
import { TerminalIcon } from '@heroicons/react/solid';
import classNames from 'classnames';
import style from './style.module.css';
import { isObject } from '@/helpers';
import Avatar from '@/components/Avatar';
import useLocationHash from '@/plugins/useLocationHash';
interface Props {
activity: ActivityLog;
@ -33,16 +33,8 @@ const formatProperties = (properties: Record<string, unknown>): Record<string, u
};
export default ({ activity, children }: Props) => {
const location = useLocation();
const { pathTo } = useLocationHash();
const actor = activity.relationships.actor;
const queryTo = (params: Record<string, string>): string => {
const current = new URLSearchParams(location.search);
Object.keys(params).forEach(key => current.set(key, params[key]));
return current.toString();
};
const properties = formatProperties(activity.properties);
return (
@ -60,7 +52,7 @@ export default ({ activity, children }: Props) => {
</Tooltip>
<span className={'text-gray-400'}>&nbsp;&mdash;&nbsp;</span>
<Link
to={`?${queryTo({ event: activity.event })}`}
to={`#${pathTo({ event: activity.event })}`}
className={'transition-colors duration-75 active:text-cyan-400 hover:text-cyan-400'}
>
{activity.event}
@ -79,7 +71,7 @@ export default ({ activity, children }: Props) => {
</p>
<div className={'mt-1 flex items-center text-sm'}>
<Link
to={`?${queryTo({ ip: activity.ip })}`}
to={`#${pathTo({ ip: activity.ip })}`}
className={'transition-colors duration-75 active:text-cyan-400 hover:text-cyan-400'}
>
{activity.ip}

1
resources/scripts/components/elements/button/index.ts
View file

@ -1,3 +1,2 @@
export { ButtonProps } from './types';
export { default as Button } from './Button';
export { default as styles } from './style.module.css';