diff --git a/src/app/Components/ArtworkFilter/Filters/ColorsOptions.tsx b/src/app/Components/ArtworkFilter/Filters/ColorsOptions.tsx index 91c3872b17d..3854372e784 100644 --- a/src/app/Components/ArtworkFilter/Filters/ColorsOptions.tsx +++ b/src/app/Components/ArtworkFilter/Filters/ColorsOptions.tsx @@ -38,7 +38,16 @@ export const COLORS_INDEXED_BY_VALUE = COLORS.reduce( {} ) -const SWATCHES_PER_ROW = 4 +export const COLORS_OPTIONS: FilterData[] = COLORS.map((color) => { + return { + // names returned by Metaphysics are actually the slugs + displayText: color.name, + paramValue: color.value, + paramName: FilterParamName.colors, + } +}) + +export const SWATCHES_PER_ROW = 4 type ColorsOptionsScreenProps = StackScreenProps< ArtworkFilterNavigationStack, diff --git a/src/app/Components/ArtworkFilter/Filters/ColorsSwatch.tsx b/src/app/Components/ArtworkFilter/Filters/ColorsSwatch.tsx index fd31179ab35..90744b1f72a 100644 --- a/src/app/Components/ArtworkFilter/Filters/ColorsSwatch.tsx +++ b/src/app/Components/ArtworkFilter/Filters/ColorsSwatch.tsx @@ -37,6 +37,7 @@ export const ColorsSwatch: React.FC = ({ height="18px" marginTop="-9px" marginLeft="-9px" + testID={`check-icon-${name}`} fill={foregroundColor as any} // Annoying /> )} diff --git a/src/app/Scenes/SavedSearchAlert/Components/SavedSearchFilterColour.tests.tsx b/src/app/Scenes/SavedSearchAlert/Components/SavedSearchFilterColour.tests.tsx new file mode 100644 index 00000000000..5ff49d64659 --- /dev/null +++ b/src/app/Scenes/SavedSearchAlert/Components/SavedSearchFilterColour.tests.tsx @@ -0,0 +1,78 @@ +import { OwnerType } from "@artsy/cohesion" +import { fireEvent, waitFor } from "@testing-library/react-native" +import { + COLORS_INDEXED_BY_VALUE, + COLORS_OPTIONS, +} from "app/Components/ArtworkFilter/Filters/ColorsOptions" +import { SavedSearchFilterColour } from "app/Scenes/SavedSearchAlert/Components/SavedSearchFilterColour" +import { + SavedSearchModel, + SavedSearchStoreProvider, + savedSearchModel, +} from "app/Scenes/SavedSearchAlert/SavedSearchStore" +import { renderWithWrappers } from "app/utils/tests/renderWithWrappers" + +describe("SavedSearchFilterColour", () => { + it("shows all available color options unselected", () => { + const { getByTestId } = renderWithWrappers( + + + + ) + + COLORS_OPTIONS.forEach((option) => { + expect(() => + getByTestId(`check-icon-${COLORS_INDEXED_BY_VALUE[option.paramValue as string].name}`) + ).toThrow() + }) + }) + + it("shows the right selected state", () => { + const { getByTestId } = renderWithWrappers( + + + + ) + + COLORS_OPTIONS.forEach((option) => { + if (option.paramValue !== "red") { + expect(() => + getByTestId(`check-icon-${COLORS_INDEXED_BY_VALUE[option.paramValue as string].name}`) + ).toThrow() + } else { + expect( + getByTestId(`check-icon-${COLORS_INDEXED_BY_VALUE[option.paramValue as string].name}`) + ).toBeDefined() + } + }) + }) + + it("Updates selected filters on press", () => { + const { getByTestId, getByText } = renderWithWrappers( + + + + ) + + fireEvent(getByText("Red"), "onPress") + + waitFor(() => { + expect(getByTestId("check-icon-Red")).toBeDefined() + }) + }) +}) + +const initialData: SavedSearchModel = { + ...savedSearchModel, + attributes: { + atAuction: true, + }, + entity: { + artists: [{ id: "artistID", name: "Banksy" }], + owner: { + type: OwnerType.artist, + id: "ownerId", + slug: "ownerSlug", + }, + }, +} diff --git a/src/app/Scenes/SavedSearchAlert/Components/SavedSearchFilterColour.tsx b/src/app/Scenes/SavedSearchAlert/Components/SavedSearchFilterColour.tsx new file mode 100644 index 00000000000..92cc3426d1f --- /dev/null +++ b/src/app/Scenes/SavedSearchAlert/Components/SavedSearchFilterColour.tsx @@ -0,0 +1,75 @@ +import { Flex, Spacer, Text, useScreenDimensions, useSpace } from "@artsy/palette-mobile" +import { + COLORS_INDEXED_BY_VALUE, + COLORS_OPTIONS, + SWATCHES_PER_ROW, +} from "app/Components/ArtworkFilter/Filters/ColorsOptions" +import { ColorsSwatch } from "app/Components/ArtworkFilter/Filters/ColorsSwatch" +import { SearchCriteria } from "app/Components/ArtworkFilter/SavedSearch/types" +import { SavedSearchStore } from "app/Scenes/SavedSearchAlert/SavedSearchStore" +import { isValueSelected, useSearchCriteriaAttributes } from "app/Scenes/SavedSearchAlert/helpers" + +export const SavedSearchFilterColour = () => { + const selectedAttributes = useSearchCriteriaAttributes(SearchCriteria.colors) as string[] + + const { width } = useScreenDimensions() + const space = useSpace() + + const setValueToAttributesByKeyAction = SavedSearchStore.useStoreActions( + (actions) => actions.setValueToAttributesByKeyAction + ) + const removeValueFromAttributesByKeyAction = SavedSearchStore.useStoreActions( + (actions) => actions.removeValueFromAttributesByKeyAction + ) + + const handlePress = (value: string) => { + const isSelected = isValueSelected({ + selectedAttributes, + value: value, + }) + + if (isSelected) { + removeValueFromAttributesByKeyAction({ + key: SearchCriteria.colors, + value: value, + }) + } else { + const newValues = (selectedAttributes || []).concat(value) + setValueToAttributesByKeyAction({ + key: SearchCriteria.colors, + value: newValues, + }) + } + } + + return ( + + + Colour + + + + {COLORS_OPTIONS.map((option, i) => { + const color = COLORS_INDEXED_BY_VALUE[String(option.paramValue)] + + return ( + { + handlePress(option.paramValue as string) + }} + /> + ) + })} + + + ) +} diff --git a/src/app/Scenes/SavedSearchAlert/screens/SavedSearchFilterScreen.tsx b/src/app/Scenes/SavedSearchAlert/screens/SavedSearchFilterScreen.tsx index 9fa67afd738..70f04f711b9 100644 --- a/src/app/Scenes/SavedSearchAlert/screens/SavedSearchFilterScreen.tsx +++ b/src/app/Scenes/SavedSearchAlert/screens/SavedSearchFilterScreen.tsx @@ -3,6 +3,7 @@ import { useNavigation } from "@react-navigation/native" import { SearchCriteria } from "app/Components/ArtworkFilter/SavedSearch/types" import { FancyModalHeader } from "app/Components/FancyModal/FancyModalHeader" import { SavedSearchAppliedFilters } from "app/Scenes/SavedSearchAlert/Components/SavedSearchFilterAppliedFilters" +import { SavedSearchFilterColour } from "app/Scenes/SavedSearchAlert/Components/SavedSearchFilterColour" import { SavedSearchRarity } from "app/Scenes/SavedSearchAlert/Components/SavedSearchFilterRarity" import { SavedSearchStore } from "app/Scenes/SavedSearchAlert/SavedSearchStore" import { MotiView } from "moti" @@ -24,6 +25,7 @@ export const SavedSearchFilterScreen: React.FC<{}> = () => { }> + )