feat: major rewrite for better maintanability and clarity

Author: saulojoab

__tests__/App-test.tsx

@@ -4,7 +4,7 @@
 
 import 'react-native';
 import React from 'react';
-import App from '@/screens/Search';
+import App from '@/screens/Search/Search';
 
 // Note: test renderer must be required after react-native.
 import renderer from 'react-test-renderer';

src/containers/Home/SectionContainer/index.tsx

@@ -4,12 +4,12 @@ import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import {
   Search,
-  MangaDetails,
-  MangaReader,
+  Manga,
+  Reader,
   Home,
-  SelectSources,
+  Sources,
   Login,
-  SignUp,
+  Signup,
   Profile,
 } from '@/screens';
 import Icon from 'react-native-vector-icons/FontAwesome5';
@@ -102,11 +102,11 @@ export default function App() {
       }}
     >
       <Stack.Screen name="Login" component={Login} />
-      <Stack.Screen name="SignUp" component={SignUp} />
+      <Stack.Screen name="Signup" component={Signup} />
       <Stack.Screen name="Main" component={TabNavigator} />
-      <Stack.Screen name="MangaDetails" component={MangaDetails} />
-      <Stack.Screen name="MangaReader" component={MangaReader} />
-      <Stack.Screen name="SelectSources" component={SelectSources} />
+      <Stack.Screen name="Manga" component={Manga} />
+      <Stack.Screen name="Reader" component={Reader} />
+      <Stack.Screen name="Sources" component={Sources} />
     </Stack.Navigator>
   );
 }

src/containers/Home/TrendingTodayContainer/index.tsx

@@ -1,24 +1,15 @@
-import responsive from '@/global/utils/responsive';
-import { useAppDispatch, useAppSelector } from '@/hooks/redux';
-import { setSelectedManga } from '@/redux/features/mangaSlice';
+import { useAppSelector, useAppDispatch } from '@/hooks/redux';
+import {
+  setCurrentlyReading,
+  setSelectedManga,
+} from '@/redux/features/mangaSlice';
 import { useNavigation } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
-import React, { useEffect, useState } from 'react';
-import styled from 'styled-components/native';
-import { setCurrentlyReading } from '@/redux/features/mangaSlice';
-import { ActivityIndicator } from 'react-native';
 import CURRENTLY_READING_REQUESTS from '@/services/requests/currently-reading';
+import { useState, useEffect } from 'react';
+import { CurrentlyReadingMangaProps } from './ContinueReading.type';
 
-interface CurrentlyReadingMangaProps {
-  id: string;
-  currentChapter: string;
-  finishedChapters: string[];
-  image: string;
-  source: string;
-  referer: string;
-}
-
-export default function ContinueReadingContainer() {
+export const useContinueReadingService = () => {
   const { currentlyReading } = useAppSelector(state => state.manga);
   const user = useAppSelector(state => state.auth.user);
   const [loading, setLoading] = useState(false);
@@ -49,7 +40,7 @@ export default function ContinueReadingContainer() {
         referer: manga.referer,
       }),
     );
-    navigation.navigate('MangaDetails');
+    navigation.navigate('Manga');
   }
 
   function handleRemoveFromReading() {
@@ -72,62 +63,11 @@ export default function ContinueReadingContainer() {
     return texts[Math.floor(Math.random() * texts.length)];
   }
 
-  if (loading) {
-    return (
-      <LoadingContainer>
-        <ActivityIndicator size="large" color="#fff" />
-      </LoadingContainer>
-    );
-  }
-
-  console.log(currentlyReading);
-
-  if (currentlyReading.length === 0) {
-    return <NotReadingAnythingText>{getRandomText()}</NotReadingAnythingText>;
-  }
-
-  return (
-    <>
-      <MangaList
-        data={currentlyReading}
-        renderItem={({ item: manga }: any) => (
-          <MangaPressable
-            onLongPress={() => handleRemoveFromReading()}
-            onPress={() => handleContinueReading(manga)}
-          >
-            <MangaImage source={{ uri: manga.image || '' }} />
-          </MangaPressable>
-        )}
-        horizontal
-      />
-    </>
-  );
-}
-
-const MangaImage = styled.Image`
-  width: ${responsive(150)}px;
-  height: ${responsive(220)}px;
-  margin-right: ${responsive(15)}px;
-`;
-
-const NotReadingAnythingText = styled.Text`
-  font-size: ${responsive(15)}px;
-  font-family: ${({ theme }) => theme.fonts.lightItalic};
-  color: ${({ theme }) => theme.colors.white};
-  padding-left: ${responsive(10)}px;
-  padding-right: ${responsive(20)}px;
-  margin-top: ${responsive(10)}px;
-  margin-bottom: ${responsive(20)}px;
-  text-align: justify;
-`;
-
-const MangaPressable = styled.TouchableOpacity``;
-
-const MangaList = styled.FlatList``;
-
-const LoadingContainer = styled.View`
-  width: ${responsive(150)}px;
-  height: ${responsive(220)}px;
-  align-items: center;
-  justify-content: center;
-`;
+  return {
+    loading,
+    currentlyReading,
+    handleRemoveFromReading,
+    handleContinueReading,
+    getRandomText,
+  };
+};

src/containers/Home/index.tsx

@@ -0,0 +1,30 @@
+import responsive from '@/global/utils/responsive';
+import styled from 'styled-components/native';
+
+export const MangaImage = styled.Image`
+  width: ${responsive(150)}px;
+  height: ${responsive(220)}px;
+  margin-right: ${responsive(15)}px;
+`;
+
+export const NotReadingAnythingText = styled.Text`
+  font-size: ${responsive(15)}px;
+  font-family: ${({ theme }) => theme.fonts.lightItalic};
+  color: ${({ theme }) => theme.colors.white};
+  padding-left: ${responsive(10)}px;
+  padding-right: ${responsive(20)}px;
+  margin-top: ${responsive(10)}px;
+  margin-bottom: ${responsive(20)}px;
+  text-align: justify;
+`;
+
+export const MangaPressable = styled.TouchableOpacity``;
+
+export const MangaList = styled.FlatList``;
+
+export const LoadingContainer = styled.View`
+  width: ${responsive(150)}px;
+  height: ${responsive(220)}px;
+  align-items: center;
+  justify-content: center;
+`;