@griddo/ax 12.6.0 → 12.6.1

package/src/containers/ActivityLog/{actions.tsx → thunks.ts}

@@ -1,5 +1,15 @@
-import type { Dispatch } from "redux";
-import { format } from "date-fns";
+import { logs } from "@ax/api";
+import { appActions } from "@ax/containers/App";
+import { formsActions } from "@ax/containers/Forms";
+import { integrationsActions } from "@ax/containers/Integrations";
+import { navigationActions } from "@ax/containers/Navigation";
+import { pageEditorActions } from "@ax/containers/PageEditor";
+import { sitesActions } from "@ax/containers/Sites";
+import { structuredDataActions } from "@ax/containers/StructuredData";
+import { usersActions } from "@ax/containers/Users";
+import { handleRequest } from "@ax/helpers";
+import type { AppDispatch } from "@ax/store";
+import type { IRootState } from "@ax/types";
 
 import type {
 	LogActivityExportRequest,
@@ -10,99 +20,106 @@ import type {
 	LogContentTypeDTO,
 	PaginationResponse,
 } from "@griddo/api-types";
-import { logs } from "@ax/api";
-import { appActions } from "@ax/containers/App";
-import { usersActions } from "@ax/containers/Users";
-import { pageEditorActions } from "@ax/containers/PageEditor";
-import { sitesActions } from "@ax/containers/Sites";
-import { integrationsActions } from "@ax/containers/Integrations";
-import { formsActions } from "@ax/containers/Forms";
-import { navigationActions } from "@ax/containers/Navigation";
-import { structuredDataActions } from "@ax/containers/StructuredData";
-import { handleRequest } from "@ax/helpers";
-import type { ILogItemsByDay, ILogItemsByUser, IRootState } from "@ax/types";
-
-import { SET_ACTIVITY_LOG, SET_LIST_MODE } from "./constants";
-import type { ISetActivityLog, ISetListMode } from "./interfaces";
-
-function setActivityLog(activityLog: ILogItemsByDay | ILogItemsByUser): ISetActivityLog {
-	return { type: SET_ACTIVITY_LOG, payload: { activityLog } };
-}
-
-function setListMode(listMode: string): ISetListMode {
-	return { type: SET_LIST_MODE, payload: { listMode } };
-}
-
-function getActivityLog(params: LogActivityPaginationRequest): (dispatch: Dispatch) => Promise<void> {
-	return async (dispatch) => {
-		try {
-			const callback = async () => logs.getLogActivityTimelineByDay(params);
+import { createAsyncThunk } from "@reduxjs/toolkit";
+import { format } from "date-fns";
+import type { Dispatch } from "redux";
 
-			const responseActions = {
-				handleSuccess: (response: PaginationResponse<LogActivityGroupedDayDTO>) => {
-					dispatch(setActivityLog(response));
-				},
-				handleError: (response: any) => appActions.handleError(response)(dispatch),
-			};
+import { setActivityLog } from "./slice";
 
-			await handleRequest(callback, responseActions, [appActions.setIsLoading])(dispatch);
-		} catch (e) {
-			console.log(e);
-		}
-	};
-}
+/**
+ * Read and export side of UC-AX-view-activity-log, plus the deep-link dispatcher, as
+ * createAsyncThunk.
+ *
+ * They keep calling `handleRequest` inside for the same reason the Languages pilot does —
+ * see docs/RTK-MIGRATION.md §5.
+ *
+ * `goToLogContent` is the last of the wave's mines and the one that does not get cleaned up
+ * here: it is a 160-line navigation switch that reaches into SEVEN areas that have not been
+ * migrated yet, invoking their thunks by hand as `thunk(args)(dispatch, getState)`. That still
+ * works while those areas are legacy, and it is exactly what stops working when they are not —
+ * a createAsyncThunk expects the `(dispatch, getState, extra)` triple. **When `sites` migrates
+ * in wave 3, the twelve `sitesActions.getSite(site)(dispatch, getState)` calls below break.**
+ * Its body is transplanted verbatim on purpose — diffed line by line against the legacy one —
+ * and the single-argument rule is the only edit it took.
+ */
+const onError = (response: unknown, dispatch: Dispatch) => appActions.handleError(response)(dispatch);
 
-function getActivityLogByUser(params: LogActivityPaginationRequest): (dispatch: Dispatch) => Promise<void> {
-	return async (dispatch) => {
-		try {
-			const callback = async () => logs.getLogActivityTimelineByUser(params);
+/**
+ * The store's real dispatch and state, declared once.
+ *
+ * `AppDispatch` is a redux 4 `AnyAction` thunk dispatch (`src/store/hooks.ts`), so the
+ * nineteen legacy action creators and the seven legacy thunks that `goToLogContent` still
+ * reaches for keep type-checking, and `getState()` comes back as `IRootState` instead of
+ * `unknown`. Without this RTK types `dispatch` against redux 5's `UnknownAction`, which the
+ * hand-written action interfaces are not assignable to — the §8.3 friction, reaching
+ * production code here for the first time rather than just test files.
+ */
+const createAppAsyncThunk = createAsyncThunk.withTypes<{ state: IRootState; dispatch: AppDispatch }>();
 
-			const responseActions = {
-				handleSuccess: (response: PaginationResponse<LogActivityGroupedUserDTO<LogActivityGroupedUserDTO[]>>) => {
-					dispatch(setActivityLog(response));
-				},
-				handleError: (response: any) => appActions.handleError(response)(dispatch),
-			};
+export const getActivityLog = createAsyncThunk(
+	"activityLog/getActivityLog",
+	async (params: LogActivityPaginationRequest, { dispatch }) =>
+		handleRequest(
+			async () => logs.getLogActivityTimelineByDay(params),
+			{
+				handleSuccess: (response: PaginationResponse<LogActivityGroupedDayDTO>) => dispatch(setActivityLog(response)),
+				handleError: (response: unknown) => onError(response, dispatch),
+			},
+			[appActions.setIsLoading],
+		)(dispatch),
+);
 
-			await handleRequest(callback, responseActions, [appActions.setIsLoading])(dispatch);
-		} catch (e) {
-			console.log(e);
-		}
-	};
-}
+export const getActivityLogByUser = createAsyncThunk(
+	"activityLog/getActivityLogByUser",
+	async (params: LogActivityPaginationRequest, { dispatch }) =>
+		handleRequest(
+			async () => logs.getLogActivityTimelineByUser(params),
+			{
+				handleSuccess: (response: PaginationResponse<LogActivityGroupedUserDTO<LogActivityGroupedUserDTO[]>>) =>
+					dispatch(setActivityLog(response)),
+				handleError: (response: unknown) => onError(response, dispatch),
+			},
+			[appActions.setIsLoading],
+		)(dispatch),
+);
 
-function downloadActivityLog(data: LogActivityExportRequest): (dispatch: Dispatch) => Promise<void> {
-	return async (dispatch) => {
-		try {
-			const responseActions = {
-				handleSuccess: (response: any) => {
-					const dateString = format(new Date(), "yyyy-MM-dd");
-					const url = window.URL.createObjectURL(new Blob([response]));
-					const a = document.createElement("a");
-					a.href = url;
-					a.download = `activity-log-${dateString}.${data.format[0]}`;
-					document.body.appendChild(a);
-					a.click();
-					window.URL.revokeObjectURL(url);
-				},
-				handleError: (response: any) => appActions.handleError(response)(dispatch),
-			};
+// The export comes back as a blob and is handed to the browser through a throwaway
+// `<a download>`. Kept verbatim from the legacy thunk, side effects included: it is the only
+// place in the area that touches the DOM.
+const saveExport = (payload: BlobPart, extension: string) => {
+	const dateString = format(new Date(), "yyyy-MM-dd");
+	const url = window.URL.createObjectURL(new Blob([payload]));
+	const a = document.createElement("a");
+	a.href = url;
+	a.download = `activity-log-${dateString}.${extension}`;
+	document.body.appendChild(a);
+	a.click();
+	window.URL.revokeObjectURL(url);
+};
 
-			const callback = async () => logs.logExport(data);
+export const downloadActivityLog = createAsyncThunk(
+	"activityLog/downloadActivityLog",
+	// No loading flag, as before: the export runs without the screen's spinner.
+	async (data: LogActivityExportRequest, { dispatch }) =>
+		handleRequest(
+			async () => logs.logExport(data),
+			{
+				handleSuccess: (response: BlobPart) => saveExport(response, data.format[0]),
+				handleError: (response: unknown) => onError(response, dispatch),
+			},
+			[],
+		)(dispatch),
+);
 
-			await handleRequest(callback, responseActions, [])(dispatch);
-		} catch (e) {
-			console.log(e);
-		}
-	};
+interface IGoToLogContentArgs {
+	contentType: LogContentTypeDTO | null;
+	content: LogContentDTO | null;
+	site: number | null;
 }
 
-function goToLogContent(
-	contentType: LogContentTypeDTO | null,
-	content: LogContentDTO | null,
-	site: number | null,
-): (dispatch: Dispatch, getState: () => IRootState) => void {
-	return async (dispatch, getState) => {
+export const goToLogContent = createAppAsyncThunk(
+	"activityLog/goToLogContent",
+	async ({ contentType, content, site }: IGoToLogContentArgs, { dispatch, getState }) => {
 		const {
 			app: { lang, globalLangs },
 		} = getState();
@@ -257,7 +274,5 @@ function goToLogContent(
 					break;
 			}
 		}
-	};
-}
-
-export { getActivityLog, getActivityLogByUser, setListMode, downloadActivityLog, goToLogContent };
+	},
+);

package/src/containers/Analytics/index.tsx

@@ -1,4 +1,15 @@
-import * as analyticsActions from "./actions";
-import { analyticsReducer } from "./reducer";
+import { setAnalytics } from "./slice";
+import { deleteScriptCode, getAnalytics, updateAnalytics, updateScriptCode } from "./thunks";
 
-export { analyticsActions, analyticsReducer };
+const analyticsActions = {
+	setAnalytics,
+	getAnalytics,
+	updateAnalytics,
+	updateScriptCode,
+	deleteScriptCode,
+};
+
+export { analyticsActions };
+
+export type { IAnalyticsState } from "./slice";
+export { analyticsInitialState, analyticsReducer } from "./slice";

package/src/containers/Analytics/slice.ts

@@ -0,0 +1,48 @@
+import type { IAnalytics, IDimension, IDimensionsGroup } from "@ax/types";
+
+import { createSlice, type PayloadAction } from "@reduxjs/toolkit";
+
+/**
+ * The `analytics` area holds the tracking script and the Data Layer definition
+ * (dimensions and their groups) of whatever scope is loaded — global or one site
+ * (UC-AX-configure-seo-analytics). There is a single slot: loading a site
+ * overwrites what global left, which is why the two settings screens reload on mount.
+ *
+ * STAYS in redux-persist, against the rule of ADR 0002: `AnalyticsField` (the page
+ * editor's SEO/analytics field) reads `groups` from here and never fetches, so the
+ * persist is what feeds it after a hard refresh. It decides which of two different
+ * fields to render, so an empty `groups` is not a flash but the wrong editor. Leaves
+ * when PageEditor migrates (wave 4).
+ */
+export interface IAnalyticsState {
+	scriptCode: string;
+	siteScriptCodeExists: boolean;
+	dimensions: IDimension[];
+	groups: IDimensionsGroup[];
+}
+
+export const initialState: IAnalyticsState = {
+	scriptCode: "",
+	siteScriptCodeExists: false,
+	dimensions: [],
+	groups: [],
+};
+
+const analyticsSlice = createSlice({
+	name: "analytics",
+	initialState,
+	reducers: {
+		// MERGES, it does not replace: the legacy reducer spread the payload onto the
+		// state and `Sites/actions.tsx` dispatches this with whatever the site's
+		// metrics endpoint returned, which need not carry every field. Typed as a
+		// partial to say so out loud.
+		setAnalytics(state, action: PayloadAction<Partial<IAnalytics>>) {
+			Object.assign(state, action.payload);
+		},
+	},
+});
+
+export const { setAnalytics } = analyticsSlice.actions;
+
+export { initialState as analyticsInitialState };
+export const analyticsReducer = analyticsSlice.reducer;

package/src/containers/Analytics/thunks.ts

@@ -0,0 +1,103 @@
+import { analytics } from "@ax/api";
+import { appActions } from "@ax/containers/App";
+import { handleRequest } from "@ax/helpers";
+import type { IAnalytics } from "@ax/types";
+
+import { createAsyncThunk } from "@reduxjs/toolkit";
+import type { Dispatch } from "redux";
+
+import { setAnalytics } from "./slice";
+
+/**
+ * Read and write side of UC-AX-configure-seo-analytics, as createAsyncThunk. They
+ * keep calling `handleRequest` inside — see the Languages pilot and §5 of
+ * docs/RTK-MIGRATION.md.
+ *
+ * `siteId` is `null` for the global scope, which the API spells `"global"`. The
+ * legacy signatures made the argument optional; createAsyncThunk takes exactly one
+ * argument, so the scope is now always explicit at the call site. That is the whole
+ * of the churn this migration pushes onto the callers.
+ */
+const onError = (response: unknown, dispatch: Dispatch, isMultiple = false, message?: string) =>
+	appActions.handleError(response, isMultiple, message)(dispatch);
+
+const scopeOf = (siteId: number | null) => siteId ?? "global";
+
+export const getAnalytics = createAsyncThunk("analytics/getAnalytics", async (siteId: number | null, { dispatch }) =>
+	handleRequest(
+		async () => analytics.getAnalytics(scopeOf(siteId)),
+		{
+			handleSuccess: (data: Partial<IAnalytics>) => dispatch(setAnalytics(data)),
+			handleError: (response: unknown) => onError(response, dispatch),
+		},
+		[],
+	)(dispatch),
+);
+
+interface IUpdateAnalyticsArgs {
+	analytics: IAnalytics;
+	siteId: number | null;
+}
+
+export const updateAnalytics = createAsyncThunk(
+	"analytics/updateAnalytics",
+	async ({ analytics: state, siteId }: IUpdateAnalyticsArgs, { dispatch }) => {
+		const { scriptCode, dimensions, groups } = state;
+		const scope = scopeOf(siteId);
+
+		return handleRequest(
+			// The three writes go out in PARALLEL and `handleRequest` treats the array
+			// of responses as a whole: any one of them failing fails the save.
+			async () =>
+				Promise.all([
+					analytics.updateScriptCode(scope, { scriptCode }),
+					analytics.createDimensions(scope, { dimensions }),
+					analytics.createDimensionsGroups(scope, { groups }),
+				]),
+			{
+				// Not awaited, as the legacy version did not await it either: the button
+				// stops saying "Saving" before the reload lands.
+				handleSuccess: () => dispatch(getAnalytics(siteId)),
+				handleError: (response: { data: { message?: string | string[] } }) => {
+					const { message } = response.data;
+					const isMultiple = Array.isArray(message) && message.length > 1;
+					const msg = isMultiple ? `The action failed due to ${message.length} errors.` : undefined;
+					onError(response, dispatch, isMultiple, msg);
+				},
+			},
+			[appActions.setIsSaving],
+		)(dispatch);
+	},
+);
+
+interface IUpdateScriptCodeArgs {
+	scriptCode: string;
+	siteId: number | null;
+}
+
+export const updateScriptCode = createAsyncThunk(
+	"analytics/updateScriptCode",
+	async ({ scriptCode, siteId }: IUpdateScriptCodeArgs, { dispatch }) =>
+		handleRequest(
+			async () => analytics.updateScriptCode(scopeOf(siteId), { scriptCode }),
+			{
+				handleSuccess: () => dispatch(getAnalytics(siteId)),
+				handleError: (response: unknown) => onError(response, dispatch),
+			},
+			[appActions.setIsSaving],
+		)(dispatch),
+);
+
+export const deleteScriptCode = createAsyncThunk(
+	"analytics/deleteScriptCode",
+	// No loading flag, as before: resetting to the global defaults shows no spinner.
+	async (siteId: number | null, { dispatch }) =>
+		handleRequest(
+			async () => analytics.deleteScriptCode(scopeOf(siteId)),
+			{
+				handleSuccess: () => dispatch(getAnalytics(siteId)),
+				handleError: (response: unknown) => onError(response, dispatch),
+			},
+			[],
+		)(dispatch),
+);

package/src/containers/Domains/index.tsx

@@ -1,4 +1,13 @@
-import * as domainsActions from "./actions";
-import { domainsReducer } from "./reducer";
+import { setDomainsRobots } from "./slice";
+import { getDomainsRobots, updateDomainsRobots } from "./thunks";
 
-export { domainsActions, domainsReducer };
+const domainsActions = {
+	setDomainsRobots,
+	getDomainsRobots,
+	updateDomainsRobots,
+};
+
+export { domainsActions };
+
+export type { IDomainsState } from "./slice";
+export { domainsInitialState, domainsReducer } from "./slice";

package/src/containers/Domains/slice.ts

@@ -0,0 +1,37 @@
+import type { IDomainRobot } from "@ax/types";
+
+import { createSlice, type PayloadAction } from "@reduxjs/toolkit";
+
+/**
+ * The `domains` area holds the robots.txt of every domain (UC-AX-configure-seo-analytics,
+ * `/settings/robots`). Despite the name it is not a domain manager: the list of
+ * domains a site has is read through `sites`, and this slice only carries what the
+ * robots.txt editor renders.
+ *
+ * Out of redux-persist since this migration (ADR 0002): the screen calls
+ * `getDomainsRobots()` on mount, so the persisted copy was never read.
+ */
+export interface IDomainsState {
+	robots: IDomainRobot[];
+}
+
+export const initialState: IDomainsState = {
+	robots: [],
+};
+
+const domainsSlice = createSlice({
+	name: "domains",
+	initialState,
+	reducers: {
+		// The legacy action wrapped the list in `{ robots }` to spread it onto the
+		// state; as a reducer the payload is just the list.
+		setDomainsRobots(state, action: PayloadAction<IDomainRobot[]>) {
+			state.robots = action.payload;
+		},
+	},
+});
+
+export const { setDomainsRobots } = domainsSlice.actions;
+
+export { initialState as domainsInitialState };
+export const domainsReducer = domainsSlice.reducer;

package/src/containers/Domains/thunks.ts

@@ -0,0 +1,60 @@
+import { domains } from "@ax/api";
+import { appActions } from "@ax/containers/App";
+import { handleRequest } from "@ax/helpers";
+import type { IDomainRobot } from "@ax/types";
+
+import { createAsyncThunk } from "@reduxjs/toolkit";
+import type { Dispatch } from "redux";
+
+import { setDomainsRobots } from "./slice";
+
+/**
+ * Read and write side of the robots.txt editor, as createAsyncThunk.
+ *
+ * They keep calling `handleRequest` inside for the same reason the Languages
+ * pilot does: that helper owns the loading-flag and error-channel conventions of
+ * the whole codebase (152 call-sites) and replacing it is a cross-cutting job,
+ * not this area's — see docs/RTK-MIGRATION.md §5.
+ *
+ * What does change: the legacy versions wrapped everything in a `try/catch` whose
+ * body was `console.log(e)`, swallowing failures. createAsyncThunk turns a throw
+ * into a `rejected` action instead, so the failure is observable.
+ */
+// Called through the namespace rather than destructured at module scope: a
+// destructured reference is frozen at import time and cannot be spied on, which
+// would make the reload-after-save behaviour untestable.
+const onError = (response: unknown, dispatch: Dispatch, isMultiple = false, message?: string) =>
+	appActions.handleError(response, isMultiple, message)(dispatch);
+
+export const getDomainsRobots = createAsyncThunk<boolean, void>(
+	"domains/getDomainsRobots",
+	async (_arg, { dispatch }) =>
+		handleRequest(
+			async () => domains.getDomainsRobots(),
+			{
+				handleSuccess: (robots: IDomainRobot[]) => dispatch(setDomainsRobots(robots)),
+				handleError: (response: unknown) => onError(response, dispatch),
+			},
+			[appActions.setIsLoading],
+		)(dispatch),
+);
+
+export const updateDomainsRobots = createAsyncThunk(
+	"domains/updateDomainsRobots",
+	async (robots: IDomainRobot[], { dispatch }) =>
+		handleRequest(
+			async () => domains.updateDomainsRobots(robots),
+			{
+				// Reloading from the server is what makes `computedContent` (the
+				// inherited rules, read-only) reflect the content just saved.
+				handleSuccess: () => dispatch(getDomainsRobots()),
+				handleError: (response: { data: { message?: string | string[] } }) => {
+					const { message } = response.data;
+					const isMultiple = Array.isArray(message) && message.length > 1;
+					const msg = isMultiple ? `The action failed due to ${message.length} errors.` : undefined;
+					onError(response, dispatch, isMultiple, msg);
+				},
+			},
+			[appActions.setIsSaving],
+		)(dispatch),
+);

package/src/containers/Redirects/constants.tsx

@@ -1,10 +1,3 @@
-const NAME = "redirects";
-
-const SET_REDIRECTS = `${NAME}/SET_REDIRECTS`;
-const SET_TOTAL_ITEMS = `${NAME}/SET_TOTAL_ITEMS`;
-const SET_TOTAL_IMPORTS = `${NAME}/SET_TOTAL_IMPORTS`;
-const SET_IMPORTS = `${NAME}/SET_IMPORTS`;
-
 const ITEMS_PER_PAGE = 50;
 
 const DEFAULT_PARAMS = {
@@ -17,13 +10,4 @@ const ERROR_CODE = {
 	isBeingUsed: 409,
 };
 
-export {
-	NAME,
-	SET_REDIRECTS,
-	SET_TOTAL_ITEMS,
-	ERROR_CODE,
-	DEFAULT_PARAMS,
-	ITEMS_PER_PAGE,
-	SET_IMPORTS,
-	SET_TOTAL_IMPORTS,
-};
+export { ERROR_CODE, DEFAULT_PARAMS, ITEMS_PER_PAGE };

package/src/containers/Redirects/index.tsx

@@ -1,4 +1,15 @@
-import * as redirectsActions from "./actions";
-import { redirectsReducer } from "./reducer";
+import { addRedirect, deleteRedirect, getRedirects, importRedirects, updateRedirect } from "./thunks";
 
-export { redirectsActions, redirectsReducer };
+const redirectsActions = {
+	getRedirects,
+	addRedirect,
+	updateRedirect,
+	deleteRedirect,
+	importRedirects,
+};
+
+export { redirectsActions };
+
+export type { IRedirectsState } from "./slice";
+export { redirectsInitialState, redirectsReducer } from "./slice";
+export type { IAddRedirectResult, IRedirectsQuery } from "./thunks";

package/src/containers/Redirects/slice.ts

@@ -0,0 +1,60 @@
+import type { IRedirect } from "@ax/types";
+
+import { createSlice, type PayloadAction } from "@reduxjs/toolkit";
+
+/**
+ * The `redirects` area holds ONE page of the redirect catalogue plus the result of the
+ * last CSV import check (UC-AX-manage-redirects). Paging, searching and filtering live in
+ * the view, so the list is whatever page was asked for last and `totalItems` is what the
+ * pager counts with.
+ *
+ * The four setters stay internal to the area: nothing outside dispatches them — the legacy
+ * `actions.tsx` did not export them either — so the barrel keeps them private and the
+ * public surface is just the five thunks.
+ *
+ * Out of redux-persist since this migration (ADR 0002).
+ */
+export interface IRedirectsState {
+	redirects: IRedirect[];
+	totalItems: number;
+	totalImports: number;
+	imports: null | {
+		error: IRedirect[];
+		existing: IRedirect[];
+		ok: IRedirect[];
+	};
+}
+
+export const initialState: IRedirectsState = {
+	redirects: [],
+	totalItems: 0,
+	totalImports: 0,
+	imports: null,
+};
+
+const redirectsSlice = createSlice({
+	name: "redirects",
+	initialState,
+	// The legacy reducer had all four action types share one `return { ...state, ...payload }`
+	// branch, which worked because each payload carried exactly one key. One reducer per
+	// field says the same thing without the indirection.
+	reducers: {
+		setRedirects(state, action: PayloadAction<IRedirect[]>) {
+			state.redirects = action.payload;
+		},
+		setTotalItems(state, action: PayloadAction<number>) {
+			state.totalItems = action.payload;
+		},
+		setImports(state, action: PayloadAction<IRedirectsState["imports"]>) {
+			state.imports = action.payload;
+		},
+		setTotalImports(state, action: PayloadAction<number>) {
+			state.totalImports = action.payload;
+		},
+	},
+});
+
+export const { setRedirects, setTotalItems, setImports, setTotalImports } = redirectsSlice.actions;
+
+export { initialState as redirectsInitialState };
+export const redirectsReducer = redirectsSlice.reducer;