refactor: set translations use case

avrcoelho · Oct 15, 2022 · fb36920 · fb36920
1 parent dbea84c
commit fb36920
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 11 deletions.
diff --git a/src/presentation/components/Notification/index.tsx b/src/presentation/components/Notification/index.tsx
@@ -60,6 +60,7 @@ export const Notification = ({
   const buttonCloseStyleIndex = `buttonClose${theme}` as 'buttonClosecolored';
   const buttonCloseTextStyleIndex =
     `buttonCloseText${theme}` as 'buttonCloseTextcolored';
+  const textStyle = `text${theme}` as 'textlight';
 
   return (
     <PanGestureHandler onGestureEvent={onGestureEvent}>
@@ -129,18 +130,15 @@ export const Notification = ({
                 <Text
                   ellipsizeMode="tail"
                   numberOfLines={titleMaxLines}
-                  style={[
-                    styles.title,
-                    styles[typeAndTheme] || customStyle.title,
-                  ]}
+                  style={[styles.title, styles[textStyle] || customStyle.title]}
                 >
                   {title}
                 </Text>
               )}
               <Text
                 ellipsizeMode="tail"
                 numberOfLines={textMaxLines}
-                style={[styles.text, styles[typeAndTheme] || customStyle.text]}
+                style={[styles.text, styles[textStyle] || customStyle.text]}
               >
                 {text}
               </Text>

diff --git a/src/presentation/components/Notification/styles.ts b/src/presentation/components/Notification/styles.ts
@@ -124,6 +124,15 @@ export const styles = StyleSheet.create({
     fontSize: 16,
     lineHeight: 20,
   },
+  textcolored: {
+    color: Colors.White,
+  },
+  textdark: {
+    color: Colors.White,
+  },
+  textlight: {
+    color: Colors.Grey,
+  },
 
   buttonClose: {
     width: 16,

diff --git a/src/presentation/components/Notification/useController.ts b/src/presentation/components/Notification/useController.ts
@@ -25,6 +25,7 @@ import {
 import { getAnimation } from '../../utils/getAnimation';
 import { useNotificationWidth } from '../../hooks/useNotificationWidth';
 import { useLimitToRemove } from '../../hooks/useLimitToRemove';
+import { useIsMounted } from '../../hooks/useIsMounted';
 
 type UseControllerHookProps = {
   dragDirection: NotificationDragDirection;
@@ -87,6 +88,7 @@ export const useController: UseControllerHook = ({
   const transitionDirection = dragDirection.toUpperCase() as 'X' | 'Y';
   const positionOnScreen = useSharedValue(0);
   const [isPaused, toggleIsPaused] = useToggle(false);
+  const timerRef = useRef<NodeJS.Timeout>();
 
   const onTogglePause = useCallback((): void => {
     'worklet';
@@ -192,6 +194,13 @@ export const useController: UseControllerHook = ({
 
   const [animationEnteringFinish, toggleAnimationEnteringFinish] =
     useToggle(false);
+  const isMounted = useIsMounted();
+  const onToggleAnimationEnteringFinish = useCallback(() => {
+    if (isMounted) {
+      toggleAnimationEnteringFinish();
+    }
+  }, [toggleAnimationEnteringFinish, isMounted]);
+
   const animatedStyle = useAnimatedStyle(() => {
     const translateIndex = `translate${transitionDirection}` as 'translateX';
     return animationEnteringFinish
@@ -214,12 +223,11 @@ export const useController: UseControllerHook = ({
     'worklet';
 
     if (isFinished) {
-      runOnJS(toggleAnimationEnteringFinish)();
+      runOnJS(onToggleAnimationEnteringFinish)();
     }
   };
 
   const delayDecrement = useRef(delay / DELAY);
-  const timerRef = useRef<NodeJS.Timeout>();
 
   const onExecuteTimer = useCallback((): void => {
     timerRef.current = setInterval(() => {

diff --git a/src/presentation/hooks/__tests__/useIsMounted.spec.ts b/src/presentation/hooks/__tests__/useIsMounted.spec.ts
@@ -0,0 +1,19 @@
+import { renderHook } from '@testing-library/react-hooks';
+
+import { useIsMounted } from '../useIsMounted';
+
+describe('useIsMounted hook', () => {
+  it('should be able to return mounted value', async () => {
+    const { result, rerender } = renderHook(useIsMounted);
+    rerender();
+
+    expect(result.current).toBeTruthy();
+  });
+
+  it('should be able to return unmounted value', async () => {
+    const { result, unmount } = renderHook(useIsMounted);
+    unmount();
+
+    expect(result.current).toBeFalsy();
+  });
+});
diff --git a/src/presentation/hooks/useIsMounted.ts b/src/presentation/hooks/useIsMounted.ts
@@ -0,0 +1,15 @@
+import { useEffect, useRef } from 'react';
+
+export const useIsMounted = (): boolean => {
+  const isMount = useRef(false);
+
+  useEffect(() => {
+    isMount.current = true;
+
+    return () => {
+      isMount.current = false;
+    };
+  });
+
+  return isMount.current;
+};
diff --git a/storybook/stories/Notification/Notification.stories.tsx b/storybook/stories/Notification/Notification.stories.tsx
@@ -1,7 +1,8 @@
 /* eslint-disable import/no-extraneous-dependencies */
-import { storiesOf } from '@storybook/react-native';
 import React from 'react';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { storiesOf } from '@storybook/react-native';
 
 import { NotificationContainer, useNotification } from '../../../src/main';
 
@@ -24,7 +25,7 @@ const App = (): JSX.Element => {
   };
 
   return (
-    <>
+    <GestureHandlerRootView style={{ flex: 1 }}>
       <View style={styles.container}>
         <TouchableOpacity
           style={{ marginTop: 100 }}
@@ -34,8 +35,8 @@ const App = (): JSX.Element => {
         </TouchableOpacity>
       </View>
 
-      <NotificationContainer theme="light" />
-    </>
+      <NotificationContainer theme="light" closeOnPress />
+    </GestureHandlerRootView>
   );
 };