diff --git a/.changeset/flat-roses-live.md b/.changeset/flat-roses-live.md new file mode 100644 index 000000000..6283e02c5 --- /dev/null +++ b/.changeset/flat-roses-live.md @@ -0,0 +1,5 @@ +--- +"saleor-dashboard": patch +--- + +Run prettier against source folder diff --git a/package.json b/package.json index 78aab1eec..97ddf737f 100644 --- a/package.json +++ b/package.json @@ -330,7 +330,8 @@ "dep-status": "depcruise --config .dependency-cruiser.js src", "chromatic": "chromatic --exit-zero-on-changes", "change:add": "changeset add", - "release:prepare-main": "./scripts/prepare-main-after-release.sh" + "release:prepare-main": "./scripts/prepare-main-after-release.sh", + "format:code": "prettier --ignore-unknown --write src/*" }, "description": "![Saleor Dashboard](https://user-images.githubusercontent.com/44495184/185379472-2a204c0b-9b7a-4a3e-93c0-2cb85205ed5e.png)" } diff --git a/src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.tsx b/src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.tsx index 2c05c6d65..96901f893 100644 --- a/src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.tsx +++ b/src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.tsx @@ -13,7 +13,9 @@ export interface ResetPasswordSuccessPageProps { onBack: () => void; } -const ResetPasswordSuccessPage: React.FC = props => { +const ResetPasswordSuccessPage: React.FC< + ResetPasswordSuccessPageProps +> = props => { const { onBack } = props; const classes = useStyles(props); diff --git a/src/auth/types.ts b/src/auth/types.ts index 9817db1f0..866c32f0d 100644 --- a/src/auth/types.ts +++ b/src/auth/types.ts @@ -26,7 +26,8 @@ export const UserContextError = { unknownLoginError: "unknownLoginError", } as const; -export type UserContextError = typeof UserContextError[keyof typeof UserContextError]; +export type UserContextError = + (typeof UserContextError)[keyof typeof UserContextError]; export interface UserContext { login: (username: string, password: string) => Promise; diff --git a/src/channels/utils.ts b/src/channels/utils.ts index 56e597342..a56dbe38c 100644 --- a/src/channels/utils.ts +++ b/src/channels/utils.ts @@ -307,7 +307,7 @@ export const createChannelsDataFromProduct = (productData?: ProductFragment) => listing => listing.channel.id === channel.id, ); // Comparing explicitly to false because `hasVariants` can be undefined - const isSimpleProduct = !(productData.productType?.hasVariants); + const isSimpleProduct = !productData.productType?.hasVariants; const haveVariantsChannelListings = productData.variants.some(variant => variant.channelListings.some( listing => listing.channel.id === channel.id, diff --git a/src/components/AddressEdit/createCountryHandler.ts b/src/components/AddressEdit/createCountryHandler.ts index 0b2482908..c0dd0ec38 100644 --- a/src/components/AddressEdit/createCountryHandler.ts +++ b/src/components/AddressEdit/createCountryHandler.ts @@ -2,10 +2,12 @@ import { AddressTypeInput } from "@dashboard/customers/types"; import { FormChange } from "@dashboard/hooks/useForm"; import { ChangeEvent } from "react"; -export const createCountryHandler = ( - currentHandler: FormChange, - set: (dataSet: Partial) => void, -) => (event: ChangeEvent) => { - currentHandler(event); - set({ countryArea: "" }); -}; +export const createCountryHandler = + ( + currentHandler: FormChange, + set: (dataSet: Partial) => void, + ) => + (event: ChangeEvent) => { + currentHandler(event); + set({ countryArea: "" }); + }; diff --git a/src/components/Backlink/Backlink.tsx b/src/components/Backlink/Backlink.tsx index 0b39bddd7..2a27b9490 100644 --- a/src/components/Backlink/Backlink.tsx +++ b/src/components/Backlink/Backlink.tsx @@ -13,7 +13,7 @@ export const Backlink = ({ return ( {...props} - component={(Link as unknown) as LinkType} + component={Link as unknown as LinkType} to={href} /> ); diff --git a/src/components/ChannelsAvailabilityContent/ChannelsAvailabilityContent.tsx b/src/components/ChannelsAvailabilityContent/ChannelsAvailabilityContent.tsx index 52768a740..2bee3bb9a 100644 --- a/src/components/ChannelsAvailabilityContent/ChannelsAvailabilityContent.tsx +++ b/src/components/ChannelsAvailabilityContent/ChannelsAvailabilityContent.tsx @@ -19,7 +19,9 @@ export interface ChannelsAvailabilityContentProps { toggleAll?: (items: Channel[], selected: number) => void; } -export const ChannelsAvailabilityContent: React.FC = ({ +export const ChannelsAvailabilityContent: React.FC< + ChannelsAvailabilityContentProps +> = ({ isSelected, channels, contentType = "", diff --git a/src/components/ChannelsAvailabilityDialog/utils.ts b/src/components/ChannelsAvailabilityDialog/utils.ts index bc9b1f1f0..03172cb50 100644 --- a/src/components/ChannelsAvailabilityDialog/utils.ts +++ b/src/components/ChannelsAvailabilityDialog/utils.ts @@ -1,7 +1,7 @@ import { filter } from "fuzzaldrin"; import React from "react"; -export const useChannelsSearch = function( +export const useChannelsSearch = function ( channels: T[], ) { const [query, onQueryChange] = React.useState(""); diff --git a/src/components/ChannelsAvailabilityDialogChannelsList/ChannelsAvailabilityDialogChannelsList.tsx b/src/components/ChannelsAvailabilityDialogChannelsList/ChannelsAvailabilityDialogChannelsList.tsx index d9c085af0..57cd080fa 100644 --- a/src/components/ChannelsAvailabilityDialogChannelsList/ChannelsAvailabilityDialogChannelsList.tsx +++ b/src/components/ChannelsAvailabilityDialogChannelsList/ChannelsAvailabilityDialogChannelsList.tsx @@ -28,11 +28,9 @@ export interface ChannelsAvailabilityContentProps { onChange: (option: Channel) => void; } -const ChannelsAvailabilityContent: React.FC = ({ - isChannelSelected, - channels, - onChange, -}) => { +const ChannelsAvailabilityContent: React.FC< + ChannelsAvailabilityContentProps +> = ({ isChannelSelected, channels, onChange }) => { const classes = useStyles({}); return ( diff --git a/src/components/ChannelsAvailabilityDialogWrapper/ChannelsAvailabilityDialogWrapper.tsx b/src/components/ChannelsAvailabilityDialogWrapper/ChannelsAvailabilityDialogWrapper.tsx index af09ee947..5ee846d2c 100644 --- a/src/components/ChannelsAvailabilityDialogWrapper/ChannelsAvailabilityDialogWrapper.tsx +++ b/src/components/ChannelsAvailabilityDialogWrapper/ChannelsAvailabilityDialogWrapper.tsx @@ -86,7 +86,9 @@ export interface ChannelsAvailabilityContentProps { hasAllSelected: boolean; } -export const ChannelsAvailabilityContentWrapper: React.FC = ({ +export const ChannelsAvailabilityContentWrapper: React.FC< + ChannelsAvailabilityContentProps +> = ({ contentType = "", toggleAll, toggleAllLabel, diff --git a/src/components/ColumnPicker/ColumnPicker.md b/src/components/ColumnPicker/ColumnPicker.md index 8af401b4f..fd328ea1c 100644 --- a/src/components/ColumnPicker/ColumnPicker.md +++ b/src/components/ColumnPicker/ColumnPicker.md @@ -5,7 +5,9 @@ image ### Column types + In datagrid views various types of columns are available. We can split them into two groups: + - static columns - e. g. `id`, `name`, `created_at`. These columns are simple to set up as a static object. - dynamic columns - e.g. stocks, attributes, channels. These column values are not known in advance and must be fetched from the API. @@ -16,13 +18,17 @@ For dynamic columns, the naming convetion is as follows: ``` column_name:column_id ``` + For example: + ``` attribute:QXR0cmlidXRlOjIx ``` ### useColumns hook + `useColumns` is a custom hook that is used as single source of truth for both Datagrid and Column Picker. It returns an object with the following properties: + - visible columns - array of visible columns for the datagrid - static columns - array of static columns for the column picker - dynamic columns - array of dynamic columns for the column picker @@ -37,6 +43,7 @@ attribute:QXR0cmlidXRlOjIx - dynamic column selection handler (for column picker) In order to use this hook, you need to provide four things: + - `staticColumns` - array of static columns in datagrid-ready format (`AvailableColumns[]`) - `columnCategories` - array of column categories - state & setter of column settings which we get from `useListSettings` @@ -45,31 +52,32 @@ In order to use this hook, you need to provide four things: ## Adapting new views ### Column picker settings + Firstly, in the view file, we need to provide two settings object, one for the selected columns and one for the dynamic column settings. We should use `useColumnPickerSettings` and `useListSettings` hook for that. The first settings object manages columns selected for the datagrid (visible columns). The second manages state of seleceted dynamic columns (if we pick a value from left side of column picked, it is then displayed on the right side of the picker as dynamic column with togglable visibility). Toggling the visiblity saves the column in the first settings object. The reason why column picker settings object needs to be in the view file and cannot be integrated into internal logic of useColumns is because we use column picker settings in the query. We need to know which columns are selected in order to fetch the correct data from the API. - - ```tsx + +```tsx const { columnPickerSettings, setDynamicColumnsSettings } = -useColumnPickerSettings("PRODUCT_LIST"); + useColumnPickerSettings("PRODUCT_LIST"); // Translates columnIDs to api IDs const filteredColumnIds = columnPickerSettings - .filter(isAttributeColumnValue) - .map(getAttributeIdFromColumnValue); + .filter(isAttributeColumnValue) + .map(getAttributeIdFromColumnValue); const gridAttributes = useGridAttributesQuery({ - variables: { ids: filteredColumnIds }, - skip: filteredColumnIds.length === 0, + variables: { ids: filteredColumnIds }, + skip: filteredColumnIds.length === 0, }); - ``` - +``` ### Static columns adapter Writing an adapter for static columns is an easy task. We need to provide an array of static columns in datagrid-ready format (`AvailableColumns[]`). For example: + ```tsx export const parseStaticColumnsForProductListView = (intl, emptyColumn, sort) => [ @@ -94,17 +102,19 @@ export const parseStaticColumnsForProductListView = (intl, emptyColumn, sort) => Empty column is a special column that is used to add padding in the datagrid. It is filtered out by the column picker. - ### Dynamic column adapter -This function creates ColumnCategory[] object from available data. + +This function creates ColumnCategory[] object from available data. Creating a column category requires two queries per category. Let's say we want to have custom attributes as columns. We need + - query which fetches all attributes - query which fetches selected attributes We cannot rely on single query, because searching through attributes would influence already selected columns which are visible in the datagrid. Example: + ```tsx export const parseDynamicColumnsForProductListView = ({ attributesData, @@ -138,9 +148,11 @@ export const parseDynamicColumnsForProductListView = ({ }, ]; ``` + Here we only have 1 column category, attributes. `attributesData` is the result of the first query, `gridAttributesData` is the result of the second query. We also provide pagination props, which are used in the column picker. Queries which are used in this case are for categories. Let's look at the first query: + ```tsx export const availableColumnAttribues = gql` query AvailableColumnAttributes( @@ -170,9 +182,11 @@ export const availableColumnAttribues = gql` } `; ``` + This query is used to fetch all **available** attributes. It is paginated and has a search filter and results are displayed in the left part of the column picker. The second query is similar, but it has a filter of IDs, which come from local storage settings (useColumnPickerSettngs): + ```tsx export const gridAttributes = gql` query GridAttributes($ids: [ID!]!) { @@ -187,10 +201,11 @@ export const gridAttributes = gql` } `; ``` + Data of this query is displayed in the right part of the column picker, below the static columns. - Here is the adapter for the dynamic columns inside the category: + ```tsx export const parseAttributesColumns = ( attributes: RelayToFlat< @@ -210,4 +225,4 @@ export const parseAttributesColumns = ( })); ``` -With the dynamic column adapter written, we can now use the `useColumns` hook. \ No newline at end of file +With the dynamic column adapter written, we can now use the `useColumns` hook. diff --git a/src/components/ConditionalFilter/FilterElement/index.ts b/src/components/ConditionalFilter/FilterElement/index.ts index 446549341..b62bc95a6 100644 --- a/src/components/ConditionalFilter/FilterElement/index.ts +++ b/src/components/ConditionalFilter/FilterElement/index.ts @@ -1,2 +1,2 @@ -export { Condition } from "./Condition" -export { type FilterContainer,FilterElement } from "./FilterElement" \ No newline at end of file +export { Condition } from "./Condition"; +export { type FilterContainer, FilterElement } from "./FilterElement"; diff --git a/src/components/ConditionalFilter/FilterValueProvider.ts b/src/components/ConditionalFilter/FilterValueProvider.ts index 89c23a995..b8a1554f2 100644 --- a/src/components/ConditionalFilter/FilterValueProvider.ts +++ b/src/components/ConditionalFilter/FilterValueProvider.ts @@ -1,8 +1,8 @@ import { FilterContainer } from "./FilterElement"; type QueryVars = - | { OR: QueryVars, current?: FilterContainer[number] } - | { AND: QueryVars, current?: FilterContainer[number] } + | { OR: QueryVars; current?: FilterContainer[number] } + | { AND: QueryVars; current?: FilterContainer[number] }; export interface FilterValueProvider { value: FilterContainer; @@ -11,21 +11,24 @@ export interface FilterValueProvider { persist: (newValue: FilterContainer) => void; } -const toNested = (p: QueryVars, current: FilterContainer[number]): QueryVars => { +const toNested = ( + p: QueryVars, + current: FilterContainer[number], +): QueryVars => { if (typeof current !== "string") { - return { ...p, current } + return { ...p, current }; } if (current === "AND") { - return { AND: p } + return { AND: p }; } if (current === "OR") { - return { OR: p } + return { OR: p }; } - return p -} + return p; +}; export const createVariables = (filter: FilterContainer) => - filter.reduceRight(toNested, {} as QueryVars) \ No newline at end of file + filter.reduceRight(toNested, {} as QueryVars); diff --git a/src/components/ConditionalFilter/ValueProvider/TokenArray/fetchingParams.ts b/src/components/ConditionalFilter/ValueProvider/TokenArray/fetchingParams.ts index cdf027ca8..758562af9 100644 --- a/src/components/ConditionalFilter/ValueProvider/TokenArray/fetchingParams.ts +++ b/src/components/ConditionalFilter/ValueProvider/TokenArray/fetchingParams.ts @@ -8,7 +8,7 @@ export interface FetchingParams { attribute: Record; } -type FetchingParamsKeys = keyof Omit +type FetchingParamsKeys = keyof Omit; export const emptyFetchingParams: FetchingParams = { category: [], @@ -21,10 +21,10 @@ export const emptyFetchingParams: FetchingParams = { const unique = (array: Iterable) => Array.from(new Set(array)); export const toFetchingParams = (p: FetchingParams, c: UrlToken) => { - const key = c.name as FetchingParamsKeys + const key = c.name as FetchingParamsKeys; if (!c.isAttribute() && !p[key]) { - p[key] = [] + p[key] = []; } if (c.isAttribute() && !p.attribute[c.name]) { diff --git a/src/components/ConditionalFilter/ValueProvider/TokenArray/index.ts b/src/components/ConditionalFilter/ValueProvider/TokenArray/index.ts index d3581aa00..4c7e99a3d 100644 --- a/src/components/ConditionalFilter/ValueProvider/TokenArray/index.ts +++ b/src/components/ConditionalFilter/ValueProvider/TokenArray/index.ts @@ -35,9 +35,7 @@ const mapToTokens = (urlEntries: Array): TokenArray => return mapToTokens(entry); } - return UrlToken.fromUrlEntry( - UrlEntry.fromQs(entry) - ); + return UrlToken.fromUrlEntry(UrlEntry.fromQs(entry)); }) as TokenArray; const tokenizeUrl = (urlParams: string) => { diff --git a/src/components/ConditionalFilter/ValueProvider/UrlToken.ts b/src/components/ConditionalFilter/ValueProvider/UrlToken.ts index 37210b6f7..af64a4aab 100644 --- a/src/components/ConditionalFilter/ValueProvider/UrlToken.ts +++ b/src/components/ConditionalFilter/ValueProvider/UrlToken.ts @@ -9,11 +9,10 @@ const STATIC_TO_LOAD = ["category", "collection", "channel", "producttype"]; export const TokenType = { ATTRIBUTE: "a", - STATIC: "s" -} as const - -export type TokenTypeValue = (typeof TokenType)[keyof typeof TokenType] + STATIC: "s", +} as const; +export type TokenTypeValue = (typeof TokenType)[keyof typeof TokenType]; export class UrlEntry { constructor(key: string, value: string | string[]) { @@ -21,49 +20,54 @@ export class UrlEntry { } public static fromQs(entry: ParsedQs) { - const key = Object.keys(entry)[0] - const value = entry[key] as string | string[] + const key = Object.keys(entry)[0]; + const value = entry[key] as string | string[]; - return new UrlEntry(key, value) + return new UrlEntry(key, value); } - public static forAttribute (condition: ConditionSelected, paramName: string) { - return UrlEntry.fromConditionSelected(condition, paramName, TokenType.ATTRIBUTE) + public static forAttribute(condition: ConditionSelected, paramName: string) { + return UrlEntry.fromConditionSelected( + condition, + paramName, + TokenType.ATTRIBUTE, + ); } - public static forStatic (condition: ConditionSelected, paramName: string) { - return UrlEntry.fromConditionSelected(condition, paramName, TokenType.STATIC) + public static forStatic(condition: ConditionSelected, paramName: string) { + return UrlEntry.fromConditionSelected( + condition, + paramName, + TokenType.STATIC, + ); } - public getInfo () { - const [key, value] = Object.entries(this)[0] as [ - string, - string | string[], - ]; + public getInfo() { + const [key, value] = Object.entries(this)[0] as [string, string | string[]]; const [identifier, entryName] = key.split("."); const [type, control] = identifier.split("") as [TokenTypeValue, number]; - const conditionKid = CONDITIONS[control] + const conditionKid = CONDITIONS[control]; - return { key, value, entryName, type, conditionKid } + return { key, value, entryName, type, conditionKid }; } - private static fromConditionSelected ( + private static fromConditionSelected( condition: ConditionSelected, paramName: string, - tokenSlug: TokenTypeValue + tokenSlug: TokenTypeValue, ) { const { conditionValue } = condition; - const slug = slugFromConditionValue(condition.value) + const slug = slugFromConditionValue(condition.value); if (!conditionValue) { - return new UrlEntry(tokenSlug, slug) + return new UrlEntry(tokenSlug, slug); } const conditionIndex = CONDITIONS.findIndex( el => el === conditionValue.label, ); - - return new UrlEntry(`${tokenSlug}${conditionIndex}.${paramName}`, slug) + + return new UrlEntry(`${tokenSlug}${conditionIndex}.${paramName}`, slug); } } @@ -76,12 +80,7 @@ export class UrlToken { ) {} public static fromUrlEntry(entry: UrlEntry) { - const { - entryName, - value, - type, - conditionKid - } = entry.getInfo() + const { entryName, value, type, conditionKid } = entry.getInfo(); return new UrlToken(entryName, value, type, conditionKid); } diff --git a/src/components/ConditionalFilter/ValueProvider/useUrlValueProvider.ts b/src/components/ConditionalFilter/ValueProvider/useUrlValueProvider.ts index 8586a0008..e01cfac41 100644 --- a/src/components/ConditionalFilter/ValueProvider/useUrlValueProvider.ts +++ b/src/components/ConditionalFilter/ValueProvider/useUrlValueProvider.ts @@ -3,11 +3,11 @@ import useRouter from "use-react-router"; import { useInitialAPIState } from "../API/initialState/useInitalAPIState"; import { FilterContainer } from "../FilterElement"; -import { createVariables,FilterValueProvider } from "../FilterValueProvider"; +import { createVariables, FilterValueProvider } from "../FilterValueProvider"; import { useTokenArray } from "./TokenArray"; import { UrlEntry } from "./UrlToken"; -type Structure = Array +type Structure = Array; const prepareStructure = (filterValue: FilterContainer): Structure => filterValue.map(f => { diff --git a/src/components/ConditionalFilter/useContainerState.ts b/src/components/ConditionalFilter/useContainerState.ts index e331db0da..89eee9e3e 100644 --- a/src/components/ConditionalFilter/useContainerState.ts +++ b/src/components/ConditionalFilter/useContainerState.ts @@ -1,29 +1,34 @@ import { useState } from "react"; -import { FilterContainer,FilterElement } from "./FilterElement"; +import { FilterContainer, FilterElement } from "./FilterElement"; -type StateCallback = (el: FilterElement) => void -type Element = FilterContainer[number] +type StateCallback = (el: FilterElement) => void; +type Element = FilterContainer[number]; export const useContainerState = (initialValue: FilterContainer) => { const [value, setValue] = useState(initialValue); - const isFilterElement = (elIndex: number, index: number, el: Element): el is FilterElement => { - return elIndex === index && typeof el !== "string" && !Array.isArray(el) - } + const isFilterElement = ( + elIndex: number, + index: number, + el: Element, + ): el is FilterElement => { + return elIndex === index && typeof el !== "string" && !Array.isArray(el); + }; - const updateFilterElement = (index: number, cb: StateCallback) => (el: Element, elIndex: number) => { - if (isFilterElement(elIndex, index, el)) { - cb(el); - } + const updateFilterElement = + (index: number, cb: StateCallback) => (el: Element, elIndex: number) => { + if (isFilterElement(elIndex, index, el)) { + cb(el); + } - return el; - } + return el; + }; const updateAt = (position: string, cb: StateCallback) => { const index = parseInt(position, 10); setValue(v => v.map(updateFilterElement(index, cb))); - } + }; const removeAt = (position: string) => { const index = parseInt(position, 10); @@ -50,11 +55,10 @@ export const useContainerState = (initialValue: FilterContainer) => { setValue(v => v.concat(newValue)); }; - return { createEmpty, updateAt, removeAt, value, - } -} + }; +}; diff --git a/src/components/ExternalLink/ExternalLink.tsx b/src/components/ExternalLink/ExternalLink.tsx index de01628d0..69c961894 100644 --- a/src/components/ExternalLink/ExternalLink.tsx +++ b/src/components/ExternalLink/ExternalLink.tsx @@ -19,15 +19,8 @@ interface ExternalLinkProps extends React.HTMLProps { } const ExternalLink: React.FC = props => { - const { - className, - children, - href, - typographyProps, - target, - rel, - ...rest - } = props; + const { className, children, href, typographyProps, target, rel, ...rest } = + props; const classes = useStyles(props); diff --git a/src/components/Filter/FilterContent/FilterGroupLabel.tsx b/src/components/Filter/FilterContent/FilterGroupLabel.tsx index 37210592c..de6dc3ea2 100644 --- a/src/components/Filter/FilterContent/FilterGroupLabel.tsx +++ b/src/components/Filter/FilterContent/FilterGroupLabel.tsx @@ -16,9 +16,8 @@ const useStyles = makeStyles( { name: "FilterGroupLabel" }, ); -export type FilterGroupLabelProps< - K extends string = string, -> = FilterFieldBaseProps; +export type FilterGroupLabelProps = + FilterFieldBaseProps; const FilterGroupLabel: React.FC = ({ filter, diff --git a/src/components/Filter/types.ts b/src/components/Filter/types.ts index bafa379dc..0e2542629 100644 --- a/src/components/Filter/types.ts +++ b/src/components/Filter/types.ts @@ -45,11 +45,10 @@ export type FilterElementValueData = export type IFilterElementMutableData = FilterElementCommonData & FilterElementValueData; -export type IFilterElementMutableDataGeneric< - T extends FieldType, -> = T extends FieldType.keyValue - ? KeyValueFilterElementData & FilterElementCommonData - : RegularFilterElementData & FilterElementCommonData; +export type IFilterElementMutableDataGeneric = + T extends FieldType.keyValue + ? KeyValueFilterElementData & FilterElementCommonData + : RegularFilterElementData & FilterElementCommonData; type FilterElementCommon = { autocomplete?: boolean; @@ -68,13 +67,11 @@ type FilterElementCommon = { export type FilterElement = FilterElementCommon & Partial; -export type FilterElementRegular< - K extends string = string, -> = FilterElementCommon & RegularFilterElementData; +export type FilterElementRegular = + FilterElementCommon & RegularFilterElementData; -export type FilterElementKeyValue< - K extends string = string, -> = FilterElementCommon & KeyValueFilterElementData; +export type FilterElementKeyValue = + FilterElementCommon & KeyValueFilterElementData; export type FilterElementGeneric< K extends string, diff --git a/src/components/Metadata/types.ts b/src/components/Metadata/types.ts index bead7aacb..692d853a2 100644 --- a/src/components/Metadata/types.ts +++ b/src/components/Metadata/types.ts @@ -20,7 +20,10 @@ export interface MetadataFormData { privateMetadata: MetadataInput[]; } -export type MetadataIdSchema = Record; + } +>; diff --git a/src/components/Navigator/Navigator.tsx b/src/components/Navigator/Navigator.tsx index eb630ed0d..75983b24a 100644 --- a/src/components/Navigator/Navigator.tsx +++ b/src/components/Navigator/Navigator.tsx @@ -92,10 +92,9 @@ const Navigator: React.FC = ({ visible, setVisibility }) => { description: "navigator notification", }, { - keyboardShortcut: - navigator.platform.toLowerCase().includes("mac") - ? "⌘+K" - : "Ctrl+K", + keyboardShortcut: navigator.platform.toLowerCase().includes("mac") + ? "⌘+K" + : "Ctrl+K", }, ), title: intl.formatMessage({ diff --git a/src/components/PriceField/usePriceField.ts b/src/components/PriceField/usePriceField.ts index d36499a68..6316ed0d3 100644 --- a/src/components/PriceField/usePriceField.ts +++ b/src/components/PriceField/usePriceField.ts @@ -8,9 +8,10 @@ import { findPriceSeparator, getCurrencyDecimalPoints } from "./utils"; export function usePriceField(currency: string, onChange: FormChange) { const minValue = 0; - const maxDecimalLength = useMemo(() => getCurrencyDecimalPoints(currency), [ - currency, - ]); + const maxDecimalLength = useMemo( + () => getCurrencyDecimalPoints(currency), + [currency], + ); const handleChange: FormChange = e => { let value = e.target.value; diff --git a/src/components/SortableChipsField/SortableChipsField.tsx b/src/components/SortableChipsField/SortableChipsField.tsx index 9f4dac5c4..0ba4eb146 100644 --- a/src/components/SortableChipsField/SortableChipsField.tsx +++ b/src/components/SortableChipsField/SortableChipsField.tsx @@ -48,14 +48,8 @@ export interface SortableChipsFieldProps extends SortableContainerProps { } const SortableChipsField: React.FC = props => { - const { - loading, - values, - error, - helperText, - onValueDelete, - onValueReorder, - } = props; + const { loading, values, error, helperText, onValueDelete, onValueReorder } = + props; const classes = useStyles(props); const handleSortStart = () => { diff --git a/src/components/TypeDeleteWarningDialog/DeleteWarningDialogConsentContent.tsx b/src/components/TypeDeleteWarningDialog/DeleteWarningDialogConsentContent.tsx index 31295c0ce..06fa1301c 100644 --- a/src/components/TypeDeleteWarningDialog/DeleteWarningDialogConsentContent.tsx +++ b/src/components/TypeDeleteWarningDialog/DeleteWarningDialogConsentContent.tsx @@ -12,12 +12,9 @@ interface DeleteWarningDialogConsentContentProps { onConsentChange: (value: boolean) => void; } -const DeleteWarningDialogConsentContent: React.FC = ({ - description, - consentLabel, - isConsentChecked, - onConsentChange, -}) => { +const DeleteWarningDialogConsentContent: React.FC< + DeleteWarningDialogConsentContentProps +> = ({ description, consentLabel, isConsentChecked, onConsentChange }) => { const classes = useStyles(); const handleConsentChange = ({ target }: ChangeEvent) => diff --git a/src/customers/urls.ts b/src/customers/urls.ts index 567e4d460..4e9788d90 100644 --- a/src/customers/urls.ts +++ b/src/customers/urls.ts @@ -51,10 +51,8 @@ export const customerAddUrl = customerAddPath; export const customerAddressesPath = (id: string) => urlJoin(customerPath(id), "addresses"); export type CustomerAddressesUrlDialog = "add" | "edit" | "remove"; -export type CustomerAddressesUrlQueryParams = Dialog< - CustomerAddressesUrlDialog -> & - SingleAction; +export type CustomerAddressesUrlQueryParams = + Dialog & SingleAction; export const customerAddressesUrl = ( id: string, params?: CustomerAddressesUrlQueryParams, diff --git a/src/discounts/data.ts b/src/discounts/data.ts index a4f73a6c6..f2be3096a 100644 --- a/src/discounts/data.ts +++ b/src/discounts/data.ts @@ -23,13 +23,12 @@ const getChannelMinAmountSpent = ( return channel.minSpent; }; -const mapChannelToChannelInput = (formData: VoucherDetailsPageFormData) => ( - channel: ChannelVoucherData, -) => ({ - channelId: channel.id, - discountValue: getChannelDiscountValue(channel, formData), - minAmountSpent: getChannelMinAmountSpent(channel, formData), -}); +const mapChannelToChannelInput = + (formData: VoucherDetailsPageFormData) => (channel: ChannelVoucherData) => ({ + channelId: channel.id, + discountValue: getChannelDiscountValue(channel, formData), + minAmountSpent: getChannelMinAmountSpent(channel, formData), + }); const filterNotDiscountedChannel = ( channelInput: VoucherChannelListingAddInput, diff --git a/src/giftCards/GiftCardCreateDialog/GiftCardCreateRequiresActivationSection.tsx b/src/giftCards/GiftCardCreateDialog/GiftCardCreateRequiresActivationSection.tsx index 859c46a5c..b7a35ff91 100644 --- a/src/giftCards/GiftCardCreateDialog/GiftCardCreateRequiresActivationSection.tsx +++ b/src/giftCards/GiftCardCreateDialog/GiftCardCreateRequiresActivationSection.tsx @@ -12,10 +12,9 @@ type GiftCardCreateRequiresActivationSectionProps = Pick< "checked" | "onChange" >; -const GiftCardCreateRequiresActivationSection: React.FC = ({ - checked, - onChange, -}) => ( +const GiftCardCreateRequiresActivationSection: React.FC< + GiftCardCreateRequiresActivationSectionProps +> = ({ checked, onChange }) => ( { - const errors = data?.giftCardDeactivate?.errors; + const [giftCardDeactivate, giftCardDeactivateOpts] = + useGiftCardDeactivateMutation({ + onCompleted: data => { + const errors = data?.giftCardDeactivate?.errors; + + if (!!errors?.length) { + notify({ + status: "error", + text: intl.formatMessage(commonErrorMessages.unknownError), + }); + return; + } - if (!!errors?.length) { notify({ - status: "error", - text: intl.formatMessage(commonErrorMessages.unknownError), + status: "success", + text: intl.formatMessage(messages.successfullyDisabledTitle), }); - return; - } - notify({ - status: "success", - text: intl.formatMessage(messages.successfullyDisabledTitle), - }); - - if (!!onDeactivateActionComplete) { - onDeactivateActionComplete(); - } - }, - refetchQueries: [GIFT_CARD_DETAILS_QUERY], - }); + if (!!onDeactivateActionComplete) { + onDeactivateActionComplete(); + } + }, + refetchQueries: [GIFT_CARD_DETAILS_QUERY], + }); const currentOpts = isActive ? giftCardDeactivateOpts : giftCardActivateOpts; diff --git a/src/giftCards/GiftCardUpdate/types.ts b/src/giftCards/GiftCardUpdate/types.ts index a2f72141b..186920a15 100644 --- a/src/giftCards/GiftCardUpdate/types.ts +++ b/src/giftCards/GiftCardUpdate/types.ts @@ -6,8 +6,7 @@ export enum GiftCardUpdatePageActionParamsEnum { RESEND_CODE = "resend-code", } -export type GiftCardUpdatePageUrlQueryParams = Dialog< - GiftCardUpdatePageActionParamsEnum ->; +export type GiftCardUpdatePageUrlQueryParams = + Dialog; export const PLACEHOLDER = "-"; diff --git a/src/giftCards/GiftCardsList/GiftCardsListHeader/GiftCardsListHeaderAlertContent.tsx b/src/giftCards/GiftCardsList/GiftCardsListHeader/GiftCardsListHeaderAlertContent.tsx index 23163f32f..afa1205c2 100644 --- a/src/giftCards/GiftCardsList/GiftCardsListHeader/GiftCardsListHeaderAlertContent.tsx +++ b/src/giftCards/GiftCardsList/GiftCardsListHeader/GiftCardsListHeaderAlertContent.tsx @@ -13,10 +13,9 @@ interface GiftCardsListHeaderAlertContentProps { giftCardProductsExist: boolean; } -const GiftCardsListHeaderAlertContent: React.FC = ({ - giftCardProductTypesExist, - giftCardProductsExist, -}) => { +const GiftCardsListHeaderAlertContent: React.FC< + GiftCardsListHeaderAlertContentProps +> = ({ giftCardProductTypesExist, giftCardProductsExist }) => { const classes = useStyles({}); const giftCardProductTypeUrl = productTypeAddUrl({ diff --git a/src/giftCards/components/GiftCardCustomerCard/CustomerGiftCardsCardListItem.tsx b/src/giftCards/components/GiftCardCustomerCard/CustomerGiftCardsCardListItem.tsx index 8492881ff..49ce7d96b 100644 --- a/src/giftCards/components/GiftCardCustomerCard/CustomerGiftCardsCardListItem.tsx +++ b/src/giftCards/components/GiftCardCustomerCard/CustomerGiftCardsCardListItem.tsx @@ -18,9 +18,9 @@ interface CustomerGiftCardsCardListItemProps { giftCard: ExtendedGiftCard; } -const CustomerGiftCardsCardListItem: React.FC = ({ - giftCard, -}) => { +const CustomerGiftCardsCardListItem: React.FC< + CustomerGiftCardsCardListItemProps +> = ({ giftCard }) => { const intl = useIntl(); const classes = useListWrapperStyles(); const [openDeleteGiftCard, setOpenDeleteGiftCard] = useState(false); diff --git a/src/giftCards/components/GiftCardDeleteDialog/GiftCardListPageDeleteDialog.tsx b/src/giftCards/components/GiftCardDeleteDialog/GiftCardListPageDeleteDialog.tsx index e46f8023c..43e2fb356 100644 --- a/src/giftCards/components/GiftCardDeleteDialog/GiftCardListPageDeleteDialog.tsx +++ b/src/giftCards/components/GiftCardDeleteDialog/GiftCardListPageDeleteDialog.tsx @@ -33,13 +33,11 @@ const GiftCardDeleteDialog: React.FC = ({ refetchQueries: [GIFT_CARD_LIST_QUERY, ...refetchQueries], }); - const { - onBulkDeleteGiftCards, - bulkDeleteGiftCardOpts, - } = useGiftCardBulkDelete({ - onClose, - refetchQueries: [GIFT_CARD_LIST_QUERY, ...refetchQueries], - }); + const { onBulkDeleteGiftCards, bulkDeleteGiftCardOpts } = + useGiftCardBulkDelete({ + onClose, + refetchQueries: [GIFT_CARD_LIST_QUERY, ...refetchQueries], + }); const dialogProps: Pick< ActionDialogProps, diff --git a/src/graphql/extendedTypes.ts b/src/graphql/extendedTypes.ts index 1bdf38c6a..98301b0a1 100644 --- a/src/graphql/extendedTypes.ts +++ b/src/graphql/extendedTypes.ts @@ -1,6 +1,6 @@ import { PermissionEnum } from "./types.generated"; export interface Node { - id: string + id: string; } export type PrefixedPermissions = `PERMISSION_${PermissionEnum}`; diff --git a/src/hooks/useChannelsSearch.ts b/src/hooks/useChannelsSearch.ts index 8534ba0a3..9a17ddf42 100644 --- a/src/hooks/useChannelsSearch.ts +++ b/src/hooks/useChannelsSearch.ts @@ -3,7 +3,7 @@ import { FetchMoreProps, Search, SearchProps } from "@dashboard/types"; import { filter } from "fuzzaldrin"; import React from "react"; -export const useChannelsSearch = function( +export const useChannelsSearch = function ( channels: T[], ) { const [query, onQueryChange] = React.useState(""); diff --git a/src/hooks/useServiceWorker.ts b/src/hooks/useServiceWorker.ts index f75da1406..b85aacc07 100644 --- a/src/hooks/useServiceWorker.ts +++ b/src/hooks/useServiceWorker.ts @@ -6,11 +6,11 @@ export const useServiceWorker = (timeout: number) => { const registrationRef = useRef(); useEffect(() => { - const interval = (setInterval(() => { + const interval = setInterval(() => { if (registrationRef.current) { registrationRef.current.update(); } - }, timeout) as unknown) as number; + }, timeout) as unknown as number; return () => clearInterval(interval); }, [timeout]); diff --git a/src/index.html b/src/index.html index 6b37aad83..c2d85da78 100644 --- a/src/index.html +++ b/src/index.html @@ -9,9 +9,12 @@ Sign in to the Saleor Dashboard - + - <%- injectOgTags %> + <%- injectOgTags %>