Fakultas Ilmu Komputer UI

Commit a5072bc9 authored by Faraz's avatar Faraz
Browse files

feat: integrate CategoryEcosystemListScreen and EcosystemDetailScreen, add params in EcosystemStack

parents a268a5c6 3c8a0c84
Pipeline #86208 passed with stage
in 8 minutes and 19 seconds
......@@ -6,10 +6,10 @@ import {
BusinessCategoryScreen,
BusinessListScreen,
EcosystemDetailScreen,
EcosystemListScreen,
EcosystemMapScreen,
RecommendedEcosystemScreen,
} from "../screens/ecosystem";
import CategoryEcosystemListScreen from "../screens/ecosystem/CategoryEcosystemListScreen";
const EcosystemStack = createNativeStackNavigator<EcosystemStackParamList>();
......@@ -36,7 +36,7 @@ const EcosystemStackNavigator = () => {
/>
<EcosystemStack.Screen
name="EcosystemList"
component={EcosystemListScreen}
component={CategoryEcosystemListScreen}
initialParams={{ headerTitle: "" }}
options={({ route }) => ({ title: route.params.headerTitle })}
/>
......
import { FlatList, SafeAreaView, StyleSheet } from "react-native";
import React, { 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 { IEcosystem } from "../types/firestore/ecosystems";
import IconForm from "../components/Forms/IconForm";
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";
// import { EcosystemStackScreenProps } from "../../types/navigation";
const CategoryEcosystemListScreen = () => {
// const nav = useNavigation();
const nav = useNavigation();
// const { toFetch } = route.params;
const [search, setSearch] = useState("");
const [
listData,
// setListData
] = useState([
{
id: "1",
image:
"https://asset.kompas.com/crops/O_Vgje1nMEqUCaDexq2UJdbyT14=/9x1:989x655/750x500/data/photo/2020/02/21/5e5008d10c825.jpg",
member: "100",
title: "Pengolahan Kerupuk",
rate: "5",
},
{
id: "2",
image:
"https://asset.kompas.com/crops/O_Vgje1nMEqUCaDexq2UJdbyT14=/9x1:989x655/750x500/data/photo/2020/02/21/5e5008d10c825.jpg",
member: "120",
title: "Pengolahan Kerupuk",
rate: "4.9",
},
{
id: "3",
image:
"https://asset.kompas.com/crops/O_Vgje1nMEqUCaDexq2UJdbyT14=/9x1:989x655/750x500/data/photo/2020/02/21/5e5008d10c825.jpg",
member: "130",
title: "Pengolahan Kerupuk",
rate: "5",
},
{
id: "4",
image:
"https://asset.kompas.com/crops/O_Vgje1nMEqUCaDexq2UJdbyT14=/9x1:989x655/750x500/data/photo/2020/02/21/5e5008d10c825.jpg",
member: "140",
title: "Pengolahan Kerupuk",
rate: "4.4",
},
{
id: "5",
image:
"https://asset.kompas.com/crops/O_Vgje1nMEqUCaDexq2UJdbyT14=/9x1:989x655/750x500/data/photo/2020/02/21/5e5008d10c825.jpg",
member: "100",
title: "Pengolahan Kerupuk",
rate: "4",
},
{
id: "6",
image:
"https://asset.kompas.com/crops/O_Vgje1nMEqUCaDexq2UJdbyT14=/9x1:989x655/750x500/data/photo/2020/02/21/5e5008d10c825.jpg",
member: "10",
title: "Pengolahan Kerupuk",
rate: "5",
},
]);
const [listData, setListData] = useState<IEcosystem[]>([]);
useEffect(() => {
getByCategory("A").then((res) => setListData(res));
});
return (
<SafeAreaView style={styles.container}>
<ScrollView style={styles.container}>
<View>
<IconForm
text={search}
......@@ -82,11 +37,23 @@ const CategoryEcosystemListScreen = () => {
return (
<View style={styles.horizontalCard}>
<HorizontalCards
image={item.image}
member={item.member}
title={item.title}
rate={item.rate}
onPress={null}
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>
);
......@@ -96,7 +63,7 @@ const CategoryEcosystemListScreen = () => {
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
/>
</SafeAreaView>
</ScrollView>
);
};
......
......@@ -6,23 +6,26 @@ import SmallButton from "../../components/button/SmallButton";
import Spacer from "../../components/Spacer/Spacer";
import { MaterialIcons } from "@expo/vector-icons";
import Layout from "../../constants/Layout";
import { EcosystemStackScreenProps } from "../../types/navigation";
const EcosystemDetailScreen = () => {
const EcosystemDetailScreen = ({
route,
}: EcosystemStackScreenProps<"EcosystemDetails">) => {
const { title, desc, image, member, rating } = route.params;
return (
<View style={styles.container}>
<View style={styles.imageWrapper}>
<Image
style={styles.image}
source={{
// uri: {image}
uri: "https://bsmedia.business-standard.com/_media/bs/img/article/2020-12/11/full/1607656152-0479.jpg",
uri: image,
}}
/>
</View>
<Spacer variant={"l"} />
<View style={styles.textWrapper}>
{/* <Text style={styles.title}>{Title}</Text> */}
<Text style={styles.title}>Petani Beras dan Gandum Jawa Tengah</Text>
<Text style={styles.title}>{title}</Text>
<Spacer variant={"l"} />
<SmallButton
text={"Lihat Peta Ekosistem"}
......@@ -34,8 +37,7 @@ const EcosystemDetailScreen = () => {
<View style={styles.bodyWrapper}>
<MaterialIcons name={"group"} style={styles.iconMember} size={30} />
<View style={styles.textWrapper}>
{/* <Text style={styles.iconText}>{member} Anggota</Text> */}
<Text style={styles.iconText}>350 Anggota</Text>
<Text style={styles.iconText}>{member} Anggota</Text>
</View>
</View>
<View style={styles.bodyWrapper}>
......@@ -43,18 +45,12 @@ const EcosystemDetailScreen = () => {
<View style={styles.textWrapper}>
{/* <Text style={styles.iconText}>{rate}</Text> */}
<Text style={styles.iconText}>4.7</Text>
<Text style={styles.iconText}>{rating}</Text>
</View>
</View>
</View>
<Spacer variant={"s"} />
<Text style={styles.textBody}>
{/* {content} */}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip.
</Text>
<Text style={styles.textBody}>{desc}</Text>
<Spacer variant={"xl"} />
<SmallButton
text={"Keluar dari Ekosistem"}
......
......@@ -3,6 +3,7 @@
* https://reactnavigation.org/docs/typescript/
*/
import { NativeStackScreenProps } from "@react-navigation/native-stack";
import { IEcosystem } from "../firestore/ecosystems";
export type EcosystemStackParamList = {
BusinessEcosystem: undefined;
......@@ -11,8 +12,15 @@ export type EcosystemStackParamList = {
EcosystemList: { headerTitle: string };
EcosystemMap: undefined;
BusinessList: { headerTitle: string };
EcosystemDetails: { headerTitle: string };
Recommended: { headerTitle: string; toFetch: string };
EcosystemDetails: {
headerTitle: string;
title: string;
desc: string;
image: string;
member: string;
rating: string;
};
Recommended: { headerTitle: string; toFetch: () => Promise<IEcosystem[]> };
};
export type EcosystemStackScreenProps<
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment