diff --git a/.github/screenshots/4.jpg b/.github/screenshots/4.jpg
index 8a19ec9..4d8f9ee 100644
Binary files a/.github/screenshots/4.jpg and b/.github/screenshots/4.jpg differ
diff --git a/.github/screenshots/8.jpg b/.github/screenshots/8.jpg
new file mode 100644
index 0000000..e81b98d
Binary files /dev/null and b/.github/screenshots/8.jpg differ
diff --git a/README.en.md b/README.en.md
index 3a6d42e..3c3364c 100644
--- a/README.en.md
+++ b/README.en.md
@@ -24,7 +24,8 @@ Read this in other languages: [English](README.en.md), [Português](README.md)
## Firebase
diff --git a/README.md b/README.md
index 9fa1208..e1aba78 100644
--- a/README.md
+++ b/README.md
@@ -24,7 +24,8 @@ Read this in other languages: [English](README.en.md), [Português](README.md)
## Firebase
diff --git a/src/__tests__/navigation-mocks.ts b/src/__tests__/navigation-mocks.ts
index b635110..f9def86 100644
--- a/src/__tests__/navigation-mocks.ts
+++ b/src/__tests__/navigation-mocks.ts
@@ -13,3 +13,9 @@ export const useNavigationMocks = {
setParams: jest.fn(),
openDrawer: jest.fn(),
};
+
+export const useRouteMock = {
+ params: {},
+ key: '',
+ name: ''
+};
\ No newline at end of file
diff --git a/src/locales/enUS/general.ts b/src/locales/enUS/general.ts
index b4142f3..92d28c0 100644
--- a/src/locales/enUS/general.ts
+++ b/src/locales/enUS/general.ts
@@ -11,6 +11,7 @@ const general = {
yes: `Yes`,
no: `No`,
currency: '$',
+ logout: 'Logout',
};
export default general;
diff --git a/src/locales/enUS/product-items.ts b/src/locales/enUS/product-items.ts
index 8dd5ed1..a781c94 100644
--- a/src/locales/enUS/product-items.ts
+++ b/src/locales/enUS/product-items.ts
@@ -1,6 +1,7 @@
const productItems = {
items: `Items`,
newItem: `New item`,
+ editItem: 'Edit item',
total: `Total`,
amount: `Amount`,
qtd: `Quantity`,
diff --git a/src/locales/enUS/product-lists.ts b/src/locales/enUS/product-lists.ts
index e2f8e36..4e696c1 100644
--- a/src/locales/enUS/product-lists.ts
+++ b/src/locales/enUS/product-lists.ts
@@ -1,6 +1,8 @@
const productLists = {
lists: `Lists`,
+ productLists: "Product lists",
newList: `New list`,
+ editList: 'Edit List',
buyDate: 'Purchase date'
};
diff --git a/src/locales/ptBR/general.ts b/src/locales/ptBR/general.ts
index 1f79c3a..bfad79c 100644
--- a/src/locales/ptBR/general.ts
+++ b/src/locales/ptBR/general.ts
@@ -11,6 +11,7 @@ const general = {
yes: 'Sim',
no: 'Não',
currency: 'R$',
+ logout: 'Desconectar',
};
export default general;
diff --git a/src/locales/ptBR/product-items.ts b/src/locales/ptBR/product-items.ts
index f7f8286..c949b18 100644
--- a/src/locales/ptBR/product-items.ts
+++ b/src/locales/ptBR/product-items.ts
@@ -1,6 +1,7 @@
const productItems = {
items: 'Itens',
newItem: 'Novo item',
+ editItem: 'Editar item',
total: 'Total',
amount: `Valor`,
qtd: `Quantidade`,
diff --git a/src/locales/ptBR/product-lists.ts b/src/locales/ptBR/product-lists.ts
index ba51ad0..81a3b71 100644
--- a/src/locales/ptBR/product-lists.ts
+++ b/src/locales/ptBR/product-lists.ts
@@ -1,6 +1,8 @@
const productLists = {
lists: 'Listas',
+ productLists: "Listas de produtos",
newList: 'Nova lista',
+ editList: 'Editar lista',
buyDate: 'Data de compra'
};
diff --git a/src/navigator/authenticated.tsx b/src/navigator/authenticated.tsx
index a570f4b..46351b1 100644
--- a/src/navigator/authenticated.tsx
+++ b/src/navigator/authenticated.tsx
@@ -1,6 +1,7 @@
import { createDrawerNavigator } from '@react-navigation/drawer';
import React from 'react';
+import { translate } from '@locales';
import { Routes } from '@routes';
import Drawer from './components/drawer';
@@ -23,14 +24,17 @@ const AuthenticatedNavigator = () => {
{
const { onLogoutPress } = useDrawerBottom();
return (
-
+
);
};
diff --git a/src/routes/new-item/__tests__/useScreenSettings.test.ts b/src/routes/new-item/__tests__/useScreenSettings.test.ts
new file mode 100644
index 0000000..f399169
--- /dev/null
+++ b/src/routes/new-item/__tests__/useScreenSettings.test.ts
@@ -0,0 +1,35 @@
+
+import * as reactNavigation from '@react-navigation/native';
+import { renderHook } from '@testing-library/react-hooks';
+
+import { translate } from '@locales';
+import { useRouteMock } from 'src/__tests__/navigation-mocks';
+
+import useScreenSettings from '../useScreenSettings';
+
+jest.mock('@react-navigation/native');
+
+describe('useScreenSettings', () => {
+ const routeSpy = jest.spyOn(reactNavigation, 'useRoute');
+
+ // should return the screen name as New Item and the addition icon
+ test('deve retornar o nome da tela como novo item e o icone de adição', () => {
+ routeSpy.mockReturnValue({ ...useRouteMock, params: {} });
+
+ const { result } = renderHook(useScreenSettings);
+
+ expect(result.current.screenTitle).toEqual(translate('productItems.newItem'));
+ expect(result.current.fabIcon).toEqual('plus');
+ });
+
+ // if the screen receive a productItem on params, should return the screen name as Edit Item and a check icon
+ test('caso a tela receba um productItem como paramêtro, deve retornar o nome da tela como editar item e o icone de check', () => {
+ routeSpy.mockReturnValue({ ...useRouteMock, params: { productItem: { id: '1234' } } });
+
+ const { result } = renderHook(useScreenSettings);
+
+ expect(result.current.screenTitle).toEqual(translate('productItems.editItem'));
+ expect(result.current.fabIcon).toEqual('check');
+ });
+
+});
diff --git a/src/routes/new-item/index.tsx b/src/routes/new-item/index.tsx
index 19f36e8..548091b 100644
--- a/src/routes/new-item/index.tsx
+++ b/src/routes/new-item/index.tsx
@@ -23,6 +23,7 @@ import {
import useForm from './useForm';
import useItemStore from './useItemStore';
import useNewItem from './useNewItem';
+import useScreenSettings from './useScreenSettings';
const NewItem = () => {
const { formParams, setParams, handleErrorMessage, checkForm } = useForm();
@@ -44,6 +45,7 @@ const NewItem = () => {
handleAutoCompleteItemPress,
handleBarCodeDetected,
} = useItemStore({ formParams, setParams });
+
const {
onSaveButtonPress,
handleModalVisible,
@@ -57,9 +59,11 @@ const NewItem = () => {
checkForm,
});
+ const { screenTitle, fabIcon } = useScreenSettings();
+
return (
<>
-
+
{
/>
-
+
diff --git a/src/routes/new-item/useScreenSettings.ts b/src/routes/new-item/useScreenSettings.ts
new file mode 100644
index 0000000..e6c635e
--- /dev/null
+++ b/src/routes/new-item/useScreenSettings.ts
@@ -0,0 +1,32 @@
+import { RouteProp, useRoute } from '@react-navigation/native';
+import { useEffect, useState } from 'react';
+
+import { translate } from '@locales';
+import { ProductNavigatorParamsList } from '@navigator/product-navigator';
+
+type Route = RouteProp;
+
+const useScreenSettings = () => {
+ const [screenTitle, setScreenTitle] = useState(
+ translate('productItems.newItem'),
+ );
+
+ const [fabIcon, setFabIcon] = useState('plus');
+
+ const route = useRoute();
+ const hasParams = !!route.params.productItem;
+
+ useEffect(() => {
+ if (hasParams) {
+ setScreenTitle(translate('productItems.editItem'));
+ setFabIcon('check');
+ }
+ }, [hasParams]);
+
+ return {
+ screenTitle,
+ fabIcon,
+ };
+};
+
+export default useScreenSettings;
diff --git a/src/routes/product-list/new-list/__tests__/useScreenSettings.test.ts b/src/routes/product-list/new-list/__tests__/useScreenSettings.test.ts
new file mode 100644
index 0000000..799d440
--- /dev/null
+++ b/src/routes/product-list/new-list/__tests__/useScreenSettings.test.ts
@@ -0,0 +1,35 @@
+
+import * as reactNavigation from '@react-navigation/native';
+import { renderHook } from '@testing-library/react-hooks';
+
+import { translate } from '@locales';
+import { useRouteMock } from 'src/__tests__/navigation-mocks';
+
+import useScreenSettings from '../useScreenSettings';
+
+jest.mock('@react-navigation/native');
+
+describe('useScreenSettings', () => {
+ const routeSpy = jest.spyOn(reactNavigation, 'useRoute');
+
+ // should return the screen name as New List and the addition icon
+ test('deve retornar o nome da tela como nova lista e o icone de adição', () => {
+ routeSpy.mockReturnValue({ ...useRouteMock, params: {} });
+
+ const { result } = renderHook(useScreenSettings);
+
+ expect(result.current.screenTitle).toEqual(translate('productLists.newList'));
+ expect(result.current.fabIcon).toEqual('plus');
+ });
+
+ // if the screen receive a productList on params, should return the screen name as Edit List and the check icon
+ test('caso a tela receba um productList como paramêtro, deve retornar o nome da tela como editar lista e o icone de check', () => {
+ routeSpy.mockReturnValue({ ...useRouteMock, params: { productList: { id: '1234' } } });
+
+ const { result } = renderHook(useScreenSettings);
+
+ expect(result.current.screenTitle).toEqual(translate('productLists.editList'));
+ expect(result.current.fabIcon).toEqual('check');
+ });
+
+});
diff --git a/src/routes/product-list/new-list/index.tsx b/src/routes/product-list/new-list/index.tsx
index e86884c..b14b1bd 100644
--- a/src/routes/product-list/new-list/index.tsx
+++ b/src/routes/product-list/new-list/index.tsx
@@ -11,6 +11,7 @@ import { formatDate } from '@utils/date';
import { Container, SubContainer, ButtonContainer } from './styles';
import useForm from './useForm';
import useNewList from './useNewList';
+import useScreenSettings from './useScreenSettings';
const NewList = () => {
const {
@@ -27,9 +28,11 @@ const NewList = () => {
handleDatePickerVisible,
} = useNewList({ listParams, checkForm });
+ const { fabIcon, screenTitle } = useScreenSettings();
+
return (
<>
-
+
{
onChangeText={setName}
{...handleErrorMessage('name')}
/>
-
-
-
+
+
+
-
+
-
+
diff --git a/src/routes/product-list/new-list/useScreenSettings.ts b/src/routes/product-list/new-list/useScreenSettings.ts
new file mode 100644
index 0000000..b8c5cdf
--- /dev/null
+++ b/src/routes/product-list/new-list/useScreenSettings.ts
@@ -0,0 +1,32 @@
+import { RouteProp, useRoute } from '@react-navigation/native';
+import { useEffect, useState } from 'react';
+
+import { translate } from '@locales';
+import { ProductNavigatorParamsList } from '@navigator/product-navigator';
+
+type Route = RouteProp;
+
+const useScreenSettings = () => {
+ const [screenTitle, setScreenTitle] = useState(
+ translate('productLists.newList'),
+ );
+
+ const [fabIcon, setFabIcon] = useState('plus');
+
+ const route = useRoute();
+ const hasParams = !!route.params.productList;
+
+ useEffect(() => {
+ if (hasParams) {
+ setScreenTitle(translate('productLists.editList'));
+ setFabIcon('check');
+ }
+ }, [hasParams]);
+
+ return {
+ screenTitle,
+ fabIcon,
+ };
+};
+
+export default useScreenSettings;
- 
+ 