Read state from URL and write state to URL

[MAILPOET-5395]

mailpoet/assets/js/src/segments/dynamic/list/listing-helpers.ts

@@ -2,16 +2,15 @@ import { select, dispatch } from '@wordpress/data';
 import { DynamicSegmentQuery } from '../types';
 import { storeName } from '../store';
 
-export function updateDynamicQuery(values: Partial<DynamicSegmentQuery>): void {
+const defaultQuery = {
-  const defaultQuery = {
   offset: 0,
   limit: 2,
-    filter: {},
   search: '',
   sort_by: 'updated_at',
   sort_order: 'desc',
   group: 'all',
-  };
+};
+export function updateDynamicQuery(values: Partial<DynamicSegmentQuery>): void {
   const currentQuery = select(storeName).getDynamicSegmentsQuery();
   const query = currentQuery ?? defaultQuery;
   const newQuery = { ...query, ...values };
@@ -26,18 +25,7 @@ export function updateDynamicQuery(values: Partial<DynamicSegmentQuery>): void {
 
 export function updateDynamicQueryFromLocation(pathname: string): void {
   const pathElements = pathname.split('/');
-  if (pathElements[1] !== 'segments') {
+
-    return;
-  }
-  const defaultQuery = {
-    offset: 0,
-    limit: 2,
-    filter: {},
-    search: '',
-    sort_by: 'updated_at',
-    sort_order: 'desc',
-    group: 'all',
-  };
   const currentQuery = select(storeName).getDynamicSegmentsQuery();
   const query = currentQuery !== null ? currentQuery : defaultQuery;
   const queryKeys = Object.keys(query);
@@ -65,3 +53,13 @@ export function updateDynamicQueryFromLocation(pathname: string): void {
   }
   updateDynamicQuery(query);
 }
+
+export function getTabFromLocation(pathname: string): string {
+  const pathElements = pathname.split('/');
+  for (let i = 0; i < pathElements.length; i += 1) {
+    if (pathElements[i].startsWith(`group[`)) {
+      return pathElements[i].replace(`group[`, '').replace(']', '');
+    }
+  }
+  return 'all';
+}

mailpoet/assets/js/src/segments/dynamic/list/listing-tab.tsx

@@ -1,10 +1,15 @@
 import { useSelect } from '@wordpress/data';
 import { useCallback, useMemo } from 'react';
+import { useLocation } from 'react-router-dom';
 import { TabPanel } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
 import { storeName } from '../store';
 import { ListingTable } from './listing-table';
-import { updateDynamicQuery } from './listing-helpers';
+import {
+  getTabFromLocation,
+  updateDynamicQuery,
+  updateDynamicQueryFromLocation,
+} from './listing-helpers';
 
 const tabConfig = [
   {
@@ -20,7 +25,8 @@ const tabConfig = [
 ] as const;
 
 export function ListingTab(): JSX.Element {
-  const { dynamicSegmentsGroups } = useSelect((s) => ({
+  const location = useLocation();
+  const { dynamicSegmentQuery, dynamicSegmentsGroups } = useSelect((s) => ({
     dynamicSegments: s(storeName).getDynamicSegments(),
     dynamicSegmentQuery: s(storeName).getDynamicSegmentsQuery(),
     dynamicSegmentsGroups: s(storeName).getDynamicSegmentsGroups(),
@@ -53,8 +59,15 @@ export function ListingTab(): JSX.Element {
     <TabPanel
       className="mailpoet-filter-tab-panel"
       tabs={tabs}
-      initialTabName="all"
+      initialTabName={getTabFromLocation(location.pathname)}
       onSelect={(tab) => {
+        if (dynamicSegmentQuery === null) {
+          updateDynamicQueryFromLocation(location.pathname);
+          return;
+        }
+        if (dynamicSegmentQuery.group === tab) {
+          return;
+        }
         updateDynamicQuery({ group: tab, offset: 0 });
       }}
     >

mailpoet/assets/js/src/segments/dynamic/store/actions.ts

@@ -272,10 +272,25 @@ export async function loadDynamicSegments(query?: DynamicSegmentQuery) {
   } as const;
 }
 
+function updateUrlWithQueryParams(query: DynamicSegmentQuery) {
+  const currentUrl = window.location.href;
+  let hash = '/segments';
+  const keys = Object.keys(query);
+  for (let i = 0; i < keys.length; i += 1) {
+    const key = keys[i];
+    const value = query[key] as string;
+    if (value) {
+      hash += `/${key}[${value}]`;
+    }
+  }
+  window.history.pushState(null, '', `${currentUrl.split('#')[0]}#${hash}`);
+}
+
 export function updateDynamicSegmentsQuery(
   query: DynamicSegmentQuery,
 ): UpdateDynamicSegmentsQueryActionType {
   void dispatch(storeName).loadDynamicSegments(query);
+  updateUrlWithQueryParams(query);
   return {
     type: Actions.UPDATE_DYNAMIC_SEGMENTS_QUERY,
     query,

mailpoet/assets/js/src/segments/dynamic/types.ts

@@ -332,7 +332,6 @@ export interface SegmentFormDataWindow extends Window {
 export type DynamicSegmentQuery = {
   offset: number;
   limit: number;
-  filter: Record<string, string>;
   search: string;
   sort_by: string;
   sort_order: string;