Fakultas Ilmu Komputer UI

CategoryEcosystemListScreen.tsx 2.59 KB
Newer Older
1
2
3
4
5
6
7
8
9
10
import { FlatList, ScrollView, StyleSheet } from "react-native";
import React, { useEffect, useState } from "react";
import HorizontalCards from "../../components/Cards/HorizontalCards";
import { useNavigation } from "@react-navigation/core";
import Colors from "../../constants/Colors";
import { View } from "../../components/Themed";
import Spacer from "../../components/Spacer/Spacer";
import IconForm from "../../components/Forms/IconForm";
import { getByCategory } from "../../service/firestore/ecosystem/getByCategory";
import { IEcosystem } from "../../types/firestore/ecosystems";
11
import { EcosystemStackScreenProps } from "../../types/navigation";
12

13
14
15
const CategoryEcosystemListScreen = ({
  route,
}: EcosystemStackScreenProps<"EcosystemList">) => {
16
  const nav = useNavigation();
17
  const { toFetch } = route.params;
18
19
20
21
  const [search, setSearch] = useState("");
  const [listData, setListData] = useState<IEcosystem[]>([]);

  useEffect(() => {
22
    getByCategory(toFetch).then((res) => setListData(res));
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
  });

  return (
    <ScrollView style={styles.container}>
      <View>
        <IconForm
          text={search}
          setText={setSearch}
          placeholder={"Cari di kategori ini"}
          search
        />
      </View>
      <Spacer variant={"xl"} />
      <FlatList
        data={listData}
        renderItem={({ item }) => {
          return (
            <View style={styles.horizontalCard}>
              <HorizontalCards
                image={item.pic}
                member={item.followerCount.toString()}
                title={item.name}
                rate={item.rating.toString()}
                onPress={() =>
                  nav.navigate("Ecosystem", {
                    screen: "EcosystemDetails",
                    params: {
                      headerTitle: item.name,
                      title: item.name,
                      desc: item.description,
                      image: item.pic,
                      member: item.followerCount.toString(),
                      rating: item.rating.toString(),
                    },
                  })
                }
              />
            </View>
          );
        }}
        keyExtractor={(item) => item.id}
        ItemSeparatorComponent={() => <Spacer variant={"l"} />}
        showsVerticalScrollIndicator={false}
        showsHorizontalScrollIndicator={false}
      />
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 24,
    backgroundColor: Colors.background,
  },
  horizontalCard: {
    paddingHorizontal: 4,
    paddingTop: 2,
  },
});

export default CategoryEcosystemListScreen;