import React, { useEffect, useState } from 'react'; import { ActivityLogFilters, useActivityLogs } from '@/api/account/activity'; import { useFlashKey } from '@/plugins/useFlash'; import PageContentBlock from '@/components/elements/PageContentBlock'; 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'; export default () => { const location = useLocation(); const { clearAndAddHttpError } = useFlashKey('account'); const [ filters, setFilters ] = useState({ page: 1, sorts: { timestamp: -1 } }); const { data, isValidating, error } = useActivityLogs(filters, { revalidateOnMount: true, revalidateOnFocus: false, }); useEffect(() => { const parsed = new URLSearchParams(location.search); setFilters(value => ({ ...value, filters: { ip: parsed.get('ip'), event: parsed.get('event') } })); }, [ location.search ]); useEffect(() => { clearAndAddHttpError(error); }, [ error ]); return ( {(filters.filters?.event || filters.filters?.ip) &&
setFilters(value => ({ ...value, filters: {} }))} > Clear Filters
} {!data && isValidating ? :
{data?.items.map((activity) => ( {typeof activity.properties.useragent === 'string' && } ))}
} {data && setFilters(value => ({ ...value, page }))} />}
); };