Read state from URL and write state to URL
[MAILPOET-5395]
This commit is contained in:
@@ -2,16 +2,15 @@ import { select, dispatch } from '@wordpress/data';
|
||||
import { DynamicSegmentQuery } from '../types';
|
||||
import { storeName } from '../store';
|
||||
|
||||
const defaultQuery = {
|
||||
offset: 0,
|
||||
limit: 2,
|
||||
search: '',
|
||||
sort_by: 'updated_at',
|
||||
sort_order: 'desc',
|
||||
group: 'all',
|
||||
};
|
||||
export function updateDynamicQuery(values: Partial<DynamicSegmentQuery>): void {
|
||||
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 ?? 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';
|
||||
}
|
||||
|
@@ -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 });
|
||||
}}
|
||||
>
|
||||
|
@@ -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,
|
||||
|
@@ -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;
|
||||
|
Reference in New Issue
Block a user