tmdb-app-react-native/GridView.js at master · baonguyen2002/tmdb-app-react-native · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
import React, { PureComponent, useCallback } from "react";
import { View, Text, FlatList, Image, TouchableOpacity } from "react-native";

import { Badge } from "@rneui/themed";
import { useNavigation } from "@react-navigation/native";
const GridView = ({ data, dataType, navigationDestination, origin }) => {
  const navigation = useNavigation();
  const renderItem = useCallback(
    ({ item }) => {
      if (item.adult) {
        // If item.adult is true, return null to skip rendering the item
        return null;
      }
      return (
        <Item
          item={item}
          dataType={dataType}
          navigation={navigation}
          navigationDestination={navigationDestination}
          origin={origin}
        />
      );
    },
    [dataType, navigation, navigationDestination, origin]
  );

  return (
    <FlatList
      className="bg-teal-500"
      columnWrapperStyle={{
        justifyContent: "space-evenly",
      }}
      data={data}
      numColumns={2}
      maxToRenderPerBatch={6}
      initialNumToRender={4}
      updateCellsBatchingPeriod={2000}
      renderItem={renderItem}
      keyExtractor={(item) => item.id}
    />
  );
};

class Item extends PureComponent {
  render() {
    const { item, dataType, navigation, navigationDestination, origin } =
      this.props;

    const header = dataType === "movie" ? item.title : item.name;
    const date = dataType === "movie" ? item.release_date : item.first_air_date;
    return (
      <TouchableOpacity
        onPress={() => {
          //console.log("series_id:", item.id, "movie_id:", item.id);
          navigation.navigate(navigationDestination, {
            series_id: item.id,
            movie_id: item.id,
            header: header,
            origin: origin,
          });
        }}
        className="w-[48%] bg-teal-500 mb-0.5 rounded-2xl items-center p-2 border-2 border-violet-800"
      >
        {item.poster_path ? (
          <Image
            source={{
              uri: `https://image.tmdb.org/t/p/w185/${item.poster_path}`,
            }}
            className="w-full border-2 rounded-lg h-60 flex-2"
          />
        ) : (
          <Image
            source={require("./assets/blank.png")}
            className="w-full border-2 rounded-lg h-60 flex-2"
          />
        )}

        <Text className="text-base font-semibold text-center text-[#0d253f]">
          {header}
        </Text>
        <View className="flex flex-row items-center w-full justify-evenly">
          {date ? (
            <Text className="font-medium text-violet-800">
              Year: {date.split("-")[0]}
            </Text>
          ) : null}
          {item.vote_average ? (
            <Badge
              value={item.vote_average}
              status={
                item.vote_average > 8
                  ? "success"
                  : item.vote_average > 4
                  ? "warning"
                  : "error"
              }
              badgeStyle={{
                height: 22,
              }}
              textStyle={{
                fontSize: 14,
                fontWeight: "bold",
                color: "black",
              }}
            />
          ) : null}
        </View>
      </TouchableOpacity>
    );
  }
}

export default GridView;