Read state from URL and write state to URL

[MAILPOET-5395]
This commit is contained in:
David Remer
2023-11-24 12:09:16 +02:00
committed by Aschepikov
parent 05a3033698
commit baf9fa0dff
4 changed files with 50 additions and 25 deletions

View File

@@ -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';
}

View File

@@ -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 });
}}
>

View File

@@ -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,

View File

@@ -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;