-
Notifications
You must be signed in to change notification settings - Fork 573
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(CX-3636): create add to my collection bottom sheet (#8631)
* refactor: fix linter * feat: define bottom sheet modal * refactor: fix context warnings * feat: add to my collection bottom sheet modal * refactor: update bottom sheet modal * chore: add more tests * chore: hide bottom sheet after adding an artwork * chore: fix broken test * chore: address review comments
- Loading branch information
1 parent
0ce173b
commit 7231d31
Showing
15 changed files
with
325 additions
and
74 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
41 changes: 41 additions & 0 deletions
41
...ection/Components/MyCollectionBottomSheetModals/MyCollectionBottomSheetModalAdd.tests.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| import BottomSheet from "@gorhom/bottom-sheet" | ||
| import { fireEvent } from "@testing-library/react-native" | ||
| import { MyCollectionBottomSheetModalAdd } from "app/Scenes/MyCollection/Components/MyCollectionBottomSheetModals/MyCollectionBottomSheetModalAdd" | ||
| import { MyCollectionTabsStoreProvider } from "app/Scenes/MyCollection/State/MyCollectionTabsStore" | ||
| import { renderWithWrappers } from "app/utils/tests/renderWithWrappers" | ||
|
|
||
| describe("MyCollectionBottomSheetModalAdd", () => { | ||
| const TestRenderer = () => { | ||
| return ( | ||
| <MyCollectionTabsStoreProvider injections={{ view: "Add" }}> | ||
| <BottomSheet index={0} snapPoints={["50%"]}> | ||
| <MyCollectionBottomSheetModalAdd /> | ||
| </BottomSheet> | ||
| </MyCollectionTabsStoreProvider> | ||
| ) | ||
| } | ||
|
|
||
| describe("Add Artists", () => { | ||
| it("navigates the user to add artists screen", () => { | ||
| const { getByText } = renderWithWrappers(<TestRenderer />) | ||
|
|
||
| const addArtistsButton = getByText("Add Artists") | ||
|
|
||
| fireEvent(addArtistsButton, "onPress") | ||
|
|
||
| // TODO: Add this test later | ||
| }) | ||
| }) | ||
|
|
||
| describe("Add Artworks", () => { | ||
| it("navigates the user to add artwork screen", () => { | ||
| const { getByText } = renderWithWrappers(<TestRenderer />) | ||
|
|
||
| const addArworksButton = getByText("Add Artworks") | ||
|
|
||
| fireEvent(addArworksButton, "onPress") | ||
|
|
||
| // TODO: Add this test later | ||
| }) | ||
| }) | ||
| }) |
53 changes: 53 additions & 0 deletions
53
...MyCollection/Components/MyCollectionBottomSheetModals/MyCollectionBottomSheetModalAdd.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| import { ArtworkIcon, Flex, Separator, Text, UserMultiIcon } from "@artsy/palette-mobile" | ||
| import { BottomSheetView } from "@gorhom/bottom-sheet" | ||
|
|
||
| import { MenuItem } from "app/Components/MenuItem" | ||
| import { MyCollectionTabsStore } from "app/Scenes/MyCollection/State/MyCollectionTabsStore" | ||
| import { Tab } from "app/Scenes/MyProfile/MyProfileHeaderMyCollectionAndSavedWorks" | ||
| import { navigate, popToRoot } from "app/system/navigation/navigate" | ||
|
|
||
| export const MyCollectionBottomSheetModalAdd: React.FC<{}> = () => { | ||
| const setView = MyCollectionTabsStore.useStoreActions((actions) => actions.setView) | ||
|
|
||
| return ( | ||
| <BottomSheetView> | ||
| <Flex> | ||
| <Text textAlign="center" variant="sm" fontWeight="500" pt={2} pb={4}> | ||
| Add to My Collection | ||
| </Text> | ||
| <Separator /> | ||
| </Flex> | ||
| <Flex> | ||
| <MenuItem | ||
| title="Add Artists" | ||
| description="List the artists in your collection." | ||
| onPress={() => { | ||
| console.log("Add Artists") | ||
| }} | ||
| icon={<UserMultiIcon height={24} width={24} />} | ||
| py="40px" | ||
| /> | ||
| <Separator /> | ||
| <MenuItem | ||
| title="Add Artworks" | ||
| description="Upload images and details of an artwork in your collection." | ||
| onPress={() => { | ||
| navigate("my-collection/artworks/new", { | ||
| passProps: { | ||
| mode: "add", | ||
| source: Tab.collection, | ||
| onSuccess: () => { | ||
| // hide the bottom sheet | ||
| setView(null) | ||
| popToRoot() | ||
| }, | ||
| }, | ||
| }) | ||
| }} | ||
| icon={<ArtworkIcon height={24} width={24} />} | ||
| py="40px" | ||
| /> | ||
| </Flex> | ||
| </BottomSheetView> | ||
| ) | ||
| } |
32 changes: 32 additions & 0 deletions
32
...llection/Components/MyCollectionBottomSheetModals/MyCollectionBottomSheetModals.tests.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| import { | ||
| MyCollectionBottomSheetModalView, | ||
| MyCollectionBottomSheetModals, | ||
| } from "app/Scenes/MyCollection/Components/MyCollectionBottomSheetModals/MyCollectionBottomSheetModals" | ||
| import { | ||
| MyCollectionTabsStoreProvider, | ||
| myCollectionTabsStoreModel, | ||
| } from "app/Scenes/MyCollection/State/MyCollectionTabsStore" | ||
| import { renderWithWrappers } from "app/utils/tests/renderWithWrappers" | ||
|
|
||
| describe("MyCollectionBottomSheetModals", () => { | ||
| const TestRenderer: React.FC<{ view?: MyCollectionBottomSheetModalView }> = ({ view }) => ( | ||
| <MyCollectionTabsStoreProvider | ||
| runtimeModel={{ | ||
| ...myCollectionTabsStoreModel, | ||
| view: view ?? null, | ||
| }} | ||
| > | ||
| <MyCollectionBottomSheetModals /> | ||
| </MyCollectionTabsStoreProvider> | ||
| ) | ||
|
|
||
| it("renders nothing", () => { | ||
| const { getByText } = renderWithWrappers(<TestRenderer />) | ||
| expect(() => getByText("Add to My Collection")).toThrow() | ||
| }) | ||
|
|
||
| it("renders Add to my collection when the Add view is specified", () => { | ||
| const { getByText } = renderWithWrappers(<TestRenderer view="Add" />) | ||
| expect(getByText("Add to My Collection")).toBeTruthy() | ||
| }) | ||
| }) |
49 changes: 49 additions & 0 deletions
49
...s/MyCollection/Components/MyCollectionBottomSheetModals/MyCollectionBottomSheetModals.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| import BottomSheet, { BottomSheetProps } from "@gorhom/bottom-sheet" | ||
| import { DefaultBottomSheetBackdrop } from "app/Components/BottomSheet/DefaultBottomSheetBackdrop" | ||
| import { MyCollectionBottomSheetModalAdd } from "app/Scenes/MyCollection/Components/MyCollectionBottomSheetModals/MyCollectionBottomSheetModalAdd" | ||
| import { MyCollectionTabsStore } from "app/Scenes/MyCollection/State/MyCollectionTabsStore" | ||
| import { useCallback, useMemo, useRef } from "react" | ||
|
|
||
| export type MyCollectionBottomSheetModalView = "Add" | null | ||
|
|
||
| export const MyCollectionBottomSheetModals: React.FC<{}> = () => { | ||
| const bottomSheetRef = useRef<BottomSheet>(null) | ||
|
|
||
| const setView = MyCollectionTabsStore.useStoreActions((actions) => actions.setView) | ||
| const view = MyCollectionTabsStore.useStoreState((state) => state.view) | ||
|
|
||
| const snapPoints = useMemo(() => ["50%"], []) | ||
|
|
||
| const handleSheetChanges = useCallback((index: number) => { | ||
| if (index === -1) { | ||
| setView(null) | ||
| } | ||
| }, []) | ||
|
|
||
| const hideBottomSheet = () => { | ||
| if (view) { | ||
| bottomSheetRef.current?.close() | ||
| setView(null) | ||
| } | ||
| } | ||
|
|
||
| const renderBackdrop: BottomSheetProps["backdropComponent"] = (props) => { | ||
| return <DefaultBottomSheetBackdrop pressBehavior="close" onClose={hideBottomSheet} {...props} /> | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| <BottomSheet | ||
| ref={bottomSheetRef} | ||
| index={0} | ||
| onChange={handleSheetChanges} | ||
| snapPoints={snapPoints} | ||
| enablePanDownToClose | ||
| backdropComponent={renderBackdrop} | ||
| handleIndicatorStyle={{ backgroundColor: "black", width: 40, height: 4, borderRadius: 2 }} | ||
| > | ||
| {view === "Add" && <MyCollectionBottomSheetModalAdd />} | ||
| </BottomSheet> | ||
| </> | ||
| ) | ||
| } |
Oops, something went wrong.