@griddo/ax 12.6.1 → 12.6.2

package/src/containers/Settings/Languages/index.tsx

@@ -1,16 +1,4 @@
-import { resetForm, setForm, updateFormValue } from "./slice";
-import { createSiteLanguage, deleteSiteLanguage, updateSiteLanguage } from "./thunks";
+import * as languagesActions from "./actions";
+import { languagesReducer } from "./reducer";
 
-const languagesActions = {
-	setForm,
-	updateFormValue,
-	resetForm,
-	createSiteLanguage,
-	updateSiteLanguage,
-	deleteSiteLanguage,
-};
-
-export { languagesActions };
-
-export type { ILanguageState } from "./slice";
-export { languagesInitialState, languagesReducer } from "./slice";
+export { languagesActions, languagesReducer };

package/src/containers/Settings/Languages/reducer.tsx

@@ -0,0 +1,31 @@
+import { CREATE_FORM, UPDATE_FORM } from "./constants";
+
+export interface ILanguageState {
+	form: {
+		language: number | null;
+		path: string;
+		domain: number | null;
+		isDefault: boolean;
+	};
+}
+
+export const initialState = {
+	form: {
+		language: null,
+		path: "",
+		domain: null,
+		isDefault: false,
+	},
+};
+
+export function reducer(state = initialState, action: any): ILanguageState {
+	switch (action.type) {
+		case CREATE_FORM:
+		case UPDATE_FORM:
+			return { ...state, ...action.payload };
+		default:
+			return state;
+	}
+}
+
+export { initialState as languagesInitialState, reducer as languagesReducer };

package/src/containers/Settings/Social/actions.tsx

@@ -0,0 +1,63 @@
+import type { Dispatch } from "redux";
+
+import { SET_SOCIAL } from "./constants";
+
+import type { ISetSocialAction } from "./interfaces";
+
+import { appActions } from "@ax/containers/App";
+import { handleRequest } from "@ax/helpers";
+import { social } from "@ax/api";
+
+function setSocial(socialInfo: any): ISetSocialAction {
+	return { type: SET_SOCIAL, payload: { ...socialInfo } };
+}
+
+function saveSocial(form: Record<string, string>): (dispatch: Dispatch, getState: any) => Promise<boolean> {
+	return async (dispatch, getState) => {
+		try {
+			const {
+				sites: { currentSiteInfo },
+			} = getState();
+
+			const responseActions = {
+				handleSuccess: (data: Record<string, string>) => {
+					dispatch(setSocial(data));
+					return true;
+				},
+				handleError: (data: any) => appActions.handleError(data)(dispatch),
+			};
+
+			const callback = async () => social.updateSocial(currentSiteInfo.id, form);
+
+			return await handleRequest(callback, responseActions, [appActions.setIsSaving])(dispatch);
+		} catch (e) {
+			console.log(e);
+			return false;
+		}
+	};
+}
+
+function getSocial(): (dispatch: any, getState: any) => Promise<void> {
+	return async (dispatch, getState) => {
+		try {
+			const {
+				sites: { currentSiteInfo },
+			} = getState();
+
+			const responseActions = {
+				handleSuccess: (data: Record<string, string>) => {
+					dispatch(setSocial(data));
+				},
+				handleError: () => console.log("Error en getSocial"),
+			};
+
+			const callback = () => social.getSocial(currentSiteInfo.id);
+
+			await handleRequest(callback, responseActions, [appActions.setIsLoading])(dispatch);
+		} catch (e) {
+			console.log(e);
+		}
+	};
+}
+
+export { getSocial, saveSocial, setSocial };

package/src/containers/Settings/Social/constants.tsx

@@ -0,0 +1,3 @@
+export const NAME = "social";
+
+export const SET_SOCIAL = `${NAME}/SET_SOCIAL`;

package/src/containers/Settings/Social/index.tsx

@@ -1,12 +1,4 @@
-import { setSocial } from "./slice";
-import { getSocial, saveSocial } from "./thunks";
+import * as socialActions from "./actions";
+import { socialReducer } from "./reducer";
 
-const socialActions = {
-	setSocial,
-	getSocial,
-	saveSocial,
-};
-
-export { socialActions };
-
-export { socialInitialState, socialReducer } from "./slice";
+export { socialActions, socialReducer };

package/src/containers/Settings/Social/interfaces.tsx

@@ -0,0 +1,9 @@
+import type { SET_SOCIAL } from "./constants";
+import type { ISocialState } from "@ax/types";
+
+export interface ISetSocialAction {
+	type: typeof SET_SOCIAL;
+	payload: ISocialState;
+}
+
+export type SocialActionsCreators = ISetSocialAction;

package/src/containers/Settings/Social/reducer.tsx

@@ -0,0 +1,18 @@
+import { SET_SOCIAL } from "./constants";
+
+import type { ISocialState } from "@ax/types";
+
+import type { SocialActionsCreators } from "./interfaces";
+
+export const initialState = {};
+
+export function reducer(state = initialState, action: SocialActionsCreators): ISocialState {
+	switch (action.type) {
+		case SET_SOCIAL:
+			return { ...action.payload };
+		default:
+			return state;
+	}
+}
+
+export { initialState as socialInitialState, reducer as socialReducer };

package/src/containers/Sites/actions.tsx

@@ -9,7 +9,6 @@ import { socialActions } from "@ax/containers/Settings/Social";
 import { structuredDataActions } from "@ax/containers/StructuredData";
 import { usersActions } from "@ax/containers/Users";
 import { getDefaultTheme, getThemeElements, handleRequest, isReqOk, sortBy } from "@ax/helpers";
-import type { AppDispatch } from "@ax/store";
 import type {
 	IGetGlobalPagesParams,
 	IGetSitePagesParams,
@@ -358,7 +357,7 @@ function setSiteInfo(currentSiteInfo: ISite): (dispatch: Dispatch, getState: ()
 
 			// get analytics
 			const analyticsResponse: any = await analytics.getAnalytics(currentSiteInfo.id);
-			if (isReqOk(analyticsResponse.status)) {
+			if (isReqOk(socialResponse.status)) {
 				dispatch(analyticsActions.setAnalytics(analyticsResponse.data));
 			} else {
 				console.log("Error en sites getAnalytics");
@@ -570,10 +569,7 @@ function resetSiteValues(siteID: number): (dispatch: Dispatch) => void {
 		resetMenuValues(dispatch);
 		dispatch(setCurrentSitePages([]));
 		dispatch(setTotalItems(0));
-		// `analytics` is already on RTK while `sites` is not (wave 3), so its thunk is
-		// dispatched, not invoked by hand: a createAsyncThunk expects the full
-		// (dispatch, getState, extra) triple. The cast is the seam between the two.
-		(dispatch as AppDispatch)(getAnalytics(siteID));
+		getAnalytics(siteID)(dispatch);
 		dispatch(setCurrentSearch(""));
 		dispatch(setThemeElements(null));
 	};

package/src/hooks/heartbeat.ts

@@ -0,0 +1,32 @@
+import { useEffect } from "react";
+
+/**
+ * Keeps the edit lock of the page being edited alive, renewing it every 30 seconds.
+ *
+ * sc-118275: this used to live inside each editor's mount effect, whose dependency list is empty,
+ * so the interval kept pinging whichever id it captured on mount. Creating a translation from
+ * inside the editor moves the store to the new page but never remounts, so the lock stayed on the
+ * original page for as long as the editor was open — and the translation, the one actually being
+ * edited, was left unlocked. Keeping pageID in the dependency list is what makes the heartbeat
+ * follow the page.
+ *
+ * The leading ping is not redundant with the interval: on a page switch the new id would otherwise
+ * sit unlocked for 30 seconds, because savePage dispatches setUserEditing(page.editing) with a null
+ * payload when nobody else holds the page, and the editors' [userEditing] effect only pings when
+ * that reference changes.
+ *
+ * sendPagePing has to keep a stable reference across renders; both editors get it from an object
+ * literal mapDispatchToProps, so connect binds it once. If it ever started changing on every
+ * render the effect would re-run, the cleanup would clear the interval before it could fire and
+ * there would be no heartbeat at all.
+ */
+const useEditingHeartbeat = (pageID: number | null, sendPagePing: (pageID: number) => void): void => {
+	useEffect(() => {
+		if (!pageID) return;
+		sendPagePing(pageID);
+		const interval = setInterval(() => sendPagePing(pageID), 30000);
+		return () => clearInterval(interval);
+	}, [pageID, sendPagePing]);
+};
+
+export { useEditingHeartbeat };

package/src/hooks/index.tsx

@@ -8,6 +8,7 @@ import {
 	usePrevious,
 	useShouldBeSaved,
 } from "./forms";
+import { useEditingHeartbeat } from "./heartbeat";
 import { useOnMessageReceivedFromIframe, useOnMessageReceivedFromOutside } from "./iframe";
 import { useURLSearchParam } from "./location";
 import { useContextMenu, useHandleClickOutside, useModal, useModals, useToast } from "./modals";
@@ -29,6 +30,7 @@ export {
 	useContextMenu,
 	useDebounce,
 	useDebouncedCallback,
+	useEditingHeartbeat,
 	useEmptyState,
 	useEqualStructured,
 	useFirefoxScrollLock,

package/src/index.tsx

@@ -1,18 +1,17 @@
 import React from "react";
-import { Provider } from "react-redux";
-import { Router } from "react-router-dom";
-
 import ReactDOM from "react-dom/client";
+import { Provider } from "react-redux";
 import { PersistGate } from "redux-persist/integration/react";
+import history from "./routes/history";
+import { ConnectedRouter } from "connected-react-router";
 
 import { GlobalStore } from "./GlobalStore";
 import App from "./modules/App";
-import history from "./routes/history";
 
 export class Main {
 	public static start(): void {
 		const globalStore = new GlobalStore();
-		const configStore = globalStore.configureStore();
+		const configStore = globalStore.configureStore(history);
 
 		const container = document.getElementById("root");
 		if (!container) throw new Error("Failed to find the root element");
@@ -20,11 +19,11 @@ export class Main {
 
 		root.render(
 			<Provider store={configStore.store}>
-				<Router history={history}>
+				<ConnectedRouter history={history}>
 					<PersistGate loading={undefined} persistor={configStore.persistor}>
 						<App />
 					</PersistGate>
-				</Router>
+				</ConnectedRouter>
 			</Provider>,
 		);
 	}

package/src/modules/ActivityLog/ItemLog/EventItem/index.tsx

@@ -1,5 +1,6 @@
 import type React from "react";
 import { useState } from "react";
+import { connect } from "react-redux";
 
 import { Avatar, RestoreModal, Tag, TruncatedTooltip } from "@ax/components";
 import { activityLogActions } from "@ax/containers/ActivityLog";
@@ -7,9 +8,9 @@ import { navigationActions } from "@ax/containers/Navigation";
 import { pageEditorActions } from "@ax/containers/PageEditor";
 import { structuredDataActions } from "@ax/containers/StructuredData";
 import { useModal } from "@ax/hooks";
-import { useAppDispatch, useAppSelector } from "@ax/store";
+import type { IRootState } from "@ax/types";
 
-import type { LogActivityDTO } from "@griddo/api-types";
+import type { LogActivityDTO, LogContentDTO, LogContentTypeDTO } from "@griddo/api-types";
 
 import { eventKey } from "../../constants";
 import DetailModal from "../../DetailModal";
@@ -18,12 +19,9 @@ import { getContentTypeSchemaVersion, getPageSchemaVersion } from "../../utils";
 import * as S from "./style";
 
 const EventItem = (props: IEventItemProps) => {
-	const { item, getLog } = props;
+	const { item, schemaVersion, restorePage, restoreNavigation, restoreStructuredData, goToLogContent, getLog } = props;
 	const { user, created, site, contentType, content, eventType } = item;
 
-	const dispatch = useAppDispatch();
-	const schemaVersion = useAppSelector((state) => state.structuredData.schemaVersion);
-
 	const { isOpen: isDetailOpen, toggleModal: toggleDetailModal } = useModal();
 	const { isOpen: isRestoreOpen, toggleModal: toggleRestoreModal } = useModal();
 	const [schemaChange, setSchemaChange] = useState(false);
@@ -34,14 +32,14 @@ const EventItem = (props: IEventItemProps) => {
 		switch (type) {
 			case eventKey.DELETED_PAGE:
 			case eventKey.DELETED_CONTENT_TYPE_PAGE:
-				return await dispatch(pageEditorActions.restorePage(id));
+				return await restorePage(id);
 			case eventKey.DELETED_HEADER:
-				return await dispatch(navigationActions.restoreNavigation(id, "header"));
+				return await restoreNavigation(id, "header");
 			case eventKey.DELETED_FOOTER:
-				return await dispatch(navigationActions.restoreNavigation(id, "footer"));
+				return await restoreNavigation(id, "footer");
 			case eventKey.DELETED_CATEGORY:
 			case eventKey.DELETED_CONTENT_TYPE:
-				return await dispatch(structuredDataActions.restoreStructuredDataContent(id));
+				return await restoreStructuredData(id);
 			default:
 				return false;
 		}
@@ -85,12 +83,12 @@ const EventItem = (props: IEventItemProps) => {
 	const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
 		e.stopPropagation();
 		const siteID = site?.id || null;
-		dispatch(activityLogActions.goToLogContent({ contentType, content, site: siteID }));
+		goToLogContent(contentType, content, siteID);
 	};
 
 	const handleKeyDown = () => {
 		const siteID = site?.id || null;
-		dispatch(activityLogActions.goToLogContent({ contentType, content, site: siteID }));
+		goToLogContent(contentType, content, siteID);
 	};
 
 	return (
@@ -154,7 +152,23 @@ const EventItem = (props: IEventItemProps) => {
 
 interface IEventItemProps {
 	item: LogActivityDTO;
+	schemaVersion: string;
+	restorePage(id: number): Promise<boolean>;
+	restoreNavigation(navID: number, type: string): Promise<boolean>;
+	restoreStructuredData(dataID: number): Promise<boolean>;
+	goToLogContent(contentType: LogContentTypeDTO | null, content: LogContentDTO | null, site: number | null): void;
 	getLog(): void;
 }
 
-export default EventItem;
+const mapStateToProps = (state: IRootState) => ({
+	schemaVersion: state.structuredData.schemaVersion,
+});
+
+const mapDispatchToProps = {
+	restorePage: pageEditorActions.restorePage,
+	restoreNavigation: navigationActions.restoreNavigation,
+	restoreStructuredData: structuredDataActions.restoreStructuredDataContent,
+	goToLogContent: activityLogActions.goToLogContent,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(EventItem);

package/src/modules/ActivityLog/ItemLogUser/UserItem/EventItem/index.tsx

@@ -1,5 +1,6 @@
 import type React from "react";
 import { useState } from "react";
+import { connect } from "react-redux";
 
 import { RestoreModal } from "@ax/components";
 import { activityLogActions } from "@ax/containers/ActivityLog";
@@ -7,9 +8,9 @@ import { navigationActions } from "@ax/containers/Navigation";
 import { pageEditorActions } from "@ax/containers/PageEditor";
 import { structuredDataActions } from "@ax/containers/StructuredData";
 import { useModal } from "@ax/hooks";
-import { useAppDispatch, useAppSelector } from "@ax/store";
+import type { IRootState } from "@ax/types";
 
-import type { LogActivityDTO } from "@griddo/api-types";
+import type { LogActivityDTO, LogContentDTO, LogContentTypeDTO } from "@griddo/api-types";
 
 import { eventKey } from "./../../../constants";
 import DetailModal from "./../../../DetailModal";
@@ -18,10 +19,7 @@ import { getContentTypeSchemaVersion, getPageSchemaVersion } from "./../../../ut
 import * as S from "./style";
 
 const EventItem = (props: IEventItemProps) => {
-	const { item, getLog } = props;
-
-	const dispatch = useAppDispatch();
-	const schemaVersion = useAppSelector((state) => state.structuredData.schemaVersion);
+	const { item, schemaVersion, restorePage, restoreNavigation, restoreStructuredData, goToLogContent, getLog } = props;
 
 	const { created, site, contentType, content, eventType } = item;
 
@@ -35,14 +33,14 @@ const EventItem = (props: IEventItemProps) => {
 		switch (type) {
 			case eventKey.DELETED_PAGE:
 			case eventKey.DELETED_CONTENT_TYPE_PAGE:
-				return await dispatch(pageEditorActions.restorePage(id));
+				return await restorePage(id);
 			case eventKey.DELETED_HEADER:
-				return await dispatch(navigationActions.restoreNavigation(id, "header"));
+				return await restoreNavigation(id, "header");
 			case eventKey.DELETED_FOOTER:
-				return await dispatch(navigationActions.restoreNavigation(id, "footer"));
+				return await restoreNavigation(id, "footer");
 			case eventKey.DELETED_CATEGORY:
 			case eventKey.DELETED_CONTENT_TYPE:
-				return await dispatch(structuredDataActions.restoreStructuredDataContent(id));
+				return await restoreStructuredData(id);
 			default:
 				return false;
 		}
@@ -86,12 +84,12 @@ const EventItem = (props: IEventItemProps) => {
 	const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
 		e.stopPropagation();
 		const siteID = site?.id || null;
-		dispatch(activityLogActions.goToLogContent({ contentType, content, site: siteID }));
+		goToLogContent(contentType, content, siteID);
 	};
 
 	const handleKeyDown = () => {
 		const siteID = site?.id || null;
-		dispatch(activityLogActions.goToLogContent({ contentType, content, site: siteID }));
+		goToLogContent(contentType, content, siteID);
 	};
 
 	return (
@@ -153,7 +151,23 @@ const EventItem = (props: IEventItemProps) => {
 
 interface IEventItemProps {
 	item: LogActivityDTO;
+	schemaVersion: string;
+	restorePage(id: number): Promise<boolean>;
+	restoreNavigation(navID: number, type: string): Promise<boolean>;
+	restoreStructuredData(dataID: number): Promise<boolean>;
+	goToLogContent(contentType: LogContentTypeDTO | null, content: LogContentDTO | null, site: number | null): void;
 	getLog(): void;
 }
 
-export default EventItem;
+const mapStateToProps = (state: IRootState) => ({
+	schemaVersion: state.structuredData.schemaVersion,
+});
+
+const mapDispatchToProps = {
+	restorePage: pageEditorActions.restorePage,
+	restoreNavigation: navigationActions.restoreNavigation,
+	restoreStructuredData: structuredDataActions.restoreStructuredDataContent,
+	goToLogContent: activityLogActions.goToLogContent,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(EventItem);

package/src/modules/ActivityLog/index.tsx

@@ -1,27 +1,33 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
+import { connect } from "react-redux";
+import { format, subDays } from "date-fns";
 
+import type { LogActivityExportRequest, LogActivityPaginationRequest } from "@griddo/api-types";
+import type { ILogItemsByDay, ILogItemsByUser, IQueryValue, IRootState, IStructuredData } from "@ax/types";
 import { EmptyState, ErrorToast, FilterTagsBar, MainWrapper, SearchTagsBar, Select, TableList } from "@ax/components";
 import { activityLogActions } from "@ax/containers/ActivityLog";
 import { structuredDataActions } from "@ax/containers/StructuredData";
 import { useModal } from "@ax/hooks";
-import { useAppDispatch, useAppSelector } from "@ax/store";
-import type { ILogItemsByDay, ILogItemsByUser, IQueryValue } from "@ax/types";
 
-import type { LogActivityExportRequest, LogActivityPaginationRequest } from "@griddo/api-types";
-import { format, subDays } from "date-fns";
-
-import DownloadModal from "./DownloadModal";
 import { useFilterQuery } from "./hooks";
+import TableHeader from "./TableHeader";
 import ItemLog from "./ItemLog";
 import ItemLogUser from "./ItemLogUser";
-import TableHeader from "./TableHeader";
+import DownloadModal from "./DownloadModal";
 
 import * as S from "./style";
 
-const ActivityLog = () => {
-	const dispatch = useAppDispatch();
-	const activityLog = useAppSelector((state) => state.activityLog.activityLog);
-	const listMode = useAppSelector((state) => state.activityLog.listMode);
+const ActivityLog = (props: IActivityLogProps) => {
+	const {
+		activityLog,
+		listMode,
+		setListMode,
+		getActivityLog,
+		getActivityLogByUser,
+		downloadActivityLog,
+		getStructuredData,
+		setCurrentData,
+	} = props;
 
 	const itemsPerPage = 100;
 	const firstPage = 1;
@@ -62,14 +68,13 @@ const ActivityLog = () => {
 	const handleGetLog = async () => {
 		const params = getParams();
 		if (isModeUser) {
-			await dispatch(activityLogActions.getActivityLogByUser(params));
+			await getActivityLogByUser(params);
 		} else {
-			await dispatch(activityLogActions.getActivityLog(params));
+			await getActivityLog(params);
 		}
 	};
 
-	const handleUpdateStructuredDate = async () =>
-		await dispatch(structuredDataActions.getStructuredData(null, null, false));
+	const handleUpdateStructuredDate = async () => await getStructuredData(null, null, false);
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useEffect(() => {
@@ -79,7 +84,7 @@ const ActivityLog = () => {
 	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useEffect(() => {
 		handleUpdateStructuredDate();
-		dispatch(structuredDataActions.setCurrentData(null));
+		setCurrentData(null);
 	}, []);
 
 	const onScroll = (e: any) => setIsScrolling(e.target.scrollTop > 0);
@@ -87,11 +92,11 @@ const ActivityLog = () => {
 	const handleSelectChange = async (value: string) => {
 		const params = getParams();
 		if (value === "user") {
-			await dispatch(activityLogActions.getActivityLogByUser({ ...params, page: firstPage }));
+			await getActivityLogByUser({ ...params, page: firstPage });
 		} else {
-			await dispatch(activityLogActions.getActivityLog({ ...params, page: firstPage }));
+			await getActivityLog({ ...params, page: firstPage });
 		}
-		dispatch(activityLogActions.setListMode(value));
+		setListMode(value);
 	};
 
 	const sortItems = async (isAscending: boolean) => {
@@ -134,7 +139,7 @@ const ActivityLog = () => {
 			format: [downloadForm.format],
 		};
 
-		await dispatch(activityLogActions.downloadActivityLog(data));
+		await downloadActivityLog(data);
 
 		toggleDownloadModal();
 		setDownloadForm(initialState);
@@ -206,7 +211,6 @@ const ActivityLog = () => {
 	return (
 		<MainWrapper
 			title="Logs"
-			screen="activity-log"
 			rightButton={rightButtonProps}
 			rightLineButton={rightLineButtonProps}
 			searchAction={handleSearch}
@@ -290,4 +294,29 @@ export interface IDownloadFormState {
 	endDate: string | null;
 }
 
-export default ActivityLog;
+interface IActivityLogProps {
+	activityLog: ILogItemsByDay | ILogItemsByUser;
+	listMode: string;
+	getActivityLog(params: LogActivityPaginationRequest): Promise<void>;
+	getActivityLogByUser(params: LogActivityPaginationRequest): Promise<void>;
+	setListMode(listMode: string): void;
+	downloadActivityLog(data: LogActivityExportRequest): Promise<void>;
+	getStructuredData(token: string | null, siteID?: number | null, hasLoading?: boolean): Promise<void>;
+	setCurrentData(currentStructuredData: IStructuredData | null): void;
+}
+
+const mapStateToProps = (state: IRootState) => ({
+	activityLog: state.activityLog.activityLog,
+	listMode: state.activityLog.listMode,
+});
+
+const mapDispatchToProps = {
+	getActivityLog: activityLogActions.getActivityLog,
+	getActivityLogByUser: activityLogActions.getActivityLogByUser,
+	setListMode: activityLogActions.setListMode,
+	downloadActivityLog: activityLogActions.downloadActivityLog,
+	getStructuredData: structuredDataActions.getStructuredData,
+	setCurrentData: structuredDataActions.setCurrentData,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(ActivityLog);