Fakultas Ilmu Komputer UI

Commit 1f5e3f4e authored by Mohammad Faraz Abisha Mirza's avatar Mohammad Faraz Abisha Mirza Committed by Ahmad Izzudin Alifyandra
Browse files

feat: Integrate Category List with Ecosystem List

parent 89611697
......@@ -48,6 +48,14 @@ const AlphabetGroupList = ({
},
});
}
} else if (fromScreen === "BusinessEcosystem") {
nav.navigate("Ecosystem", {
screen: "EcosystemList",
params: {
headerTitle: item.value,
toFetch: item.key,
},
});
}
}}
/>
......
......@@ -5,11 +5,11 @@ import { EcosystemStackParamList } from "../types/navigation/EcosystemStack";
import {
BusinessCategoryScreen,
EcosystemDetailScreen,
EcosystemListScreen,
EcosystemMapScreen,
RecommendedEcosystemScreen,
UserListScreen,
} 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 })}
/>
......
......@@ -61,6 +61,9 @@ const BusinessEcosystemScreen = () => {
onPress={() => {
nav.navigate("Ecosystem", {
screen: "BusinessCategory",
params: {
fromScreen: "BusinessEcosystem",
},
});
}}
>
......
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"}
......
import firebase from "firebase";
import { ICreateEcosystem } from "../../../types/firestore/createEcosystem";
export const createEcosystem = (createEcosystem: ICreateEcosystem) => {
createEcosystem.ecosystem.timestamp = firebase.firestore.Timestamp.now();
};
import { IEcosystem } from "./ecosystems";
import { IEcosystemCategoryMember } from "./ecosystemCategoryMember";
import { IEcosystemMembership } from "./ecosystemMembership";
export type ICreateEcosystem = {
ecosystem: IEcosystem;
ecosystemCategoryMembers: [
{
categoryMember: IEcosystemCategoryMember;
ecosystemCategoryMemberships: [IEcosystemMembership];
}
];
};
......@@ -3,15 +3,27 @@
* https://reactnavigation.org/docs/typescript/
*/
import { NativeStackScreenProps } from "@react-navigation/native-stack";
import { ecosystemItem } from "../listItems";
export type EcosystemStackParamList = {
BusinessEcosystem: undefined;
CreateEcosystem: undefined;
BusinessCategory: undefined;
EcosystemList: { headerTitle: string };
BusinessCategory: {
fromScreen?: string;
forGroup?: string;
ecosystemCategories?: ecosystemItem;
};
EcosystemList: { headerTitle: string; toFetch: string };
EcosystemMap: undefined;
EcosystemDetails: {
headerTitle: string;
title: string;
desc: string;
image: string;
member: string;
rating: string;
};
UserList: { headerTitle: string };
EcosystemDetails: { headerTitle: string };
Recommended: { headerTitle: string; toFetch: string };
};
......
Supports Markdown
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