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

11
resources/scripts/components/dashboard/activity/ActivityLogContainer.tsx
View file

@ -6,16 +6,15 @@ import FlashMessageRender from '@/components/FlashMessageRender';
import { Link } from 'react-router-dom';
import PaginationFooter from '@/components/elements/table/PaginationFooter';
import { DesktopComputerIcon, XCircleIcon } from '@heroicons/react/solid';
import { useLocation } from 'react-router';
import Spinner from '@/components/elements/Spinner';
import { styles as btnStyles } from '@/components/elements/button/index';
import classNames from 'classnames';
import ActivityLogEntry from '@/components/elements/activity/ActivityLogEntry';
import Tooltip from '@/components/elements/tooltip/Tooltip';
import useLocationHash from '@/plugins/useLocationHash';
export default () => {
const location = useLocation();
const { hash } = useLocationHash();
const { clearAndAddHttpError } = useFlashKey('account');
const [ filters, setFilters ] = useState<ActivityLogFilters>({ page: 1, sorts: { timestamp: -1 } });
const { data, isValidating, error } = useActivityLogs(filters, {
@ -24,10 +23,8 @@ export default () => {
});
useEffect(() => {
const parsed = new URLSearchParams(location.search);
setFilters(value => ({ ...value, filters: { ip: parsed.get('ip'), event: parsed.get('event') } }));
}, [ location.search ]);
setFilters(value => ({ ...value, filters: { ip: hash.ip, event: hash.event } }));
}, [ hash ]);
useEffect(() => {
clearAndAddHttpError(error);

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';

8
resources/scripts/components/server/ServerActivityLogContainer.tsx
View file

@ -11,8 +11,10 @@ import { Link } from 'react-router-dom';
import classNames from 'classnames';
import { styles as btnStyles } from '@/components/elements/button/index';
import { XCircleIcon } from '@heroicons/react/solid';
import useLocationHash from '@/plugins/useLocationHash';
export default () => {
const { hash } = useLocationHash();
const { clearAndAddHttpError } = useFlashKey('server:activity');
const [ filters, setFilters ] = useState<ActivityLogFilters>({ page: 1, sorts: { timestamp: -1 } });
@ -22,10 +24,8 @@ export default () => {
});
useEffect(() => {
const parsed = new URLSearchParams(location.search);
setFilters(value => ({ ...value, filters: { ip: parsed.get('ip'), event: parsed.get('event') } }));
}, [ location.search ]);
setFilters(value => ({ ...value, filters: { ip: hash.ip, event: hash.event } }));
}, [ hash ]);
useEffect(() => {
clearAndAddHttpError(error);