Added scraper functionality to admin screen

gersomvg · Nov 29, 2018 · 303d3e7 · 303d3e7
1 parent 13cd42b
commit 303d3e7
Show file tree

Hide file tree

Showing 14 changed files with 364 additions and 122 deletions.
diff --git a/.expo/packager-info.json b/.expo/packager-info.json
@@ -1,7 +1,7 @@
 {
   "expoServerPort": 19000,
-  "packagerPort": 19001,
-  "packagerPid": 3307,
+  "packagerPort": 19004,
+  "packagerPid": 57954,
   "expoServerNgrokUrl": null,
   "packagerNgrokUrl": null,
   "ngrokPid": null

diff --git a/src/AppNavigation.js b/src/AppNavigation.js
@@ -19,6 +19,9 @@ const MainStack = createStackNavigator(
         ProductEditor: {
             screen: modules.ProductEditor,
         },
+        Scraper: {
+            screen: modules.Scraper,
+        },
         Inbox: {
             screen: modules.Inbox,
         },

diff --git a/src/api/index.js b/src/api/index.js
@@ -4,3 +4,4 @@ export * from './brands';
 export * from './products';
 export * from './auth';
 export * from './feedback';
+export * from './scrape';
diff --git a/src/api/products.js b/src/api/products.js
@@ -32,11 +32,23 @@ products.create = data => {
     data.tags.forEach(tag => formData.append('tagIds[]', tag.id));
     data.categories.forEach(category => formData.append('categoryIds[]', category.id));
     data.barcodes.forEach(barcode => formData.append('barcodes[]', barcode));
-    formData.append('image', {
-        uri: data.imageUrl,
-        name: 'image.jpg',
-        type: 'image/jpeg',
-    });
+    if (data.customImageUrl) {
+        formData.append('customImage', {
+            uri: data.customImageUrl,
+            name: 'image.jpg',
+            type: 'image/jpeg',
+        });
+    }
+    if (data.officialImageUrl) {
+        formData.append('officialImage', {
+            uri: data.officialImageUrl,
+            name: 'image.jpg',
+            type: 'image/jpeg',
+        });
+    }
+    if (data.externalImageUrl) {
+        formData.append('externalImage', data.externalImageUrl);
+    }
 
     const url = `${API_ENDPOINT}/product`;
     return fetcher(url, {
@@ -56,13 +68,23 @@ products.update = data => {
     data.tags.forEach(tag => formData.append('tagIds[]', tag.id));
     data.categories.forEach(category => formData.append('categoryIds[]', category.id));
     data.barcodes.forEach(barcode => formData.append('barcodes[]', barcode));
-    if (!data.imageUrl.startsWith('http')) {
-        formData.append('image', {
-            uri: data.imageUrl,
+    if (data.customImageUrl !== '' && !data.customImageUrl.startsWith('http')) {
+        formData.append('customImage', {
+            uri: data.customImageUrl,
             name: 'image.jpg',
             type: 'image/jpeg',
         });
     }
+    if (data.officialImageUrl !== '' && !data.officialImageUrl.startsWith('http')) {
+        formData.append('officialImage', {
+            uri: data.officialImageUrl,
+            name: 'image.jpg',
+            type: 'image/jpeg',
+        });
+    }
+    if (data.externalImageUrl) {
+        formData.append('externalImage', data.externalImageUrl);
+    }
 
     const url = `${API_ENDPOINT}/product/${data.id}`;
     return fetcher(url, {

diff --git a/src/api/scrape.js b/src/api/scrape.js
@@ -0,0 +1,18 @@
+import { qs, fetcher } from 'utils';
+import { API_ENDPOINT } from 'config';
+
+const scrape = {};
+
+scrape.get = ({ name }) => {
+    const params = qs.stringify({ name });
+    url = `${API_ENDPOINT}/scrape${params}`;
+    return fetcher(url);
+};
+
+scrape.getDetails = ({ url }) => {
+    const params = qs.stringify({ url });
+    url = `${API_ENDPOINT}/scrape/details${params}`;
+    return fetcher(url);
+};
+
+export { scrape };
diff --git a/src/common/ProductThumb.js b/src/common/ProductThumb.js
@@ -4,51 +4,31 @@ import PT from 'prop-types';
 
 import { Text } from 'common';
 
-const shadowSize = 10;
 const imageSize = 128;
 class ProductThumb extends React.PureComponent {
     static propTypes = {
         source: PT.oneOfType([PT.object, PT.number]),
     };
-
-    static shadowSize = shadowSize;
     static imageSize = imageSize;
-    static totalSize = imageSize + 2 * shadowSize;
 
     render() {
         return (
-            <RN.View style={styles.imageContainer}>
-                {/* <RN.Image
-                    style={styles.imageShadow}
-                    source={require('assets/ui/product-image-shadow.png')}
-                /> */}
-                <RN.View style={styles.imageClipper}>
-                    <RN.Image style={styles.image} source={this.props.source} />
-                </RN.View>
+            <RN.View style={styles.imageClipper}>
+                <RN.Image style={styles.image} source={this.props.source} />
             </RN.View>
         );
     }
 }
 
 const styles = RN.StyleSheet.create({
-    imageContainer: {
-        width: ProductThumb.totalSize,
-        height: ProductThumb.totalSize,
-        padding: ProductThumb.shadowSize,
-        alignSelf: 'center',
-    },
-    imageShadow: {
-        position: 'absolute',
-        width: ProductThumb.totalSize,
-        height: ProductThumb.totalSize,
-    },
     imageClipper: {
         borderRadius: 6,
         overflow: 'hidden',
+        alignSelf: 'center',
     },
     image: {
-        width: ProductThumb.imageSize,
-        height: ProductThumb.imageSize,
+        width: imageSize,
+        height: imageSize,
     },
 });
 

diff --git a/src/config/index.js b/src/config/index.js
@@ -1,9 +1,9 @@
 export * from './styling';
 
 export const API_ENDPOINT = {
-    development: 'http://localhost:3001/api/v1',
+    // development: 'http://localhost:3001/api/v1',
     // development: 'https://plenty-development.herokuapp.com/api/v1',
-    // development: 'https://plenty-staging.herokuapp.com/api/v1',
+    development: 'https://plenty-staging.herokuapp.com/api/v1',
     // development: 'https://plenty-production.herokuapp.com/api/v1',
     production: 'https://plenty-production.herokuapp.com/api/v1',
 }[process.env.NODE_ENV];
diff --git a/src/modules/Product/ProductContainer.js b/src/modules/Product/ProductContainer.js
@@ -10,27 +10,19 @@ import { withFetch } from 'hocs';
     isAuthorized: auth.status === 'AUTHORIZED',
 }))
 class ProductContainer extends React.Component {
-    state = {
-        fetchStatus: 'initial',
-        product: null,
-    };
+    constructor(props) {
+        super(props);
+        this.state = {
+            fetchStatus: this.product ? 'loaded' : 'initial',
+        };
+    }
 
-    static getDerivedStateFromProps(props, state) {
-        const product = props.navigation.getParam('product');
-        if (
-            (!state.product && product) ||
-            (product && state.product && state.product.updatedAt !== product.updatedAt)
-        ) {
-            return {
-                product: props.navigation.state.params.product,
-                fetchStatus: 'loaded',
-            };
-        }
-        return null;
+    get product() {
+        return this.props.navigation.getParam('product');
     }
 
     componentDidMount() {
-        if (!this.state.product) this.loadProduct();
+        if (!this.product) this.loadProduct();
     }
 
     loadProduct = async () => {
@@ -39,16 +31,15 @@ class ProductContainer extends React.Component {
         try {
             this.setState({ fetchStatus: 'loading' });
             let data;
-            if (this.props.navigation.state.params.productId) {
-                data = await this.props.fetch('products.getOne')({
-                    id: this.props.navigation.state.params.productId,
-                }).promise;
+            const id = this.props.navigation.getParam('productId');
+            if (id) {
+                data = await this.props.fetch('products.getOne')({ id }).promise;
             } else {
-                data = await this.props.fetch('products.getOneByBarcode')({
-                    barcode: this.props.navigation.state.params.barcode,
-                }).promise;
+                const barcode = this.props.navigation.getParam('barcode');
+                data = await this.props.fetch('products.getOneByBarcode')({ barcode }).promise;
             }
-            this.setState({ fetchStatus: 'loaded', product: data });
+            this.props.navigation.setParams({ product });
+            this.setState({ fetchStatus: 'loaded' });
         } catch (e) {
             if (e.isCanceled) return;
             const fetchStatus = e.status === 404 ? 'notfound' : 'error';
@@ -62,15 +53,16 @@ class ProductContainer extends React.Component {
 
     handleOnPressEdit = () => {
         this.props.navigation.push('ProductEditor', {
-            product: this.state.product,
-            prevProductRouteKey: this.props.navigation.state.key,
+            product: this.product,
+            onUpdate: product => this.props.navigation.setParams({ product }),
         });
     };
 
     render() {
         return (
             <Product
-                {...this.state}
+                fetchStatus={this.state.fetchStatus}
+                product={this.product}
                 requestedBarcode={this.props.navigation.getParam('barcode')}
                 onPressBack={this.handleOnPressBack}
                 onPressEdit={this.handleOnPressEdit}

diff --git a/src/modules/Product/components/ProductInfo.js b/src/modules/Product/components/ProductInfo.js
@@ -31,11 +31,11 @@ const shadowSize = 10;
 const styles = RN.StyleSheet.create({
     container: {
         paddingHorizontal: 16,
-        paddingTop: 32 - ProductThumb.shadowSize,
+        paddingTop: 32,
         paddingBottom: 32,
     },
     productName: {
-        marginTop: 16,
+        marginTop: 26,
     },
     brandName: {
         marginTop: 8,