Fakultas Ilmu Komputer UI

Commit 9ab6e8ee authored by Bagus Prabowo's avatar Bagus Prabowo
Browse files

Merge branch 'add-loading-indicator' into 'master'

feat: add loading indicator, refactor UserList

See merge request !159
parents 49287df0 49ac6bf1
Pipeline #88940 passed with stage
in 10 minutes and 7 seconds
...@@ -6,6 +6,7 @@ import React from "react"; ...@@ -6,6 +6,7 @@ import React from "react";
import Spacer from "../../components/Spacer/Spacer"; import Spacer from "../../components/Spacer/Spacer";
import { listUsers } from "../../types/listUsers"; import { listUsers } from "../../types/listUsers";
import { IUser } from "../../types/firestore/User"; import { IUser } from "../../types/firestore/User";
import { useCategory } from "../../hooks/reduxHooks";
type props = { type props = {
list: IUser[]; list: IUser[];
...@@ -19,6 +20,7 @@ const UserList = ({ ...@@ -19,6 +20,7 @@ const UserList = ({
categoryMembers, categoryMembers,
setCategoryMembers, setCategoryMembers,
}: props) => { }: props) => {
const category = useCategory();
return ( return (
<ScrollView> <ScrollView>
<SafeAreaView style={styles.container}> <SafeAreaView style={styles.container}>
...@@ -36,7 +38,9 @@ const UserList = ({ ...@@ -36,7 +38,9 @@ const UserList = ({
<View> <View>
<UserListItem <UserListItem
name={item.firstName + " " + item.lastName} name={item.firstName + " " + item.lastName}
category={item.businessType} category={
category.find((x) => x.id === item.businessType).name
}
uri={item.pic} uri={item.pic}
chosen={ chosen={
fromScreen === "CategoryUpdate" ? chosenUser() : false fromScreen === "CategoryUpdate" ? chosenUser() : false
......
import * as React from "react"; import * as React from "react";
import { StyleSheet, Image, Alert } from "react-native"; import { StyleSheet, Image, Alert, ActivityIndicator } from "react-native";
import { Text, View } from "../../components/Themed"; import { Text, View } from "../../components/Themed";
import Colors from "../../constants/Colors"; import Colors from "../../constants/Colors";
import SmallButton from "../../components/button/SmallButton"; import SmallButton from "../../components/button/SmallButton";
...@@ -183,6 +183,11 @@ const EcosystemDetailScreen = ({ ...@@ -183,6 +183,11 @@ const EcosystemDetailScreen = ({
); );
} }
})()} })()}
<ActivityIndicator
size={"large"}
animating={!isFetched}
color="#000000"
/>
</View> </View>
</View> </View>
); );
......
import * as React from "react"; import * as React from "react";
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { StyleSheet } from "react-native"; import { ActivityIndicator, StyleSheet } from "react-native";
import { View } from "../../components/Themed"; import { View } from "../../components/Themed";
import UserList from "../../components/UserList/UserList"; import UserList from "../../components/UserList/UserList";
import Colors from "../../constants/Colors"; import Colors from "../../constants/Colors";
...@@ -24,29 +24,33 @@ const UserListScreen = ({ ...@@ -24,29 +24,33 @@ const UserListScreen = ({
const nav = useNavigation(); const nav = useNavigation();
const [listData, setListData] = useState([]); const [listData, setListData] = useState([]);
const [isFetched, setIsFetched] = useState(false);
const [categoryMembers, setCategoryMember] = useState<listUsers>( const [categoryMembers, setCategoryMember] = useState<listUsers>(
route.params.categoryMembers route.params.categoryMembers
); );
useEffect(() => { const fetchUserListData = async () => {
if (route.params.fromScreen === "EcosystemDetail") { if (route.params.fromScreen === "EcosystemDetail") {
(async () => { setListData(
setListData( await fetchUsersByEcosystemIdAndType(
await fetchUsersByEcosystemIdAndType( route.params.id,
route.params.id, route.params.headerTitle
route.params.headerTitle )
) );
);
})();
} else if ( } else if (
route.params.fromScreen === "CreateEcosystem" || route.params.fromScreen === "CreateEcosystem" ||
route.params.fromScreen === "CategoryUpdate" route.params.fromScreen === "CategoryUpdate"
) { ) {
(async () => { setListData(await fetchUsersByCategory(route.params.id));
setListData(await fetchUsersByCategory(route.params.id));
})();
} }
return;
};
useEffect(() => {
fetchUserListData().then(() => {
setIsFetched(true);
});
}, [route.params?.fromScreen, route.params?.id]); }, [route.params?.fromScreen, route.params?.id]);
return ( return (
...@@ -57,6 +61,11 @@ const UserListScreen = ({ ...@@ -57,6 +61,11 @@ const UserListScreen = ({
setCategoryMembers={setCategoryMember} setCategoryMembers={setCategoryMember}
fromScreen={route.params.fromScreen} fromScreen={route.params.fromScreen}
/> />
<ActivityIndicator
size={"large"}
animating={!isFetched}
color="#000000"
/>
{(route.params?.fromScreen === "CreateEcosystem" || {(route.params?.fromScreen === "CreateEcosystem" ||
route.params?.fromScreen === "CategoryUpdate") && ( route.params?.fromScreen === "CategoryUpdate") && (
<View> <View>
......
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