@griddo/ax 12.10.5 → 12.11.0

package/src/modules/Redirects/hooks.tsx

@@ -18,14 +18,17 @@ const useSortedListStatus = () => {
 const useFilterQuery = (site: ISite | null) => {
 	const initialQueryValues: Record<string, IQueryValue[]> = {
 		sites: site ? [{ value: site.id, label: site.name }] : [{ value: "all", label: "All" }],
+		type: [],
 		order: [],
 	};
 
+	const initialFilterQuery = `&sites=${site?.id || "global"}`;
+
 	const [query, setQuery] = useState(initialQueryValues);
-	const [currentFilterQuery, setCurrentFilterQuery] = useState(`&sites=${site?.id || "global"}`);
+	const [currentFilterQuery, setCurrentFilterQuery] = useState(initialFilterQuery);
 
 	const setFilterQuery = (filterValues: any) => {
-		const { sites, order } = filterValues;
+		const { sites, type, order } = filterValues;
 		let filterQuery = "";
 
 		const currentQuery = (pointer: string, values: IQueryValue[]): string => {
@@ -40,6 +43,10 @@ const useFilterQuery = (site: ISite | null) => {
 			filterQuery = currentQuery("sites", sites);
 		}
 
+		if (type) {
+			filterQuery = currentQuery("type", type);
+		}
+
 		if (order) {
 			filterQuery = currentQuery("order", order);
 		}
@@ -48,10 +55,11 @@ const useFilterQuery = (site: ISite | null) => {
 	};
 
 	const setFiltersSelection = (pointer: string, filter: IQueryValue[], isAscendent?: boolean) => {
-		const { sites, order } = query;
+		const { sites, type, order } = query;
 		const orderMethod = isAscendent ? "asc" : "desc";
 		const filterValues: Record<string, IQueryValue[]> = {
 			sites: pointer === "sites" ? filter : sites,
+			type: pointer === "type" ? filter : type,
 			order: pointer === "order" ? [{ value: `${filter[0].value}-${orderMethod}`, label: filter[0].label }] : order,
 		};
 
@@ -61,7 +69,7 @@ const useFilterQuery = (site: ISite | null) => {
 
 	const resetFilterQuery = () => {
 		setQuery(initialQueryValues);
-		setCurrentFilterQuery("");
+		setCurrentFilterQuery(initialFilterQuery);
 	};
 
 	return {

package/src/modules/Redirects/index.tsx

@@ -14,14 +14,14 @@ import {
 import { appActions } from "@ax/containers/App";
 import { redirectsActions } from "@ax/containers/Redirects";
 import { useBulkSelection, useModals, useToast } from "@ax/hooks";
-import type { IEmptyStateProps, INavItem, IQueryValue, IRedirect, IRootState, ISite } from "@ax/types";
+import type { IEmptyStateProps, INavItem, IQueryValue, IRedirect, IRootState, ISite, RedirectType } from "@ax/types";
 
 import { DeleteModal, ImportCheckModal, ImportModal, OverwriteModal } from "./atoms";
 import BulkHeader from "./BulkHeader";
 import { useFilterQuery, useSortedListStatus } from "./hooks";
 import RedirectItem from "./RedirectItem";
 import RedirectPanel from "./RedirectPanel";
-import { getSortedListStatus } from "./utils";
+import { DEFAULT_REDIRECT_TYPE, getSortedListStatus } from "./utils";
 
 import * as S from "./style";
 
@@ -61,12 +61,13 @@ const Redirects = (props: IProps): JSX.Element => {
 	const [isEmpty, setIsEmpty] = useState(false);
 	const [emptyStateProps, setEmptyStateProps] = useState<IEmptyStateProps>({});
 
-	const initState = {
+	const initState: IRedirect = {
 		from: "",
 		to: {
 			pageId: undefined,
 			url: "",
 		},
+		type: DEFAULT_REDIRECT_TYPE,
 	};
 
 	const [formValues, setFormValues] = useState<IRedirect>(initState);
@@ -202,7 +203,12 @@ const Redirects = (props: IProps): JSX.Element => {
 
 	const handleAddRedirect = async (force?: boolean) => {
 		const toPage = formValues.to.pageId ? formValues.to.pageId : formValues.to.url;
-		await addRedirect({ from: formValues.from, to: toPage }, () => toggleModal("overwrite"), force, filterQuery);
+		await addRedirect(
+			{ from: formValues.from, to: toPage, type: formValues.type },
+			() => toggleModal("overwrite"),
+			force,
+			filterQuery,
+		);
 		isOpen("edit") && toggleModal("edit");
 	};
 
@@ -268,7 +274,8 @@ const Redirects = (props: IProps): JSX.Element => {
 					<S.TitleWrapper>
 						<S.Title>URL Redirects Manager</S.Title>
 						<S.Description>
-							You can create 301 redirects to direct users and search engines from an old URL to a new one.
+							You can create redirects to direct users and search engines from an old URL to a new one, and choose
+							whether each one is permanent (301) or temporary (302).
 						</S.Description>
 					</S.TitleWrapper>
 					<S.TableWrapper>
@@ -282,14 +289,15 @@ const Redirects = (props: IProps): JSX.Element => {
 							<>
 								<S.SearchTags>
 									<SearchTagsBar query={searchQuery} setQuery={handleSearch} />
-									{!currentSite && (
-										<FilterTagsBar
-											filters={filterValues}
-											setFilters={setFiltersSelection}
-											resetFilters={resetFilterQuery}
-											labels={{ sites: "Site" }}
-										/>
-									)}
+									{/* El filtro de tipo existe en los dos ámbitos, así que la barra ya no
+									    depende del ámbito. En el de sitio se etiqueta solo el tipo: el sitio
+									    lo fija la ruta y ofrecer su tag invitaría a quitar lo que no se puede. */}
+									<FilterTagsBar
+										filters={filterValues}
+										setFilters={setFiltersSelection}
+										resetFilters={resetFilterQuery}
+										labels={currentSite ? { type: "Type" } : { sites: "Site", type: "Type" }}
+									/>
 								</S.SearchTags>
 								{isEmpty ? (
 									<S.EmptyWrapper>
@@ -399,7 +407,7 @@ interface IDispatchProps {
 	getRedirects(params: any, filters: string): void;
 	deleteRedirect(redirectID: number[]): Promise<boolean>;
 	addRedirect(
-		redirect: { from: string; to: string | number },
+		redirect: { from: string; to: string | number; type?: RedirectType },
 		errorAction: () => void,
 		force?: boolean,
 		filter?: string,

package/src/modules/Redirects/utils.tsx

@@ -1,3 +1,5 @@
+import type { RedirectType } from "@ax/types";
+
 const getSortedListStatus = (
 	orderPointer: string,
 	isAscending: boolean,
@@ -10,4 +12,11 @@ const getSortedListStatus = (
 	return sortedListStatus;
 };
 
-export { getSortedListStatus };
+const DEFAULT_REDIRECT_TYPE: RedirectType = "301";
+
+const REDIRECT_TYPE_COLORS: Record<RedirectType, string> = {
+	"301": "#C9EFFF",
+	"302": "#DBB9FF",
+};
+
+export { getSortedListStatus, DEFAULT_REDIRECT_TYPE, REDIRECT_TYPE_COLORS };

package/src/types/index.tsx

@@ -914,10 +914,13 @@ export interface IDomainRobot {
 	computedContent: string;
 }
 
+export type RedirectType = "301" | "302";
+
 export interface IRedirect {
 	id?: number;
 	from: string;
 	to: { pageId?: number; url: string; linkTo?: number; href?: string };
+	type?: RedirectType;
 	site?: { siteId: number | null; siteName: string | null; siteUrl: string | null };
 	domain?: string;
 	date?: string;