add url from backend

android/app/build.gradle

@@ -79,8 +79,8 @@ android {
         applicationId "com.pricepro"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 1
-        versionName "1.0"
+        versionCode 4
+        versionName "1.0.3"
         resConfigs "en"
     }
     signingConfigs {
@@ -108,7 +108,6 @@ android {
             // see https://reactnative.dev/docs/signed-apk-android.
             signingConfig signingConfigs.release
             minifyEnabled enableProguardInReleaseBuilds
-            shrinkResources true
             proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"   
         }
     }

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/ic_launcher_background"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+</adaptive-icon>

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/ic_launcher_background"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+</adaptive-icon>

android/app/src/main/res/values/ic_launcher_background.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="ic_launcher_background">#f6e500</color>
+</resources>

components/about.js

@@ -1,12 +1,11 @@
 import React from 'react';
-import {ImageBackground, ScrollView, View} from 'react-native';
+import {ImageBackground, ScrollView} from 'react-native';
 import {Layout, StyleService, Text, useStyleSheet} from '@ui-kitten/components';
 import Markdown from 'react-native-markdown-display';
 import {Divider} from './divider';
 import {aboutAtom} from '../jotai';
 import {useAtom} from 'jotai';
-
-const logoUrl = 'https://iili.io/JSblB1V.png';
+import {Image} from 'react-native-svg';
 
 const rules = {
   heading1: (node, children) => (
@@ -40,20 +39,27 @@ const rules = {
     </Text>
   ),
   hr: node => <Divider key={node.key} styles={{backgroundColor: '#ccc'}} />,
-  strong: (node, children) => <Text category="s1">{children}</Text>,
-  text: (node, children) => <Text key={node.key}>{node.content}</Text>,
+  strong: (node, children) => (
+    <Text key={node.key} category="s1">
+      {children}
+    </Text>
+  ),
+  text: node => <Text key={node.key}>{node.content}</Text>,
   textgroup: (node, children) => <Text key={node.key}>{children}</Text>,
 };
 
 export const About = () => {
   const styles = useStyleSheet(themedStyles);
-  const [{data, isPending, isError}] = useAtom(aboutAtom);
+  const [{data, isPending}] = useAtom(aboutAtom);
 
   return (
     <Layout style={styles.container} level="2">
       <ScrollView contentContainerStyle={styles.contentContainer}>
         <Layout style={styles.logoContainer} level="1">
-          <ImageBackground style={styles.logo} source={{uri: logoUrl}} />
+          <ImageBackground
+            style={styles.logo}
+            source={require('../img/priceProLogo.png')}
+          />
         </Layout>
 
         <Layout style={styles.descriptionContainer} level="2">
@@ -77,8 +83,11 @@ const themedStyles = StyleService.create({
     alignItems: 'center',
   },
   logo: {
+    textAlign: 'center',
+    padding: 30,
     height: 100,
     width: 100,
+    backgroundColor: 'yellow',
     marginVertical: 16,
   },
   descriptionContainer: {

components/details.js

@@ -10,128 +10,49 @@ import {
   useStyleSheet,
 } from '@ui-kitten/components';
 import {Divider} from './divider';
-import {useAtom, useAtomValue, useSetAtom} from 'jotai';
+import {useAtom, useAtomValue} from 'jotai';
 
 import {
-  comparisonProductsAtom,
-  myComparisonAtom,
-  myComparisonStorageReaderAtomLoadable,
-  myComparisonStorageWriterAtom,
-  myComparisonTriggerDeleteAtom,
-  viewIndexComparisonAtom,
+  loadMyComparisonProductsAtom,
+  myComparisonEffectAtom,
+  myComparisonProductAtom,
   viewPagerIndexComparisonAtom,
 } from '../jotai';
-
-const lazadaLogoURL = 'https://iili.io/JS6Ucg4.png';
-const shopeeLogoURL = 'https://iili.io/JSPfQs9.png';
+import {Loading} from './loading';
 
 export const Details = () => {
+  useAtom(myComparisonEffectAtom);
   const styles = useStyleSheet(themedStyles);
-  const [{data, isPending, isError, refetch, isRefetching}] = useAtom(
-    comparisonProductsAtom,
-  );
-  const [viewIndexComparison, setViewIndexComparison] = useAtom(
-    viewIndexComparisonAtom,
-  );
-  const [product, setProduct] = React.useState(null);
-  const myComparison = useAtomValue(myComparisonAtom);
-  const myComparisonStorage = useAtomValue(
-    myComparisonStorageReaderAtomLoadable,
-  );
-  const setMyComparisonStorage = useSetAtom(myComparisonStorageWriterAtom);
-  const [myComparisonTriggerDelete, setMyComparisonTriggerDelete] = useAtom(
-    myComparisonTriggerDeleteAtom,
-  );
+
+  const product = useAtomValue(myComparisonProductAtom);
+  const [{data, isPending, isError}] = useAtom(loadMyComparisonProductsAtom);
   const [selectedIndex, setSelectedIndex] = useAtom(
     viewPagerIndexComparisonAtom,
   );
 
-  React.useEffect(() => {
-    if (myComparisonStorage.state === 'hasData') {
-      setMyComparisonStorage('load');
-    }
-  }, [myComparisonStorage, setMyComparisonStorage]);
-
-  // React.useEffect(() => {}, [myComparison]);
-
-  React.useEffect(() => {
-    if (Array.isArray(data?.data) && data.data.length) {
-      setProduct(data.data[viewIndexComparison]);
-    }
-  }, [data, viewIndexComparison, setProduct]);
-  // console.log('data', data);
-  // console.log('viewIndexComparison', viewIndexComparison);
-
-  const onViewButtonPress = type => {
-    let link;
-    if (type === 'default' && product.site === 'shopee') {
-      const name = encodeURIComponent(product.name);
-      link = `https://shopee.ph/${name}i.${product.shopid}.${product.itemid}`;
-    } else if (type === 'default' && product.site === 'lazada') {
-      link = `https://www.lazada.com.ph/products/${product.name
-        .toLowerCase()
-        .replace(' ', '-')}-i${product.itemid}-s${product.shopid}.html`;
-    } else if (type === 'comparison' && product.site === 'shopee') {
-      const name = encodeURIComponent(product.c_name);
-      link = `https://shopee.ph/${name}i.${product.c_shopid}.${product.c_itemid}`;
-    } else if (type === 'comparison' && product.site === 'lazada') {
-      link = `https://www.lazada.com.ph/products/${product.c_name
-        .toLowerCase()
-        .replace(' ', '-')}-i${product.c_itemid}-s${product.c_shopid}.html`;
-    }
-
+  const onViewButtonPress = link => {
     if (link) {
-      Linking.openURL(link);
+      console.log('openURL', link);
+      // Linking.openURL(link);
     }
   };
 
-  const onDeleteButtonPress = id => {
-    if (myComparisonStorage.state !== 'hasData') {
-      return;
-    }
-
-    const myComparisonCopy = [...myComparison];
-    const indexToRemove = myComparisonCopy.indexOf(id);
-
-    if (indexToRemove > -1) {
-      myComparisonCopy.splice(indexToRemove, 1);
-      // console.log('myComparisonCopy', myComparisonCopy);
-      // console.log('viewIndexComparison', viewIndexComparison);
-      if (!myComparisonCopy.length) {
-        setViewIndexComparison(0);
-        setProduct(null);
-      } else if (viewIndexComparison >= myComparisonCopy.length) {
-        setViewIndexComparison(viewIndexComparison - 1);
-      }
-      setMyComparisonStorage('delete', myComparisonCopy, refetch);
-    }
-  };
-
-  if (myComparisonTriggerDelete && product && product?.id) {
-    setMyComparisonTriggerDelete(false);
-    onDeleteButtonPress(product.id);
+  if (isPending) {
+    return <Loading />;
   }
 
-  // console.log('myComparisonStorage', myComparisonStorage);
-  if (!data || !data.data.length) {
+  // console.log('data', data);
+  if (!data || !data?.data?.length || !product) {
     return (
       <Layout style={styles.containerNoData}>
         <Text appearance="hint">No data to view</Text>
       </Layout>
     );
   }
 
-  if (isPending || isRefetching || !product) {
-    return (
-      <Layout style={styles.containerNoData}>
-        <Text appearance="hint">Loading...</Text>
-      </Layout>
-    );
-  }
-
-  if (isError) {
-    return <Text>Error</Text>;
-  }
+  // if (isError) {
+  //   return <Text>Error</Text>;
+  // }
 
   return (
     <ViewPager
@@ -149,9 +70,11 @@ export const Details = () => {
           <View style={styles.itemHeaderSite}>
             <Image
               style={styles.siteLogo}
-              source={{
-                uri: product.site === 'shopee' ? shopeeLogoURL : lazadaLogoURL,
-              }}
+              source={
+                product.site === 'shopee'
+                  ? require('../img/shopeeLogo.png')
+                  : require('../img/lazadaLogo.png')
+              }
             />
             <Text category="s1">
               {product.site === 'shopee' ? 'Shopee' : 'Lazada'}
@@ -227,13 +150,12 @@ export const Details = () => {
               {product.brand ? product.brand : 'No Brand'}
             </Text>
           </Layout>
-
           <View style={styles.actionContainer}>
             <Button
               appearance="ghost"
               style={styles.actionButton}
               status="control"
-              onPress={() => onViewButtonPress('default')}>
+              onPress={() => onViewButtonPress(product.url)}>
               View Product
             </Button>
           </View>
@@ -252,10 +174,11 @@ export const Details = () => {
             <View style={styles.itemHeaderSite}>
               <Image
                 style={styles.siteLogo}
-                source={{
-                  uri:
-                    product.c_site === 'shopee' ? shopeeLogoURL : lazadaLogoURL,
-                }}
+                source={
+                  product.c_site === 'shopee'
+                    ? require('../img/shopeeLogo.png')
+                    : require('../img/lazadaLogo.png')
+                }
               />
               <Text category="s1">
                 {product.c_site === 'shopee' ? 'Shopee' : 'Lazada'}
@@ -336,10 +259,11 @@ export const Details = () => {
 
             <View style={styles.actionContainer}>
               <Button
+                appearance="ghost"
                 style={styles.actionButton}
-                size="giant"
-                onPress={() => onViewButtonPress('comparison')}>
-                View
+                status="control"
+                onPress={() => onViewButtonPress(product.c_url)}>
+                View Product
               </Button>
             </View>
           </ScrollView>
@@ -356,9 +280,11 @@ export const Details = () => {
           <View style={[styles.itemHeaderSite, {flex: 1}]}>
             <Image
               style={styles.siteLogo}
-              source={{
-                uri: product.site !== 'shopee' ? shopeeLogoURL : lazadaLogoURL,
-              }}
+              source={
+                product.site !== 'shopee'
+                  ? require('../img/shopeeLogo.png')
+                  : require('../img/lazadaLogo.png')
+              }
             />
             <Text category="s1">
               {product.site !== 'shopee' ? 'Shopee' : 'Lazada'}
@@ -367,9 +293,9 @@ export const Details = () => {
           <Layout
             style={[
               styles.layoutContainer,
-              {flex: 25, alignContent: 'center', borderRadius: 10},
+              styles.containerNoProductsToCompare,
             ]}>
-            <Text style={{flex: 1, textAlign: 'center'}}>
+            <Text style={styles.noProductsToCompareText}>
               No product to compare
             </Text>
           </Layout>
@@ -390,6 +316,11 @@ const themedStyles = StyleService.create({
     flex: 1,
     justifyContent: 'center',
   },
+  containerNoProductsToCompare: {
+    flex: 25,
+    alignContent: 'center',
+    borderRadius: 10,
+  },
   borderRadius: {
     borderRadius: 10,
   },
@@ -470,4 +401,8 @@ const themedStyles = StyleService.create({
   shopeeBackground: {
     backgroundColor: 'color-orange-600',
   },
+  noProductsToCompareText: {
+    flex: 1,
+    textAlign: 'center',
+  },
 });