Fakultas Ilmu Komputer UI

Commit f1174af9 authored by angelin depthios's avatar angelin depthios
Browse files

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

create Ecosystem list screen and Category Ecosystem List (minus integration)

See merge request !68
parents 62e3bffa f66691fc
Pipeline #86124 passed with stage
in 9 minutes and 9 seconds
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";
const CategoryEcosystemListScreen = () => {
const nav = useNavigation();
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",
},
]);
return (
<SafeAreaView 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.image}
member={item.member}
title={item.title}
rate={item.rate}
onPress={null}
/>
</View>
);
}}
keyExtractor={(item) => item.id}
ItemSeparatorComponent={() => <Spacer variant={"l"} />}
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
/>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
padding: 24,
backgroundColor: Colors.background,
},
horizontalCard: {
paddingHorizontal: 4,
paddingTop: 2,
},
});
export default CategoryEcosystemListScreen;
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 { IEcosystemList } from "../types/ecosystemList";
const EcosystemListScreen = () => {
const nav = useNavigation();
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",
},
]);
return (
<SafeAreaView style={styles.container}>
<FlatList
data={listData}
renderItem={({ item }) => {
return (
<View style={styles.horizontalCard}>
<HorizontalCards
image={item.image}
member={item.member}
title={item.title}
rate={item.rate}
onPress={null}
/>
</View>
);
}}
keyExtractor={(item) => item.id}
ItemSeparatorComponent={() => <Spacer variant={"l"} />}
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
/>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
padding: 24,
backgroundColor: Colors.background,
},
horizontalCard: {
paddingHorizontal: 4,
paddingTop: 2,
},
});
export default EcosystemListScreen;
...@@ -104,7 +104,7 @@ const RegisterGoogleFacebookScreen = ({ ...@@ -104,7 +104,7 @@ const RegisterGoogleFacebookScreen = ({
</Text> </Text>
</View> </View>
<Spacer variant={"l"} /> <Spacer variant={"l"} />
<View style={styles.button}> <View style={styles.componentWrapper}>
<MainButton text="Daftar" colors="primary" onPress={() => {}} /> <MainButton text="Daftar" colors="primary" onPress={() => {}} />
</View> </View>
<Spacer variant={"xl"} /> <Spacer variant={"xl"} />
......
export type IEcosystemList = {
variant: "terbaru" | "bergabung" | "populer";
};
export type IEcosystem = {
item: {
id?: string;
image: string;
member: string;
title: string;
rate: 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