Create categoryTile mixin and move makeurl to peregrine

packages/peregrine/lib/mixins/CategoryList/useCategoryTile.js

@@ -0,0 +1,39 @@
+import { useMemo } from 'react';
+
+// TODO: get categoryUrlSuffix from graphql storeOptions when it is ready
+const categoryUrlSuffix = '.html';
+const previewImageSize = 480;
+
+export const useCategoryTile = props => {
+    const { item, resourceUrl } = props;
+    const { image, productImagePreview } = item;
+
+    const imagePath = useMemo(() => {
+        const previewProduct = productImagePreview.items[0];
+        if (image) {
+            return resourceUrl(image, {
+                type: 'image-category',
+                width: previewImageSize
+            });
+        } else if (previewProduct) {
+            return resourceUrl(previewProduct.small_image, {
+                type: 'image-product',
+                width: previewImageSize
+            });
+        } else {
+            return null;
+        }
+    }, [image, productImagePreview, resourceUrl]);
+
+    // interpolation doesn't work inside `url()` for legacy reasons
+    // so a custom property should wrap its value in `url()`
+    const imageUrl = imagePath ? `url(${imagePath})` : 'none';
+    const imageWrapperStyle = { '--venia-image': imageUrl };
+
+    return {
+        imagePath,
+        imageWrapperStyle,
+        itemName: item.name,
+        itemUrl: `/${item.url_key}${categoryUrlSuffix}`
+    };
+};

packages/venia-concept/src/drivers.js

@@ -7,5 +7,5 @@ export {
     Switch,
     withRouter
 } from '@magento/venia-ui/lib/drivers';
-export { default as resourceUrl } from '@magento/venia-ui/lib/util/makeUrl';
+export { default as resourceUrl } from '@magento/peregrine/lib/util/makeUrl';
 export { default as Adapter } from '@magento/venia-ui/lib/drivers/adapter';

packages/venia-ui/lib/components/CategoryList/categoryTile.js

@@ -1,80 +1,52 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { arrayOf, string, shape } from 'prop-types';
-import classify from '../../classify';
+import { mergeClasses } from '../../classify';
 import { Link, resourceUrl } from '@magento/venia-drivers';
 import defaultClasses from './categoryTile.css';
-
-// TODO: get categoryUrlSuffix from graphql storeOptions when it is ready
-const categoryUrlSuffix = '.html';
-
-const previewImageSize = 480;
-
-class CategoryTile extends Component {
-    static propTypes = {
-        item: shape({
-            image: string,
-            name: string.isRequired,
-            productImagePreview: shape({
-                items: arrayOf(
-                    shape({
-                        small_image: string
-                    })
-                )
-            }),
-            url_key: string.isRequired
-        }).isRequired,
-        classes: shape({
-            item: string,
-            image: string,
-            imageWrapper: string,
-            name: string
-        }).isRequired
-    };
-
-    get imagePath() {
-        const { image, productImagePreview } = this.props.item;
-        const previewProduct = productImagePreview.items[0];
-        if (image) {
-            return resourceUrl(image, {
-                type: 'image-category',
-                width: previewImageSize
-            });
-        } else if (previewProduct) {
-            return resourceUrl(previewProduct.small_image, {
-                type: 'image-product',
-                width: previewImageSize
-            });
-        } else {
-            return null;
-        }
-    }
-
-    render() {
-        const { imagePath, props } = this;
-        const { classes, item } = props;
-
-        // interpolation doesn't work inside `url()` for legacy reasons
-        // so a custom property should wrap its value in `url()`
-        const imageUrl = imagePath ? `url(${imagePath})` : 'none';
-        const style = { '--venia-image': imageUrl };
-
-        // render an actual image element for accessibility
-        const imagePreview = imagePath ? (
-            <img className={classes.image} src={imagePath} alt={item.name} />
-        ) : null;
-
-        return (
-            <Link
-                className={classes.root}
-                to={`/${item.url_key}${categoryUrlSuffix}`}
-            >
-                <span className={classes.imageWrapper} style={style}>
-                    {imagePreview}
-                </span>
-                <span className={classes.name}>{item.name}</span>
-            </Link>
-        );
-    }
-}
-
-export default classify(defaultClasses)(CategoryTile);
+import { useCategoryTile } from '@magento/peregrine/lib/mixins/CategoryList/useCategoryTile';
+
+const CategoryTile = props => {
+    const mixinProps = useCategoryTile({
+        item: props.item,
+        resourceUrl
+    });
+
+    const { imagePath, imageWrapperStyle, itemName, itemUrl } = mixinProps;
+    const classes = mergeClasses(defaultClasses, props.classes);
+
+    // render an actual image element for accessibility
+    const imagePreview = imagePath ? (
+        <img className={classes.image} src={imagePath} alt={itemName} />
+    ) : null;
+
+    return (
+        <Link className={classes.root} to={itemUrl}>
+            <span className={classes.imageWrapper} style={imageWrapperStyle}>
+                {imagePreview}
+            </span>
+            <span className={classes.name}>{itemName}</span>
+        </Link>
+    );
+};
+
+CategoryTile.propTypes = {
+    item: shape({
+        image: string,
+        name: string.isRequired,
+        productImagePreview: shape({
+            items: arrayOf(
+                shape({
+                    small_image: string
+                })
+            )
+        }),
+        url_key: string.isRequired
+    }).isRequired,
+    classes: shape({
+        item: string,
+        image: string,
+        imageWrapper: string,
+        name: string
+    }).isRequired
+};
+export default CategoryTile;

packages/venia-ui/lib/drivers/index.js

@@ -1,6 +1,6 @@
 export { Query } from 'react-apollo';
 export { Link, Redirect, Route, Switch, withRouter } from 'react-router-dom';
-export { default as resourceUrl } from '../util/makeUrl';
+export { default as resourceUrl } from '@magento/peregrine/lib/util/makeUrl';
 export { default as Adapter } from './adapter';
 export { connect } from 'react-redux';