@griddo/ax 11.10.11-rc.0 → 11.10.12-rc.0

package/src/modules/Sites/SitesList/SiteModal/index.tsx

@@ -8,84 +8,84 @@ import { ErrorToast, FieldsBehavior } from "@ax/components";
 import * as S from "./style";
 
 const SiteModal = (props: ISiteModalProps): JSX.Element => {
-  const { languages, form, setForm } = props;
-  const { name, defaultLanguage, path, domain } = form;
-  const globalDefaultLang = languages?.find((lang: ILanguage) => lang.isDefault);
+	const { languages, form, setForm } = props;
+	const { name, defaultLanguage, path, domain } = form;
+	const globalDefaultLang = languages?.find((lang: ILanguage) => lang.isDefault);
 
-  const updateForm = (newValue: Record<string, string | number>) =>
-    setForm((state: ISettingsForm) => ({ ...state, ...newValue }));
+	const updateForm = (newValue: Record<string, string | number>) =>
+		setForm((state: ISettingsForm) => ({ ...state, ...newValue }));
 
-  const setNameValue = (value: string) => updateForm({ name: value, path: slugify(value) });
-  const setLangValue = (value: number) => updateForm({ defaultLanguage: value });
-  const setPathValue = (value: string) => updateForm({ path: value });
-  const setDomainValue = (value: number) => updateForm({ domain: value });
+	const setNameValue = (value: string) => updateForm({ name: value, path: slugify(value) });
+	const setLangValue = (value: number) => updateForm({ defaultLanguage: value });
+	const setPathValue = (value: string) => updateForm({ path: value });
+	const setDomainValue = (value: number) => updateForm({ domain: value });
 
-  useEffect(() => {
-    globalDefaultLang && setLangValue(globalDefaultLang.id);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
+	useEffect(() => {
+		globalDefaultLang && setLangValue(globalDefaultLang.id);
+	}, []);
 
-  const slugHelpText =
-    "The path is for the site on this language. Please, fill with the name of the site. Example: /the-site-url";
+	const slugHelpText =
+		"The path is for the site on this language. Please, fill with the name of the site. Example: /the-site-url";
 
-  return (
-    <>
-      <ErrorToast size="l" />
-      <S.Form data-testid="site-modal-form">
-        <S.FieldsWrapper>
-          <FieldsBehavior
-            title="Name"
-            name="name"
-            fieldType="TextField"
-            value={name}
-            mandatory={true}
-            placeholder="Type a name of your new site"
-            onChange={setNameValue}
-          />
-          <FieldsBehavior
-            title="Select default language"
-            name="language"
-            fieldType="AsyncSelect"
-            value={defaultLanguage}
-            entity="languages"
-            onChange={setLangValue}
-            mandatory={true}
-          />
-        </S.FieldsWrapper>
-        <S.FieldsWrapper>
-          <FieldsBehavior
-            title="Domain"
-            name="domain"
-            fieldType="AsyncSelect"
-            entity="domains"
-            value={domain}
-            onChange={setDomainValue}
-            mandatory={true}
-          />
-          <FieldsBehavior
-            title="Path"
-            name="path"
-            fieldType="TextField"
-            value={path}
-            mandatory={true}
-            placeholder="/site"
-            onChange={setPathValue}
-            helptext={slugHelpText}
-          />
-        </S.FieldsWrapper>
-      </S.Form>
-    </>
-  );
+	return (
+		<>
+			<ErrorToast size="l" />
+			<S.Form data-testid="site-modal-form">
+				<S.FieldsWrapper>
+					<FieldsBehavior
+						title="Name"
+						name="name"
+						fieldType="TextField"
+						value={name}
+						mandatory={true}
+						placeholder="Type a name of your new site"
+						onChange={setNameValue}
+					/>
+					<FieldsBehavior
+						title="Select default language"
+						name="language"
+						fieldType="AsyncSelect"
+						value={defaultLanguage}
+						entity="languages"
+						onChange={setLangValue}
+						mandatory={true}
+					/>
+				</S.FieldsWrapper>
+				<S.FieldsWrapper>
+					<FieldsBehavior
+						title="Domain"
+						name="domain"
+						fieldType="AsyncSelect"
+						entity="domains"
+						value={domain}
+						onChange={setDomainValue}
+						mandatory={true}
+					/>
+					<FieldsBehavior
+						title="Path"
+						name="path"
+						fieldType="TextField"
+						value={path}
+						mandatory={true}
+						placeholder="/site"
+						onChange={setPathValue}
+						helptext={slugHelpText}
+					/>
+				</S.FieldsWrapper>
+			</S.Form>
+		</>
+	);
 };
 
 const mapStateToProps = (state: IRootState) => ({
-  languages: state.app.globalLangs,
+	languages: state.app.globalLangs,
 });
 
 interface IStateProps {
-  languages?: ILanguage[];
-  form: { name: string; defaultLanguage: number | null; path: string; domain: string | null };
-  setForm: React.Dispatch<React.SetStateAction<any>>;
+	languages?: ILanguage[];
+	form: { name: string; defaultLanguage: number | null; path: string; domain: string | null };
+	setForm: React.Dispatch<React.SetStateAction<any>>;
 }
 
 type ISiteModalProps = IStateProps;

package/src/modules/Sites/SitesList/atoms.tsx

@@ -6,42 +6,42 @@ import { Tooltip, Image } from "@ax/components";
 import * as S from "./style";
 
 export const ItemName = (props: IItemNameProps): JSX.Element => {
-  const { name, length } = props;
-  return name.length > length ? (
-    <Tooltip content={name} left={120}>
-      <S.ItemName data-testid="trimmed-item-name">{trimText(name, length)}</S.ItemName>
-    </Tooltip>
-  ) : (
-    <S.ItemName data-testid="sites-item-name">{name}</S.ItemName>
-  );
+	const { name, length } = props;
+	return name.length > length ? (
+		<Tooltip content={name} left={120}>
+			<S.ItemName data-testid="trimmed-item-name">{trimText(name, length)}</S.ItemName>
+		</Tooltip>
+	) : (
+		<S.ItemName data-testid="sites-item-name">{name}</S.ItemName>
+	);
 };
 
 export const ItemThumbnail = (props: IItemThumbnailProps): JSX.Element => {
-  const { src, width, height, borderRadius } = props;
-  const thumbnailPlaceholder = "/img/placeholder/thumbnail@1x.png";
-  return src ? (
-    <S.ImageWrapper data-testid="sites-item-thumbnail-wrapper" borderRadius={borderRadius} height={height}>
-      <Image width={width} height={height} url={src} />
-    </S.ImageWrapper>
-  ) : (
-    <S.Thumbnail
-      data-testid="sites-item-thumbnail"
-      backgroundUrl={thumbnailPlaceholder}
-      width={width}
-      height={height}
-      borderRadius={borderRadius}
-    />
-  );
+	const { src, width, height, borderRadius } = props;
+	const thumbnailPlaceholder = "/img/placeholder/thumbnail@1x.png";
+	return src ? (
+		<S.ImageWrapper data-testid="sites-item-thumbnail-wrapper" borderRadius={borderRadius} height={height}>
+			<Image width={width} height={height} url={src} />
+		</S.ImageWrapper>
+	) : (
+		<S.Thumbnail
+			data-testid="sites-item-thumbnail"
+			backgroundUrl={thumbnailPlaceholder}
+			width={width}
+			height={height}
+			borderRadius={borderRadius}
+		/>
+	);
 };
 
 interface IItemNameProps {
-  name: string;
-  length: number;
+	name: string;
+	length: number;
 }
 
 interface IItemThumbnailProps {
-  src?: string;
-  width: number;
-  height: number;
-  borderRadius?: boolean;
+	src?: string;
+	width: number;
+	height: number;
+	borderRadius?: boolean;
 }

package/src/modules/Sites/SitesList/hooks.tsx

@@ -2,113 +2,113 @@ import { useEffect, useRef, useState } from "react";
 import { IQueryValue } from "@ax/types";
 
 const useSortedListStatus = () => {
-  const sortedInitialState: {
-    isAscending: boolean;
-    sortedByTitle: boolean;
-    sortedByLastAccess: boolean;
-    sortedByDateCreated: boolean;
-  } = {
-    isAscending: false,
-    sortedByTitle: false,
-    sortedByLastAccess: true,
-    sortedByDateCreated: false,
-  };
-
-  const [sortedListStatus, setSortedListStatus] = useState(sortedInitialState);
-
-  return {
-    sortedListStatus,
-    setSortedListStatus,
-  };
+	const sortedInitialState: {
+		isAscending: boolean;
+		sortedByTitle: boolean;
+		sortedByLastAccess: boolean;
+		sortedByDateCreated: boolean;
+	} = {
+		isAscending: false,
+		sortedByTitle: false,
+		sortedByLastAccess: true,
+		sortedByDateCreated: false,
+	};
+
+	const [sortedListStatus, setSortedListStatus] = useState(sortedInitialState);
+
+	return {
+		sortedListStatus,
+		setSortedListStatus,
+	};
 };
 
 const useFilterQuery = (defaultValues?: { order: IQueryValue[]; liveStatus: IQueryValue[] }): ISitesFilterQuery => {
-  const initialQueryValues: Record<string, IQueryValue[]> = {
-    order: [{ value: "lastAccess-desc", label: "lastAccess-desc" }],
-    liveStatus: [{ value: "all", label: "All" }],
-  };
-
-  const getFiltersQuery = (filterValues: Record<string, IQueryValue[]>): string => {
-    const { order, liveStatus } = filterValues;
-
-    let filterQuery = "";
-    const currentQuery = (pointer: string, values: IQueryValue[]) => {
-      if (!values.length || !values[0].value || values[0].value === "all") {
-        return "";
-      }
-      return `&${pointer}=${values[0].value}`;
-    };
-
-    const isNotInitialValue = (pointer: keyof Record<string, IQueryValue[]>) => {
-      return filterValues[pointer] && initialQueryValues[pointer] !== filterValues[pointer];
-    };
-
-    if (isNotInitialValue("liveStatus")) {
-      const query = currentQuery("liveStatus", liveStatus);
-      filterQuery = `${filterQuery}${query}`;
-    }
-
-    const query = currentQuery("order", order);
-    filterQuery = `${filterQuery}${query}`;
-
-    return filterQuery;
-  };
-
-  const [query, setQuery] = useState(defaultValues || initialQueryValues);
-  const initialFilterQuery = getFiltersQuery(defaultValues || initialQueryValues);
-  const [currentFilterQuery, setCurrentFilterQuery] = useState(initialFilterQuery);
-
-  const setFilterQuery = (filterValues: Record<string, IQueryValue[]>) => {
-    const filterQuery = getFiltersQuery(filterValues);
-    setCurrentFilterQuery(filterQuery);
-  };
-
-  const setFiltersSelection = (pointer: string, filter: IQueryValue[], isAscendent?: boolean) => {
-    const { order, liveStatus } = query;
-    const orderMethod = isAscendent ? "asc" : "desc";
-    const liveStatusValue: Record<string, string> = {
-      all: "all",
-      active: "online",
-      offline: "offline",
-    };
-
-    const liveValue = filter.length > 0 ? [{ value: liveStatusValue[filter[0].value], label: filter[0].label }] : [];
-
-    const filterValues = {
-      order: pointer === "order" ? [{ value: `${filter[0].value}-${orderMethod}`, label: filter[0].label }] : order,
-      liveStatus: pointer === "liveStatus" ? liveValue : liveStatus,
-    };
-
-    setQuery(filterValues);
-    setFilterQuery(filterValues);
-  };
-
-  const resetFilterQuery = () => {
-    setQuery(initialQueryValues);
-    setCurrentFilterQuery("");
-  };
-
-  return {
-    setFiltersSelection,
-    resetFilterQuery,
-    filterValues: query,
-    filterQuery: currentFilterQuery,
-  };
+	const initialQueryValues: Record<string, IQueryValue[]> = {
+		order: [{ value: "lastAccess-desc", label: "lastAccess-desc" }],
+		liveStatus: [{ value: "all", label: "All" }],
+	};
+
+	const getFiltersQuery = (filterValues: Record<string, IQueryValue[]>): string => {
+		const { order, liveStatus } = filterValues;
+
+		let filterQuery = "";
+		const currentQuery = (pointer: string, values: IQueryValue[]) => {
+			if (!values.length || !values[0].value || values[0].value === "all") {
+				return "";
+			}
+			return `&${pointer}=${values[0].value}`;
+		};
+
+		const isNotInitialValue = (pointer: keyof Record<string, IQueryValue[]>) => {
+			return filterValues[pointer] && initialQueryValues[pointer] !== filterValues[pointer];
+		};
+
+		if (isNotInitialValue("liveStatus")) {
+			const query = currentQuery("liveStatus", liveStatus);
+			filterQuery = `${filterQuery}${query}`;
+		}
+
+		const query = currentQuery("order", order);
+		filterQuery = `${filterQuery}${query}`;
+
+		return filterQuery;
+	};
+
+	const [query, setQuery] = useState(defaultValues || initialQueryValues);
+	const initialFilterQuery = getFiltersQuery(defaultValues || initialQueryValues);
+	const [currentFilterQuery, setCurrentFilterQuery] = useState(initialFilterQuery);
+
+	const setFilterQuery = (filterValues: Record<string, IQueryValue[]>) => {
+		const filterQuery = getFiltersQuery(filterValues);
+		setCurrentFilterQuery(filterQuery);
+	};
+
+	const setFiltersSelection = (pointer: string, filter: IQueryValue[], isAscendent?: boolean) => {
+		const { order, liveStatus } = query;
+		const orderMethod = isAscendent ? "asc" : "desc";
+		const liveStatusValue: Record<string, string> = {
+			all: "all",
+			active: "online",
+			offline: "offline",
+		};
+
+		const liveValue = filter.length > 0 ? [{ value: liveStatusValue[filter[0].value], label: filter[0].label }] : [];
+
+		const filterValues = {
+			order: pointer === "order" ? [{ value: `${filter[0].value}-${orderMethod}`, label: filter[0].label }] : order,
+			liveStatus: pointer === "liveStatus" ? liveValue : liveStatus,
+		};
+
+		setQuery(filterValues);
+		setFilterQuery(filterValues);
+	};
+
+	const resetFilterQuery = () => {
+		setQuery(initialQueryValues);
+		setCurrentFilterQuery("");
+	};
+
+	return {
+		setFiltersSelection,
+		resetFilterQuery,
+		filterValues: query,
+		filterQuery: currentFilterQuery,
+	};
 };
 
 const useIsMount = () => {
-  const isMountRef = useRef(true);
-  useEffect(() => {
-    isMountRef.current = false;
-  }, []);
-  return isMountRef.current;
+	const isMountRef = useRef(true);
+	useEffect(() => {
+		isMountRef.current = false;
+	}, []);
+	return isMountRef.current;
 };
 
 interface ISitesFilterQuery {
-  setFiltersSelection(pointer: string, filter: IQueryValue[], isAscendent?: boolean): void;
-  resetFilterQuery(): void;
-  filterValues: Record<string, IQueryValue[]>;
-  filterQuery: string;
+	setFiltersSelection(pointer: string, filter: IQueryValue[], isAscendent?: boolean): void;
+	resetFilterQuery(): void;
+	filterValues: Record<string, IQueryValue[]>;
+	filterQuery: string;
 }
 
 export { useSortedListStatus, useFilterQuery, useIsMount };