refactor: get rid of require cycle

wouterds · Jul 5, 2023 · ae831f7 · ae831f7
1 parent 19a2553
commit ae831f7
Show file tree

Hide file tree

Showing 14 changed files with 59 additions and 83 deletions.
diff --git a/src/components/Swimlane/PopularMovies/Item/index.tsx b/src/components/Swimlane/PopularMovies/Item/index.tsx
@@ -1,6 +1,6 @@
 import { NavigationProp, useNavigation } from '@react-navigation/native';
 import Card from 'components/Card';
-import Touchable from 'components/Touchable';
+import { Touchable } from 'components/Touchable';
 import { Route, RouteParams } from 'navigation';
 import React, { memo } from 'react';
 import { useMovie } from 'store/movies/hooks';

diff --git a/src/components/Swimlane/PopularMovies/index.tsx b/src/components/Swimlane/PopularMovies/index.tsx
@@ -34,9 +34,6 @@ const PopularMoviesSwimlane = ({ hideTitle }: Props) => {
           showsHorizontalScrollIndicator={false}
           showsVerticalScrollIndicator={false}
           data={isLoading && data.length === 0 ? new Array(6).fill(null) : data}
-          keyExtractor={(item, index) =>
-            `swimlane.popular-movies.${item?.id || `index-${index}`}`
-          }
           renderItem={({ item }) => <Item id={item?.id} />}
         />
       </TVFocusGuideView>

diff --git a/src/components/Swimlane/PopularTVShows/Item/index.tsx b/src/components/Swimlane/PopularTVShows/Item/index.tsx
@@ -1,6 +1,6 @@
 import { NavigationProp, useNavigation } from '@react-navigation/native';
 import Card from 'components/Card';
-import Touchable from 'components/Touchable';
+import { Touchable } from 'components/Touchable';
 import { Route, RouteParams } from 'navigation';
 import React, { memo } from 'react';
 import { useShow } from 'store/shows/hooks';

diff --git a/src/components/Swimlane/PopularTVShows/index.tsx b/src/components/Swimlane/PopularTVShows/index.tsx
@@ -34,9 +34,6 @@ const PopularTVShowsSwimlane = ({ hideTitle }: Props) => {
           showsHorizontalScrollIndicator={false}
           showsVerticalScrollIndicator={false}
           data={isLoading && data.length === 0 ? new Array(6).fill(null) : data}
-          keyExtractor={(item, index) =>
-            `swimlane.popular-tv-shows.${item?.id || `index-${index}`}`
-          }
           renderItem={({ item }) => <Item id={item?.id} />}
         />
       </TVFocusGuideView>

diff --git a/src/components/Swimlane/TopRatedMovies/Item/index.tsx b/src/components/Swimlane/TopRatedMovies/Item/index.tsx
@@ -1,6 +1,6 @@
 import { NavigationProp, useNavigation } from '@react-navigation/native';
 import Card from 'components/Card';
-import Touchable from 'components/Touchable';
+import { Touchable } from 'components/Touchable';
 import { Route, RouteParams } from 'navigation';
 import React, { memo } from 'react';
 import { useMovie } from 'store/movies/hooks';

diff --git a/src/components/Swimlane/TopRatedMovies/index.tsx b/src/components/Swimlane/TopRatedMovies/index.tsx
@@ -34,9 +34,6 @@ const TopRatedMoviesSwimlane = ({ hideTitle }: Props) => {
           showsHorizontalScrollIndicator={false}
           showsVerticalScrollIndicator={false}
           data={isLoading && data.length === 0 ? new Array(6).fill(null) : data}
-          keyExtractor={(item, index) =>
-            `swimlane.top-rated-movies.${item?.id || `index-${index}`}`
-          }
           renderItem={({ item }) => <Item id={item?.id} />}
         />
       </TVFocusGuideView>

diff --git a/src/components/Swimlane/TopRatedTVShows/Item/index.tsx b/src/components/Swimlane/TopRatedTVShows/Item/index.tsx
@@ -1,6 +1,6 @@
 import { NavigationProp, useNavigation } from '@react-navigation/native';
 import Card from 'components/Card';
-import Touchable from 'components/Touchable';
+import { Touchable } from 'components/Touchable';
 import { Route, RouteParams } from 'navigation';
 import React, { memo } from 'react';
 import { useShow } from 'store/shows/hooks';

diff --git a/src/components/Swimlane/TopRatedTVShows/index.tsx b/src/components/Swimlane/TopRatedTVShows/index.tsx
@@ -34,9 +34,6 @@ const TopRatedTVShowsSwimlane = ({ hideTitle }: Props) => {
           showsHorizontalScrollIndicator={false}
           showsVerticalScrollIndicator={false}
           data={isLoading && data.length === 0 ? new Array(6).fill(null) : data}
-          keyExtractor={(item, index) =>
-            `swimlane.top-rated-tv-shows.${item?.id || `index-${index}`}`
-          }
           renderItem={({ item }) => <Item id={item?.id} />}
         />
       </TVFocusGuideView>

diff --git a/src/components/Swimlane/TrendingToday/Item/index.tsx b/src/components/Swimlane/TrendingToday/Item/index.tsx
@@ -1,6 +1,6 @@
 import { NavigationProp, useNavigation } from '@react-navigation/native';
 import Card from 'components/Card';
-import Touchable from 'components/Touchable';
+import { Touchable } from 'components/Touchable';
 import { Route, RouteParams } from 'navigation';
 import React, { memo } from 'react';
 import { useMovie } from 'store/movies/hooks';

diff --git a/src/components/Swimlane/TrendingToday/index.tsx b/src/components/Swimlane/TrendingToday/index.tsx
@@ -35,11 +35,6 @@ const TrendingTodaySwimlane = ({ hideTitle, hasTVPreferredFocus }: Props) => {
           showsHorizontalScrollIndicator={false}
           showsVerticalScrollIndicator={false}
           data={isLoading && data.length === 0 ? new Array(6).fill(null) : data}
-          keyExtractor={(item, index) =>
-            `swimlane.trending-today.${
-              item ? `${item?.type}:${item?.id}` : `index-${index}`
-            }`
-          }
           renderItem={({ item, index }) => (
             <Item
               id={item?.id}

diff --git a/src/components/Touchable/component.tsx b/src/components/Touchable/component.tsx
@@ -0,0 +1,46 @@
+import React, { forwardRef, LegacyRef, useCallback, useState } from 'react';
+import {
+  NativeSyntheticEvent,
+  Platform,
+  TargetedEvent,
+  TouchableOpacity,
+} from 'react-native';
+
+import { TouchableContextProvider } from './context';
+import { TouchableProps } from './types';
+
+export const Touchable = forwardRef(
+  ({ onFocus, onBlur, children, ...props }: TouchableProps, ref) => {
+    const [hasFocus, setHasFocus] = useState(false);
+
+    const onFocusProxy = useCallback(
+      (e: NativeSyntheticEvent<TargetedEvent>) => {
+        setHasFocus(true);
+        onFocus?.(e);
+      },
+      [onFocus],
+    );
+
+    const onBlurProxy = useCallback(
+      (e: NativeSyntheticEvent<TargetedEvent>) => {
+        setHasFocus(false);
+        onBlur?.(e);
+      },
+      [onBlur],
+    );
+
+    return (
+      <TouchableOpacity
+        {...props}
+        onFocus={onFocusProxy}
+        onBlur={onBlurProxy}
+        activeOpacity={props.activeOpacity || Platform.isTV ? 1 : 0.7}
+        tvParallaxProperties={{ enabled: false }}
+        ref={ref as LegacyRef<TouchableOpacity>}>
+        <TouchableContextProvider hasFocus={hasFocus}>
+          {children}
+        </TouchableContextProvider>
+      </TouchableOpacity>
+    );
+  },
+);
diff --git a/src/components/Touchable/index.tsx b/src/components/Touchable/index.tsx
@@ -1,62 +1,3 @@
-import React, {
-  forwardRef,
-  LegacyRef,
-  memo,
-  useCallback,
-  useState,
-} from 'react';
-import {
-  NativeSyntheticEvent,
-  Platform,
-  TargetedEvent,
-  TouchableOpacity,
-  TouchableOpacityProps,
-  ViewProps,
-} from 'react-native';
-
-import { TouchableContextProvider } from './context';
-
-interface Props extends TouchableOpacityProps, ViewProps {}
-
-export type TouchableProps = Props;
-
-const Touchable = forwardRef(
-  ({ onFocus, onBlur, children, ...props }: Props, ref) => {
-    const [hasFocus, setHasFocus] = useState(false);
-
-    const onFocusProxy = useCallback(
-      (e: NativeSyntheticEvent<TargetedEvent>) => {
-        setHasFocus(true);
-        onFocus?.(e);
-      },
-      [onFocus],
-    );
-
-    const onBlurProxy = useCallback(
-      (e: NativeSyntheticEvent<TargetedEvent>) => {
-        setHasFocus(false);
-        onBlur?.(e);
-      },
-      [onBlur],
-    );
-
-    return (
-      <TouchableOpacity
-        {...props}
-        onFocus={onFocusProxy}
-        onBlur={onBlurProxy}
-        activeOpacity={props.activeOpacity || Platform.isTV ? 1 : 0.7}
-        tvParallaxProperties={{ enabled: false }}
-        ref={ref as LegacyRef<TouchableOpacity>}>
-        <TouchableContextProvider hasFocus={hasFocus}>
-          {children}
-        </TouchableContextProvider>
-      </TouchableOpacity>
-    );
-  },
-);
-
-export default memo(Touchable);
-
+export * from './component';
 export * from './useTouchable';
 export * from './withTouchable';
diff --git a/src/components/Touchable/types.ts b/src/components/Touchable/types.ts
@@ -0,0 +1,5 @@
+import { TouchableOpacityProps, ViewProps } from 'react-native';
+
+interface Props extends TouchableOpacityProps, ViewProps {}
+
+export type TouchableProps = Props;
diff --git a/src/components/Touchable/withTouchable.tsx b/src/components/Touchable/withTouchable.tsx
@@ -1,6 +1,7 @@
 import React, { ComponentType, forwardRef } from 'react';
 
-import Touchable, { TouchableProps } from './index';
+import { Touchable } from './component';
+import { TouchableProps } from './types';
 
 export const withTouchable = <Props extends Record<string, unknown>>(
   Component: ComponentType<Props>,