[#20] Ajustado titulos (#120)

README.en.md

@@ -24,7 +24,8 @@ Read this in other languages: [English](README.en.md), [Português](README.md)
 
 <div style="display:flex;" >
   <img src=".github/screenshots/6.jpg" width="19%" >
-  <img src=".github/screenshots/7.jpg" width="19%" >
+  <img src=".github/screenshots/7.jpg" style="margin-left:10px;" width="19%" >
+  <img src=".github/screenshots/8.jpg" style="margin-left:10px;" width="19%" >
 </div>
 
 ## Firebase

README.md

@@ -24,7 +24,8 @@ Read this in other languages: [English](README.en.md), [Português](README.md)
 
 <div style="display:flex;" >
   <img src=".github/screenshots/6.jpg" width="19%" >
-  <img src=".github/screenshots/7.jpg" width="19%" >
+  <img src=".github/screenshots/7.jpg" style="margin-left:10px;" width="19%" >
+  <img src=".github/screenshots/8.jpg" style="margin-left:10px;" width="19%" >
 </div>
 
 ## Firebase

src/__tests__/navigation-mocks.ts

@@ -13,3 +13,9 @@ export const useNavigationMocks = {
   setParams: jest.fn(),
   openDrawer: jest.fn(),
 };
+
+export const useRouteMock = {
+  params: {},
+  key: '',
+  name: ''
+};

src/locales/enUS/general.ts

@@ -11,6 +11,7 @@ const general = {
   yes: `Yes`,
   no: `No`,
   currency: '$',
+  logout: 'Logout',
 };
 
 export default general;

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`,

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'
 };
 

src/locales/ptBR/general.ts

@@ -11,6 +11,7 @@ const general = {
   yes: 'Sim',
   no: 'Não',
   currency: 'R$',
+  logout: 'Desconectar',
 };
 
 export default general;

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`,

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'
 };
 

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 = () => {
         <AuthenticatedStack.Screen
           name={Routes.ProductNavigator}
           component={ProductNavigator}
+          options={{ title: translate('productLists.productLists') }}
         />
         <AuthenticatedStack.Screen
           name={Routes.StockNavigator}
           component={StockNavigator}
+          options={{ title: translate('stock.stock') }}
         />
         <AuthenticatedStack.Screen
           name={Routes.SettingsNavigator}
           component={SettingsNavigator}
+          options={{ title: translate('settings.settings') }}
         />
         <AuthenticatedStack.Screen
           name={Routes.UnauthenticatedNavigator}

src/navigator/components/drawer-bottom/index.tsx

@@ -2,14 +2,15 @@ import * as React from 'react';
 import { View } from 'react-native';
 
 import Button from '@components/button';
+import { translate } from '@locales';
 
 import useDrawerBottom from './useDrawerBottom';
 
 const DrawerBottom = () => {
   const { onLogoutPress } = useDrawerBottom();
   return (
     <View>
-      <Button title="Logout" onPress={onLogoutPress} mode="text" />
+      <Button title={translate('general.logout')} onPress={onLogoutPress} mode="text" />
     </View>
   );
 };

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');
+  });
+
+});

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 (
     <>
-      <Header title={translate('productItems.newItem')} backButton />
+      <Header title={screenTitle} backButton />
       <Container keyboardShouldPersistTaps="handled">
         <SubContainer>
           <TextInput
@@ -129,7 +133,7 @@ const NewItem = () => {
         />
       </Container>
       <ButtonContainer>
-        <CircleButton icon="check" onPress={onSaveButtonPress} />
+        <CircleButton icon={fabIcon} onPress={onSaveButtonPress} />
       </ButtonContainer>
 
       <Portal>

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<ProductNavigatorParamsList, 'NewListItem'>;
+
+const useScreenSettings = () => {
+  const [screenTitle, setScreenTitle] = useState(
+    translate('productItems.newItem'),
+  );
+
+  const [fabIcon, setFabIcon] = useState('plus');
+
+  const route = useRoute<Route>();
+  const hasParams = !!route.params.productItem;
+
+  useEffect(() => {
+    if (hasParams) {
+      setScreenTitle(translate('productItems.editItem'));
+      setFabIcon('check');
+    }
+  }, [hasParams]);
+
+  return {
+    screenTitle,
+    fabIcon,
+  };
+};
+
+export default useScreenSettings;

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');
+  });
+
+});

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 (
     <>
-      <Header title={translate('productLists.newList')} backButton />
+      <Header title={screenTitle} backButton />
       <Container>
         <SubContainer keyboardShouldPersistTaps="handled">
           <TextInput
@@ -38,25 +41,23 @@ const NewList = () => {
             onChangeText={setName}
             {...handleErrorMessage('name')}
           />
-           <TouchableRipple
-              withoutBackground
-              onPress={handleDatePickerVisible}>
-              <TextInput
-                editable={false}
-                fixedValue={buyDate ? formatDate(buyDate) : undefined}
-                label={translate('productLists.buyDate')}
-              />
-            </TouchableRipple>
+          <TouchableRipple withoutBackground onPress={handleDatePickerVisible}>
+            <TextInput
+              editable={false}
+              fixedValue={buyDate ? formatDate(buyDate) : undefined}
+              label={translate('productLists.buyDate')}
+            />
+          </TouchableRipple>
         </SubContainer>
-          <DateTimePicker
-            getDateTime={setBuyDate}
-            mode="date"
-            isVisible={datePickerVisible}
-            handleModalVisible={handleDatePickerVisible}
-            value={buyDate}
-          />
+        <DateTimePicker
+          getDateTime={setBuyDate}
+          mode="date"
+          isVisible={datePickerVisible}
+          handleModalVisible={handleDatePickerVisible}
+          value={buyDate}
+        />
         <ButtonContainer behavior="height">
-          <CircleButton icon="check" onPress={onAddPress} />
+          <CircleButton icon={fabIcon} onPress={onAddPress} />
         </ButtonContainer>
       </Container>
     </>

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<ProductNavigatorParamsList, 'NewList'>;
+
+const useScreenSettings = () => {
+  const [screenTitle, setScreenTitle] = useState(
+    translate('productLists.newList'),
+  );
+
+  const [fabIcon, setFabIcon] = useState('plus');
+
+  const route = useRoute<Route>();
+  const hasParams = !!route.params.productList;
+
+  useEffect(() => {
+    if (hasParams) {
+      setScreenTitle(translate('productLists.editList'));
+      setFabIcon('check');
+    }
+  }, [hasParams]);
+
+  return {
+    screenTitle,
+    fabIcon,
+  };
+};
+
+export default useScreenSettings;