8889841cPK¶M[pKšqÏ:Ï:index.jsnu„[µü¤import {useState} from 'react'; import { Card, Label, Notice, Spinner, Pagination, Select, Table, Button, PeriodSelector, Modal, } from '@givewp/components'; import API, {useLogFetcher, getEndpoint} from './api'; import styles from './styles.module.scss'; import {__} from '@wordpress/i18n'; const Logs = () => { const [state, setState] = useState({ initialLoad: false, currentPage: 1, currentStatus: '', // log type currentSource: '', currentCategory: '', sortColumn: '', sortDirection: '', startDate: null, endDate: null, pages: 0, statuses: [], sources: [], categories: [], isSorting: false, }); const [logModal, setLogModal] = useState({ visible: false, }); const [logFlushModal, setLogFlushModal] = useState({ visible: false, }); const parameters = { page: state.currentPage, sort: state.sortColumn, direction: state.sortDirection, type: state.currentStatus, source: state.currentSource, category: state.currentCategory, start: state.startDate ? state.startDate.format('YYYY-MM-DD') : '', end: state.endDate ? state.endDate.format('YYYY-MM-DD') : '', }; const {data, isLoading, isError} = useLogFetcher(getEndpoint('/get-logs', parameters), { onSuccess: ({response}) => { setState((previousState) => { return { ...previousState, initialLoad: true, pages: response.pages, statuses: response.statuses, categories: response.categories, sources: response.sources, currentPage: state.currentPage > response.pages ? 1 : state.currentPage, isSorting: false, }; }); }, }); const openLogModal = (log) => { setLogModal({ visible: true, id: log.id, type: log.log_type, category: log.category, source: log.source, description: log.description, date: log.date, message: log.message, context: JSON.stringify(log.context, null, ' '), }); }; const closeLogModal = () => { setLogModal({visible: false}); }; const openLogFlushModal = (e) => { e.preventDefault(); setLogFlushModal({visible: true}); }; const closeLogFlushModal = () => { setLogFlushModal({visible: false}); }; const flushLogs = () => { setLogFlushModal({ visible: true, flushing: true, }); API.delete('/flush-logs') .then(() => { window.location.reload(); }) .catch(() => { setLogFlushModal((previousState) => { return { ...previousState, type: 'error', error: true, }; }); }); }; const setSortDirectionForColumn = (column, direction) => { setState((previousState) => { return { ...previousState, sortColumn: column, sortDirection: direction, isSorting: true, }; }); }; const setCurrentPage = (currentPage) => { setState((previousState) => { return { ...previousState, currentPage, }; }); }; const setCurrentCategory = (e) => { const category = e.target.value; setState((previousState) => { return { ...previousState, currentCategory: category, }; }); }; const setCurrentStatus = (e) => { const status = e.target.value; setState((previousState) => { return { ...previousState, currentStatus: status, }; }); }; const setCurrentSource = (e) => { const source = e.target.value; setState((previousState) => { return { ...previousState, currentSource: source, }; }); }; const setDates = (startDate, endDate) => { setState((previousState) => { return { ...previousState, startDate, endDate, }; }); }; const getCategories = () => { const defaultCategory = { value: '', label: __('All categories', 'give'), }; const categories = Object.values(state.categories).map((label) => { return { label, value: label, }; }); return [defaultCategory, ...categories]; }; const getStatuses = () => { const defaultStatus = { value: '', label: __('All statuses', 'give'), }; const statuses = Object.entries(state.statuses).map(([value, label]) => { return { label, value, }; }); return [defaultStatus, ...statuses]; }; const getSources = () => { const defaultSource = { value: '', label: __('All sources', 'give'), }; const sources = Object.values(state.sources).map((label) => { return { label, value: label, }; }); return [defaultSource, ...sources]; }; const getLogModal = () => { return ( ); }; const getLogFlushConfirmationModal = () => { return ( {logFlushModal.flushing ? ( {logFlushModal.error ? ( <>

{__('Something went wrong!', 'give')}

Try to{' '} window.location.reload()} href="#"> reload {' '} the browser
) : ( <>
{__('Flushing logs', 'give')}
)} ) : ( <> {__('Flush all logs', 'give')} {__('Do you want to flush all logs?', 'give')} )} ); }; const getLogTypeText = (type) => { if (type in window.GiveLogs.logTypes) { return window.GiveLogs.logTypes[type]; } return type; }; const resetQueryParameters = (e) => { e.preventDefault(); // Reset table sort state Table.resetSortState(); setState((previousState) => { return { ...previousState, currentPage: 1, currentStatus: '', currentSource: '', currentCategory: '', sortColumn: '', sortDirection: '', startDate: null, endDate: null, }; }); }; const columns = [ { key: 'log_type', label: __('Status', 'give'), sort: true, sortCallback: (direction) => setSortDirectionForColumn('log_type', direction), }, { key: 'category', label: __('Category', 'give'), sort: true, sortCallback: (direction) => setSortDirectionForColumn('category', direction), }, { key: 'source', label: __('Source', 'give'), sort: true, sortCallback: (direction) => setSortDirectionForColumn('source', direction), }, { key: 'date', label: __('Date/Time', 'give'), sort: true, sortCallback: (direction) => setSortDirectionForColumn('date', direction), }, { key: 'message', label: __('Description', 'give'), }, { key: 'details', label: __('Details', 'give'), append: true, styles: { maxWidth: 100, textAlign: 'center', justifyContent: 'center', }, }, ]; const columnFilters = { log_type: (type) =>