Fakultas Ilmu Komputer UI

Commit 1b7ff0b6 authored by Ahmad Izzudin Alifyandra's avatar Ahmad Izzudin Alifyandra
Browse files

PBI 13 create ecosystem page

parent 3c8a0c84
......@@ -3,13 +3,11 @@ import React from "react";
import { SafeAreaProvider } from "react-native-safe-area-context";
import { Provider as StoreProvider } from "react-redux";
import useCachedResources from "./src/hooks/useCachedResources";
import useColorScheme from "./src/hooks/useColorScheme";
import Navigation from "./src/navigation";
import store from "./src/redux/store";
export default function App() {
const isLoadingComplete = useCachedResources();
const colorScheme = useColorScheme();
if (!isLoadingComplete) {
return null;
} else {
......
......@@ -39,6 +39,7 @@ export default {
appId: process.env.appId,
measurementId: process.env.measurementId,
env: process.env.env,
cloudFunctionsUrl: process.env.cloudFunctionsUrl,
},
},
};
......@@ -5,10 +5,14 @@ const FirebaseConfig = {
apiKey: Constants.manifest.extra?.apiKey || process.env.apiKey,
authDomain: Constants.manifest.extra?.authDomain || process.env.authDomain,
projectId: Constants.manifest.extra?.projectId || process.env.projectid,
storageBucket: Constants.manifest.extra?.storageBucket || process.env.storageBucket,
messagingSenderId: Constants.manifest.extra?.messagingSenderId || process.env.messagingSenderId,
storageBucket:
Constants.manifest.extra?.storageBucket || process.env.storageBucket,
messagingSenderId:
Constants.manifest.extra?.messagingSenderId ||
process.env.messagingSenderId,
appId: Constants.manifest.extra?.appId || process.env.appId,
measurementId: Constants.manifest.extra?.measurementId || process.env.measurementId,
measurementId:
Constants.manifest.extra?.measurementId || process.env.measurementId,
};
export default FirebaseConfig;
import React from "react";
import { View, Text, StyleSheet } from "react-native";
import PlainForm from "../Forms/PlainForm";
import Spacer from "../Spacer/Spacer";
import DropdownForm from "../Forms/DropdownForm";
import Colors from "../../constants/Colors";
type props = {
ecosystemName: string;
setEcosystemName: React.Dispatch<React.SetStateAction<string>>;
ecosystemDetails: string;
setEcosystemDetails: React.Dispatch<React.SetStateAction<string>>;
ecosystemCategory: string;
setEcosystemCategory: React.Dispatch<React.SetStateAction<string>>;
items: any[];
setItems: React.Dispatch<React.SetStateAction<any[]>>;
};
const TopForms = ({
ecosystemName,
setEcosystemName,
ecosystemDetails,
setEcosystemDetails,
ecosystemCategory,
setEcosystemCategory,
items,
setItems,
}: props) => {
return (
<View style={styles.componentWrapper}>
<View style={styles.componentWrapper}>
<Text style={styles.title}>Buat Ekosistem Bisnis</Text>
</View>
<Spacer variant="xl" />
<View style={styles.componentWrapper}>
<Text style={styles.subtitle}>
Silahkan masukkan data berikut untuk membuat ekosistem bisnis
</Text>
</View>
<Spacer variant="xl" />
<View style={styles.componentWrapper}>
<PlainForm
formTitle="Nama Ekosistem Bisnis"
placeholder="Masukkan Nama Ekosistem Bisnis"
text={ecosystemName}
setText={setEcosystemName}
errorMessage="Silahkan masukkan nama ekosistem"
/>
</View>
<Spacer variant="xl" />
<View style={styles.componentWrapper}>
<PlainForm
formTitle="Deskripsi Ekosistem Bisnis"
placeholder="Masukkan Deskripsi Ekosistem Bisnis"
text={ecosystemDetails}
setText={setEcosystemDetails}
errorMessage="Silahkan masukkan deskripsi ekosistem bisnis"
/>
</View>
<Spacer variant="xl" />
<View style={styles.componentWrapper}>
<View style={styles.componentWrapper}>
<Text style={styles.componentTitle}>Kategori Ekosistem Bisnis</Text>
</View>
<Spacer variant="m" />
<DropdownForm
value={ecosystemCategory}
setValue={setEcosystemCategory}
items={items}
setItems={setItems}
formPlaceholder="Pilih Kategori Ekosistem Binis"
searchPlaceholder="Cari Kategori Bisnis"
/>
</View>
<Spacer variant="xl" />
<View style={styles.componentWrapper}>
<Text style={styles.componentTitleBold}>Anggota Supplier</Text>
</View>
<Spacer variant="m" />
</View>
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: Colors.background,
padding: 24,
},
componentWrapper: {
width: "100%",
},
title: {
fontSize: 32,
fontWeight: "500",
color: Colors.text.title,
},
subtitle: {
fontSize: 20,
fontWeight: "300",
color: Colors.text.subtitle,
},
listText: {
fontSize: 14,
fontWeight: "300",
color: Colors.text.link,
},
warningText: {
fontSize: 14,
fontWeight: "bold",
color: Colors.button.warning.bg,
},
membersCount: {
fontSize: 14,
fontWeight: "300",
color: Colors.text.body,
},
componentTitle: {
fontSize: 14,
width: "100%",
color: Colors.text.subtitle,
fontWeight: "300",
},
componentTitleBold: {
fontSize: 14,
width: "100%",
color: Colors.text.subtitle,
fontWeight: "bold",
},
});
export default TopForms;
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { Alert, StyleSheet, Text, View } from "react-native";
import { AlphabetList } from "react-native-section-alphabet-list";
import PlainButton from "../button/PlainButton";
import Colors from "../../constants/Colors";
import { IData, ISectionData } from "../../types/alphabetGroupList";
import { useNavigation } from "@react-navigation/core";
import { ecosystemItem } from "../../types/ListItems";
type props = {
data: IData[];
fromScreen?: string;
forGroup?: string;
ecosystemCategories?: ecosystemItem;
};
const AlphabetGroupList = ({ data }: props) => {
const AlphabetGroupList = ({
data,
fromScreen,
forGroup,
ecosystemCategories,
}: props) => {
const nav = useNavigation();
return (
<View style={styles.container}>
<AlphabetList
......@@ -17,7 +29,28 @@ const AlphabetGroupList = ({ data }: props) => {
indexLetterStyle={styles.indexLetter}
renderCustomItem={(item: IData) => (
<View style={styles.listItemContainer}>
<PlainButton text={item.value} onPress={() => {}} />
<PlainButton
text={item.value}
onPress={() => {
if (fromScreen === "CreateEcosystem") {
if (ecosystemCategories[item.key] != null) {
Alert.alert(
"Kategori Sudah Ditambahkan",
"Silahkan pilih kategori lain"
);
} else {
nav.navigate("CreateEcosystem", {
screen: "CreateEcosystemScreen",
params: {
id: item.key,
name: item.value,
forGroup: forGroup,
},
});
}
}
}}
/>
</View>
)}
renderCustomSectionHeader={(section: ISectionData) => (
......
import Constants from "expo-constants";
export const CLOUD_FUNCTIONS_URL = (Constants.manifest.extra
?.cloudFunctionsUrl || process.env.cloudFunctionsUrl) as string;
import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
import type { RootState, AppDispatch } from "../redux/store";
import { IUser } from "../types/firestore/User";
// Use throughout your app instead of plain `useDispatch` and `useSelector`
export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
export const useUser = (): IUser => useAppSelector((state) => state.user);
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import React from "react";
import CreateEcosystemScreen from "../screens/CreateEcosystemScreen";
import { BusinessCategoryScreen } from "../screens/ecosystem";
import { CreateEcosystemStackParamList } from "../types/navigation/CreateEcosystemStack";
const CreateEcosystemStack =
createNativeStackNavigator<CreateEcosystemStackParamList>();
const CreateEcosystemStackNavigator = () => {
return (
<CreateEcosystemStack.Navigator initialRouteName="CreateEcosystemScreen">
<CreateEcosystemStack.Screen
name="CreateEcosystemScreen"
component={CreateEcosystemScreen}
options={{ title: "" }}
/>
<CreateEcosystemStack.Screen
name="BusinessCategory"
component={BusinessCategoryScreen}
options={{ title: "Ekosistem Saya" }}
/>
</CreateEcosystemStack.Navigator>
);
};
export default CreateEcosystemStackNavigator;
......@@ -4,11 +4,11 @@ import BusinessEcosystemScreen from "../screens/ecosystem/BusinessEcosystemScree
import { EcosystemStackParamList } from "../types/navigation/EcosystemStack";
import {
BusinessCategoryScreen,
BusinessListScreen,
EcosystemDetailScreen,
EcosystemListScreen,
EcosystemMapScreen,
RecommendedEcosystemScreen,
UserListScreen,
} from "../screens/ecosystem";
const EcosystemStack = createNativeStackNavigator<EcosystemStackParamList>();
......@@ -52,8 +52,8 @@ const EcosystemStackNavigator = () => {
options={{ title: "Peta Ekosistem" }}
/>
<EcosystemStack.Screen
name="BusinessList"
component={BusinessListScreen}
name="UserList"
component={UserListScreen}
initialParams={{ headerTitle: "" }}
options={({ route }) => ({ title: route.params.headerTitle })}
/>
......
import React, { useEffect, useState } from "react";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import BottomTabNavigator from "./BottomTabNavigator";
import CreateEcosystemStackNavigator from "./CreateEcosystemStackNavigator";
import { RootStackParamList } from "../types/navigation";
import AuthStackNavigator from "./AuthStackNavigator";
import SuccessChangePasswordScreen from "../screens/SuccessChangePasswordScreen";
......@@ -68,11 +69,20 @@ const RootNavigator = () => {
options={{ headerShown: false }}
/>
)}
{user.id !== "" && (
<RootStack.Screen
name="CreateEcosystem"
component={CreateEcosystemStackNavigator}
options={{ headerShown: false }}
/>
)}
{user.id !== "" && (
<RootStack.Screen
name="SuccessChangePassword"
component={SuccessChangePasswordScreen}
options={{ headerShown: false }}
/>
)}
</RootStack.Navigator>
) : (
<RootStack.Navigator>
......
import { useNavigation } from "@react-navigation/core";
import React, { useEffect, useState } from "react";
import {
StyleSheet,
Text,
View,
FlatList,
TouchableOpacity,
SafeAreaView,
} from "react-native";
import Colors from "../constants/Colors";
import PlainForm from "../components/Forms/PlainForm";
import DropdownForm from "../components/Forms/DropdownForm";
import SmallButton from "../components/button/SmallButton";
import MainButton from "../components/button/MainButton";
import Spacer from "../components/Spacer/Spacer";
// import { pickImage, uploadImgToFirebase } from "../helpers/images";
import { ecosystemItem } from "../types/ListItems";
import { getCategoriesAsDdFormat } from "../helpers/ddConverter";
import { CreateEcosystemStackScreenProps } from "../types/navigation";
const CreateEcosystemScreen = ({
route,
}: CreateEcosystemStackScreenProps<"CreateEcosystemScreen">) => {
const nav = useNavigation();
const [ecosystemName, setEcosystemName] = useState("");
const [ecosystemDetails, setEcosystemDetails] = useState("");
const [ecosystemCategory, setEcosystemCategory] = useState("");
const [items, setItems] = useState([]);
// const [isLoading, setIsLoading] = useState(false);
const [ecosystemSupplier, setEcosystemSupplier] = useState<ecosystemItem>({});
const [ecosystemCustomer, setEcosystemCustomer] = useState<ecosystemItem>({});
const [ecosystemSupport, setEcosystemSupport] = useState<ecosystemItem>({});
const [ecosystemMainBusiness, setEcosystemMainBusiness] =
useState<ecosystemItem>({});
// const handlePickImage = () => {
// setIsLoading(true);
// pickImage().then((res) => {
// if (!res.cancelled) {
// const { uri } = res as ImageInfo;
// uploadImgToFirebase(uri, `profile/${user.id}`).then((res) => {
// dispatch(setProfilePic(res, user.id));
// setIsLoading(false);
// });
// }
// });
// };
useEffect(() => {
getCategoriesAsDdFormat().then((res) => setItems(res));
});
useEffect(() => {
console.log("test");
if (route.params?.id && route.params?.name) {
switch (route.params?.forGroup) {
case "supplier":
setEcosystemSupplier({
...ecosystemSupplier,
[route.params.id]: {
name: route.params.name,
members: {},
},
});
break;
case "customer":
setEcosystemCustomer({
...ecosystemCustomer,
[route.params.id]: {
name: route.params.name,
members: {},
},
});
break;
case "support":
setEcosystemSupport({
...ecosystemSupport,
[route.params.id]: {
name: route.params.name,
members: {},
},
});
break;
case "mainBusiness":
setEcosystemMainBusiness({
...ecosystemMainBusiness,
[route.params.id]: {
name: route.params.name,
members: {},
},
});
break;
}
}
}, [route.params?.id, route.params?.name]);
const handleDelete = (
ecosystemItem: ecosystemItem,
idDelete: string,
categoryGroup: string
) => {
delete ecosystemItem[idDelete];
switch (categoryGroup) {
case "supplier":
setEcosystemSupplier({ ...ecosystemItem });
break;
case "customer":
setEcosystemCustomer({ ...ecosystemItem });
break;
case "support":
setEcosystemSupport({ ...ecosystemItem });
break;
case "mainBusiness":
setEcosystemMainBusiness({ ...ecosystemItem });
break;
}
};
return (
<SafeAreaView>
<FlatList
style={styles.container}
data={Object.entries(ecosystemSupplier)}
renderItem={({ item }) => {
const membersLength = Object.keys(item[1].members).length;
return (
<View>
<View style={styles.componentWrapper}>
<TouchableOpacity>
<Text>
<Text style={styles.listText}>{`${item[1].name} `}</Text>
<Text
style={styles.membersCount}
>{`${membersLength}/5`}</Text>
</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() =>
handleDelete(ecosystemSupplier, item[0], "supplier")
}
>
<Text style={styles.warningText}>Hapus</Text>
</TouchableOpacity>
</View>
{item[1].members != null && (
<FlatList
data={Object.entries(item[1].members)}
renderItem={({ item }) => {
return (
<View style={styles.componentWrapper}>
<Spacer variant="s" />
<Text>
<Text
style={styles.membersCount}
>{`${item[1]}`}</Text>
</Text>
</View>
);
}}
/>
)}
<Spacer variant="l" />
</View>
);
}}
keyExtractor={(item) => item[0]}
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
ListHeaderComponent={
<View style={styles.componentWrapper}>
<View style={styles.componentWrapper}>
<Text style={styles.title}>Buat Ekosistem Bisnis</Text>
</View>
<Spacer variant="xl" />
<View style={styles.componentWrapper}>
<Text style={styles.subtitle}>
Silahkan masukkan data berikut untuk membuat ekosistem bisnis
</Text>
</View>
<Spacer variant="xl" />
<View style={styles.componentWrapper}>
<PlainForm
formTitle="Nama Ekosistem Bisnis"
placeholder="Masukkan Nama Ekosistem Bisnis"
text={ecosystemName}
setText={setEcosystemName}
errorMessage="Silahkan masukkan nama ekosistem"
/>
</View>
<Spacer variant="xl" />
<View style={styles.componentWrapper}>
<PlainForm
formTitle="Deskripsi Ekosistem Bisnis"
placeholder="Masukkan Deskripsi Ekosistem Bisnis"
text={ecosystemDetails}
setText={setEcosystemDetails}
errorMessage="Silahkan masukkan deskripsi ekosistem bisnis"
/>
</View>
<Spacer variant="xl" />
<View style={styles.componentWrapper}>
<View style={styles.componentWrapper}>
<Text style={styles.componentTitle}>
Kategori Ekosistem Bisnis
</Text>
</View>
<Spacer variant="m" />
<DropdownForm
value={ecosystemCategory}
setValue={setEcosystemCategory}
items={items}
setItems={setItems}
formPlaceholder="Pilih Kategori Ekosistem Binis"
searchPlaceholder="Cari Kategori Bisnis"
/>
</View>
<Spacer variant="xl" />
<View style={styles.componentWrapper}>
<Text style={styles.componentTitleBold}>Anggota Supplier</Text>
</View>
<Spacer variant="m" />
</View>
}
ListFooterComponent={
<View>
{Object.keys(ecosystemSupplier).length < 5 && (
<SmallButton
colors="primary"
text={"Pilih Ekosistem Supplier"}
onPress={() =>
nav.navigate("CreateEcosystem", {
screen: "BusinessCategory",
params: {
fromScreen: "CreateEcosystem",
forGroup: "supplier",
ecosystemCategories: ecosystemSupplier,
},
})
}
/>
)}
<Spacer variant="xl" />
<FlatList
data={Object.entries(ecosystemCustomer)}
renderItem={({ item }) => {