Fakultas Ilmu Komputer UI

Commit feec42ae authored by Ahmad Izzudin Alifyandra's avatar Ahmad Izzudin Alifyandra
Browse files

Merge branch 'category-ecosystem-list' into 'master'

feat: Integrate Category List with Ecosystem List

See merge request !94
parents e6fa1160 1f5e3f4e
Pipeline #86255 passed with stage
in 13 minutes and 7 seconds
......@@ -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