diff --git a/index.js b/index.js index 61faf0c89..c25c69ecb 100644 --- a/index.js +++ b/index.js @@ -2,11 +2,7 @@ import App from "./src" import { AppRegistry } from "react-native" import * as Sentry from "@sentry/react-native" import "react-native-gesture-handler" -// import { enableScreens } from "react-native-screens" - -// This enables the native stack navigator using (react-native-screens) -// https://reactnavigation.org/blog/2020/02/06/react-navigation-5.0/#native-stack-navigator -// Leaving it commented out for now because there's glitch when navigating to the Product view -// enableScreens() +// "core-js/features/promise" is a polyfill Apollo refetch in RN, see: https://github.com/apollographql/apollo-client/issues/6381 +import "core-js/features/promise" AppRegistry.registerComponent("seasons", () => App) diff --git a/package.json b/package.json index d4965a3ea..d9bb23fbb 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,6 @@ }, "dependencies": { "@apollo/client": "^3.3.7", - "@apollo/react-hooks": "^3.1.1", "@expo/react-native-action-sheet": "^3.8.0", "@material-ui/core": "^4.11.1", "@react-native-community/async-storage": "~1.12.0", @@ -45,17 +44,15 @@ "@sentry/react-native": "^1.1.0", "@types/jest": "^24.0.18", "@types/luxon": "^1.24.3", - "apollo-boost": "^0.4.4", "apollo-cache": "^1.3.2", "apollo-cache-inmemory": "^1.6.6", "apollo-cache-persist": "^0.1.1", - "apollo-client": "2.6.4", - "apollo-link": "^1.2.12", "apollo-link-context": "^1.0.19", - "apollo-link-error": "^1.1.12", + "apollo-link-error": "^1.1.13", "apollo-upload-client": "^14.1.1", "apollo-utilities": "^1.3.2", "aws-sdk": "^2.639.0", + "core-js": "^3.8.3", "expo": "^39.0.0", "graphql": "^14.5.8", "lodash": "^4.17.15", @@ -63,7 +60,6 @@ "node-fetch": "^2.6.0", "querystring": "^0.2.0", "react": "16.13.1", - "react-apollo": "^3.1.1", "react-dom": "16.13.1", "react-native": "0.63.3", "react-native-animatable": "^1.3.3", diff --git a/src/Apollo/index.ts b/src/Apollo/index.ts index b99f77c0d..4e6869a57 100644 --- a/src/Apollo/index.ts +++ b/src/Apollo/index.ts @@ -1,33 +1,51 @@ -import { InMemoryCache, IntrospectionFragmentMatcher } from "apollo-cache-inmemory" -import { persistCache } from "apollo-cache-persist" -import { ApolloClient } from "apollo-client" -import { ApolloLink, Observable } from "apollo-link" +import { ApolloLink, Observable, ApolloClient, InMemoryCache, HttpLink } from "@apollo/client" import { setContext } from "apollo-link-context" import { onError } from "apollo-link-error" -import { createUploadLink } from "apollo-upload-client" import { getAccessTokenFromSession, getNewToken } from "App/utils/auth" -import { config, Env } from "App/utils/config" import { Platform } from "react-native" -import unfetch from "unfetch" - -import AsyncStorage from "@react-native-community/async-storage" import * as Sentry from "@sentry/react-native" - -import introspectionQueryResultData from "../fragmentTypes.json" import { resolvers, typeDefs } from "./resolvers" +import { isEmpty } from "lodash" export const setupApolloClient = async () => { - const fragmentMatcher = new IntrospectionFragmentMatcher({ - introspectionQueryResultData, + const cache = new InMemoryCache({ + typePolicies: { + Query: { + fields: { + fitPicsCount: { + read(newCount) { + return newCount + }, + }, + fitPics: { + merge(existing = [], incoming = [], { args: { skipFitPics = 0 } }) { + const merged = existing ? existing.slice(0) : [] + for (let i = 0; i < incoming.length; ++i) { + merged[skipFitPics + i] = incoming[i] + } + existing = merged + return existing + }, + }, + productsConnection: { + merge(existing = {}, incoming = {}, { args: { skip = 0 } }) { + let mergedEdges = !isEmpty(existing) ? existing?.edges?.slice(0) : [] + if (incoming?.edges?.length > 0) { + for (let i = 0; i < incoming?.edges?.length; ++i) { + mergedEdges[skip + i] = incoming?.edges?.[i] + } + } + return { ...existing, ...incoming, edges: mergedEdges } + }, + }, + }, + }, + }, }) - const cache = new InMemoryCache({ fragmentMatcher }) - - const link = createUploadLink({ - uri: config.get(Env.MONSOON_ENDPOINT) || "http://localhost:4000/", - // FIXME: unfetch here is being used for this fix https://github.com/jhen0409/react-native-debugger/issues/432 - fetch: unfetch, - }) + const httpLink = new HttpLink({ + uri: process.env.MONSOON_ENDPOINT || "http://localhost:4000/", // Server URL (must be absolute) + }) as any const authLink = setContext(async (_, { headers: oldHeaders }) => { const headers = { ...oldHeaders, application: "harvest", platform: Platform.OS } @@ -49,6 +67,7 @@ export const setupApolloClient = async () => { // return the headers to the context so createUploadLink can read them }) + // @ts-ignore const errorLink = onError(({ graphQLErrors, networkError, operation, forward, response }) => { if (graphQLErrors) { console.log("graphQLErrors", graphQLErrors) @@ -78,7 +97,7 @@ export const setupApolloClient = async () => { if (networkError) { console.log("networkError", JSON.stringify(networkError)) // User access token has expired - if (networkError.statusCode === 401) { + if ((networkError as any).statusCode === 401) { // We assume we have both tokens needed to run the async request // Let's refresh token through async request return new Observable((observer) => { @@ -112,25 +131,12 @@ export const setupApolloClient = async () => { } }) - const accessToken = await getAccessTokenFromSession() - cache.writeData({ - data: { - isLoggedIn: !!accessToken, - localBagItems: [], - }, - }) - - await persistCache({ - cache, - storage: AsyncStorage, - }) - return new ApolloClient({ // Provide required constructor fields - cache, - link: ApolloLink.from([authLink, errorLink, link]), + link: ApolloLink.from([authLink, errorLink, httpLink]) as any, typeDefs, resolvers, + cache, // Provide some optional constructor fields name: "react-web-client", version: "1.3", diff --git a/src/Apollo/resolvers.ts b/src/Apollo/resolvers.ts index 2c5aa30c2..ef1cbcfd6 100644 --- a/src/Apollo/resolvers.ts +++ b/src/Apollo/resolvers.ts @@ -8,7 +8,6 @@ export const typeDefs = gql` variantID: ID! } extend type Query { - isLoggedIn: Boolean! localBagItems: [LocalProduct!]! isInBag(productID: ID!): Boolean! } @@ -28,7 +27,7 @@ interface AppResolvers extends Resolvers { // We will update this with our app's resolvers later } -export const resolvers = { +export const resolvers: any = { localBagItems: (_, __, { cache }) => { const queryResult = cache.readQuery({ query: GET_LOCAL_BAG, diff --git a/src/App.tsx b/src/App.tsx index 46879812a..018f47ca6 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -5,11 +5,9 @@ import DeviceInfo from "react-native-device-info" import { SafeAreaProvider } from "react-native-safe-area-context" import { enableScreens } from "react-native-screens" import stripe from "tipsi-stripe" - -import { ApolloProvider } from "@apollo/react-hooks" +import { ApolloProvider, gql } from "@apollo/client" import AsyncStorage from "@react-native-community/async-storage" import * as Sentry from "@sentry/react-native" - import { setupApolloClient } from "./Apollo" import { NetworkProvider } from "./NetworkProvider" import { config, Env } from "./utils/config" @@ -22,6 +20,21 @@ export const App = () => { async function loadClient() { await config.start() const client = await setupApolloClient() + + client.writeQuery({ + query: gql` + query InitializeLocalCache { + localBagItems { + productID + variantID + } + } + `, + data: { + localBagItems: [], + }, + }) + setApolloClient(client) if (!__DEV__) { diff --git a/src/Components/Pause/PauseButtons.tsx b/src/Components/Pause/PauseButtons.tsx index 4e88963fc..a77e5b3ac 100644 --- a/src/Components/Pause/PauseButtons.tsx +++ b/src/Components/Pause/PauseButtons.tsx @@ -3,7 +3,7 @@ import React, { useState } from "react" import { Linking } from "react-native" import { ButtonVariant } from "../Button" import { usePopUpContext } from "App/Navigation/ErrorPopUp/PopUpContext" -import { useMutation } from "react-apollo" +import { useMutation } from "@apollo/client" import gql from "graphql-tag" import { DateTime } from "luxon" import { GET_MEMBERSHIP_INFO } from "App/Scenes/Account/MembershipInfo/MembershipInfo" diff --git a/src/Navigation/AuthProvider.tsx b/src/Navigation/AuthProvider.tsx index 24bb3cafd..b54d112f3 100644 --- a/src/Navigation/AuthProvider.tsx +++ b/src/Navigation/AuthProvider.tsx @@ -13,6 +13,7 @@ import analytics from "@segment/analytics-react-native" import AuthContext from "./AuthContext" import { ModalAndMainScreens } from "./Stacks" +import { gql } from "@apollo/client" // For docs on auth see: https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html @@ -104,13 +105,20 @@ export const AuthProvider = React.forwardRef await AsyncStorage.removeItem("beamsData") RNPusherPushNotifications.clearAllState() apolloClient.resetStore() - analytics.reset() - apolloClient.writeData({ + apolloClient.writeQuery({ + query: gql` + query ResetLocalCache { + localBagItems { + productID + variantID + } + } + `, data: { - isLoggedIn: false, localBagItems: [], }, }) + analytics.reset() dispatch({ type: "SIGN_OUT" }) }, resetStore: () => { diff --git a/src/Navigation/ErrorPopUp/PopUpContext.ts b/src/Navigation/ErrorPopUp/PopUpContext.ts index 38f5de8ce..274b5e784 100644 --- a/src/Navigation/ErrorPopUp/PopUpContext.ts +++ b/src/Navigation/ErrorPopUp/PopUpContext.ts @@ -1,5 +1,5 @@ +import { PopUpData } from "@seasons/eclipse" import React, { useContext } from "react" -import { PopUpData } from "./PopUpProvider" export const usePopUpContext = () => useContext(PopUpContext) diff --git a/src/Navigation/ErrorPopUp/PopUpProvider.tsx b/src/Navigation/ErrorPopUp/PopUpProvider.tsx index bea60e431..7071052f0 100644 --- a/src/Navigation/ErrorPopUp/PopUpProvider.tsx +++ b/src/Navigation/ErrorPopUp/PopUpProvider.tsx @@ -1,17 +1,7 @@ +import { PopUpData } from "@seasons/eclipse" import React, { useReducer } from "react" import PopUpContext from "./PopUpContext" -export interface PopUpData { - title?: string - icon?: JSX.Element - note?: string - buttonText?: string - onClose: any - theme?: "light" | "dark" - secondaryButtonText?: string - secondaryButtonOnPress?: () => void -} - enum PopUpAction { Show = "SHOW", Hide = "HIDE", diff --git a/src/Navigation/Stacks.tsx b/src/Navigation/Stacks.tsx index 164de1f1e..3878d36f2 100644 --- a/src/Navigation/Stacks.tsx +++ b/src/Navigation/Stacks.tsx @@ -20,6 +20,7 @@ import { SurpriseMe } from "App/Scenes/Bag/SurpriseMe" import { Brand } from "App/Scenes/Brand" import { Brands } from "App/Scenes/Brands" import { Browse, Filters } from "App/Scenes/Browse" +import { CollectionScene } from "App/Scenes/Collection" import { CreateAccount } from "App/Scenes/CreateAccount" import { ApplyPromoCode } from "App/Scenes/CreateAccount/Admitted/ApplyPromoCode/ApplyPromoCode" import { DebugMenu } from "App/Scenes/DebugMenu" @@ -149,6 +150,11 @@ const HomeStackScreen = () => { + diff --git a/src/Navigation/schema.ts b/src/Navigation/schema.ts index 129503c9d..e505e207f 100644 --- a/src/Navigation/schema.ts +++ b/src/Navigation/schema.ts @@ -27,6 +27,7 @@ export enum PageNames { Brand = "Brand", Brands = "Brands", FitPicDetail = "FitPicDetail", + Collection = "Collection", FitPicConfirmation = "FitPicConfirmation", ReferralView = "ReferralView", diff --git a/src/Notifications/NotificationsProvider.tsx b/src/Notifications/NotificationsProvider.tsx index 28db12f83..6d0e494f2 100644 --- a/src/Notifications/NotificationsProvider.tsx +++ b/src/Notifications/NotificationsProvider.tsx @@ -6,7 +6,7 @@ import { Platform } from "react-native" import gql from "graphql-tag" import NotificationsContext from "./NotificationsContext" import RNPusherPushNotifications from "react-native-pusher-push-notifications" -import { useQuery } from "react-apollo" +import { useQuery } from "@apollo/client" import { useNavigation } from "@react-navigation/native" import { getUserSession } from "App/utils/auth" @@ -16,6 +16,7 @@ export const seasonsNotifInterest = "seasons-general-notifications" export const GET_BEAMS_DATA = gql` query BeamsData { me { + id user { email beamsToken diff --git a/src/Scenes/Account/Account.tsx b/src/Scenes/Account/Account.tsx index fbd8887f8..3f7caa074 100644 --- a/src/Scenes/Account/Account.tsx +++ b/src/Scenes/Account/Account.tsx @@ -19,7 +19,7 @@ import { import gql from "graphql-tag" import { DateTime } from "luxon" import { default as React, useEffect } from "react" -import { useQuery } from "react-apollo" +import { useQuery } from "@apollo/client" import { Linking, Platform, ScrollView, StatusBar } from "react-native" import * as Animatable from "react-native-animatable" import Share from "react-native-share" @@ -32,6 +32,7 @@ import { WaitlistedCTA, AuthorizedCTA } from "@seasons/eclipse" export const GET_USER = gql` query GetUser { me { + id customer { id status @@ -84,7 +85,7 @@ export const GET_USER = gql` export const Account = screenTrack()(({ navigation }) => { const { authState, signOut } = useAuthContext() - const { data, refetch } = useQuery(GET_USER) + const { previousData, data = previousData, refetch } = useQuery(GET_USER) const tracking = useTracking() diff --git a/src/Scenes/Account/Components/NotificationToggle.tsx b/src/Scenes/Account/Components/NotificationToggle.tsx index f69c56e59..93b9a466b 100644 --- a/src/Scenes/Account/Components/NotificationToggle.tsx +++ b/src/Scenes/Account/Components/NotificationToggle.tsx @@ -6,7 +6,7 @@ import { Text, Linking, AppState } from "react-native" import { checkNotifications } from "react-native-permissions" import { useNotificationsContext } from "App/Notifications/NotificationsContext" import { useTracking, Schema } from "App/utils/track" -import { useMutation } from "react-apollo" +import { useMutation } from "@apollo/client" import { usePopUpContext } from "App/Navigation/ErrorPopUp/PopUpContext" import * as Sentry from "@sentry/react-native" import { GetUser_me_customer_user_pushNotification } from "App/generated/getUser" diff --git a/src/Scenes/Account/EditShippingAddress/EditShippingAddress.tsx b/src/Scenes/Account/EditShippingAddress/EditShippingAddress.tsx index 39ef0583e..956ad6901 100644 --- a/src/Scenes/Account/EditShippingAddress/EditShippingAddress.tsx +++ b/src/Scenes/Account/EditShippingAddress/EditShippingAddress.tsx @@ -6,7 +6,7 @@ import { FlatList, Keyboard, KeyboardAvoidingView } from "react-native" import { useSafeAreaInsets } from "react-native-safe-area-context" import { StatePickerPopUp } from "./StatePickerPopup" import gql from "graphql-tag" -import { useMutation } from "react-apollo" +import { useMutation } from "@apollo/client" import { usePopUpContext } from "App/Navigation/ErrorPopUp/PopUpContext" import { FadeBottom2 } from "Assets/svgs/FadeBottom2" diff --git a/src/Scenes/Account/EditStylePreferences/EditStylePreferences.tsx b/src/Scenes/Account/EditStylePreferences/EditStylePreferences.tsx index f1d3efb0e..a67ea820e 100644 --- a/src/Scenes/Account/EditStylePreferences/EditStylePreferences.tsx +++ b/src/Scenes/Account/EditStylePreferences/EditStylePreferences.tsx @@ -8,7 +8,7 @@ import { useSafeAreaInsets } from "react-native-safe-area-context" import { areIndicesEqual, Index, Item, Section, sections } from "./Sections" import gql from "graphql-tag" -import { useMutation } from "react-apollo" +import { useMutation } from "@apollo/client" import { usePopUpContext } from "App/Navigation/ErrorPopUp/PopUpContext" const UPDATE_STYLE_PREFERENCES = gql` diff --git a/src/Scenes/Account/MembershipInfo/MembershipInfo.tsx b/src/Scenes/Account/MembershipInfo/MembershipInfo.tsx index 32904d27c..295287937 100644 --- a/src/Scenes/Account/MembershipInfo/MembershipInfo.tsx +++ b/src/Scenes/Account/MembershipInfo/MembershipInfo.tsx @@ -1,6 +1,6 @@ import gql from "graphql-tag" import React from "react" -import { useQuery } from "react-apollo" +import { useQuery } from "@apollo/client" import { ScrollView } from "react-native" import { useSafeAreaInsets } from "react-native-safe-area-context" import { Box, Button, Container, FixedBackArrow, Sans, Separator, Spacer } from "App/Components" @@ -14,6 +14,7 @@ import { Schema } from "App/Navigation" export const GET_MEMBERSHIP_INFO = gql` query GetMembershipInfo { me { + id customer { id status @@ -49,7 +50,7 @@ export const GET_MEMBERSHIP_INFO = gql` export const MembershipInfo = screenTrack()(({ navigation }) => { const insets = useSafeAreaInsets() - const { data } = useQuery(GET_MEMBERSHIP_INFO) + const { previousData, data = previousData } = useQuery(GET_MEMBERSHIP_INFO) const customer = data?.me?.customer const firstName = data?.me?.user?.firstName const lastName = data?.me?.user?.lastName diff --git a/src/Scenes/Account/MembershipInfo/UpdatePaymentPlanModal.tsx b/src/Scenes/Account/MembershipInfo/UpdatePaymentPlanModal.tsx index a54311694..1a98b9337 100644 --- a/src/Scenes/Account/MembershipInfo/UpdatePaymentPlanModal.tsx +++ b/src/Scenes/Account/MembershipInfo/UpdatePaymentPlanModal.tsx @@ -3,12 +3,12 @@ import { Loader } from "App/Components/Loader" import { ChoosePlanPane } from "App/Scenes/CreateAccount/Admitted" import { GET_PLANS } from "App/Scenes/CreateAccount/CreateAccount" import React, { useEffect, useState } from "react" -import { useQuery } from "react-apollo" +import { useQuery } from "@apollo/client" import { screenTrack } from "App/utils/track" export const UpdatePaymentPlanModal = screenTrack()(({ navigation }) => { const [selectedPlan, setSelectedPlan] = useState(null) - const { data } = useQuery(GET_PLANS, { + const { previousData, data = previousData } = useQuery(GET_PLANS, { variables: { where: { status: "active" }, }, diff --git a/src/Scenes/Account/PaymentAndShipping/EditCreditCard.tsx b/src/Scenes/Account/PaymentAndShipping/EditCreditCard.tsx index 8b33e1cd1..c4855df21 100644 --- a/src/Scenes/Account/PaymentAndShipping/EditCreditCard.tsx +++ b/src/Scenes/Account/PaymentAndShipping/EditCreditCard.tsx @@ -7,7 +7,7 @@ import { color } from "App/utils/color" import { CheckCircled } from "Assets/svgs/CheckCircled" import { String } from "aws-sdk/clients/augmentedairuntime" import React, { useEffect, useState } from "react" -import { useMutation } from "react-apollo" +import { useMutation } from "@apollo/client" import { Dimensions, KeyboardAvoidingView, ScrollView } from "react-native" import { useSafeAreaInsets } from "react-native-safe-area-context" import styled from "styled-components" diff --git a/src/Scenes/Account/PaymentAndShipping/EditPaymentAndShipping.tsx b/src/Scenes/Account/PaymentAndShipping/EditPaymentAndShipping.tsx index 220f7f8b5..4385a3387 100644 --- a/src/Scenes/Account/PaymentAndShipping/EditPaymentAndShipping.tsx +++ b/src/Scenes/Account/PaymentAndShipping/EditPaymentAndShipping.tsx @@ -1,11 +1,10 @@ import gql from "graphql-tag" import React, { useState } from "react" -import { useMutation, useQuery } from "react-apollo" +import { useMutation, useQuery } from "@apollo/client" import { Dimensions, Keyboard, KeyboardAvoidingView } from "react-native" import { KeyboardAwareFlatList } from "react-native-keyboard-aware-scroll-view" import { useSafeAreaInsets } from "react-native-safe-area-context" import { Box, Button, Container, Flex, FixedBackArrow, Sans, Spacer, TextInput } from "App/Components" -import styled from "styled-components/native" import { GET_PAYMENT_DATA } from "./PaymentAndShipping" import { GetUserPaymentData_me_customer_billingInfo, @@ -21,6 +20,7 @@ import { Schema as NavigationSchema } from "App/Navigation" export const GET_CURRENT_PLAN = gql` query GetCurrentPlan { me { + id customer { id user { @@ -59,7 +59,7 @@ export const EditPaymentAndShipping: React.FC<{ route: any }> = screenTrack()(({ navigation, route }) => { const { showPopUp, hidePopUp } = usePopUpContext() - const { data } = useQuery(GET_CURRENT_PLAN) + const { previousData, data = previousData } = useQuery(GET_CURRENT_PLAN) const billingAddress: GetUserPaymentData_me_customer_billingInfo = route?.params?.billingInfo const currentShippingAddress: GetUserPaymentData_me_customer_detail_shippingAddress = route?.params?.shippingAddress const currentPhoneNumber = route?.params?.phoneNumber diff --git a/src/Scenes/Account/PaymentAndShipping/EditPaymentMethod.tsx b/src/Scenes/Account/PaymentAndShipping/EditPaymentMethod.tsx index ef95218e1..19abf0e61 100644 --- a/src/Scenes/Account/PaymentAndShipping/EditPaymentMethod.tsx +++ b/src/Scenes/Account/PaymentAndShipping/EditPaymentMethod.tsx @@ -1,15 +1,4 @@ -import { - Box, - Button, - CloseButton, - Container, - FixedBackArrow, - Flex, - Sans, - Separator, - Spacer, - TextInput, -} from "App/Components" +import { Box, Button, Container, FixedBackArrow, Flex, Sans, Separator, Spacer } from "App/Components" import { Schema as TrackSchema, useTracking, screenTrack } from "App/utils/track" import { usePopUpContext } from "App/Navigation/ErrorPopUp/PopUpContext" import { PAYMENT_UPDATE } from "App/Scenes/Account/PaymentAndShipping/EditPaymentAndShipping" @@ -18,10 +7,10 @@ import { color } from "App/utils/color" import { CheckCircled } from "Assets/svgs/CheckCircled" import { String } from "aws-sdk/clients/augmentedairuntime" import React, { useState } from "react" -import { useMutation } from "react-apollo" -import { Dimensions, Keyboard, KeyboardAvoidingView } from "react-native" +import { useMutation } from "@apollo/client" +import { Dimensions, Keyboard } from "react-native" import { useSafeAreaInsets } from "react-native-safe-area-context" -import stripe, { PaymentCardTextField } from "tipsi-stripe" +import stripe from "tipsi-stripe" import * as Sentry from "@sentry/react-native" import { PaymentMethods } from "./PaymentMethods" import { Schema as NavigationSchema } from "App/Navigation" diff --git a/src/Scenes/Account/PaymentAndShipping/PaymentAndShipping.tsx b/src/Scenes/Account/PaymentAndShipping/PaymentAndShipping.tsx index 67e4ce6c5..6c21ab776 100644 --- a/src/Scenes/Account/PaymentAndShipping/PaymentAndShipping.tsx +++ b/src/Scenes/Account/PaymentAndShipping/PaymentAndShipping.tsx @@ -2,7 +2,7 @@ import { Box, Container, FixedBackArrow, FixedButton, Sans, Spacer, Separator } import { Loader } from "App/Components/Loader" import gql from "graphql-tag" import React, { useEffect } from "react" -import { useQuery } from "react-apollo" +import { useQuery } from "@apollo/client" import { FlatList } from "react-native" import { screenTrack } from "App/utils/track" import { color } from "App/utils" @@ -11,6 +11,7 @@ import { Schema as NavigationSchema } from "App/Navigation" export const GET_PAYMENT_DATA = gql` query GetUserPaymentData { me { + id customer { id detail { @@ -112,7 +113,7 @@ const AccountSection: React.FC<{ title: string; value: string | [string] }> = ({ } export const PaymentAndShipping = screenTrack()(({ navigation }) => { - const { error, data, startPolling, stopPolling } = useQuery(GET_PAYMENT_DATA) + const { error, previousData, data = previousData, startPolling, stopPolling } = useQuery(GET_PAYMENT_DATA) useEffect(() => { // The Chargebee address update takes multiple seconds to update // therefore we must check and refetch data if the user leaves this view diff --git a/src/Scenes/Account/PersonalPreferences/PersonalPreferences.tsx b/src/Scenes/Account/PersonalPreferences/PersonalPreferences.tsx index 7565fbc40..b2893b818 100644 --- a/src/Scenes/Account/PersonalPreferences/PersonalPreferences.tsx +++ b/src/Scenes/Account/PersonalPreferences/PersonalPreferences.tsx @@ -2,7 +2,7 @@ import { Box, Container, FixedBackArrow, Sans, Flex } from "App/Components" import { Loader } from "App/Components/Loader" import gql from "graphql-tag" import React, { useEffect, useState } from "react" -import { useQuery } from "react-apollo" +import { useQuery } from "@apollo/client" import { screenTrack } from "App/utils/track" import { TabBar } from "App/Components/TabBar" import { PersonalTab } from "./PersonalTab" @@ -13,6 +13,7 @@ import { StatusBar } from "react-native" const GET_PREFERENCES = gql` query GetUserPreferences { me { + id customer { id user { diff --git a/src/Scenes/Bag/Bag.tsx b/src/Scenes/Bag/Bag.tsx index 86e012d93..e7aea8d25 100644 --- a/src/Scenes/Bag/Bag.tsx +++ b/src/Scenes/Bag/Bag.tsx @@ -13,7 +13,7 @@ import { Container } from "Components/Container" import { TabBar } from "Components/TabBar" import { assign, fill } from "lodash" import React, { useEffect, useState } from "react" -import { useMutation, useQuery } from "react-apollo" +import { useMutation, useQuery } from "@apollo/client" import { FlatList, RefreshControl, StatusBar, View } from "react-native" import { State as CreateAccountState, UserState as CreateAccountUserState } from "../CreateAccount/CreateAccount" import { CHECK_ITEMS, GET_BAG, GET_LOCAL_BAG, REMOVE_FROM_BAG, REMOVE_FROM_BAG_AND_SAVE_ITEM } from "./BagQueries" @@ -50,7 +50,7 @@ export const Bag = screenTrack()((props) => { }, []) ) - const { data, refetch } = useQuery(GET_BAG) + const { previousData, data = previousData, refetch } = useQuery(GET_BAG) const { data: localItems } = useQuery(GET_LOCAL_BAG) const me = data?.me @@ -322,10 +322,7 @@ export const Bag = screenTrack()((props) => { return ( - + { - const { data, loading, refetch } = useQuery(ACTIVE_RESERVATION) + const { previousData, data = previousData, loading, refetch } = useQuery(ACTIVE_RESERVATION) useEffect(() => { refetch() diff --git a/src/Scenes/Bag/SurpriseMe.tsx b/src/Scenes/Bag/SurpriseMe.tsx index ce7b38bf3..b95f1f03a 100644 --- a/src/Scenes/Bag/SurpriseMe.tsx +++ b/src/Scenes/Bag/SurpriseMe.tsx @@ -1,8 +1,8 @@ -import { gql } from "apollo-boost" +import gql from "graphql-tag" import { Button, CloseButton, Container, FadeInImage, Flex, Sans, Separator, Spacer } from "App/Components" import { Box } from "App/Components/Box" import React, { useEffect, useState } from "react" -import { useMutation, useQuery } from "react-apollo" +import { useMutation, useQuery } from "@apollo/client" import { shuffle, clone } from "lodash" import { PRODUCT_ASPECT_RATIO } from "App/helpers/constants" import { Dimensions, ScrollView } from "react-native" @@ -39,6 +39,7 @@ export const GET_SURPRISE_PRODUCT_VARIANTS = gql` } } me { + id bag { id productVariant { @@ -181,7 +182,7 @@ const Content = ({ data, variant, product, onRestart, seenAllAvailableProducts } export const SurpriseMe = screenTrack()(() => { const [variants, setVariants] = useState(null) - const { data } = useQuery(GET_SURPRISE_PRODUCT_VARIANTS) + const { previousData, data = previousData } = useQuery(GET_SURPRISE_PRODUCT_VARIANTS) const insets = useSafeAreaInsets() const [isAddingToBag, setIsAddingToBag] = useState(false) const [loadingNext, setLoadingNext] = useState(false) diff --git a/src/Scenes/Brand/Brand.tsx b/src/Scenes/Brand/Brand.tsx index e679853be..9e04f45d8 100644 --- a/src/Scenes/Brand/Brand.tsx +++ b/src/Scenes/Brand/Brand.tsx @@ -1,4 +1,4 @@ -import { useQuery } from "@apollo/react-hooks" +import { useQuery } from "@apollo/client" import { Container, FixedBackArrow } from "App/Components" import { GetBrand } from "App/generated/GetBrand" import { Schema, screenTrack } from "App/utils/track" diff --git a/src/Scenes/Brand/BrandPhotos.tsx b/src/Scenes/Brand/BrandPhotos.tsx index d93ea5d52..ecda7213c 100644 --- a/src/Scenes/Brand/BrandPhotos.tsx +++ b/src/Scenes/Brand/BrandPhotos.tsx @@ -35,7 +35,7 @@ export const BrandPhotos = ({ images, currentImage, setCurrentImage }) => { } } - if (images.length === 0) { + if (images?.length === 0) { return } diff --git a/src/Scenes/Brands/Brands.tsx b/src/Scenes/Brands/Brands.tsx index 1a3a75098..d17875ae7 100644 --- a/src/Scenes/Brands/Brands.tsx +++ b/src/Scenes/Brands/Brands.tsx @@ -1,7 +1,7 @@ import React, { useRef, useState, useEffect } from "react" import gql from "graphql-tag" import { AlphabetScrubber } from "App/Components/AlphabetScrubber" -import { useQuery } from "@apollo/react-hooks" +import { useQuery } from "@apollo/client" import { Container, Box, Spacer, Sans, FixedBackArrow, Flex, Separator } from "App/Components" import { FlatList, TouchableOpacity } from "react-native" import { GetBrands } from "App/generated/GetBrands" diff --git a/src/Scenes/Browse/Browse.tsx b/src/Scenes/Browse/Browse.tsx index fb3b8528c..dcfadb651 100644 --- a/src/Scenes/Browse/Browse.tsx +++ b/src/Scenes/Browse/Browse.tsx @@ -1,4 +1,4 @@ -import { useQuery } from "@apollo/react-hooks" +import { useQuery } from "@apollo/client" import { useFocusEffect } from "@react-navigation/native" import { Box, Flex, ProductGridItem } from "App/Components" import { Spinner } from "App/Components/Spinner" diff --git a/src/Scenes/Collection/CollectionScene.tsx b/src/Scenes/Collection/CollectionScene.tsx new file mode 100644 index 000000000..d199c1c32 --- /dev/null +++ b/src/Scenes/Collection/CollectionScene.tsx @@ -0,0 +1,18 @@ +import React from "react" +import { Schema, screenTrack } from "App/utils/track" +import { Collection } from "@seasons/eclipse" +import { useAuthContext } from "App/Navigation/AuthContext" +import { usePopUpContext } from "App/Navigation/ErrorPopUp/PopUpContext" + +export const CollectionScene = screenTrack({ + entityType: Schema.EntityTypes.Collection, +})((props: any) => { + const { route } = props + const { authState } = useAuthContext() + const { showPopUp, hidePopUp } = usePopUpContext() + + const collectionSlug = route?.params?.collectionSlug + return ( + + ) +}) diff --git a/src/Scenes/Collection/index.tsx b/src/Scenes/Collection/index.tsx new file mode 100644 index 000000000..ba643543e --- /dev/null +++ b/src/Scenes/Collection/index.tsx @@ -0,0 +1 @@ +export { CollectionScene } from "./CollectionScene" diff --git a/src/Scenes/CreateAccount/Admitted/ApplyPromoCode/ApplyPromoCodePane.tsx b/src/Scenes/CreateAccount/Admitted/ApplyPromoCode/ApplyPromoCodePane.tsx index 9bd6ea738..fb452baa7 100644 --- a/src/Scenes/CreateAccount/Admitted/ApplyPromoCode/ApplyPromoCodePane.tsx +++ b/src/Scenes/CreateAccount/Admitted/ApplyPromoCode/ApplyPromoCodePane.tsx @@ -1,11 +1,11 @@ import * as Sentry from "@sentry/react-native" -import { gql } from "apollo-boost" +import gql from "graphql-tag" import { Box, Button, CloseButton, Container, Sans, Spacer, TextInput } from "App/Components" import { TextInputRef } from "App/Components/TextInput" import { usePopUpContext } from "App/Navigation/ErrorPopUp/PopUpContext" import { Schema as TrackSchema, useTracking } from "App/utils/track" import React, { useEffect, useRef, useState } from "react" -import { useMutation } from "react-apollo" +import { useMutation } from "@apollo/client" import { Keyboard, KeyboardAvoidingView } from "react-native" import { useSafeAreaInsets } from "react-native-safe-area-context" diff --git a/src/Scenes/CreateAccount/Admitted/ChoosePlanPane/ChoosePlanPane.tsx b/src/Scenes/CreateAccount/Admitted/ChoosePlanPane/ChoosePlanPane.tsx index 8afe45367..525828f98 100644 --- a/src/Scenes/CreateAccount/Admitted/ChoosePlanPane/ChoosePlanPane.tsx +++ b/src/Scenes/CreateAccount/Admitted/ChoosePlanPane/ChoosePlanPane.tsx @@ -11,7 +11,7 @@ import { TabBar } from "Components/TabBar" import gql from "graphql-tag" import { uniq } from "lodash" import React, { useEffect, useState } from "react" -import { useMutation } from "react-apollo" +import { useMutation } from "@apollo/client" import { useSafeAreaInsets } from "react-native-safe-area-context" import { Dimensions, Linking, ScrollView, TouchableOpacity } from "react-native" import styled from "styled-components" diff --git a/src/Scenes/CreateAccount/Admitted/CreditCardFormPane/CreditCardFormPane.tsx b/src/Scenes/CreateAccount/Admitted/CreditCardFormPane/CreditCardFormPane.tsx index fccca3df9..8946825bc 100644 --- a/src/Scenes/CreateAccount/Admitted/CreditCardFormPane/CreditCardFormPane.tsx +++ b/src/Scenes/CreateAccount/Admitted/CreditCardFormPane/CreditCardFormPane.tsx @@ -24,7 +24,7 @@ import { useSafeAreaInsets } from "react-native-safe-area-context" import styled from "styled-components" import stripe, { PaymentCardTextField } from "tipsi-stripe" -import { useMutation } from "@apollo/react-hooks" +import { useMutation } from "@apollo/client" import * as Sentry from "@sentry/react-native" import { Coupon, State } from "../../CreateAccount" diff --git a/src/Scenes/CreateAccount/CreateAccount.tsx b/src/Scenes/CreateAccount/CreateAccount.tsx index a048f9c59..43d1733a2 100644 --- a/src/Scenes/CreateAccount/CreateAccount.tsx +++ b/src/Scenes/CreateAccount/CreateAccount.tsx @@ -4,7 +4,7 @@ import { screenTrack } from "App/utils/track" import gql from "graphql-tag" import { get, pick } from "lodash" import React, { MutableRefObject, useEffect, useRef, useState } from "react" -import { useQuery } from "react-apollo" +import { useQuery } from "@apollo/client" import { Dimensions, FlatList, Modal } from "react-native" import { ChoosePlanPane, WelcomePane } from "./Admitted" import { CreateAccountPane, GetMeasurementsPane, SendCodePane, TriagePane, VerifyCodePane } from "./Undetermined" @@ -66,6 +66,7 @@ export const GET_PLANS = gql` itemCount } me { + id customer { id status @@ -130,7 +131,7 @@ const statesFor = (userState: UserState): State[] => { } export const CreateAccount: React.FC = screenTrack()(({ navigation, route }) => { - const { data } = useQuery(GET_PLANS, { + const { previousData, data = previousData } = useQuery(GET_PLANS, { variables: { where: { status: "active" }, }, diff --git a/src/Scenes/CreateAccount/Undetermined/CreateAccountPane/CreateAccountPane.tsx b/src/Scenes/CreateAccount/Undetermined/CreateAccountPane/CreateAccountPane.tsx index 3b82d42f9..fe558bef8 100644 --- a/src/Scenes/CreateAccount/Undetermined/CreateAccountPane/CreateAccountPane.tsx +++ b/src/Scenes/CreateAccount/Undetermined/CreateAccountPane/CreateAccountPane.tsx @@ -9,7 +9,7 @@ import { FadeBottom2 } from "Assets/svgs/FadeBottom2" import { Text } from "Components/Typography" import gql from "graphql-tag" import React, { MutableRefObject, useEffect, useRef, useState } from "react" -import { useLazyQuery, useMutation, useQuery } from "react-apollo" +import { useLazyQuery, useMutation, useQuery } from "@apollo/client" import { Keyboard, KeyboardAvoidingView, ScrollView, TouchableWithoutFeedback } from "react-native" import { useSafeAreaInsets } from "react-native-safe-area-context" diff --git a/src/Scenes/CreateAccount/Undetermined/GetMeasurementsPane/GetMeasurementsPane.tsx b/src/Scenes/CreateAccount/Undetermined/GetMeasurementsPane/GetMeasurementsPane.tsx index db9d5fd31..53c84892f 100644 --- a/src/Scenes/CreateAccount/Undetermined/GetMeasurementsPane/GetMeasurementsPane.tsx +++ b/src/Scenes/CreateAccount/Undetermined/GetMeasurementsPane/GetMeasurementsPane.tsx @@ -8,7 +8,7 @@ import { ScrollView } from "react-native" import { useSafeAreaInsets } from "react-native-safe-area-context" import gql from "graphql-tag" -import { useMutation } from "react-apollo" +import { useMutation } from "@apollo/client" import { usePopUpContext } from "App/Navigation/ErrorPopUp/PopUpContext" import { useTracking, Schema } from "App/utils/track" import { MultiSelectionTable } from "App/Components/MultiSelectionTable" diff --git a/src/Scenes/CreateAccount/Undetermined/SendCodePane/SendCodePane.tsx b/src/Scenes/CreateAccount/Undetermined/SendCodePane/SendCodePane.tsx index ee86316c6..c6a9bbbce 100644 --- a/src/Scenes/CreateAccount/Undetermined/SendCodePane/SendCodePane.tsx +++ b/src/Scenes/CreateAccount/Undetermined/SendCodePane/SendCodePane.tsx @@ -4,7 +4,7 @@ import { KeyboardAvoidingView, Keyboard } from "react-native" import { useSafeAreaInsets } from "react-native-safe-area-context" import gql from "graphql-tag" -import { useMutation } from "react-apollo" +import { useMutation } from "@apollo/client" import { usePopUpContext } from "App/Navigation/ErrorPopUp/PopUpContext" import { TextInputRef } from "App/Components/TextInput" import { useTracking, Schema } from "App/utils/track" diff --git a/src/Scenes/CreateAccount/Undetermined/TriagePane/TriagePane.tsx b/src/Scenes/CreateAccount/Undetermined/TriagePane/TriagePane.tsx index 349e6ad4e..3459a7799 100644 --- a/src/Scenes/CreateAccount/Undetermined/TriagePane/TriagePane.tsx +++ b/src/Scenes/CreateAccount/Undetermined/TriagePane/TriagePane.tsx @@ -2,7 +2,7 @@ import { Container } from "App/Components" import { usePopUpContext } from "App/Navigation/ErrorPopUp/PopUpContext" import gql from "graphql-tag" import React, { useEffect, useState } from "react" -import { useMutation } from "react-apollo" +import { useMutation } from "@apollo/client" import * as Sentry from "@sentry/react-native" import { TriageProgressScreen } from "./TriageProgressScreen" import { GET_PLANS } from "../../CreateAccount" diff --git a/src/Scenes/CreateAccount/Undetermined/VerifyCodePane/VerifyCodePane.tsx b/src/Scenes/CreateAccount/Undetermined/VerifyCodePane/VerifyCodePane.tsx index a90e858e8..1c50a2082 100644 --- a/src/Scenes/CreateAccount/Undetermined/VerifyCodePane/VerifyCodePane.tsx +++ b/src/Scenes/CreateAccount/Undetermined/VerifyCodePane/VerifyCodePane.tsx @@ -7,7 +7,7 @@ import { useSafeAreaInsets } from "react-native-safe-area-context" import { animated, useSpring } from "react-spring" import gql from "graphql-tag" -import { useMutation } from "react-apollo" +import { useMutation } from "@apollo/client" import { usePopUpContext } from "App/Navigation/ErrorPopUp/PopUpContext" import { START_VERIFICATION } from "../SendCodePane/" import { TextInputRef } from "App/Components/TextInput" diff --git a/src/Scenes/Faq/Faq.tsx b/src/Scenes/Faq/Faq.tsx index 94c1f30de..919ab3f72 100644 --- a/src/Scenes/Faq/Faq.tsx +++ b/src/Scenes/Faq/Faq.tsx @@ -1,7 +1,7 @@ import React from "react" import { ContactUsButton, Container, Spacer, FixedBackArrow, Flex } from "App/Components" import gql from "graphql-tag" -import { useQuery } from "react-apollo" +import { useQuery } from "@apollo/client" import { Loader } from "App/Components/Loader" import { FlatList } from "react-native" import { FaqSection } from "./Components/FaqSection" @@ -21,7 +21,7 @@ export const GET_FAQ = gql` ` export const Faq = ({ navigation }) => { - const { loading, data } = useQuery(GET_FAQ, {}) + const { loading, previousData, data = previousData } = useQuery(GET_FAQ, {}) if (loading) { return diff --git a/src/Scenes/FitPic/FitPicConfirmation.tsx b/src/Scenes/FitPic/FitPicConfirmation.tsx index 23a89ec2e..b808ea443 100644 --- a/src/Scenes/FitPic/FitPicConfirmation.tsx +++ b/src/Scenes/FitPic/FitPicConfirmation.tsx @@ -1,4 +1,4 @@ -import { gql } from "apollo-boost" +import gql from "graphql-tag" import { ReactNativeFile } from "apollo-upload-client" import { Button, Container, FixedBackArrow, Flex, Sans, Spacer, TextInput, Toggle } from "App/Components" import { TextInputRef } from "App/Components/TextInput" @@ -7,9 +7,10 @@ import { space } from "App/utils" import { Schema, screenTrack, useTracking } from "App/utils/track" import { FadeBottom2 } from "Assets/svgs/FadeBottom2" import React, { useRef, useState } from "react" -import { useMutation, useQuery } from "react-apollo" +import { useMutation, useQuery } from "@apollo/client" import { Dimensions, Image, KeyboardAvoidingView, ScrollView, View } from "react-native" import { useSafeAreaInsets } from "react-native-safe-area-context" +import { Box } from "@seasons/eclipse" const SUBMIT_FIT_PIC = gql` mutation SubmitFitPic($image: Upload!, $options: FitPicSubmissionOptionsInput) { @@ -19,6 +20,7 @@ const SUBMIT_FIT_PIC = gql` const GET_INSTAGRAM_HANDLE = gql` query GetInstagramHandle { me { + id customer { id detail { @@ -33,7 +35,7 @@ export const FitPicConfirmation = screenTrack()(({ route, navigation }) => { const tracking = useTracking() const insets = useSafeAreaInsets() - const { data, loading } = useQuery(GET_INSTAGRAM_HANDLE, { fetchPolicy: "no-cache" }) + const { previousData, data = previousData, loading } = useQuery(GET_INSTAGRAM_HANDLE, { fetchPolicy: "no-cache" }) const [instagramHandle, setInstagramHandle] = useState("") const [includeInstagramHandle, setIncludeInstagramHandle] = useState(true) @@ -113,7 +115,10 @@ export const FitPicConfirmation = screenTrack()(({ route, navigation }) => { Confirm photo - + + + + {!loading && hasPreloadedInstagramHandle && ( @@ -159,7 +164,7 @@ export const FitPicConfirmation = screenTrack()(({ route, navigation }) => { - +