Prefil filter values

[MAILPOET-3135]

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<ListProps> = ({ logs, onFilter }: ListProps) => {
+export const List: React.FunctionComponent<ListProps> = ({
-  const [from, setFrom] = useState(undefined);
+  logs,
-  const [to, setTo] = useState(undefined);
+  onFilter,
-  const [search, setSearch] = useState('');
+  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<ListProps> = ({ 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() !== '') {
+    if (search && search !== '') {
-      data.search = search.trim();
+      data.search = search;
     }
     onFilter(data);
   }
@@ -101,14 +111,28 @@ export const List: React.FunctionComponent<ListProps> = ({ logs, onFilter }: Lis
     <div className="mailpoet-listing mailpoet-logs">
 
       <div className="mailpoet-listing-header">
-        <ListingSearch search={search} onSearch={setSearch} />
+        <div className="mailpoet-listing-search">
+          <label htmlFor="search_input" className="screen-reader-text">
+            {MailPoet.I18n.t('searchLabel')}
+          </label>
+          <Input
+            dimension="small"
+            iconStart={icon}
+            type="search"
+            id="search_input"
+            name="s"
+            onChange={(event): void => setSearch(event.target.value)}
+            value={search}
+            placeholder={MailPoet.I18n.t('searchLabel')}
+          />
+        </div>
         <div className="mailpoet-listing-filters">
           {`${MailPoet.I18n.t('from')}:`}
           <Datepicker
             dateFormat="MMMM d, yyyy"
             onChange={dateChanged(setFrom)}
             maxDate={new Date()}
-            selected={from !== undefined ? parseISO(from) : undefined}
+            selected={from ? parseISO(from) : undefined}
             dimension="small"
           />
           {`${MailPoet.I18n.t('to')}:`}
@@ -116,7 +140,7 @@ export const List: React.FunctionComponent<ListProps> = ({ 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"
           />
         </div>

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(
     <List
       logs={window.mailpoet_logs}
+      originalFrom={url.searchParams.get('from')}
+      originalTo={url.searchParams.get('to')}
+      originalSearch={url.searchParams.get('search')}
       onFilter={(data: FilterType): void => {
         Object.entries(data).forEach(([key, value]) => {
           url.searchParams.append(key, value);