[Sample] Add Product Details Screen (#36)

Author: markmur

sample/@types/index.d.ts

@@ -13,18 +13,21 @@ interface CartCost {
   totalTaxAmount: Price;
 }
 
+export interface ProductVariant {
+  id: string;
+  price: Price;
+}
+
 export interface ShopifyProduct {
   id: string;
   title: string;
+  description: string;
   images: Edges<{
     id: string;
     altText: string;
     url: string;
   }>;
-  variants: Edges<{
-    id: string;
-    price: Price;
-  }>;
+  variants: Edges<ProductVariant>;
 }
 
 export interface CartItem {

sample/ios/Podfile.lock

@@ -682,6 +682,6 @@ SPEC CHECKSUMS:
   SwiftLint: c1de071d9d08c8aba837545f6254315bc900e211
   Yoga: b76f1acfda8212aa16b7e26bcce3983230c82603
 
-PODFILE CHECKSUM: 4ffd968bdaf7e2f60158b7f23d95cb764cee0100
+PODFILE CHECKSUM: 2c889c450154705b85659f65cb37a00caf7dfcb8
 
 COCOAPODS: 1.14.3

sample/package.json

@@ -20,6 +20,7 @@
     "@react-native-community/masked-view": "^0.1.11",
     "@react-navigation/bottom-tabs": "^6.5.11",
     "@react-navigation/native": "^6.1.9",
+    "@react-navigation/native-stack": "^6.9.17",
     "graphql": "^16.8.1",
     "react-native": "0.72.6",
     "react-native-dotenv": "^3.4.9",

sample/src/App.tsx

@@ -24,6 +24,7 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SO
 import React, {PropsWithChildren, ReactNode} from 'react';
 import {NavigationContainer} from '@react-navigation/native';
 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
+import {createNativeStackNavigator} from '@react-navigation/native-stack';
 import {ApolloClient, InMemoryCache, ApolloProvider} from '@apollo/client';
 import {STOREFRONT_DOMAIN, STOREFRONT_ACCESS_TOKEN} from '@env';
 import Icon from 'react-native-vector-icons/Entypo';
@@ -41,6 +42,8 @@ import {ThemeProvider, getNavigationTheme, useTheme} from './context/Theme';
 import {Appearance, StatusBar} from 'react-native';
 import {CartProvider, useCart} from './context/Cart';
 import CartScreen from './screens/CartScreen';
+import ProductDetailsScreen from './screens/ProductDetailsScreen';
+import {ProductVariant, ShopifyProduct} from '../@types';
 
 const colorScheme = ColorScheme.web;
 
@@ -63,7 +66,16 @@ const config: Configuration = {
 
 Appearance.setColorScheme('light');
 
-const Tab = createBottomTabNavigator();
+export type RootStackParamList = {
+  Catalog: undefined;
+  CatalogScreen: undefined;
+  ProductDetails: {product: ShopifyProduct; variant?: ProductVariant};
+  Cart: {userId: string};
+  Settings: undefined;
+};
+
+const Tab = createBottomTabNavigator<RootStackParamList>();
+const Stack = createNativeStackNavigator<RootStackParamList>();
 
 const client = new ApolloClient({
   uri: `https://${STOREFRONT_DOMAIN}/api/2023-10/graphql.json`,
@@ -104,6 +116,31 @@ function AppWithContext({children}: PropsWithChildren) {
   );
 }
 
+function CatalogStack() {
+  return (
+    <Stack.Navigator
+      screenOptions={{
+        headerBackTitleVisible: true,
+      }}>
+      <Stack.Screen
+        name="CatalogScreen"
+        component={CatalogScreen}
+        options={{headerShown: true, headerTitle: 'Catalog'}}
+      />
+      <Stack.Screen
+        name="ProductDetails"
+        component={ProductDetailsScreen}
+        options={({route}) => ({
+          headerTitle: route.params.product.title,
+          headerShown: true,
+          headerBackVisible: true,
+          headerBackTitle: 'Back',
+        })}
+      />
+    </Stack.Navigator>
+  );
+}
+
 function AppWithNavigation() {
   const {colorScheme, preference} = useTheme();
   const {totalQuantity} = useCart();
@@ -113,8 +150,9 @@ function AppWithNavigation() {
       <Tab.Navigator>
         <Tab.Screen
           name="Catalog"
-          component={CatalogScreen}
+          component={CatalogStack}
           options={{
+            headerShown: false,
             tabBarIcon: createNavigationIcon('shop'),
           }}
         />

sample/src/context/Cart.tsx

@@ -165,8 +165,6 @@ export const CartProvider: React.FC<PropsWithChildren> = ({children}) => {
         },
       });
 
-      dispatch({type: 'remove', variantId});
-
       setCheckoutURL(data.cartLinesRemove.cart.checkoutUrl);
       setTotalQuantity(data.cartLinesRemove.cart.totalQuantity);
 
@@ -175,12 +173,14 @@ export const CartProvider: React.FC<PropsWithChildren> = ({children}) => {
       }
 
       if (cartId) {
-        fetchCart({
+        await fetchCart({
           variables: {
             cartId,
           },
         });
       }
+
+      dispatch({type: 'remove', variantId});
     },
     [
       cartId,

sample/src/hooks/useShopify.ts

@@ -72,6 +72,7 @@ const PRODUCTS_QUERY = gql`
         node {
           id
           title
+          description
           variants(first: 1) {
             edges {
               node {

sample/src/screens/CartScreen.tsx

@@ -335,7 +335,7 @@ function createStyles(colors: Colors) {
       paddingBottom: 65,
       paddingHorizontal: 2,
       borderTopWidth: 1,
-      borderTopColor: '#e2e2e2',
+      borderTopColor: colors.border,
     },
     costBlock: {
       display: 'flex',

sample/src/screens/CatalogScreen.tsx

@@ -39,8 +39,12 @@ import useShopify from '../hooks/useShopify';
 import type {ShopifyProduct} from '../../@types';
 import {Colors, useTheme} from '../context/Theme';
 import {useCart} from '../context/Cart';
+import {NativeStackScreenProps} from '@react-navigation/native-stack';
+import {RootStackParamList} from '../App';
 
-function CatalogScreen(): JSX.Element {
+type Props = NativeStackScreenProps<RootStackParamList, 'CatalogScreen'>;
+
+function CatalogScreen({navigation}: Props) {
   const ShopifyCheckoutKit = useShopifyCheckoutKit();
   const {checkoutURL, totalQuantity, addToCart, addingToCart} = useCart();
   const {colors} = useTheme();
@@ -89,6 +93,12 @@ function CatalogScreen(): JSX.Element {
             <Product
               key={node.id}
               product={node}
+              onPress={() => {
+                navigation.navigate('ProductDetails', {
+                  product: node,
+                  variant: getVariant(node),
+                });
+              }}
               loading={addingToCart.has(getVariant(node)?.id ?? '')}
               onAddToCart={addToCart}
             />
@@ -118,9 +128,11 @@ function Product({
   product,
   onAddToCart,
   loading = false,
+  onPress,
 }: {
   product: ShopifyProduct;
   loading?: boolean;
+  onPress: () => void;
   onAddToCart: (variantId: string) => void;
 }) {
   const {colors} = useTheme();
@@ -129,7 +141,7 @@ function Product({
   const variant = getVariant(product);
 
   return (
-    <View key={product.id} style={styles.productItem}>
+    <Pressable key={product.id} style={styles.productItem} onPress={onPress}>
       <Image
         resizeMethod="resize"
         resizeMode="cover"
@@ -159,7 +171,7 @@ function Product({
           )}
         </View>
       </View>
-    </View>
+    </Pressable>
   );
 }