Fakultas Ilmu Komputer UI

Commit 1136d43a authored by Ahmad Izzudin Alifyandra's avatar Ahmad Izzudin Alifyandra
Browse files

Merge branch 'master' of...

Merge branch 'master' of https://gitlab.cs.ui.ac.id/ppl-fasilkom-ui/ppl-ki-ganjil-2021-2022/clicks/clicks-frontend into integrate-rate-ecosystems
parents c789d8e9 ae058a14
Pipeline #87442 passed with stage
in 11 minutes and 40 seconds
......@@ -49,7 +49,7 @@ const EcosystemStackNavigator = () => {
<EcosystemStack.Screen
name="EcosystemMap"
component={EcosystemMapScreen}
options={{ title: "Peta Ekosistem" }}
options={({ route }) => ({ title: route.params.headerTitle })}
/>
<EcosystemStack.Screen
name="UserList"
......
// 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;
import { FlatList, ScrollView, StyleSheet } from "react-native";
import { FlatList, StyleSheet, ActivityIndicator } from "react-native";
import React, { useEffect, useState } from "react";
import HorizontalCards from "../../components/Cards/HorizontalCards";
import { useNavigation } from "@react-navigation/core";
......@@ -17,22 +17,42 @@ const CategoryEcosystemListScreen = ({
const { toFetch } = route.params;
const [search, setSearch] = useState("");
const [listData, setListData] = useState<IEcosystem[]>([]);
const [loadingMore, setLoadingmore] = useState(false);
const [lastVisibleId, setLastVisibleId] = useState("");
useEffect(() => {
getByCategory(toFetch).then((res) => setListData(res));
});
getByCategory(toFetch, lastVisibleId).then((res) => {
setListData(res);
const lastIndexItem = res[res.length - 1];
const lastIndexItemId = lastIndexItem.id;
setLastVisibleId(lastIndexItemId);
});
}, []);
const handleOnEndReach = () => {
// setLoadingmore(true);
getByCategory(toFetch, lastVisibleId).then((res) => {
setListData([...listData, ...res]);
const lastIndexItem = res[res.length - 1];
const lastIndexItemId = lastIndexItem.id;
setLastVisibleId(lastIndexItemId);
if (res.length === 0) {
setLoadingmore(false);
} else {
setLoadingmore(true);
}
// setLoadingmore(false);
});
};
const ListFooterComponent = () => (
<View style={styles.containerLoader}>
<ActivityIndicator animating={true} color="0791F9" />
</View>
);
return (
<ScrollView style={styles.container}>
<View>
<IconForm
text={search}
setText={setSearch}
placeholder={"Cari di kategori ini"}
search
/>
</View>
<Spacer variant={"xl"} />
<View style={styles.container}>
<FlatList
data={listData}
renderItem={({ item }) => {
......@@ -65,21 +85,41 @@ const CategoryEcosystemListScreen = ({
ItemSeparatorComponent={() => <Spacer variant={"l"} />}
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
ListFooterComponent={() => <Spacer variant={"xl"} />}
ListFooterComponent={() =>
!loadingMore ? <ListFooterComponent /> : <Spacer variant={"xl"} />
}
ListHeaderComponent={() => (
<>
<View>
<Spacer variant={"xl"} />
<IconForm
text={search}
setText={setSearch}
placeholder={"Cari di kategori ini"}
search
/>
</View>
<Spacer variant={"xl"} />
</>
)}
onEndReachedThreshold={0.5}
onEndReached={handleOnEndReach}
/>
<Spacer variant={"xl"} />
</ScrollView>
</View>
);
};
const styles = StyleSheet.create({
container: {
padding: 24,
flex: 1,
paddingHorizontal: 24,
backgroundColor: Colors.background,
},
horizontalCard: {
paddingHorizontal: 4,
paddingTop: 2,
padding: 4,
},
containerLoader: {
padding: 10,
},
});
......
......@@ -16,6 +16,8 @@ import { useEffect, useState } from "react";
import RatingForm from "../../components/RatingForm";
import { rateEcosystem } from "../../service/functions/rateEcosystem";
import { getEcosystemRating } from "../../service/firestore/ecosystem/getEcosystemRating";
import { isOwner } from "../../service/firestore/ecosystem/isOwner";
import { deleteEcosystem } from "../../service/functions/deleteEcosystem";
const EcosystemDetailScreen = ({
route,
......@@ -27,6 +29,8 @@ const EcosystemDetailScreen = ({
const [isFetched, setIsFetched] = useState(false);
const [isRating, setIsRating] = useState(false);
const [currentRating, setCurrentRating] = useState(0);
const [isEcosystemOwner, setIsEcosystemOnwer] = useState(false);
const [isOwnerFetched, setIsOwnerFetched] = useState(false);
useEffect(() => {
inEcosystem(id, user.id).then((res) => {
......@@ -36,6 +40,14 @@ const EcosystemDetailScreen = ({
getEcosystemRating(id, user.id).then((res) => setCurrentRating(res));
});
useEffect(() => {
isOwner(id, user.id)
.then((res) => {
setIsEcosystemOnwer(res);
})
.then(() => setIsOwnerFetched(true));
});
const alertFollow = () => {
Alert.alert("Joined Ecosystem", "You have joined the ecosystem");
inEcosystem(id, user.id).then((res) => setIsInEcosystem(res));
......@@ -44,6 +56,30 @@ const EcosystemDetailScreen = ({
Alert.alert("Left Ecosystem", "You have left the ecosystem");
inEcosystem(id, user.id).then((res) => setIsInEcosystem(res));
};
const alertDelete = () => {
Alert.alert(
"Hapus Ekosistem",
"Apakah anda yakin ingin menghapus ekosistem",
[
{
text: "Hapus",
style: "destructive",
onPress: () => handleDelete(),
},
{ text: "Cancel", style: "cancel" },
]
);
};
const handleDelete = async () => {
await deleteEcosystem(id);
Alert.alert("Hapus Ekosistem", "Ekosistem berhasil dihapus", [
{ text: "OK" },
]);
nav.goBack();
};
const handleClickFollow = () => {
followEcosystem(id, user.id).then(alertFollow);
};
......@@ -69,7 +105,13 @@ const EcosystemDetailScreen = ({
text={"Lihat Peta Ekosistem"}
colors={"primary"}
onPress={() => {
nav.navigate("Ecosystem", { screen: "EcosystemMap" });
nav.navigate("Ecosystem", {
screen: "EcosystemMap",
params: {
headerTitle: title,
id: id,
},
});
}}
/>
<Spacer variant={"l"} />
......@@ -127,6 +169,19 @@ const EcosystemDetailScreen = ({
/>
)}
<Spacer variant={"l"} />
{(() => {
if (isEcosystemOwner && isOwnerFetched) {
return (
<SmallButton
text={"Hapus Ekosistem"}
colors={"warning"}
onPress={() => {
alertDelete();
}}
/>
);
}
})()}
</View>
</View>
);
......
......@@ -5,8 +5,12 @@ import Colors from "../../constants/Colors";
import PlainButton from "../../components/button/PlainButton";
import Spacer from "../../components/Spacer/Spacer";
import { useNavigation } from "@react-navigation/core";
import { EcosystemStackScreenProps } from "../../types/navigation";
const EcosystemMapScreen = () => {
const EcosystemMapScreen = ({
route,
}: EcosystemStackScreenProps<"EcosystemMap">) => {
const { id } = route.params;
const nav = useNavigation();
return (
<View style={styles.container}>
......@@ -15,21 +19,39 @@ const EcosystemMapScreen = () => {
<PlainButton
text={"Suppliers"}
onPress={() => {
nav.navigate("Ecosystem", { screen: "UserList" });
nav.navigate("Ecosystem", {
screen: "UserList",
params: {
headerTitle: "supplier",
id: id,
},
});
}}
/>
<Spacer variant="xl" />
<PlainButton
text={"Customer"}
onPress={() => {
nav.navigate("Ecosystem", { screen: "UserList" });
nav.navigate("Ecosystem", {
screen: "UserList",
params: {
headerTitle: "customer",
id: id,
},
});
}}
/>
<Spacer variant="xl" />
<PlainButton
text={"Support"}
onPress={() => {
nav.navigate("Ecosystem", { screen: "UserList" });
nav.navigate("Ecosystem", {
screen: "UserList",
params: {
headerTitle: "support",
id: id,
},
});
}}
/>
<Spacer variant="xl" />
......
import React, { useEffect, useState } from "react";
import { StyleSheet, FlatList, ListRenderItem } from "react-native";
import {
StyleSheet,
FlatList,
ListRenderItem,
ActivityIndicator,
} from "react-native";
import { View } from "../../components/Themed";
import Colors from "../../constants/Colors";
import { EcosystemStackScreenProps } from "../../types/navigation";
......@@ -17,7 +22,9 @@ const RecommendedEcosystemScreen = ({
const nav = useNavigation();
const [ecosystems, setEcosystems] = useState([]);
const [ecosystems, setEcosystems] = useState<IEcosystem[]>([]);
const [loadingMore, setLoadingmore] = useState(false);
const [lastVisibleId, setLastVisibleId] = useState("");
const user = useUser();
const userId = user.id;
......@@ -26,28 +33,55 @@ const RecommendedEcosystemScreen = ({
switch (toFetch) {
case "popular":
(async () => {
setEcosystems(await ecosystemService.getByPopularity());
const response = await ecosystemService.getByPopularity(
lastVisibleId
);
setEcosystems([...ecosystems, ...response]);
})();
break;
case "myEcosystem":
(async () => {
setEcosystems(await ecosystemService.getByCreated(userId));
const response = await ecosystemService.getByCreated(
userId,
lastVisibleId
);
setEcosystems([...ecosystems, ...response]);
})();
break;
case "mostRecent":
(async () => {
setEcosystems(await ecosystemService.getByMostRecent());
const response = await ecosystemService.getByMostRecent(
lastVisibleId
);
setEcosystems([...ecosystems, ...response]);
})();
break;
case "joined":
(async () => {
setEcosystems(await ecosystemService.getByFollowed(userId));
const response = await ecosystemService.getByFollowed(
userId,
lastVisibleId
);
setEcosystems([...ecosystems, ...response]);
})();
break;
default:
break;
}
}, []);
}, [lastVisibleId]);
const handleOnEndReach = () => {
// setLoadingmore(true);
const lastIndexItem = ecosystems[ecosystems.length - 1];
const lastIndexItemId = lastIndexItem.id;
setLastVisibleId(lastIndexItemId);
if (ecosystems.length - 1 === 0) {
setLoadingmore(false);
} else {
setLoadingmore(true);
}
// setLoadingmore(true);
};
const renderItem: ListRenderItem<IEcosystem> = ({ item }) => (
<View>
......@@ -76,6 +110,12 @@ const RecommendedEcosystemScreen = ({
</View>
);
const ListFooterComponent = () => (
<View style={styles.containerLoader}>
<ActivityIndicator animating={true} color="0791F9" />
</View>
);
return (
<View style={styles.container}>
<View>
......@@ -85,7 +125,11 @@ const RecommendedEcosystemScreen = ({
renderItem={renderItem}
ItemSeparatorComponent={() => <Spacer variant={"l"} />}
ListHeaderComponent={() => <Spacer variant={"xl"} />}
ListFooterComponent={() => <Spacer variant={"xl"} />}
ListFooterComponent={() =>
!loadingMore ? <ListFooterComponent /> : <Spacer variant={"xl"} />
}
onEndReachedThreshold={0.5}
onEndReached={handleOnEndReach}
/>
)}
</View>
......@@ -98,12 +142,15 @@ const styles = StyleSheet.create({
flex: 1,
backgroundColor: Colors.background,
paddingHorizontal: 24,
justifyContent: "center",
justifyContent: "flex-start",
},
horizontalCard: {
paddingHorizontal: 4,
paddingTop: 2,
},
containerLoader: {
padding: 10,
},
});
export default RecommendedEcosystemScreen;
import * as React from "react";
import { useState } from "react";
import { useState, useEffect } from "react";
import { StyleSheet } from "react-native";
import { View } from "../../components/Themed";
import UserList from "../../components/UserList/UserList";
import Colors from "../../constants/Colors";
// import { EcosystemStackScreenProps } from "../../types/navigation";
const UserListScreen = () => {
import { fetchUsersByEcosystemIdAndType } from "../../service/firestore/ecosystem/fetchUsersByEcosystemIdAndType";
import { EcosystemStackScreenProps } from "../../types/navigation";
const UserListScreen = ({ route }: EcosystemStackScreenProps<"UserList">) => {
const { id, headerTitle } = route.params;
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const [listData, setListData] = useState([
{
userId: "1",
name: "Angel",
image:
"https://asset.kompas.com/crops/O_Vgje1nMEqUCaDexq2UJdbyT14=/9x1:989x655/750x500/data/photo/2020/02/21/5e5008d10c825.jpg",
categoryId: "Pengolahan Kerupuk",
category: "orang",
},
{
userId: "1",
name: "Angelin",
image:
"https://asset.kompas.com/crops/O_Vgje1nMEqUCaDexq2UJdbyT14=/9x1:989x655/750x500/data/photo/2020/02/21/5e5008d10c825.jpg",
categoryId: "Pengolahan Kerupuk",
category: "orang",
},
]);
const [listData, setListData] = useState([]);
useEffect(() => {
(async () => {
setListData(await fetchUsersByEcosystemIdAndType(id, headerTitle));
})();
}, []);
return (
<View style={styles.container}>
<View>
......
import { useNavigation } from "@react-navigation/core";
import * as React from "react";
import {
Button,
StyleSheet,
Image,
ActivityIndicator,
Alert,
} from "react-native";
import { StyleSheet, Image, ActivityIndicator, Alert } from "react-native";
import DropdownForm from "../../components/Forms/DropdownForm";
import { ScrollView, TouchableOpacity } from "react-native-gesture-handler";
import PlainForm from "../../components/Forms/PlainForm";
import { useEffect, useState } from "react";
......@@ -19,7 +14,10 @@ import { ImageInfo } from "expo-image-picker/build/ImagePicker.types";
import { setProfilePic } from "../../redux/user/actions";
import { useAppDispatch, useUser } from "../../hooks/reduxHooks";
import { getCategory } from "../../service/firestore/ecosystem/getCategory";
import { updateUser } from "../../service/firestore/user";
import MainButton from "../../components/button/MainButton";
import { IDD } from "../../types/firestore";
import { getCategoriesAsDdFormat } from "../../helpers/ddConverter";
export default function AccountSettingsScreen({
// eslint-disable-next-line @typescript-eslint/no-unused-vars
navigation,
......@@ -31,9 +29,23 @@ export default function AccountSettingsScreen({
const [email, setEmail] = useState(user.email);
const [hp, setHp] = useState(user.phone);
const [bisnis, setBisnis] = useState(user.businessType);
const [picked, setPicked] = useState("");
const nav = useNavigation();
const [isLoading, setIsLoading] = useState(false);
const dispatch = useAppDispatch();
const [categories, setCategories] = useState<IDD[]>([]);
const handleUpdateProfile = () => {
updateUser(user.id, {
firstName: namaDepan,
lastName: namaBelakang,
email: "",
phone: hp,
pic: "",
businessType: picked,
}).then(() => {
Alert.alert("Berhasil Mengupdate");
});
};
const handlePickImage = () => {
// setIsLoading(true);
pickImage().then((res) => {
......@@ -53,6 +65,7 @@ export default function AccountSettingsScreen({
});
};
useEffect(() => {
getCategoriesAsDdFormat().then((res) => setCategories(res));
(async () => {
const name = await getCategory(bisnis);
setBisnis(name);
......@@ -117,6 +130,7 @@ export default function AccountSettingsScreen({
placeholder="Masukkan Email"
email
errorMessage={"Silahkan masukkan email yang benar"}
disabled
/>
</View>
<Spacer variant="l" />
......@@ -132,22 +146,32 @@ export default function AccountSettingsScreen({
</View>
<Spacer variant="l" />