Merge pull request #35 from piashcse/artist-movies-and-tvseries

Implemented artist movies and tv series

Author: piashcse

src/components/see-more/SeeMoreText.tsx

@@ -19,26 +19,28 @@ const SeeMoreText: React.FC<ReadMoreTextProps> = ({
   textStyle,
   numberOfLines = 3,
 }: ReadMoreTextProps) => {
-  const [showMoreButton, setShowMoreButton] = useState(false);
+  const [showMoreButton, setShowMoreButton] = useState(true);
   const [textShown, setTextShown] = useState(false);
   const [numLines, setNumLines] = useState<number | undefined>(numberOfLines);
 
   const toggleTextShown = () => {
-    setTextShown(!textShown);
+    setTextShown((prev) => !prev);
   };
 
   useEffect(() => {
-    setNumLines(textShown ? undefined : numLines);
-  }, [textShown]);
+    setNumLines(textShown ? undefined : numberOfLines);
+  }, [textShown, numberOfLines]);
 
   const onTextLayout = useCallback(
     (e: NativeSyntheticEvent<TextLayoutEventData>) => {
-      if (e.nativeEvent.lines.length > 3 && !textShown) {
+      const linesCount = e.nativeEvent.lines.length;
+      console.log('Total lines in text:', linesCount);
+
+      if (linesCount > numberOfLines && !showMoreButton) {
         setShowMoreButton(true);
-        setNumLines(numberOfLines);
       }
     },
-    [textShown]
+    [numberOfLines, showMoreButton]
   );
 
   return (
@@ -51,11 +53,12 @@ const SeeMoreText: React.FC<ReadMoreTextProps> = ({
       >
         {text}
       </Text>
-      {showMoreButton ? (
+
+      {showMoreButton && (
         <Text onPress={toggleTextShown} style={readMoreStyle}>
           {textShown ? 'See Less' : 'See More'}
         </Text>
-      ) : null}
+      )}
     </>
   );
 };

src/localization/AppString.ts

@@ -10,4 +10,5 @@ export const AppString = {
   min: 'min',
   title: 'Remove Favorite',
   message: 'Are you want to remove this item?',
+  artistMoviesAndTvSeries: 'Artist Movies & Tv Series',
 };

src/localization/locale-json/bn.json

@@ -9,5 +9,6 @@
   "artist": "Artist",
   "min": "min",
   "Remove Favorite": "ফেবারিট রিমুভ",
-  "Are you want to remove this item?": "আপনি কি এ আইটেমটি রিমুভ করতে চাচ্ছেন?"
+  "Are you want to remove this item?": "আপনি কি এ আইটেমটি রিমুভ করতে চাচ্ছেন?",
+  "Artist Movies & Tv Series": "Artist Movies & Tv Series"
 }

src/localization/locale-json/en.json

@@ -9,5 +9,6 @@
   "artist": "Artist",
   "min": "min",
   "Remove Favorite": "Remove Favorite",
-  "Are you want to remove this item?": "Are you want to remove this item?"
+  "Are you want to remove this item?": "Are you want to remove this item?":,
+  "Artist Movies & Tv Series": "Artist Movies & Tv Series"
 }

src/redux/query/RTKQuery.ts

@@ -2,7 +2,7 @@ import { createApi } from '@reduxjs/toolkit/query/react';
 import { MovieResult } from '../../types/MovieResult.ts';
 import { MovieItem } from '../../types/MovieItem.ts';
 import { MovieDetail } from '../../types/MovieDetail.ts';
-import { CastAndCrew } from '../../types/ArtistAndCrew.ts';
+import { Cast, CastAndCrew } from '../../types/ArtistAndCrew.ts';
 import { ArtistDetail } from '../../types/ArtistDetail.ts';
 import { TvSeriesResult } from '../../types/TvSeriesResult.ts';
 import { TvSeriesItem } from '../../types/TvSeriesItem.ts';
@@ -14,6 +14,7 @@ import {
 import baseQuery from './BaseQuery.ts';
 import { Pagination } from '../../types/ApiRequest/ApiRequest.ts';
 import { Celebrity, CelebrityItem } from '../../types/Celebrity.ts';
+import { CombinedCredit } from '../../types/CombinedCredit.ts';
 
 export const movieApi = createApi({
   reducerPath: 'movieApi',
@@ -138,6 +139,12 @@ export const movieApi = createApi({
       }),
       transformResponse: (response: Celebrity) => response.results,
     }),
+    artistMoviesAndTvSeries: builder.query<Cast[], number>({
+      query: (personId: number) => ({
+        url: `person/${personId}/combined_credits`,
+      }),
+      transformResponse: (response: CombinedCredit) => response.cast,
+    }),
   }),
 });
 
@@ -160,4 +167,5 @@ export const {
   useSearchMovieTvSeriesQuery,
   useLazyPopularCelebrityQuery,
   useLazyTrendingCelebrityQuery,
+  useLazyArtistMoviesAndTvSeriesQuery,
 } = movieApi;

src/screens/artist-detail/ArtistDetail.style.ts

@@ -78,5 +78,6 @@ const styles = StyleSheet.create({
     marginBottom: 8,
     color: colors.black,
   },
+  seeMoreTextStyle: { color: colors.primaryColor },
 });
 export default styles;

src/screens/artist-detail/ArtistDetail.tsx

@@ -1,19 +1,69 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import styles from './ArtistDetail.style.ts';
-import { Image, ScrollView, Text, View } from 'react-native';
+import {
+  FlatList,
+  Image,
+  ScrollView,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
 import { AppConstants } from '../../constant/AppConstants';
-import { useArtistDetailQuery } from '../../redux/query/RTKQuery.ts';
-import { RouteProp, useRoute } from '@react-navigation/native';
+import {
+  useArtistDetailQuery,
+  useLazyArtistMoviesAndTvSeriesQuery,
+} from '../../redux/query/RTKQuery.ts';
+import {
+  NavigationProp,
+  RouteProp,
+  useNavigation,
+  useRoute,
+} from '@react-navigation/native';
 import { SharedElement } from 'react-navigation-shared-element';
+import { useLocalization } from '../../hooks/useLocalization.ts';
+import { Cast } from '../../types/ArtistAndCrew.ts';
+import { RootStackParam } from '../../types/navigation/NavigationTypes.ts';
+import SeeMoreText from '../../components/see-more/SeeMoreText.tsx';
 
 type RouteParams = {
   personId: string;
 };
+type MovieDetailNavigationProp = NavigationProp<RootStackParam, 'MovieDetail'>;
 
 const ArtistDetail = () => {
+  const localization = useLocalization();
+  const navigation = useNavigation<MovieDetailNavigationProp>();
   const route = useRoute<RouteProp<{ params: RouteParams }, 'params'>>();
   const { personId } = route.params;
   const { data: artistDetail } = useArtistDetailQuery(Number(personId));
+  const [fetchArtistMovieAndTvSeries, { data: artistData }] =
+    useLazyArtistMoviesAndTvSeriesQuery();
+
+  useEffect(() => {
+    fetchArtistMovieAndTvSeries(1);
+  }, []);
+
+  const artistMovieAndTvSeriesItem = ({ item }: { item: Cast }) => {
+    return (
+      <TouchableOpacity
+        style={styles.movieItemContainer}
+        onPress={() => {
+          if (item.media_type == 'movie') {
+            navigation.navigate('MovieDetail', { movieId: item.id });
+          } else {
+            navigation.navigate('TvSeriesDetail', { tvSeriesId: item.id });
+          }
+        }}
+      >
+        <Image
+          style={styles.similarImageView}
+          source={{
+            uri: `${AppConstants.IMAGE_URL}${item.poster_path}`,
+          }}
+        />
+      </TouchableOpacity>
+    );
+  };
 
   return (
     <ScrollView style={styles.mainView}>
@@ -55,7 +105,24 @@ const ArtistDetail = () => {
         </View>
       </View>
       <Text style={styles.biography}>Biography</Text>
-      <Text>{artistDetail?.biography}</Text>
+      <SeeMoreText
+        text={artistDetail?.biography ?? ''}
+        numberOfLines={3}
+        readMoreStyle={styles.seeMoreTextStyle}
+      />
+      {artistData?.length && (
+        <Text style={styles.description}>
+          {localization.artistMoviesAndTvSeries}
+        </Text>
+      )}
+      <FlatList
+        style={styles.flatListContainer}
+        data={artistData}
+        renderItem={artistMovieAndTvSeriesItem}
+        keyExtractor={(item, index) => index.toString()}
+        horizontal={true}
+        showsHorizontalScrollIndicator={false}
+      />
     </ScrollView>
   );
 };

src/types/ArtistAndCrew.ts

@@ -17,6 +17,18 @@ export interface Cast {
   character: string;
   credit_id: string;
   order: number;
+  backdrop_path?: string;
+  genre_ids: number[];
+  original_language: string;
+  original_title: string;
+  overview: string;
+  poster_path?: string;
+  release_date: string;
+  title: string;
+  video: boolean;
+  vote_average: number;
+  vote_count: number;
+  media_type: string;
 }
 
 export interface Crew {

src/types/CombinedCredit.ts

@@ -0,0 +1,7 @@
+import { Cast, Crew } from './ArtistAndCrew.ts';
+
+export interface CombinedCredit {
+  cast: Cast[];
+  crew: Crew[];
+  id: number;
+}