Merge pull request #13 from ayghon/development

Development
ayghon · Apr 15, 2023 · e47fab6 · e47fab6
2 parents 701b8f3 + 37eb463
commit e47fab6
Show file tree

Hide file tree

Showing 7 changed files with 123 additions and 108 deletions.
diff --git a/app.json b/app.json
@@ -25,7 +25,7 @@
       }
     },
     "android": {
-      "versionCode": 4,
+      "versionCode": 6,
       "adaptiveIcon": {
         "foregroundImage": "./assets/adaptive-icon.png",
         "backgroundColor": "#FF3336"

diff --git a/app/shopping-cart.tsx b/app/shopping-cart.tsx
@@ -1,3 +1,4 @@
+import { useIsFocused } from '@react-navigation/core';
 import { FlatList } from 'native-base';
 import React from 'react';
 
@@ -7,7 +8,8 @@ import { ShoppingCartFooter } from '../components/shopping-cart/ShoppingCartFoot
 import { useArticlesState } from '../context/articles.context';
 
 export default function ShoppingCart() {
-  const { shoppingCart, addToCart } = useArticlesState();
+  const { shoppingCart, addToCart, isLoading } = useArticlesState();
+  const isFocused = useIsFocused();
 
   const total = shoppingCart.reduce((acc, { price = 0, quantity = 0 }) => {
     return parseFloat((acc + quantity * price).toFixed(2));
@@ -18,14 +20,16 @@ export default function ShoppingCart() {
       <FlatList
         paddingX={4}
         paddingY={2}
-        ListFooterComponent={<ShoppingCartFooter total={total} />}
+        ListFooterComponent={
+          <ShoppingCartFooter total={total} isLoading={isLoading} />
+        }
         data={shoppingCart}
         renderItem={({ item: { id, label, price } }) => (
           <ArticleRow id={id} label={label} price={price} />
         )}
         keyExtractor={({ id }) => id}
       />
-      <AddArticle onAdd={addToCart} />
+      {isFocused && <AddArticle onAdd={addToCart} />}
     </>
   );
 }
diff --git a/components/AddArticle.tsx b/components/AddArticle.tsx
@@ -15,6 +15,8 @@ export const AddArticle: FC<AddArticleProps> = ({ onAdd }) => {
   const [isModalVisible, setModalVisible] = useState(false);
   const { articles, addArticle, editArticle } = useArticlesState();
 
+  const articleToEdit = articles.find((article) => article.id === code);
+
   const hideModal = () => {
     setCode(undefined);
     setModalVisible(false);
@@ -26,8 +28,8 @@ export const AddArticle: FC<AddArticleProps> = ({ onAdd }) => {
       await editArticle(data.id, data);
     } else {
       await addArticle(data);
-      onAdd?.(data.id);
     }
+    onAdd?.(data.id);
   };
 
   useEffect(() => {
@@ -40,6 +42,8 @@ export const AddArticle: FC<AddArticleProps> = ({ onAdd }) => {
     <>
       <OpenScannerFab />
       <AddArticleModal
+        values={articleToEdit}
+        isEdit={!!articleToEdit}
         isOpen={isModalVisible}
         onSave={addNewArticle}
         onClose={hideModal}

diff --git a/components/article-list/AddArticleModal.tsx b/components/article-list/AddArticleModal.tsx
@@ -32,11 +32,13 @@ export const AddArticleModal: FC<AddArticleModalProps> = ({
   const { code, setCode } = useCodeState();
 
   const methods = useForm<AddArticleFormState>({
-    defaultValues: { ...values, price: values?.price.toString() } || {
-      id: code,
-      label: '',
-      price: undefined,
-    },
+    defaultValues: isEdit
+      ? { ...values, price: values?.price.toString() }
+      : {
+          id: code,
+          label: '',
+          price: undefined,
+        },
     mode: 'all',
     criteriaMode: 'all',
   });

diff --git a/components/article-list/ArticleList.tsx b/components/article-list/ArticleList.tsx
@@ -1,4 +1,4 @@
-import { Center } from 'native-base';
+import { Center, Column, Spinner } from 'native-base';
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FlatList } from 'react-native';
@@ -9,7 +9,6 @@ import { useArticlesState } from '../../context/articles.context';
 import { i18nKeys } from '../../i18n/keys';
 import { Article } from '../../types';
 import { Pagination } from '../../ui/Pagination';
-import { ScreenLoader } from '../../ui/ScreenLoader';
 import { sortArticles } from '../../utils/articles-sort';
 import { SortDirection, useHeaderSort } from '../../utils/header-sort';
 
@@ -39,10 +38,6 @@ export const ArticleList = () => {
       : articles
   ).slice(page * itemsPerPage, page * itemsPerPage + itemsPerPage);
 
-  if (isLoading) {
-    return <ScreenLoader />;
-  }
-
   return (
     <FlatList
       ListHeaderComponent={
@@ -64,14 +59,17 @@ export const ArticleList = () => {
       data={data}
       keyExtractor={({ id }) => id}
       ListFooterComponent={
-        <Pagination
-          itemsPerPage={itemsPerPage}
-          page={page}
-          total={articles.length}
-          onChange={setPage}
-          pageOptions={pageOptions}
-          onPageOptionsChange={setItemsPerPage}
-        />
+        <Column mt={2}>
+          {isLoading && <Spinner />}
+          <Pagination
+            itemsPerPage={itemsPerPage}
+            page={page}
+            total={articles.length}
+            onChange={setPage}
+            pageOptions={pageOptions}
+            onPageOptionsChange={setItemsPerPage}
+          />
+        </Column>
       }
       renderItem={({ item: { id, label, price } }) => (
         <SwipeableArticleRow

diff --git a/components/shopping-cart/ShoppingCartFooter.tsx b/components/shopping-cart/ShoppingCartFooter.tsx
@@ -1,5 +1,5 @@
 import { MaterialIcons } from '@expo/vector-icons';
-import { Button, Icon, Row, Text } from 'native-base';
+import { Button, Column, Icon, Row, Spinner, Text } from 'native-base';
 import React, { FC, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -9,9 +9,13 @@ import { Modal } from '../../ui/Modal';
 
 type ShoppingCartFooterProps = {
   total: number;
+  isLoading?: boolean;
 };
 
-export const ShoppingCartFooter: FC<ShoppingCartFooterProps> = ({ total }) => {
+export const ShoppingCartFooter: FC<ShoppingCartFooterProps> = ({
+  total,
+  isLoading,
+}) => {
   const { t } = useTranslation();
   const { shoppingCart, clearCart } = useArticlesState();
   const [isOpen, setIsOpen] = useState(false);
@@ -23,26 +27,29 @@ export const ShoppingCartFooter: FC<ShoppingCartFooterProps> = ({ total }) => {
 
   return (
     <>
-      <Row
-        marginTop={4}
-        justifyContent="flex-end"
-        alignItems="center"
-        space="sm">
-        {shoppingCart.length > 0 && (
-          <Button
-            onPress={() => setIsOpen(true)}
-            variant="ghost"
-            startIcon={<Icon as={MaterialIcons} name="clear" />}>
-            {t(i18nKeys.app.shopping_cart.list.footer.clear)}
-          </Button>
-        )}
-        <Text>
-          {t(i18nKeys.app.shopping_cart.list.footer.total, {
-            price: total,
-            currency: '€',
-          })}
-        </Text>
-      </Row>
+      <Column>
+        {isLoading && <Spinner />}
+        <Row
+          marginTop={4}
+          justifyContent="flex-end"
+          alignItems="center"
+          space="sm">
+          {shoppingCart.length > 0 && (
+            <Button
+              onPress={() => setIsOpen(true)}
+              variant="ghost"
+              startIcon={<Icon as={MaterialIcons} name="clear" />}>
+              {t(i18nKeys.app.shopping_cart.list.footer.clear)}
+            </Button>
+          )}
+          <Text>
+            {t(i18nKeys.app.shopping_cart.list.footer.total, {
+              price: total,
+              currency: '€',
+            })}
+          </Text>
+        </Row>
+      </Column>
       <Modal
         isOpen={isOpen}
         onClose={() => setIsOpen(false)}