Merge branch 'master' into chore/palette

data/schema.graphql

@@ -1356,12 +1356,12 @@ enum ArtworkSorts {
   TITLE_DESC
 }
 
-type ArtworkVersion {
+type ArtworkVersion implements Node {
   # The names for the artists related to this Artwork Version
   artistNames: String
 
   # The artists related to this Artwork Version
-  artists: String
+  artists: [Artist]
 
   # The Image id
   defaultImageID: String
@@ -4136,6 +4136,8 @@ type CreateSubmissionMutationPayload {
 
 # Autogenerated input type of CreateViewingRoom
 input CreateViewingRoomInput {
+  attributes: ViewingRoomAttributes
+
   # Main text
   body: String
 
@@ -4161,7 +4163,7 @@ input CreateViewingRoomInput {
   timeZone: String
 
   # Title
-  title: String!
+  title: String
 }
 
 # Autogenerated return type of CreateViewingRoom
@@ -6025,6 +6027,7 @@ type Me implements Node {
   email: String
   followsAndSaves: FollowsAndSaves
   hasCreditCards: Boolean
+  hasPassword: Boolean!
   hasQualifiedCreditCards: Boolean
   hasSecondFactorEnabled: Boolean!
 
@@ -6311,6 +6314,7 @@ type Mutation {
   # Update the current logged in user.
   updateMyUserProfile(input: UpdateMyProfileInput!): UpdateMyProfilePayload
   updateSmsSecondFactor(input: UpdateSmsSecondFactorInput!): UpdateSmsSecondFactorPayload
+  updateViewingRoom(input: UpdateViewingRoomInput!): UpdateViewingRoomPayload
 }
 
 input Near {
@@ -8686,6 +8690,22 @@ type UpdateSubmissionMutationPayload {
   consignmentSubmission: ConsignmentSubmission
 }
 
+# Autogenerated input type of UpdateViewingRoom
+input UpdateViewingRoomInput {
+  attributes: ViewingRoomAttributes!
+
+  # A unique identifier for the client performing the mutation.
+  clientMutationId: String
+  viewingRoomID: String!
+}
+
+# Autogenerated return type of UpdateViewingRoom
+type UpdateViewingRoomPayload {
+  # A unique identifier for the client performing the mutation.
+  clientMutationId: String
+  viewingRoomOrErrors: ViewingRoomOrErrorsUnion!
+}
+
 type User {
   cached: Int
 
@@ -9070,6 +9090,30 @@ type ViewingRoom {
   title: String!
 }
 
+# Basic viewing room attributes
+input ViewingRoomAttributes {
+  # Main text
+  body: String
+
+  # End datetime
+  endAt: ISO8601DateTime
+
+  # Introduction
+  introStatement: String
+
+  # Pullquote
+  pullQuote: String
+
+  # Start datetime
+  startAt: ISO8601DateTime
+
+  # Timezone
+  timeZone: String
+
+  # Title
+  title: String
+}
+
 # The connection type for ViewingRoom.
 type ViewingRoomConnection {
   # A list of edges.

package.json

@@ -74,7 +74,7 @@
     "babel-core": "7.0.0-bridge.0"
   },
   "dependencies": {
-    "@artsy/cohesion": "1.10.0",
+    "@artsy/cohesion": "1.12.0",
     "@artsy/palette": "11.0.1",
     "@mapbox/react-native-mapbox-gl": "6.1.3",
     "@react-native-community/async-storage": "1.6.3",
@@ -147,6 +147,7 @@
     "@types/styled-components": "4.0.2",
     "@types/styled-system": "5.1.9",
     "@types/supercluster": "5.0.0",
+    "@types/yup": "0.29.3",
     "auto": "7.12.3",
     "awesome-typescript-loader": "3.4.1",
     "babel-core": "7.0.0-bridge.0",

src/lib/Scenes/Consignments/v2/Boot.tsx

@@ -1,8 +1,11 @@
 import { StoreProvider } from "easy-peasy"
+import { FormikProvider, useFormik } from "formik"
 import React, { useEffect, useRef } from "react"
 import { View } from "react-native"
 import NavigatorIOS from "react-native-navigator-ios"
-import { useStoreActions } from "./State/hooks"
+import { artworkSchema, validateArtworkSchema } from "./Form/artworkSchema"
+import { ArtworkFormValues } from "./State/artworkModel"
+import { useStoreActions, useStoreState } from "./State/hooks"
 import { store } from "./State/store"
 
 interface BootProps {
@@ -18,21 +21,34 @@ export const setupMyCollectionScreen = (Component: React.ComponentType<any>) =>
     navigator: NavigatorIOS
   }> = props => {
     const navViewRef = useRef<View>(null)
-    const { setupNavigation } = useStoreActions(actions => actions.navigation)
+    const navigationActions = useStoreActions(actions => actions.navigation)
+    const artworkActions = useStoreActions(actions => actions.artwork)
+    const initialFormValues = useStoreState(state => state.artwork.formValues)
+
+    // FIXME: Don't initialize form for every collection screen; move this to another component
+    const initialForm = useFormik<ArtworkFormValues>({
+      enableReinitialize: true,
+      initialValues: initialFormValues,
+      initialErrors: validateArtworkSchema(initialFormValues),
+      onSubmit: artworkActions.addArtwork,
+      validationSchema: artworkSchema,
+    })
 
     /**
      * Whenever a new view controller is mounted we refresh our navigation
      */
     useEffect(() => {
-      setupNavigation({
+      navigationActions.setupNavigation({
         navigator: props.navigator,
         navViewRef,
       })
     }, [])
 
     return (
       <View ref={navViewRef}>
-        <Component {...props} />
+        <FormikProvider value={initialForm}>
+          <Component {...props} />
+        </FormikProvider>
       </View>
     )
   }
@@ -46,6 +62,7 @@ export const setupMyCollectionScreen = (Component: React.ComponentType<any>) =>
           initialRoute={{
             component: NavigatorIOSWrapper,
             passProps: props,
+            title: "",
           }}
         />
       </Boot>

src/lib/Scenes/Consignments/v2/Form/artworkSchema.tsx

@@ -0,0 +1,19 @@
+import { yupToFormErrors } from "formik"
+import { ArtworkFormValues } from "lib/Scenes/Consignments/v2/State/artworkModel"
+import * as Yup from "yup"
+
+export const artworkSchema = Yup.object().shape({
+  artist: Yup.string().test("artist", "Artist must be pablo picasso", value => value === "Pablo Picasso"),
+})
+
+export function validateArtworkSchema(values: ArtworkFormValues) {
+  let errors = {}
+  try {
+    artworkSchema.validateSync(values, {
+      abortEarly: false,
+    })
+  } catch (error) {
+    errors = yupToFormErrors(error)
+  }
+  return errors
+}

src/lib/Scenes/Consignments/v2/Form/useFormikSync.ts

@@ -0,0 +1,15 @@
+import { useFormikContext } from "formik"
+import { useEffect } from "react"
+import { ArtworkFormValues } from "../State/artworkModel"
+import { useStoreActions } from "../State/hooks"
+
+export function useFormikSync() {
+  const artworkActions = useStoreActions(actions => actions.artwork)
+  const formik = useFormikContext<ArtworkFormValues>()
+
+  useEffect(() => {
+    artworkActions.setFormValues(formik.values)
+  }, [formik.values])
+
+  return formik
+}

src/lib/Scenes/Consignments/v2/Screens/MyCollectionAddArtwork/Mutations/MyCollectionAddArtworkMutation.ts

@@ -0,0 +1,2 @@
+// TODO: Wire up real mutation
+export const MyCollectionAddArtworkMutation = ``

src/lib/Scenes/Consignments/v2/Screens/MyCollectionAddArtwork/Mutations/MyCollectionEditArtworkMutation.ts

@@ -0,0 +1,2 @@
+// TODO: Wire up real mutation
+export const MyCollectionEditArtworkMutation = ``

src/lib/Scenes/Consignments/v2/Screens/MyCollectionAddArtwork/MyCollectionAddArtwork.tsx

@@ -1,12 +1,14 @@
 import { Box, Button, Flex, Join, Sans, Separator, Spacer } from "@artsy/palette"
 import SearchIcon from "lib/Icons/SearchIcon"
 import { ScreenMargin } from "lib/Scenes/Consignments/v2/Components/ScreenMargin"
+import { useFormikSync } from "lib/Scenes/Consignments/v2/Form/useFormikSync"
 import { useStoreActions } from "lib/Scenes/Consignments/v2/State/hooks"
 import { Input } from "lib/Scenes/Search/Input"
 import React from "react"
 
 export const MyCollectionAddArtwork = () => {
   const navActions = useStoreActions(actions => actions.navigation)
+  const formik = useFormikSync()
 
   return (
     <Box>
@@ -27,23 +29,31 @@ export const MyCollectionAddArtwork = () => {
         <Join separator={<Spacer my={1} />}>
           <Input
             title="Artist"
-            style={{ height: 50 }}
             placeholder="Search artists"
             icon={<SearchIcon width={18} height={18} />}
+            onChangeText={formik.handleChange("artist")}
+            onBlur={formik.handleBlur("artist")}
+            value={formik.values.artist}
           />
-          <Input title="Medium" style={{ height: 50 }} placeholder="Select" />
-          <Input title="Size" style={{ height: 50 }} placeholder="Select" />
-        </Join>
-      </ScreenMargin>
 
-      <Spacer my={1} />
+          <Input title="Medium" placeholder="Select" />
+          <Input title="Size" placeholder="Select" />
+
+          <Button variant="noOutline" onPress={navActions.navigateToAddArtworkPhotos}>
+            Photos (optional)
+          </Button>
+
+          <Button variant="noOutline" onPress={navActions.navigateToAddTitleAndYear}>
+            Title & year (optional)
+          </Button>
 
-      <Button variant="noOutline" onPress={() => navActions.navigateToAddArtworkPhotos()}>
-        Photos (optional)
-      </Button>
-      <Button variant="noOutline" onPress={() => navActions.navigateToAddTitleAndYear()}>
-        Title & year (optional)
-      </Button>
+          <Button disabled={!formik.isValid} block onPress={formik.handleSubmit}>
+            Complete
+          </Button>
+
+          {formik.errors ? <Sans size="3">{JSON.stringify(formik.errors)}</Sans> : null}
+        </Join>
+      </ScreenMargin>
     </Box>
   )
 }

src/lib/Scenes/Consignments/v2/Screens/MyCollectionAddArtwork/Screens/MyCollectionAddArtworkAddPhotos.tsx

@@ -1,10 +1,10 @@
 import { Box, Button, Flex, Sans } from "@artsy/palette"
 import { ScreenMargin } from "lib/Scenes/Consignments/v2/Components/ScreenMargin"
-import { useStoreState } from "lib/Scenes/Consignments/v2/State/hooks"
+import { useStoreActions } from "lib/Scenes/Consignments/v2/State/hooks"
 import React from "react"
 
 export const MyCollectionAddArtworkAddPhotos = () => {
-  const { navigator } = useStoreState(state => state.navigation)
+  const { goBack } = useStoreActions(actions => actions.navigation)
 
   return (
     <Flex mt={4}>
@@ -16,7 +16,7 @@ export const MyCollectionAddArtworkAddPhotos = () => {
           <Sans size="3">Photo list</Sans>
         </Box>
 
-        <Button block onPress={() => navigator?.pop()}>
+        <Button block onPress={goBack}>
           Done
         </Button>
       </ScreenMargin>

src/lib/Scenes/Consignments/v2/Screens/MyCollectionAddArtwork/Screens/MyCollectionAddArtworkTitleAndYear.tsx

@@ -1,12 +1,13 @@
 import { Button, Flex, Join, Sans, Spacer } from "@artsy/palette"
-import SearchIcon from "lib/Icons/SearchIcon"
 import { ScreenMargin } from "lib/Scenes/Consignments/v2/Components/ScreenMargin"
-import { useStoreState } from "lib/Scenes/Consignments/v2/State/hooks"
+import { useFormikSync } from "lib/Scenes/Consignments/v2/Form/useFormikSync"
+import { useStoreActions } from "lib/Scenes/Consignments/v2/State/hooks"
 import { Input } from "lib/Scenes/Search/Input"
 import React from "react"
 
 export const MyCollectionAddArtworkTitleAndYear = () => {
-  const { navigator } = useStoreState(state => state.navigation)
+  const navigationActions = useStoreActions(actions => actions.navigation)
+  const formik = useFormikSync()
 
   return (
     <Flex mt={4}>
@@ -17,18 +18,24 @@ export const MyCollectionAddArtworkTitleAndYear = () => {
       <ScreenMargin>
         <Join separator={<Spacer my={1} />}>
           <Input
-            title="Artist"
-            style={{ height: 50 }}
-            placeholder="Search artists"
-            icon={<SearchIcon width={18} height={18} />}
+            title="Title"
+            placeholder="Title"
+            onChangeText={formik.handleChange("title")}
+            onBlur={formik.handleBlur("title")}
+            defaultValue={formik.values.title}
+          />
+          <Input
+            title="Year"
+            placeholder="Year"
+            onChangeText={formik.handleChange("year")}
+            onBlur={formik.handleBlur("year")}
+            defaultValue={formik.values.year}
           />
-          <Input title="Medium" style={{ height: 50 }} placeholder="Select" />
-          <Input title="Size" style={{ height: 50 }} placeholder="Select" />
         </Join>
 
         <Spacer my={1} />
 
-        <Button block onPress={() => navigator?.pop()}>
+        <Button block onPress={navigationActions.goBack}>
           Done
         </Button>
       </ScreenMargin>

src/lib/Scenes/Consignments/v2/Screens/MyCollectionArtworkDetail/MyCollectionArtworkDetail.tsx

@@ -1,11 +1,13 @@
-import { Sans } from "@artsy/palette"
+import { Box, Sans } from "@artsy/palette"
 import { ScreenMargin } from "lib/Scenes/Consignments/v2/Components/ScreenMargin"
 import React from "react"
 
 export const MyCollectionArtworkDetail = () => {
   return (
     <ScreenMargin>
-      <Sans size="3">Artwork Detail</Sans>
+      <Box m={4}>
+        <Sans size="3">Artwork Detail</Sans>
+      </Box>
     </ScreenMargin>
   )
 }

src/lib/Scenes/Consignments/v2/Screens/MyCollectionArtworkList/MyCollectionArtworkList.tsx

@@ -1,11 +1,13 @@
-import { Sans } from "@artsy/palette"
+import { Box, Sans } from "@artsy/palette"
 import { ScreenMargin } from "lib/Scenes/Consignments/v2/Components/ScreenMargin"
 import React from "react"
 
 export const MyCollectionArtworkList = () => {
   return (
     <ScreenMargin>
-      <Sans size="3">List View</Sans>
+      <Box m={4}>
+        <Sans size="3">List View</Sans>
+      </Box>
     </ScreenMargin>
   )
 }