-
Notifications
You must be signed in to change notification settings - Fork 152
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #13638 from artsy/staging
- Loading branch information
Showing
41 changed files
with
2,124 additions
and
269 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
81 changes: 81 additions & 0 deletions
81
src/Apps/CollectorProfile/Components/CollectorProfileArtists/CollectorProfileArtistsList.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,81 @@ | ||
| import { Stack, Text } from "@artsy/palette" | ||
| import { FC } from "react" | ||
| import { graphql } from "react-relay" | ||
| import { useClientQuery } from "Utils/Hooks/useClientQuery" | ||
| import { CollectorProfileArtistsListQuery } from "__generated__/CollectorProfileArtistsListQuery.graphql" | ||
| import { | ||
| CollectorProfileArtistsListArtist, | ||
| CollectorProfileArtistsListArtistSkeleton, | ||
| } from "Apps/CollectorProfile/Components/CollectorProfileArtists/CollectorProfileArtistsListArtist" | ||
| import { compact } from "lodash" | ||
|
|
||
| interface CollectorProfileArtistsListProps {} | ||
|
|
||
| export const CollectorProfileArtistsList: FC<CollectorProfileArtistsListProps> = () => { | ||
| const { data, loading } = useClientQuery<CollectorProfileArtistsListQuery>({ | ||
| query: COLLECTOR_PROFILE_ARTISTS_LIST_QUERY, | ||
| }) | ||
|
|
||
| const userInterestEdges = compact(data?.me?.userInterestsConnection?.edges) | ||
|
|
||
| return ( | ||
| <Stack gap={2}> | ||
| <Stack | ||
| gap={2} | ||
| flexDirection="row" | ||
| alignItems="center" | ||
| color="black60" | ||
| borderBottom="1px solid" | ||
| borderColor="black10" | ||
| pb={2} | ||
| > | ||
| <Text size="sm-display" overflowEllipsis flex={1}> | ||
| Artist | ||
| </Text> | ||
|
|
||
| <Text size="sm-display" overflowEllipsis flex={1}> | ||
| Artworks uploaded | ||
| </Text> | ||
|
|
||
| <Text size="sm-display" overflowEllipsis flex={1}> | ||
| Share with the galleries during inquiries | ||
| </Text> | ||
|
|
||
| <Text size="sm-display" overflowEllipsis flex={1} textAlign="right"> | ||
| Follow artist | ||
| </Text> | ||
| </Stack> | ||
|
|
||
| {loading ? ( | ||
| new Array(10).fill(null).map((_, i) => { | ||
| return <CollectorProfileArtistsListArtistSkeleton key={i} /> | ||
| }) | ||
| ) : ( | ||
| <> | ||
| {userInterestEdges.map(userInterestEdge => { | ||
| return ( | ||
| <CollectorProfileArtistsListArtist | ||
| key={userInterestEdge.internalID} | ||
| userInterestEdge={userInterestEdge} | ||
| /> | ||
| ) | ||
| })} | ||
| </> | ||
| )} | ||
| </Stack> | ||
| ) | ||
| } | ||
|
|
||
| const COLLECTOR_PROFILE_ARTISTS_LIST_QUERY = graphql` | ||
| query CollectorProfileArtistsListQuery($after: String) { | ||
| me { | ||
| userInterestsConnection(first: 10, after: $after, interestType: ARTIST) { | ||
| totalCount | ||
| edges { | ||
| ...CollectorProfileArtistsListArtist_userInterestEdge | ||
| internalID | ||
| } | ||
| } | ||
| } | ||
| } | ||
| ` |
98 changes: 98 additions & 0 deletions
98
...CollectorProfile/Components/CollectorProfileArtists/CollectorProfileArtistsListArtist.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,98 @@ | ||
| import { FC } from "react" | ||
| import { graphql, useFragment } from "react-relay" | ||
| import { CollectorProfileArtistsListArtist_userInterestEdge$key } from "__generated__/CollectorProfileArtistsListArtist_userInterestEdge.graphql" | ||
| import { Box, Button, Checkbox, SkeletonText, Text } from "@artsy/palette" | ||
| import { EntityHeaderArtistFragmentContainer } from "Components/EntityHeaders/EntityHeaderArtist" | ||
| import { FollowArtistButtonQueryRenderer } from "Components/FollowButton/FollowArtistButton" | ||
| import { EntityHeaderPlaceholder } from "Components/EntityHeaders/EntityHeaderPlaceholder" | ||
| import styled from "styled-components" | ||
|
|
||
| interface CollectorProfileArtistsListArtistProps { | ||
| userInterestEdge: CollectorProfileArtistsListArtist_userInterestEdge$key | ||
| } | ||
|
|
||
| export const CollectorProfileArtistsListArtist: FC<CollectorProfileArtistsListArtistProps> = ({ | ||
| userInterestEdge, | ||
| }) => { | ||
| const { private: isPrivate, node: artist } = useFragment( | ||
| COLLECTOR_PROFILE_ARTISTS_LIST_ARTIST_FRAGMENT, | ||
| userInterestEdge | ||
| ) | ||
|
|
||
| if (!artist || artist.__typename !== "Artist") { | ||
| return null | ||
| } | ||
|
|
||
| const count = artist.counts?.artworks || 0 | ||
|
|
||
| return ( | ||
| <CollectorProfileArtistsListArtistRow> | ||
| <EntityHeaderArtistFragmentContainer | ||
| artist={artist} | ||
| displayFollowButton={false} | ||
| flex={1} | ||
| /> | ||
|
|
||
| <Text variant="sm-display" flex={1} overflowEllipsis> | ||
| {count} artwork{count === 1 ? "" : "s"} | ||
| </Text> | ||
|
|
||
| <Checkbox selected={!isPrivate} flex={1}> | ||
| Share with galleries | ||
| </Checkbox> | ||
|
|
||
| <Box flex={1} display="flex" justifyContent="flex-end"> | ||
| <FollowArtistButtonQueryRenderer id={artist.internalID} size="small" /> | ||
| </Box> | ||
| </CollectorProfileArtistsListArtistRow> | ||
| ) | ||
| } | ||
|
|
||
| export const CollectorProfileArtistsListArtistSkeleton: FC = () => { | ||
| return ( | ||
| <CollectorProfileArtistsListArtistRow> | ||
| <EntityHeaderPlaceholder flex={1} /> | ||
|
|
||
| <SkeletonText variant="sm-display" flex={1} overflowEllipsis> | ||
| 00 artworks | ||
| </SkeletonText> | ||
|
|
||
| <Checkbox disabled flex={1}> | ||
| Share with galleries | ||
| </Checkbox> | ||
|
|
||
| <Box flex={1} display="flex" justifyContent="flex-end"> | ||
| <Button variant="secondaryNeutral" size="small" disabled> | ||
| Follow | ||
| </Button> | ||
| </Box> | ||
| </CollectorProfileArtistsListArtistRow> | ||
| ) | ||
| } | ||
|
|
||
| const CollectorProfileArtistsListArtistRow = styled(Box).attrs({ | ||
| display: "flex", | ||
| gap: 2, | ||
| flexDirection: "row", | ||
| alignItems: "center", | ||
| borderBottom: "1px solid", | ||
| borderColor: "black10", | ||
| py: 4, | ||
| })`` | ||
|
|
||
| const COLLECTOR_PROFILE_ARTISTS_LIST_ARTIST_FRAGMENT = graphql` | ||
| fragment CollectorProfileArtistsListArtist_userInterestEdge on UserInterestEdge { | ||
| private | ||
| node { | ||
| __typename | ||
| ... on Artist { | ||
| ...EntityHeaderArtist_artist | ||
| internalID | ||
| name | ||
| counts { | ||
| artworks | ||
| } | ||
| } | ||
| } | ||
| } | ||
| ` |
39 changes: 39 additions & 0 deletions
39
src/Apps/CollectorProfile/Routes/Artists/CollectorProfileArtistsRoute.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,39 @@ | ||
| import FilterIcon from "@artsy/icons/FilterIcon" | ||
| import AddIcon from "@artsy/icons/AddIcon" | ||
| import { AutocompleteInput, Button, Stack } from "@artsy/palette" | ||
| import { MetaTags } from "Components/MetaTags" | ||
| import { FC } from "react" | ||
| import { CollectorProfileArtistsList } from "Apps/CollectorProfile/Components/CollectorProfileArtists/CollectorProfileArtistsList" | ||
|
|
||
| interface CollectorProfileArtistsRouteProps {} | ||
|
|
||
| export const CollectorProfileArtistsRoute: FC<CollectorProfileArtistsRouteProps> = props => { | ||
| return ( | ||
| <> | ||
| <MetaTags | ||
| title="Artists | Collector Profile | Artsy" | ||
| pathname="collector-profile/artists" | ||
| /> | ||
|
|
||
| <Stack gap={6}> | ||
| <Stack gap={2} flexDirection="row" alignItems="center"> | ||
| <AutocompleteInput | ||
| placeholder="Search artists in your collection" | ||
| options={[]} | ||
| flex={1} | ||
| /> | ||
|
|
||
| <Button variant="tertiary" Icon={FilterIcon} size="small"> | ||
| Sort & Filter | ||
| </Button> | ||
|
|
||
| <Button variant="primaryBlack" Icon={AddIcon}> | ||
| Add Artist | ||
| </Button> | ||
| </Stack> | ||
|
|
||
| <CollectorProfileArtistsList /> | ||
| </Stack> | ||
| </> | ||
| ) | ||
| } |
15 changes: 15 additions & 0 deletions
15
src/Apps/CollectorProfile/Routes/Artists/__tests__/CollectorProfileArtistsRoute.jest.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,15 @@ | ||
| import { render, screen } from "@testing-library/react" | ||
| import { CollectorProfileArtistsRoute } from "Apps/CollectorProfile/Routes/Artists/CollectorProfileArtistsRoute" | ||
| import { MockBoot } from "DevTools/MockBoot" | ||
|
|
||
| describe("CollectorProfileArtistsRoute", () => { | ||
| it("renders correctly", () => { | ||
| render( | ||
| <MockBoot> | ||
| <CollectorProfileArtistsRoute /> | ||
| </MockBoot> | ||
| ) | ||
|
|
||
| expect(screen.getByText("Add Artist")).toBeInTheDocument() | ||
| }) | ||
| }) |
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
32 changes: 32 additions & 0 deletions
32
src/Apps/CollectorProfile/Routes/Saves/Components/Actions/Mutations/useUpdateMeCollection.ts
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 { graphql } from "react-relay" | ||
| import { useMutation } from "Utils/Hooks/useMutation" | ||
| import { useUpdateMeCollectionMutation } from "__generated__/useUpdateMeCollectionMutation.graphql" | ||
|
|
||
| export const useUpdateMeCollection = () => { | ||
| return useMutation<useUpdateMeCollectionMutation>({ | ||
| mutation: graphql` | ||
| mutation useUpdateMeCollectionMutation( | ||
| $input: updateMeCollectionsMutationInput! | ||
| ) { | ||
| updateMeCollectionsMutation(input: $input) { | ||
| meCollectionsOrErrors { | ||
| ... on UpdateMeCollectionsSuccess { | ||
| collection { | ||
| id | ||
| shareableWithPartners | ||
| name | ||
| artworksCount | ||
| } | ||
| } | ||
| ... on UpdateMeCollectionsFailure { | ||
| mutationError { | ||
| type | ||
| message | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| `, | ||
| }) | ||
| } |
Oops, something went wrong.