Fakultas Ilmu Komputer UI

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

feat: add business ecosystem screen

parent c6544c2d
......@@ -52,6 +52,7 @@ const styles = StyleSheet.create({
width: 210,
justifyContent: "center",
alignItems: "center",
marginRight: 16,
},
});
......
......@@ -10,7 +10,6 @@ import { getUser } from "../redux/user/actions";
import LandingScreen from "../screens/auth/LandingScreen";
import firebase from "firebase";
import { Alert } from "react-native";
import CreateBusinessEcosystemScreen from "../screens/CreateBusinessEcosystemScreen";
/**
* A root stack navigator is often used for displaying modals on top of all other content.
......@@ -74,11 +73,11 @@ const RootNavigator = () => {
component={SuccessChangePasswordScreen}
options={{ headerShown: false }}
/>
<RootStack.Screen
{/* <RootStack.Screen
name="CreateBusinessEcosystem"
component={CreateBusinessEcosystemScreen}
options={{ title: "" }}
/>
/> */}
</RootStack.Navigator>
) : (
<RootStack.Navigator>
......
......@@ -13,6 +13,7 @@ export default function LandingScreen({
<View style={styles.container}>
<Image
style={styles.logo}
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
source={require("../../../assets/images/ClickLogo.png")}
/>
</View>
......
import { useNavigation } from "@react-navigation/core";
import * as React from "react";
import { StyleSheet } from "react-native";
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 Spacer from "../../components/Spacer/Spacer";
import { Text, View } from "../../components/Themed";
import Colors from "../../constants/Colors";
import { useAppSelector } from "../../hooks/reduxHooks";
import { IUser } from "../../types/firestore/User";
import CategoryHorizontalCarousel from "../../components/carousel/CategoryHorizontalCarousel";
const BusinessEcosystemScreen = () => {
const nav = useNavigation();
const listData = [
{
id: "5",
pic: "https://asset.kompas.com/crops/O_Vgje1nMEqUCaDexq2UJdbyT14=/9x1:989x655/750x500/data/photo/2020/02/21/5e5008d10c825.jpg",
name: "Pengolahan Kerupuk",
rate: 4,
},
{
id: "6",
pic: "https://asset.kompas.com/crops/O_Vgje1nMEqUCaDexq2UJdbyT14=/9x1:989x655/750x500/data/photo/2020/02/21/5e5008d10c825.jpg",
name: "Pengolahan Kerupuk",
rate: 5,
},
];
const lists = [
{
id: "5",
name: "Pengolahan Kerupuk",
},
{
id: "6",
name: "Pengolahan Kerupuk",
},
];
const nav = useNavigation();
const user: IUser = useAppSelector((state) => state.user);
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("CreateBusinessEcosystem");
}}
/>
<Spacer variant="xl" />
<View>
<TouchableOpacity
onPress={() => {
nav.navigate("Ecosystem", { screen: "MyEcosystem" });
}}
>
<Text style={styles.link}>Ekosistem Saya</Text>
</TouchableOpacity>
<Text style={styles.text}>Ekosistem Bisnis</Text>
</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",
});
}}
>
<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: "MyEcosystem" })}
>
<Text style={{ fontSize: 16, color: Colors.text.link }}>
Lihat Semua
</Text>
</TouchableOpacity>
</View>
</View>
<Spacer variant="l" />
<VerticalEcosystemCarousel list={listData} />
<Spacer variant="xl" />
<View>
<TouchableOpacity
onPress={() => {
nav.navigate("Ecosystem", { screen: "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: "EcosystemDetails" })
}
>
<Text style={{ fontSize: 16, color: Colors.text.link }}>
Lihat Semua
</Text>
</TouchableOpacity>
</View>
</View>
<Spacer variant="l" />
<VerticalEcosystemCarousel list={listData} />
<Spacer variant="xl" />
<View>
<TouchableOpacity
onPress={() => {
nav.navigate("Ecosystem", { screen: "Latest" });
}}
>
<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",
})
}
>
<Text style={{ fontSize: 16, color: Colors.text.link }}>
Lihat Semua
</Text>
</TouchableOpacity>
</View>
</View>
<Spacer variant="l" />
<VerticalEcosystemCarousel list={listData} />
<Spacer variant="xl" />
<View>
<TouchableOpacity
onPress={() => {
nav.navigate("Ecosystem", { screen: "EcosystemMap" });
}}
>
<Text style={styles.link}>Peta Ekosistem</Text>
</TouchableOpacity>
<View style={styles.headContainer}>
<View style={styles.textContainer}>
<Text style={styles.subTitle}>Paling Populer</Text>
</View>
<View>
<TouchableOpacity
onPress={() => nav.navigate("Ecosystem", { screen: "Popular" })}
>
<Text style={{ fontSize: 16, color: Colors.text.link }}>
Lihat Semua
</Text>
</TouchableOpacity>
</View>
</View>
</View>
<Spacer variant="l" />
<CategoryHorizontalCarousel list={lists} />
<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: "Latest" })}
>
<Text style={{ fontSize: 16, color: Colors.text.link }}>
Lihat Semua
</Text>
</TouchableOpacity>
</View>
</View>
<Spacer variant="l" />
<VerticalEcosystemCarousel list={listData} />
<Spacer variant="xl" />
</ScrollView>
);
};
......@@ -93,14 +155,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,
},
});
......
......@@ -50,6 +50,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")
......
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