Fakultas Ilmu Komputer UI
Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
ppl-fasilkom-ui
PPL KI Ganjil 2021 2022
Clicks - Ecosystem Business
clicks-frontend
Commits
1f5e3f4e
Commit
1f5e3f4e
authored
Oct 10, 2021
by
Mohammad Faraz Abisha Mirza
Committed by
Ahmad Izzudin Alifyandra
Oct 10, 2021
Browse files
feat: Integrate Category List with Ecosystem List
parent
89611697
Changes
8
Hide whitespace changes
Inline
Side-by-side
src/components/GroupList/AlphabetGroupList.tsx
View file @
1f5e3f4e
...
...
@@ -48,6 +48,14 @@ const AlphabetGroupList = ({
},
});
}
}
else
if
(
fromScreen
===
"
BusinessEcosystem
"
)
{
nav
.
navigate
(
"
Ecosystem
"
,
{
screen
:
"
EcosystemList
"
,
params
:
{
headerTitle
:
item
.
value
,
toFetch
:
item
.
key
,
},
});
}
}
}
/>
...
...
src/navigation/EcosystemStackNavigator.tsx
View file @
1f5e3f4e
...
...
@@ -5,11 +5,11 @@ import { EcosystemStackParamList } from "../types/navigation/EcosystemStack";
import
{
BusinessCategoryScreen
,
EcosystemDetailScreen
,
EcosystemListScreen
,
EcosystemMapScreen
,
RecommendedEcosystemScreen
,
UserListScreen
,
}
from
"
../screens/ecosystem
"
;
import
CategoryEcosystemListScreen
from
"
../screens/ecosystem/CategoryEcosystemListScreen
"
;
const
EcosystemStack
=
createNativeStackNavigator
<
EcosystemStackParamList
>
();
...
...
@@ -36,7 +36,7 @@ const EcosystemStackNavigator = () => {
/>
<
EcosystemStack
.
Screen
name
=
"EcosystemList"
component
=
{
EcosystemListScreen
}
component
=
{
Category
EcosystemListScreen
}
initialParams
=
{
{
headerTitle
:
""
}
}
options
=
{
({
route
})
=>
({
title
:
route
.
params
.
headerTitle
})
}
/>
...
...
src/screens/ecosystem/BusinessEcosystemScreen.tsx
View file @
1f5e3f4e
...
...
@@ -61,6 +61,9 @@ const BusinessEcosystemScreen = () => {
onPress
=
{
()
=>
{
nav
.
navigate
(
"
Ecosystem
"
,
{
screen
:
"
BusinessCategory
"
,
params
:
{
fromScreen
:
"
BusinessEcosystem
"
,
},
});
}
}
>
...
...
src/screens/CategoryEcosystemListScreen.tsx
→
src/screens/
ecosystem/
CategoryEcosystemListScreen.tsx
View file @
1f5e3f4e
import
{
FlatList
,
SafeAreaView
,
StyleSheet
}
from
"
react-native
"
;
import
React
,
{
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 { IEcosystem } from "../types/firestore/ecosystems";
import
IconForm
from
"
../components/Forms/IconForm
"
;
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
nav
=
useNavigation
();
// const { toFetch } = route.params;
const
[
search
,
setSearch
]
=
useState
(
""
);
const
[
listData
,
// setListData
]
=
useState
([
{
id
:
"
1
"
,
image
:
"
https://asset.kompas.com/crops/O_Vgje1nMEqUCaDexq2UJdbyT14=/9x1:989x655/750x500/data/photo/2020/02/21/5e5008d10c825.jpg
"
,
member
:
"
100
"
,
title
:
"
Pengolahan Kerupuk
"
,
rate
:
"
5
"
,
},
{
id
:
"
2
"
,
image
:
"
https://asset.kompas.com/crops/O_Vgje1nMEqUCaDexq2UJdbyT14=/9x1:989x655/750x500/data/photo/2020/02/21/5e5008d10c825.jpg
"
,
member
:
"
120
"
,
title
:
"
Pengolahan Kerupuk
"
,
rate
:
"
4.9
"
,
},
{
id
:
"
3
"
,
image
:
"
https://asset.kompas.com/crops/O_Vgje1nMEqUCaDexq2UJdbyT14=/9x1:989x655/750x500/data/photo/2020/02/21/5e5008d10c825.jpg
"
,
member
:
"
130
"
,
title
:
"
Pengolahan Kerupuk
"
,
rate
:
"
5
"
,
},
{
id
:
"
4
"
,
image
:
"
https://asset.kompas.com/crops/O_Vgje1nMEqUCaDexq2UJdbyT14=/9x1:989x655/750x500/data/photo/2020/02/21/5e5008d10c825.jpg
"
,
member
:
"
140
"
,
title
:
"
Pengolahan Kerupuk
"
,
rate
:
"
4.4
"
,
},
{
id
:
"
5
"
,
image
:
"
https://asset.kompas.com/crops/O_Vgje1nMEqUCaDexq2UJdbyT14=/9x1:989x655/750x500/data/photo/2020/02/21/5e5008d10c825.jpg
"
,
member
:
"
100
"
,
title
:
"
Pengolahan Kerupuk
"
,
rate
:
"
4
"
,
},
{
id
:
"
6
"
,
image
:
"
https://asset.kompas.com/crops/O_Vgje1nMEqUCaDexq2UJdbyT14=/9x1:989x655/750x500/data/photo/2020/02/21/5e5008d10c825.jpg
"
,
member
:
"
10
"
,
title
:
"
Pengolahan Kerupuk
"
,
rate
:
"
5
"
,
},
]);
const
[
listData
,
setListData
]
=
useState
<
IEcosystem
[]
>
([]);
useEffect
(()
=>
{
getByCategory
(
"
A
"
).
then
((
res
)
=>
setListData
(
res
));
});
return
(
<
S
afeArea
View
style
=
{
styles
.
container
}
>
<
S
croll
View
style
=
{
styles
.
container
}
>
<
View
>
<
IconForm
text
=
{
search
}
...
...
@@ -82,11 +37,23 @@ const CategoryEcosystemListScreen = () => {
return
(
<
View
style
=
{
styles
.
horizontalCard
}
>
<
HorizontalCards
image
=
{
item
.
image
}
member
=
{
item
.
member
}
title
=
{
item
.
title
}
rate
=
{
item
.
rate
}
onPress
=
{
null
}
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
>
);
...
...
@@ -96,7 +63,7 @@ const CategoryEcosystemListScreen = () => {
showsVerticalScrollIndicator
=
{
false
}
showsHorizontalScrollIndicator
=
{
false
}
/>
</
S
afeArea
View
>
</
S
croll
View
>
);
};
...
...
src/screens/ecosystem/EcosystemDetailScreen.tsx
View file @
1f5e3f4e
...
...
@@ -6,23 +6,26 @@ import SmallButton from "../../components/button/SmallButton";
import
Spacer
from
"
../../components/Spacer/Spacer
"
;
import
{
MaterialIcons
}
from
"
@expo/vector-icons
"
;
import
Layout
from
"
../../constants/Layout
"
;
import
{
EcosystemStackScreenProps
}
from
"
../../types/navigation
"
;
const
EcosystemDetailScreen
=
()
=>
{
const
EcosystemDetailScreen
=
({
route
,
}:
EcosystemStackScreenProps
<
"
EcosystemDetails
"
>
)
=>
{
const
{
title
,
desc
,
image
,
member
,
rating
}
=
route
.
params
;
return
(
<
View
style
=
{
styles
.
container
}
>
<
View
style
=
{
styles
.
imageWrapper
}
>
<
Image
style
=
{
styles
.
image
}
source
=
{
{
// uri: {image}
uri
:
"
https://bsmedia.business-standard.com/_media/bs/img/article/2020-12/11/full/1607656152-0479.jpg
"
,
uri
:
image
,
}
}
/>
</
View
>
<
Spacer
variant
=
{
"
l
"
}
/>
<
View
style
=
{
styles
.
textWrapper
}
>
{
/* <Text style={styles.title}>{Title}</Text> */
}
<
Text
style
=
{
styles
.
title
}
>
Petani Beras dan Gandum Jawa Tengah
</
Text
>
<
Text
style
=
{
styles
.
title
}
>
{
title
}
</
Text
>
<
Spacer
variant
=
{
"
l
"
}
/>
<
SmallButton
text
=
{
"
Lihat Peta Ekosistem
"
}
...
...
@@ -34,8 +37,7 @@ const EcosystemDetailScreen = () => {
<
View
style
=
{
styles
.
bodyWrapper
}
>
<
MaterialIcons
name
=
{
"
group
"
}
style
=
{
styles
.
iconMember
}
size
=
{
30
}
/>
<
View
style
=
{
styles
.
textWrapper
}
>
{
/* <Text style={styles.iconText}>{member} Anggota</Text> */
}
<
Text
style
=
{
styles
.
iconText
}
>
350 Anggota
</
Text
>
<
Text
style
=
{
styles
.
iconText
}
>
{
member
}
Anggota
</
Text
>
</
View
>
</
View
>
<
View
style
=
{
styles
.
bodyWrapper
}
>
...
...
@@ -43,18 +45,12 @@ const EcosystemDetailScreen = () => {
<
View
style
=
{
styles
.
textWrapper
}
>
{
/* <Text style={styles.iconText}>{rate}</Text> */
}
<
Text
style
=
{
styles
.
iconText
}
>
4.7
</
Text
>
<
Text
style
=
{
styles
.
iconText
}
>
{
rating
}
</
Text
>
</
View
>
</
View
>
</
View
>
<
Spacer
variant
=
{
"
s
"
}
/>
<
Text
style
=
{
styles
.
textBody
}
>
{
/* {content} */
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip.
</
Text
>
<
Text
style
=
{
styles
.
textBody
}
>
{
desc
}
</
Text
>
<
Spacer
variant
=
{
"
xl
"
}
/>
<
SmallButton
text
=
{
"
Keluar dari Ekosistem
"
}
...
...
src/service/firestore/ecosystem/createEcosystem.ts
0 → 100644
View file @
1f5e3f4e
import
firebase
from
"
firebase
"
;
import
{
ICreateEcosystem
}
from
"
../../../types/firestore/createEcosystem
"
;
export
const
createEcosystem
=
(
createEcosystem
:
ICreateEcosystem
)
=>
{
createEcosystem
.
ecosystem
.
timestamp
=
firebase
.
firestore
.
Timestamp
.
now
();
};
src/types/firestore/createEcosystem.ts
0 → 100644
View file @
1f5e3f4e
import
{
IEcosystem
}
from
"
./ecosystems
"
;
import
{
IEcosystemCategoryMember
}
from
"
./ecosystemCategoryMember
"
;
import
{
IEcosystemMembership
}
from
"
./ecosystemMembership
"
;
export
type
ICreateEcosystem
=
{
ecosystem
:
IEcosystem
;
ecosystemCategoryMembers
:
[
{
categoryMember
:
IEcosystemCategoryMember
;
ecosystemCategoryMemberships
:
[
IEcosystemMembership
];
}
];
};
src/types/navigation/EcosystemStack.ts
View file @
1f5e3f4e
...
...
@@ -3,15 +3,27 @@
* https://reactnavigation.org/docs/typescript/
*/
import
{
NativeStackScreenProps
}
from
"
@react-navigation/native-stack
"
;
import
{
ecosystemItem
}
from
"
../listItems
"
;
export
type
EcosystemStackParamList
=
{
BusinessEcosystem
:
undefined
;
CreateEcosystem
:
undefined
;
BusinessCategory
:
undefined
;
EcosystemList
:
{
headerTitle
:
string
};
BusinessCategory
:
{
fromScreen
?:
string
;
forGroup
?:
string
;
ecosystemCategories
?:
ecosystemItem
;
};
EcosystemList
:
{
headerTitle
:
string
;
toFetch
:
string
};
EcosystemMap
:
undefined
;
EcosystemDetails
:
{
headerTitle
:
string
;
title
:
string
;
desc
:
string
;
image
:
string
;
member
:
string
;
rating
:
string
;
};
UserList
:
{
headerTitle
:
string
};
EcosystemDetails
:
{
headerTitle
:
string
};
Recommended
:
{
headerTitle
:
string
;
toFetch
:
string
};
};
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment