Fakultas Ilmu Komputer UI

Skip to content

GitLab

Commit d4a99efe authored by Mohammad Faraz Abisha Mirza's avatar Mohammad Faraz Abisha Mirza
Browse files

Merge branch 'branch-eco-screen' into 'master' 

Branch eco screen

See merge request !96
parents 85e42a9e 5c7deae6
Pipeline #86286 passed with stage
in 10 minutes and 22 seconds
Hide whitespace changes
Inline Side-by-side
src/components/carousel/CategoryHorizontalCarousel.tsx
View file @ d4a99efe
......@@ -2,12 +2,15 @@ import React from "react";
import { StyleSheet, View, FlatList, ScrollView } from "react-native";
import Spacer from "../Spacer/Spacer";
import ArrowlessPlainButton from "../button/ArrowlessPlainButton";
import { ICategory } from "../../types/firestore";
import { useNavigation } from "@react-navigation/core";
type props = {
list: { id: string; name: string }[];
list: ICategory[];
};
const CategoryHorizontalCarousel = ({ list }: props) => {
const nav = useNavigation();
return (
<ScrollView
horizontal={true}
......@@ -19,11 +22,22 @@ const CategoryHorizontalCarousel = ({ list }: props) => {
renderItem={({ item }) => {
return (
<View style={styles.slide}>
<ArrowlessPlainButton content={item.name} onPress={null} />
<ArrowlessPlainButton
content={item.name}
onPress={() =>
nav.navigate("Ecosystem", {
screen: "EcosystemList",
params: {
headerTitle: item.name,
toFetch: item.id,
},
})
}
/>
</View>
);
}}
numColumns={Math.ceil(list.length / 2)}
numColumns={6}
keyExtractor={(item) => item.id}
ItemSeparatorComponent={() => <Spacer variant={"l"} />}
showsVerticalScrollIndicator={false}
......
src/components/carousel/VerticalEcosystemCarousel.tsx
View file @ d4a99efe
......@@ -2,17 +2,15 @@ import React from "react";
import { StyleSheet, View, FlatList, ScrollView } from "react-native";
import Spacer from "../Spacer/Spacer";
import VerticalCard from "../Cards/VerticalCard";
import { IEcosystem } from "../../types/firestore/ecosystems";
import { useNavigation } from "@react-navigation/core";
type props = {
list: {
id: string;
name: string;
pic: string;
followerCount: number;
}[];
list: IEcosystem[];
};
const VerticalEcosystemCarousel = ({ list }: props) => {
const nav = useNavigation();
return (
<ScrollView
horizontal={true}
......@@ -29,7 +27,19 @@ const VerticalEcosystemCarousel = ({ list }: props) => {
members={item.followerCount}
title={item.name}
imageSource={item.pic}
onPressFunction={null}
onPressFunction={() => {
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>
);
......@@ -52,6 +62,7 @@ const styles = StyleSheet.create({
width: 210,
justifyContent: "center",
alignItems: "center",
marginRight: 16,
},
});
......
src/screens/EcosystemMapScreenDetail.tsx/CategoryEcosystemListScreen.tsx 0 → 100644
View file @ d4a99efe
// 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 { toFetch } = route.params;
// const [search, setSearch] = useState("");
// const [listData, setListData] = useState<IEcosystem[]>([]);
// useEffect(() => {
// getByCategory("A").then((res) => setListData(res));
// });
// 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;
src/screens/ecosystem/BusinessEcosystemScreen.tsx
View file @ d4a99efe
import { useNavigation } from "@react-navigation/core";
import React from "react";
import { StyleSheet } from "react-native";
import React, { useState, useEffect } from "react";
import { ScrollView, StyleSheet } from "react-native";
import { TouchableOpacity } from "react-native-gesture-handler";
import SmallButton from "../../components/button/SmallButton";
import VerticalEcosystemCarousel from "../../components/carousel/VerticalEcosystemCarousel";
import CategoryHorizontalCarousel from "../../components/carousel/CategoryHorizontalCarousel";
import Spacer from "../../components/Spacer/Spacer";
import { Text, View } from "../../components/Themed";
import Colors from "../../constants/Colors";
import { useUser } from "../../hooks/reduxHooks";
import ecosystemService from "../../service/firestore/ecosystem";
import { createEcosystem } from "../../service/functions/createEcosystem";
import { useAppSelector } from "../../hooks/reduxHooks";
import { getByMostRecent } from "../../service/firestore/ecosystem/getMostRecent";
import { getByPopularity } from "../../service/firestore/ecosystem/getByPopularity";
import { getByFollowed } from "../../service/firestore/ecosystem/getByFollowed";
import { IEcosystem } from "../../types/firestore/ecosystems";
import { IUser } from "../../types/firestore/User";
import { getCategories } from "../../service/firestore/categories";
import { ICategory } from "../../types/firestore";
const BusinessEcosystemScreen = () => {
const nav = useNavigation();
const user = useUser();
const user: IUser = useAppSelector((state) => state.user);
const [listData, setListData] = useState<IEcosystem[]>([]);
const [listBergabung, setListBergabung] = useState<IEcosystem[]>([]);
const [listTerbaru, setListTerbaru] = useState<IEcosystem[]>([]);
const [listCategory, setListCategory] = useState<ICategory[]>([]);
useEffect(() => {
getByPopularity().then((res) => {
setListData(res.slice(0, 5));
});
getByFollowed(user.id).then((res) => {
setListBergabung(res.slice(0, 5));
});
getByMostRecent().then((res) => {
setListTerbaru(res.slice(0, 5));
});
getCategories().then((res) => {
setListCategory(res.slice(0, 6));
});
}, []);
return (
<View style={styles.container}>
<ScrollView style={styles.container}>
<View>
<Text>Ekosistem Bisnis</Text>
<Text style={styles.textLink}>Selamat Datang, {user.firstName}</Text>
</View>
<Spacer variant="xl" />
<SmallButton
colors="primary"
text="Buat Ekosistem Bisnis"
onPress={() => {
nav.navigate("CreateEcosystem", {
screen: "CreateEcosystem",
});
}}
/>
<Spacer variant="xl" />
<View>
<TouchableOpacity
onPress={() => {
nav.navigate("Ecosystem", {
screen: "Recommended",
params: {
headerTitle: "Ekosistem Saya",
toFetch: "myEcosystem",
},
params: { headerTitle: "Ekosistem Saya", toFetch: "myEcosystem" },
});
}}
>
<Text style={styles.link}>Ekosistem Saya</Text>
<Text style={styles.textLink}>Ekosistem Saya</Text>
</TouchableOpacity>
</View>
<Spacer variant="xl" />
<View>
<TouchableOpacity
onPress={() => {
nav.navigate("Ecosystem", { screen: "EcosystemDetails" });
}}
>
<Text style={styles.link}>Sudah Bergabung</Text>
</TouchableOpacity>
<SmallButton
text={"Buat Ekosistem Bisnis"}
onPress={() => nav.navigate("CreateBusinessEcosystem")}
colors={"primary"}
/>
</View>
<Spacer variant="xl" />
<View>
<TouchableOpacity
onPress={() => {
nav.navigate("Ecosystem", {
screen: "BusinessCategory",
params: {
fromScreen: "BusinessEcosystem",
},
});
}}
>
<Text style={styles.link}>Kategori Bisnis</Text>
</TouchableOpacity>
<View style={styles.headContainer}>
<View style={styles.textContainer}>
<Text style={styles.subTitle}>Ekosistem Saya</Text>
</View>
<View>
<TouchableOpacity
onPress={() =>
nav.navigate("Ecosystem", {
screen: "Recommended",
params: {
headerTitle: "Ekosistem Saya",
toFetch: "myEcosystem",
},
})
}
>
<Text style={{ fontSize: 16, color: Colors.text.link }}>
Lihat Semua
</Text>
</TouchableOpacity>
</View>
</View>
<Spacer variant="xl" />
<View>
<TouchableOpacity
onPress={() => {
nav.navigate("Ecosystem", {
screen: "Recommended",
params: {
headerTitle: "Paling Populer",
toFetch: "popular",
},
});
}}
>
<Text style={styles.link}>Paling Populer</Text>
</TouchableOpacity>
<View style={styles.headContainer}>
<View style={styles.textContainer}>
<Text style={styles.subTitle}>Sudah bergabung</Text>
</View>
<View>
<TouchableOpacity
onPress={() =>
nav.navigate("Ecosystem", {
screen: "Recommended",
params: { headerTitle: "Sudah Bergabung", toFetch: "joined" },
})
}
>
<Text style={{ fontSize: 16, color: Colors.text.link }}>
Lihat Semua
</Text>
</TouchableOpacity>
</View>
</View>
<Spacer variant="l" />
<VerticalEcosystemCarousel list={listBergabung} />
<Spacer variant="xl" />
<View>
<TouchableOpacity
onPress={() => {
nav.navigate("Ecosystem", {
screen: "Recommended",
params: {
headerTitle: "Terbaru Minggu Ini",
toFetch: "mostRecent",
},
});
}}
>
<Text style={styles.link}>Terbaru Minggu Ini</Text>
</TouchableOpacity>
<View style={styles.headContainer}>
<View style={styles.textContainer}>
<Text style={styles.subTitle}>Kategori Bisnis</Text>
</View>
<View>
<TouchableOpacity
onPress={() =>
nav.navigate("Ecosystem", {
screen: "BusinessCategory",
params: {
fromScreen: "BusinessEcosystem",
},
})
}
>
<Text style={{ fontSize: 16, color: Colors.text.link }}>
Lihat Semua
</Text>
</TouchableOpacity>
</View>
</View>
<Spacer variant="l" />
<CategoryHorizontalCarousel list={listCategory} />
<Spacer variant="xl" />
<View>
<TouchableOpacity
onPress={() => {
nav.navigate("Ecosystem", { screen: "EcosystemMap" });
}}
>
<Text style={styles.link}>Peta Ekosistem</Text>
</TouchableOpacity>
</View>
<View>
<TouchableOpacity
onPress={() => {
createEcosystem({
ecosystem: {
creatorId: "abc",
name: "cebetEco",
description: "abc",
categoryId: "A",
pic: "",
rating: 0,
raters: 0,
followerCount: 0,
visibility: "public",
},
ecosystemCategoryMembers: [
{
categoryMember: {
categoryId: "B",
type: "supplier",
},
ecosystemMemberships: [
{
userId: "7n8uc62bS6UGUl29fODxIp7PAdn2",
},
],
},
{
categoryMember: {
categoryId: "D",
type: "supplier",
},
ecosystemMemberships: [
{
userId: "abciuh3789489ho340hdf",
},
{
userId: "sdfbubsdyuibabciuh3789489ho340h df",
},
{
userId: "uihgybubsdyuibabciuh3789489ho340h df",
},
],
<View style={styles.headContainer}>
<View style={styles.textContainer}>
<Text style={styles.subTitle}>Paling Populer</Text>
</View>
<View>
<TouchableOpacity
onPress={() =>
nav.navigate("Ecosystem", {
screen: "Recommended",
params: {
headerTitle: "Paling Populer",
toFetch: "popular",
},
],
});
}}
>
<Text style={styles.link}>Create</Text>
</TouchableOpacity>
})
}
>
<Text style={{ fontSize: 16, color: Colors.text.link }}>
Lihat Semua
</Text>
</TouchableOpacity>
</View>
</View>
<View>
<TouchableOpacity
onPress={() => {
ecosystemService.followEcosystem("FmclOe2dvRbIi7B2Ja5k", user.id);
}}
>
<Text style={styles.link}>Follow</Text>
</TouchableOpacity>
</View>
<View>
<TouchableOpacity
onPress={() => {
ecosystemService.unfollowEcosystem("FmclOe2dvRbIi7B2Ja5k", user.id);
}}
>
<Text style={styles.link}>Unfollow</Text>
</TouchableOpacity>
<Spacer variant="l" />
<VerticalEcosystemCarousel list={listData} />
<Spacer variant="xl" />
<View style={styles.headContainer}>
<View style={styles.textContainer}>
<Text style={styles.subTitle}>Terbaru Minggu Ini</Text>
</View>
<View>
<TouchableOpacity
onPress={() =>
nav.navigate("Ecosystem", {
screen: "Recommended",
params: { headerTitle: "Terbaru", toFetch: "mostRecent" },
})
}
>
<Text style={{ fontSize: 16, color: Colors.text.link }}>
Lihat Semua
</Text>
</TouchableOpacity>
</View>
</View>
</View>
<Spacer variant="l" />
<VerticalEcosystemCarousel list={listTerbaru} />
<Spacer variant="xl" />
</ScrollView>
);
};
......@@ -189,14 +189,29 @@ const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: Colors.background,
paddingHorizontal: 24,
justifyContent: "center",
padding: 24,
},
link: {
textLink: {
fontSize: 24,
color: Colors.text.link,
fontStyle: "normal",
fontSize: 14,
fontWeight: "400",
},
text: {
fontSize: 24,
color: Colors.text.title,
},
textContainer: {
flex: 1,
paddingRight: 118,
},
headContainer: {
flexDirection: "row",
justifyContent: "space-between",
paddingBottom: 16,
alignItems: "center",
},
subTitle: {
fontSize: 20,
color: Colors.text.subtitle,
},
});
......
src/screens/ecosystem/RecommendedEcosystemScreen.tsx
View file @ d4a99efe
......@@ -14,6 +14,7 @@ import { useNavigation } from "@react-navigation/core";
const RecommendedEcosystemScreen = ({
route,
}: EcosystemStackScreenProps<"Recommended">) => {
// Comment
const { toFetch } = route.params;
const nav = useNavigation();
......
src/screens/profile/AccountSettingsScreen.tsx
View file @ d4a99efe
......@@ -62,6 +62,7 @@ export default function AccountSettingsScreen({
<Image
style={styles.image}
source={
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
user.pic !== ""
? { uri: user.pic }
: require("../../../assets/images/defaultProfilePic.png")
......
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

Excellence In Teamwork