Skip to content

Commit

Permalink
Review corrections
Browse files Browse the repository at this point in the history
  • Loading branch information
@piotrgrundas
piotrgrundas committed Apr 19, 2021
1 parent 8426316 commit 100339a
Show file tree
Hide file tree
Showing 12 changed files with 224 additions and 188 deletions.
4 changes: 2 additions & 2 deletions schema.graphql
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4215,10 +4215,10 @@ enum ProductFieldEnum {
PRODUCT_WEIGHT
COLLECTIONS
CHARGE_TAXES
PRODUCT_IMAGES
PRODUCT_MEDIA
VARIANT_SKU
VARIANT_WEIGHT
VARIANT_IMAGES
VARIANT_MEDIA
}

input ProductFilterInput {
Expand Down
101 changes: 67 additions & 34 deletions src/attributes/components/AttributeDetails/NumericUnits.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,15 @@ import { AttributePageFormData } from "@saleor/attributes/components/AttributePa
import ControlledCheckbox from "@saleor/components/ControlledCheckbox";
import SingleSelectField from "@saleor/components/SingleSelectField";
import { UseFormResult } from "@saleor/hooks/useForm";
import { commonMessages } from "@saleor/intl";
import { makeStyles } from "@saleor/theme";
import { MeasurementUnitsEnum } from "@saleor/types/globalTypes";
import React, { useEffect, useState } from "react";
import React, { useEffect, useMemo, useState } from "react";
import { useIntl } from "react-intl";

import * as M from "./messages";
import {
unitChoices,
getUnitChoices,
unitMapping,
UnitSystem,
unitSystemChoices,
Expand All @@ -19,11 +21,11 @@ import {
const useStyles = makeStyles(
theme => ({
unitsRow: {
columnGap: theme.spacing(2) + "px",
columnGap: theme.spacing(2),
display: "flex",
[theme.breakpoints.down("sm")]: {
flexFlow: "wrap",
rowGap: theme.spacing(3) + "px"
rowGap: theme.spacing(3)
}
},
hr: {
Expand All @@ -38,9 +40,9 @@ const useStyles = makeStyles(
);

interface UnitData {
unit: MeasurementUnitsEnum;
system: UnitSystem;
type: UnitType;
unit?: MeasurementUnitsEnum;
system?: UnitSystem;
type?: UnitType;
}

interface NumericUnitsProps
Expand All @@ -59,40 +61,63 @@ export const NumericUnits: React.FC<NumericUnitsProps> = ({
setError,
clearErrors
}) => {
const { formatMessage } = useIntl();
const classes = useStyles();
const [unitData, setUnitData] = useState<Partial<UnitData>>({
const [unitData, setUnitData] = useState<UnitData>({
unit: data.unit
});

const { unit, system, type } = unitData;
const errorProps = { error: !!errors.unit, hint: M.required };
const errorProps = {
error: !!errors.unit,
hint: formatMessage(commonMessages.requiredField)
};
const [typeChoices, systemChoices, unitChoices] = useMemo(
() => [
unitTypeChoices.map(choice => ({
...choice,
label: formatMessage(choice.label)
})),
unitSystemChoices.map(choice => ({
...choice,
label: formatMessage(choice.label)
})),
getUnitChoices(formatMessage)
],
[]
);

useEffect(() => set({ unit }), [unit]);

useEffect(() => {
if (data.unit) {
const initialData = { unit: data.unit } as UnitData;
const selectInitialUnitData = () => {
const initialData: UnitData = { unit: data.unit };

Object.entries(unitChoices).find(([system, types]) => {
const systemMatch = Object.entries(types).find(([type, units]) => {
const unitMatch = units.find(({ value }) => value === data.unit);
if (unitMatch) {
initialData.type = type as UnitType;
Object.entries(unitChoices).some(([system, types]) => {
const systemMatch = Object.entries(types).find(([type, units]) => {
const unitMatch = units.some(({ value }) => value === data.unit);
if (unitMatch) {
initialData.type = type as UnitType;
}
return unitMatch;
});
if (systemMatch) {
initialData.system = system as UnitSystem;
}
return unitMatch;
return systemMatch;
});
if (systemMatch) {
initialData.system = system as UnitSystem;
}
return systemMatch;
});
setUnitData(initialData);

return initialData;
};

setUnitData(selectInitialUnitData());
}
}, []);

useEffect(() => {
if (unit === undefined && !errors.unit) {
setError("unit", M.required);
setError("unit", formatMessage(commonMessages.requiredField));
}
if (errors.unit && (unit || unit === null)) {
clearErrors("unit");
Expand All @@ -105,7 +130,7 @@ export const NumericUnits: React.FC<NumericUnitsProps> = ({
<ControlledCheckbox
data-test="numeric-with-unit"
name="selectUnit"
label={M.selectUnit}
label={formatMessage(M.messages.selectUnit)}
checked={data.unit !== null}
onChange={({ target }) =>
setUnitData({ unit: target.value ? undefined : null })
Expand All @@ -117,30 +142,38 @@ export const NumericUnits: React.FC<NumericUnitsProps> = ({
<SingleSelectField
{...(!system && errorProps)}
testId="unit-system"
label={M.unitSystem}
choices={unitSystemChoices}
onChange={({ target }) => setUnitData({ system: target.value })}
label={formatMessage(M.messages.unitSystem)}
choices={systemChoices}
onChange={({ target }: React.ChangeEvent<HTMLSelectElement>) =>
setUnitData({ system: target.value as UnitSystem })
}
value={system}
disabled={disabled}
/>
<SingleSelectField
{...(system && !type && errorProps)}
testId="unit-of"
label={M.unitOf}
choices={unitTypeChoices}
onChange={({ target }) =>
setUnitData(({ system }) => ({ system, type: target.value }))
label={formatMessage(M.messages.unitOf)}
choices={typeChoices}
onChange={({ target }: React.ChangeEvent<HTMLSelectElement>) =>
setUnitData(({ system }) => ({
system,
type: target.value as UnitType
}))
}
disabled={!system || disabled}
value={type}
/>
<SingleSelectField
{...(type && !unit && errorProps)}
testId="unit"
label={M.unit}
label={formatMessage(M.messages.unit)}
choices={type ? unitChoices[system][type] : []}
onChange={({ target }) =>
setUnitData(p => ({ ...p, unit: target.value }))
onChange={({ target }: React.ChangeEvent<HTMLSelectElement>) =>
setUnitData(data => ({
...data,
unit: target.value as MeasurementUnitsEnum
}))
}
disabled={!type || disabled}
value={
Expand Down
127 changes: 56 additions & 71 deletions src/attributes/components/AttributeDetails/messages.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { commonMessages } from "@saleor/intl";
import React from "react";
import { defineMessages, FormattedMessage } from "react-intl";
import { defineMessages } from "react-intl";

export const messages = defineMessages({
attributeLabel: {
Expand All @@ -26,6 +25,25 @@ export const messages = defineMessages({
valueRequired: {
defaultMessage: "Value Required",
description: "check to require attribute to have value"
},
selectUnit: {
defaultMessage: "Select unit",
description: "check to require numeric attribute unit"
},

unitSystem: {
defaultMessage: "System",
description: "numeric attribute unit system"
},

unitOf: {
defaultMessage: "Units of",
description: "numeric attribute units of"
},

unit: {
defaultMessage: "Unit",
description: "numeric attribute unit"
}
});

Expand Down Expand Up @@ -56,71 +74,42 @@ export const inputTypeMessages = defineMessages({
}
});

export const selectUnit = (
<FormattedMessage
defaultMessage="Select unit"
description="check to require numeric attribute unit"
/>
);

export const unitSystem = (
<FormattedMessage
defaultMessage="System"
description="numeric attribute unit system"
/>
);

export const unitOf = (
<FormattedMessage
defaultMessage="Units of"
description="numeric attribute units of"
/>
);

export const unit = (
<FormattedMessage
defaultMessage="Unit"
description="numeric attribute unit"
/>
);

export const required = <FormattedMessage {...commonMessages.requiredField} />;

/**
* Unit System
*/
export const metric = (
<FormattedMessage defaultMessage="Metric" description="metric unit system" />
);

export const imperial = (
<FormattedMessage
defaultMessage="Imperial"
description="imperial unit system"
/>
);

/**
* Unit type
*/
export const volume = (
<FormattedMessage defaultMessage="Volume" description="volume units types" />
);
export const unitSystemMessages = defineMessages({
metric: {
defaultMessage: "Metric",
description: "metric unit system"
},
imperial: {
defaultMessage: "Imperial",
description: "imperial unit system"
}
});

export const distance = (
<FormattedMessage
defaultMessage="Distance"
description="distance units type"
/>
);
export const unitTypeMessages = defineMessages({
volume: {
defaultMessage: "Volume",
description: "volume units types"
},

export const weight = (
<FormattedMessage defaultMessage="Weight" description="weight units type" />
);
distance: {
defaultMessage: "Distance",
description: "distance units type"
},
weight: {
defaultMessage: "Weight",
description: "weight units type"
},
area: {
defaultMessage: "Area",
description: "area units type"
}
});

export const area = (
<FormattedMessage defaultMessage="Area" description="area units type" />
);
export const unitMessages = defineMessages({
pint: { defaultMessage: "pint", description: "pint unit" },
acreInch: { defaultMessage: "acre-inch", description: "acre-inch unit" },
acreFt: { defaultMessage: "acre-ft", description: "acre-ft unit" }
});

export const units = {
cubicCentimeter: <>cm&sup3;</>,
Expand All @@ -141,13 +130,9 @@ export const units = {
cubicYard: <>yd&sup3;</>,
qt: "qt",
flOz: "fl. oz",
pint: <FormattedMessage defaultMessage="pint" description="pint unit" />,
acreInch: (
<FormattedMessage defaultMessage="acre-inch" description="acre-inch unit" />
),
acreFt: (
<FormattedMessage defaultMessage="acre-ft" description="acre-ft unit" />
),
pint: unitMessages.pint,
acreInch: unitMessages.acreInch,
acreFt: unitMessages.acreFt,
ft: "ft",
yd: "yd",
inch: "in",
Expand Down
Loading

0 comments on commit 100339a

Please sign in to comment.