diff --git a/assets/js/src/logs/list.tsx b/assets/js/src/logs/list.tsx index 72b458d911..bdaa9229f3 100644 --- a/assets/js/src/logs/list.tsx +++ b/assets/js/src/logs/list.tsx @@ -4,8 +4,9 @@ import { curry } from 'lodash'; import { parseISO } from 'date-fns'; import Datepicker from '../common/datepicker/datepicker'; -import ListingSearch from '../listing/search'; import { Button } from '../common'; +import Input from '../common/form/input/input'; +import icon from '../listing/assets/search_icon'; type Log = { id: number; @@ -67,13 +68,22 @@ export type FilterType = { type ListProps = { logs: Logs; + originalFrom?: string; + originalTo?: string; + originalSearch?: string; onFilter: (FilterType) => void; } -export const List: React.FunctionComponent = ({ logs, onFilter }: ListProps) => { - const [from, setFrom] = useState(undefined); - const [to, setTo] = useState(undefined); - const [search, setSearch] = useState(''); +export const List: React.FunctionComponent = ({ + logs, + onFilter, + originalFrom, + originalTo, + originalSearch, +}: ListProps) => { + const [from, setFrom] = useState(originalFrom); + const [to, setTo] = useState(originalTo); + const [search, setSearch] = useState(originalSearch); const dateChanged = curry((setter, value): void => { // Swap display format to storage format @@ -85,14 +95,14 @@ export const List: React.FunctionComponent = ({ logs, onFilter }: Lis function filterClick(): void { const data: FilterType = {}; - if (from !== undefined) { + if (from) { data.from = from; } - if (to !== undefined) { + if (to) { data.to = to; } - if (search.trim() !== '') { - data.search = search.trim(); + if (search && search !== '') { + data.search = search; } onFilter(data); } @@ -101,14 +111,28 @@ export const List: React.FunctionComponent = ({ logs, onFilter }: Lis
- +
+ + setSearch(event.target.value)} + value={search} + placeholder={MailPoet.I18n.t('searchLabel')} + /> +
{`${MailPoet.I18n.t('from')}:`} {`${MailPoet.I18n.t('to')}:`} @@ -116,7 +140,7 @@ export const List: React.FunctionComponent = ({ logs, onFilter }: Lis dateFormat="MMMM d, yyyy" onChange={dateChanged(setTo)} maxDate={new Date()} - selected={to !== undefined ? parseISO(to) : undefined} + selected={to ? parseISO(to) : undefined} dimension="small" />
diff --git a/assets/js/src/logs/logs.tsx b/assets/js/src/logs/logs.tsx index c8ab448897..38b11e0088 100644 --- a/assets/js/src/logs/logs.tsx +++ b/assets/js/src/logs/logs.tsx @@ -13,9 +13,13 @@ const logsContainer = document.getElementById('mailpoet_logs_container'); if (logsContainer) { const url = new URL(window.location.href); + ReactDOM.render( { Object.entries(data).forEach(([key, value]) => { url.searchParams.append(key, value);