Merge branch 'master' of https://github.com/hoangvu12/main

hoangvu12 · Feb 3, 2024 · d9e0744 · d9e0744
2 parents eda820f + 2c26dbc
commit d9e0744
Show file tree

Hide file tree

Showing 10 changed files with 151 additions and 36 deletions.
diff --git a/src/gql/gql.ts b/src/gql/gql.ts
@@ -87,7 +87,7 @@ const documents = {
     types.CardMediaFragmentDoc,
   '\n  fragment CharacterCard on CharacterEdge {\n    node {\n      id\n      name {\n        userPreferred\n      }\n      image {\n        large\n      }\n    }\n    role\n  }\n':
     types.CharacterCardFragmentDoc,
-  '\n  fragment MediaUnitStatsMedia on Media {\n    type\n    episodes\n    chapters\n    mediaListEntry {\n      progress\n    }\n    nextAiringEpisode {\n      episode\n    }\n  }\n':
+  '\n  fragment MediaUnitStatsMedia on Media {\n    type\n    episodes\n    chapters\n    mediaListEntry {\n      progress\n    }\n    nextAiringEpisode {\n      episode\n    }\n    status\n  }\n':
     types.MediaUnitStatsMediaFragmentDoc,
   '\n  fragment StaffCard on StaffEdge {\n    node {\n      id\n      name {\n        userPreferred\n      }\n      image {\n        large\n      }\n    }\n    role\n  }\n':
     types.StaffCardFragmentDoc,
@@ -333,8 +333,8 @@ export function graphql(
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(
-  source: '\n  fragment MediaUnitStatsMedia on Media {\n    type\n    episodes\n    chapters\n    mediaListEntry {\n      progress\n    }\n    nextAiringEpisode {\n      episode\n    }\n  }\n'
-): (typeof documents)['\n  fragment MediaUnitStatsMedia on Media {\n    type\n    episodes\n    chapters\n    mediaListEntry {\n      progress\n    }\n    nextAiringEpisode {\n      episode\n    }\n  }\n'];
+  source: '\n  fragment MediaUnitStatsMedia on Media {\n    type\n    episodes\n    chapters\n    mediaListEntry {\n      progress\n    }\n    nextAiringEpisode {\n      episode\n    }\n    status\n  }\n'
+): (typeof documents)['\n  fragment MediaUnitStatsMedia on Media {\n    type\n    episodes\n    chapters\n    mediaListEntry {\n      progress\n    }\n    nextAiringEpisode {\n      episode\n    }\n    status\n  }\n'];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */

diff --git a/src/gql/graphql.ts b/src/gql/graphql.ts
@@ -5402,6 +5402,7 @@ export type MediaUnitStatsMediaFragment = {
   type?: MediaType | null;
   episodes?: number | null;
   chapters?: number | null;
+  status?: MediaStatus | null;
   mediaListEntry?: {
     __typename?: 'MediaList';
     progress?: number | null;
@@ -5456,6 +5457,7 @@ export const MediaUnitStatsMediaFragmentDoc = {
               ],
             },
           },
+          { kind: 'Field', name: { kind: 'Name', value: 'status' } },
         ],
       },
     },
@@ -5539,6 +5541,7 @@ export const WatchCardFragmentDoc = {
               ],
             },
           },
+          { kind: 'Field', name: { kind: 'Name', value: 'status' } },
         ],
       },
     },
@@ -6027,6 +6030,7 @@ export const CardMediaFragmentDoc = {
               ],
             },
           },
+          { kind: 'Field', name: { kind: 'Name', value: 'status' } },
         ],
       },
     },
@@ -6095,6 +6099,7 @@ export const RelationListMediaFragmentDoc = {
               ],
             },
           },
+          { kind: 'Field', name: { kind: 'Name', value: 'status' } },
         ],
       },
     },
@@ -6213,6 +6218,7 @@ export const RecommendationListMediaFragmentDoc = {
               ],
             },
           },
+          { kind: 'Field', name: { kind: 'Name', value: 'status' } },
         ],
       },
     },
@@ -6801,6 +6807,7 @@ export const InfoScreenMediaFragmentDoc = {
               ],
             },
           },
+          { kind: 'Field', name: { kind: 'Name', value: 'status' } },
         ],
       },
     },
@@ -7615,6 +7622,7 @@ export const SearchLayoutContainerFragmentDoc = {
               ],
             },
           },
+          { kind: 'Field', name: { kind: 'Name', value: 'status' } },
         ],
       },
     },
@@ -7771,6 +7779,7 @@ export const BannerCardMediaFragmentDoc = {
               ],
             },
           },
+          { kind: 'Field', name: { kind: 'Name', value: 'status' } },
         ],
       },
     },
@@ -7931,6 +7940,7 @@ export const WatchedListDocument = {
               ],
             },
           },
+          { kind: 'Field', name: { kind: 'Name', value: 'status' } },
         ],
       },
     },
@@ -8261,6 +8271,7 @@ export const AuthWatchedListDocument = {
               ],
             },
           },
+          { kind: 'Field', name: { kind: 'Name', value: 'status' } },
         ],
       },
     },
@@ -9050,6 +9061,7 @@ export const AiringScheduleDocument = {
               ],
             },
           },
+          { kind: 'Field', name: { kind: 'Name', value: 'status' } },
         ],
       },
     },
@@ -9241,6 +9253,7 @@ export const PopularThisSeasonDocument = {
               ],
             },
           },
+          { kind: 'Field', name: { kind: 'Name', value: 'status' } },
         ],
       },
     },
@@ -9435,6 +9448,7 @@ export const UpcomingNextSeasonDocument = {
               ],
             },
           },
+          { kind: 'Field', name: { kind: 'Name', value: 'status' } },
         ],
       },
     },
@@ -9742,6 +9756,7 @@ export const InfoDetailsScreenDocument = {
               ],
             },
           },
+          { kind: 'Field', name: { kind: 'Name', value: 'status' } },
         ],
       },
     },
@@ -12299,6 +12314,7 @@ export const MediaDocument = {
               ],
             },
           },
+          { kind: 'Field', name: { kind: 'Name', value: 'status' } },
         ],
       },
     },
@@ -12505,6 +12521,7 @@ export const BannerCardDocument = {
               ],
             },
           },
+          { kind: 'Field', name: { kind: 'Name', value: 'status' } },
         ],
       },
     },

diff --git a/src/screens/anime/details/screens/episode-screen/components/episode-container.tsx b/src/screens/anime/details/screens/episode-screen/components/episode-container.tsx
@@ -1,6 +1,6 @@
 import { useAtomValue, useSetAtom } from 'jotai/react';
 import { RotateCwIcon } from 'lucide-react-native';
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { Else, If, Then } from 'react-if';
 
 import { type FragmentType, graphql, useFragment } from '@/gql';
@@ -38,8 +38,15 @@ const EpisodeContainer: React.FC<EpisodeContainerProps> = ({
 }) => {
   const media = useFragment(EpisodeContainerFragment, mediaFragment);
   const currentModuleId = useAtomValue(currentModuleIdAtom);
-
-  const { data, isLoading, isRefetching, refetch } = useEpisodes(media);
+  const [episodeFetchingStatus, setEpisodeFetchingStatus] = useState<{
+    isError: boolean;
+    status: string;
+  }>({ isError: false, status: '' });
+
+  const { data, isLoading, isRefetching, refetch } = useEpisodes(
+    media,
+    setEpisodeFetchingStatus
+  );
   const setSectionEpisodes = useSetAtom(sectionEpisodesAtom);
   const setEpisodeChunk = useSetAtom(episodeChunkAtom);
 
@@ -106,15 +113,23 @@ const EpisodeContainer: React.FC<EpisodeContainerProps> = ({
           <Then>
             <View className="mt-8">
               <ActivityIndicator color={colors.primary[500]} size={48} />
+
+              {!episodeFetchingStatus.isError && (
+                <Text className="mt-2 text-center font-semibold text-gray-300">
+                  {episodeFetchingStatus.status}
+                </Text>
+              )}
             </View>
           </Then>
 
           <Else>
             <If condition={!data?.length}>
               <Then>
-                <Text className="text-center">
-                  There are no episodes for this anime
-                </Text>
+                {episodeFetchingStatus.isError && (
+                  <Text className="text-center">
+                    {episodeFetchingStatus.status}
+                  </Text>
+                )}
               </Then>
 
               <Else>

diff --git a/src/screens/anime/details/screens/episode-screen/hooks/use-episodes.tsx b/src/screens/anime/details/screens/episode-screen/hooks/use-episodes.tsx
@@ -34,33 +34,47 @@ export const useAnimeEpisodeFragment = graphql(`
 `);
 
 const useEpisodes = (
-  mediaFragment: FragmentType<typeof useAnimeEpisodeFragment>
+  mediaFragment: FragmentType<typeof useAnimeEpisodeFragment>,
+  onStatusChange?: (change: { isError: boolean; status: string }) => void
 ) => {
   const media = useFragment(useAnimeEpisodeFragment, mediaFragment);
 
-  const { data, isLoading: isAnimeIdLoading } = useAnimeId(media);
+  const { data: animeId, isLoading: isAnimeIdLoading } = useAnimeId(media);
 
   const queryKey = ['episodes', media.id];
 
-  if (data?.data) {
-    queryKey.push(data.data);
+  if (animeId?.data) {
+    queryKey.push(animeId.data);
   }
 
   const episodes = useWebViewData(
     queryKey,
     async (webview) => {
-      if (!data?.data) {
+      onStatusChange?.({ isError: false, status: 'Loading anime id' });
+
+      if (!animeId?.data) {
+        if (isAnimeIdLoading) {
+          onStatusChange?.({ isError: false, status: 'Loading anime id' });
+        } else {
+          onStatusChange?.({ isError: true, status: 'Cannot find anime id' });
+        }
+
         return [];
       }
 
       const nonValidatedEpisodesPromise = webview.sendMessage<Episode[]>(
         'anime.getEpisodes',
         {
-          animeId: data?.data,
-          extraData: data?.extraData,
+          animeId: animeId?.data,
+          extraData: animeId?.extraData,
         }
       );
 
+      onStatusChange?.({
+        isError: false,
+        status: 'Loading episodes',
+      });
+
       const metadataEpisodesPromise = getEpisodeInfo(media);
 
       const [nonValidatedEpisodesResult, metadataEpisodesResult] =
@@ -70,6 +84,11 @@ const useEpisodes = (
         ]);
 
       if (nonValidatedEpisodesResult.status === 'rejected') {
+        onStatusChange?.({
+          isError: true,
+          status: 'Cannot find episodes',
+        });
+
         return [];
       }
 
@@ -78,10 +97,9 @@ const useEpisodes = (
         .safeParse(nonValidatedEpisodesResult.value);
 
       if (!validation.success) {
-        Toast.show({
-          type: 'error',
-          text1: 'Cannot find episodes',
-          text2: validation.error.message,
+        onStatusChange?.({
+          isError: true,
+          status: 'Cannot find episodes',
         });
 
         return [];
@@ -117,8 +135,6 @@ const useEpisodes = (
         };
       });
 
-      console.log('episodes', episodes);
-
       return episodes;
     },
 
@@ -130,7 +146,6 @@ const useEpisodes = (
           text2: err,
         });
       },
-      enabled: !isAnimeIdLoading,
       retry: 0,
 
       // For some reason, when calling useEpisodes in watch screen, it will return empty episodes

diff --git a/src/screens/anime/watch/components/error-message.tsx b/src/screens/anime/watch/components/error-message.tsx
@@ -1,14 +1,16 @@
 import { useNavigation } from '@react-navigation/native';
+import { ArrowLeft, RefreshCcw } from 'lucide-react-native';
 import React from 'react';
 
 import { Button, Text, View } from '@/ui';
 import Sticker from '@/ui/sticker';
 
 interface ErrorMessageProps {
   message: string;
+  onRetry?: () => void;
 }
 
-const ErrorMessage: React.FC<ErrorMessageProps> = ({ message }) => {
+const ErrorMessage: React.FC<ErrorMessageProps> = ({ message, onRetry }) => {
   const navigation = useNavigation();
 
   const handleGoBack = () => {
@@ -25,9 +27,19 @@ const ErrorMessage: React.FC<ErrorMessageProps> = ({ message }) => {
 
       <Text>{message}</Text>
 
-      <Button className="mt-2" onPress={handleGoBack}>
-        <Text>Go back</Text>
-      </Button>
+      <View className="mt-2 flex flex-row items-center space-x-2">
+        <Button onPress={handleGoBack}>
+          <ArrowLeft size={16} style={{ color: 'white' }} />
+
+          <Text>Go back</Text>
+        </Button>
+
+        <Button className="bg-gray-600" onPress={onRetry}>
+          <RefreshCcw size={16} style={{ color: 'white' }} />
+
+          <Text className="ml-2">Retry</Text>
+        </Button>
+      </View>
     </View>
   );
 };