Created
January 3, 2023 22:10
-
-
Save ibelgin/6b5052248ccac5d3e4be824c36edbce0 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* eslint-disable react-native/no-inline-styles */ | |
import React from 'react'; | |
import { | |
View, | |
Text, | |
StyleSheet, | |
SafeAreaView, | |
FlatList, | |
TouchableOpacity, | |
Modal, | |
} from 'react-native'; | |
export default function MainScreen() { | |
const [modalVisible, setModalVisible] = React.useState(false); | |
const employees = [ | |
{ | |
id: 1, | |
first_name: 'Jaymee', | |
last_name: 'Imm', | |
email: 'jimm0@craigslist.org', | |
gender: 'Genderqueer', | |
age: 80, | |
}, | |
{ | |
id: 2, | |
first_name: 'Jody', | |
last_name: 'Themann', | |
email: 'jthemann1@skyrock.com', | |
gender: 'Agender', | |
age: 29, | |
}, | |
{ | |
id: 3, | |
first_name: 'Cece', | |
last_name: 'Carlet', | |
email: 'ccarlet2@jalbum.net', | |
gender: 'Male', | |
age: 69, | |
}, | |
{ | |
id: 4, | |
first_name: 'Elton', | |
last_name: 'Allinson', | |
email: 'eallinson3@jugem.jp', | |
gender: 'Male', | |
age: 31, | |
}, | |
{ | |
id: 5, | |
first_name: 'Garvy', | |
last_name: 'Shaddick', | |
email: 'gshaddick4@rediff.com', | |
gender: 'Male', | |
age: 32, | |
}, | |
{ | |
id: 6, | |
first_name: 'Fin', | |
last_name: 'Realy', | |
email: 'frealy5@unc.edu', | |
gender: 'Male', | |
age: 26, | |
}, | |
{ | |
id: 7, | |
first_name: 'Minnaminnie', | |
last_name: 'Fransseni', | |
email: 'mfransseni6@aboutads.info', | |
gender: 'Agender', | |
age: 52, | |
}, | |
{ | |
id: 8, | |
first_name: 'Fernando', | |
last_name: 'Pagon', | |
email: 'fpagon7@blogs.com', | |
gender: 'Male', | |
age: 40, | |
}, | |
{ | |
id: 9, | |
first_name: 'Tiphanie', | |
last_name: 'Fenny', | |
email: 'tfenny8@sakura.ne.jp', | |
gender: 'Female', | |
age: 52, | |
}, | |
{ | |
id: 10, | |
first_name: 'Nerti', | |
last_name: 'Try', | |
email: 'ntry9@shareasale.com', | |
gender: 'Female', | |
age: 43, | |
}, | |
{ | |
id: 11, | |
first_name: 'Abagael', | |
last_name: 'Beadell', | |
email: 'abeadella@unc.edu', | |
gender: 'Female', | |
age: 76, | |
}, | |
{ | |
id: 12, | |
first_name: 'Morten', | |
last_name: 'McNamee', | |
email: 'mmcnameeb@sun.com', | |
gender: 'Male', | |
age: 38, | |
}, | |
{ | |
id: 13, | |
first_name: 'Domenico', | |
last_name: 'Shearman', | |
email: 'dshearmanc@seesaa.net', | |
gender: 'Male', | |
age: 66, | |
}, | |
{ | |
id: 14, | |
first_name: 'Rodolphe', | |
last_name: 'Bittlestone', | |
email: 'rbittlestoned@51.la', | |
gender: 'Male', | |
age: 33, | |
}, | |
{ | |
id: 15, | |
first_name: 'Merv', | |
last_name: 'Watterson', | |
email: 'mwattersone@storify.com', | |
gender: 'Male', | |
age: 37, | |
}, | |
{ | |
id: 16, | |
first_name: 'Betty', | |
last_name: 'Simm', | |
email: 'bsimmf@engadget.com', | |
gender: 'Female', | |
age: 26, | |
}, | |
{ | |
id: 17, | |
first_name: 'Rafaellle', | |
last_name: 'Brighouse', | |
email: 'rbrighouseg@vinaora.com', | |
gender: 'Male', | |
age: 43, | |
}, | |
{ | |
id: 18, | |
first_name: 'Sibby', | |
last_name: 'Meanwell', | |
email: 'smeanwellh@independent.co.uk', | |
gender: 'Female', | |
age: 66, | |
}, | |
{ | |
id: 19, | |
first_name: 'Ricky', | |
last_name: 'Sissland', | |
email: 'rsisslandi@google.it', | |
gender: 'Male', | |
age: 76, | |
}, | |
{ | |
id: 20, | |
first_name: 'Sauveur', | |
last_name: 'Hessenthaler', | |
email: 'shessenthalerj@ocn.ne.jp', | |
gender: 'Male', | |
age: 48, | |
}, | |
{ | |
id: 21, | |
first_name: 'Carmela', | |
last_name: 'Bucksey', | |
email: 'cbuckseyk@acquirethisname.com', | |
gender: 'Female', | |
age: 22, | |
}, | |
{ | |
id: 22, | |
first_name: 'Nydia', | |
last_name: 'Folke', | |
email: 'nfolkel@disqus.com', | |
gender: 'Female', | |
age: 68, | |
}, | |
{ | |
id: 23, | |
first_name: 'Asia', | |
last_name: 'Boake', | |
email: 'aboakem@1und1.de', | |
gender: 'Female', | |
age: 39, | |
}, | |
{ | |
id: 24, | |
first_name: 'Sterne', | |
last_name: 'Jacobowitz', | |
email: 'sjacobowitzn@cbc.ca', | |
gender: 'Male', | |
age: 47, | |
}, | |
{ | |
id: 25, | |
first_name: 'Alwin', | |
last_name: 'Krolak', | |
email: 'akrolako@springer.com', | |
gender: 'Male', | |
age: 58, | |
}, | |
{ | |
id: 26, | |
first_name: 'Linn', | |
last_name: 'Copeman', | |
email: 'lcopemanp@google.nl', | |
gender: 'Male', | |
age: 37, | |
}, | |
{ | |
id: 27, | |
first_name: 'Britni', | |
last_name: 'Gumley', | |
email: 'bgumleyq@wordpress.org', | |
gender: 'Female', | |
age: 56, | |
}, | |
{ | |
id: 28, | |
first_name: 'Trumann', | |
last_name: 'Di Carli', | |
email: 'tdicarlir@xinhuanet.com', | |
gender: 'Male', | |
age: 62, | |
}, | |
{ | |
id: 29, | |
first_name: 'Deeanne', | |
last_name: 'Gun', | |
email: 'dguns@umich.edu', | |
gender: 'Female', | |
age: 64, | |
}, | |
{ | |
id: 30, | |
first_name: 'Fielding', | |
last_name: 'Begin', | |
email: 'fbegint@jalbum.net', | |
gender: 'Male', | |
age: 77, | |
}, | |
{ | |
id: 31, | |
first_name: 'Elga', | |
last_name: 'Ruegg', | |
email: 'erueggu@abc.net.au', | |
gender: 'Female', | |
age: 35, | |
}, | |
{ | |
id: 32, | |
first_name: 'Cesaro', | |
last_name: 'Clerk', | |
email: 'cclerkv@cbslocal.com', | |
gender: 'Male', | |
age: 37, | |
}, | |
{ | |
id: 33, | |
first_name: 'Harold', | |
last_name: 'Davioud', | |
email: 'hdavioudw@spiegel.de', | |
gender: 'Male', | |
age: 42, | |
}, | |
{ | |
id: 34, | |
first_name: 'Adrianne', | |
last_name: 'Sprankling', | |
email: 'aspranklingx@sciencedaily.com', | |
gender: 'Female', | |
age: 58, | |
}, | |
{ | |
id: 35, | |
first_name: 'Friedrick', | |
last_name: 'Stenners', | |
email: 'fstennersy@irs.gov', | |
gender: 'Male', | |
age: 41, | |
}, | |
{ | |
id: 36, | |
first_name: 'Nan', | |
last_name: 'Volette', | |
email: 'nvolettez@fc2.com', | |
gender: 'Female', | |
age: 27, | |
}, | |
{ | |
id: 37, | |
first_name: 'Darci', | |
last_name: 'Keuneke', | |
email: 'dkeuneke10@xrea.com', | |
gender: 'Female', | |
age: 80, | |
}, | |
{ | |
id: 38, | |
first_name: 'Doug', | |
last_name: 'Motton', | |
email: 'dmotton11@nationalgeographic.com', | |
gender: 'Male', | |
age: 66, | |
}, | |
{ | |
id: 39, | |
first_name: 'Cherin', | |
last_name: 'Walkley', | |
email: 'cwalkley12@craigslist.org', | |
gender: 'Female', | |
age: 20, | |
}, | |
{ | |
id: 40, | |
first_name: 'Efren', | |
last_name: 'Panter', | |
email: 'epanter13@google.de', | |
gender: 'Male', | |
age: 45, | |
}, | |
{ | |
id: 41, | |
first_name: 'Dorine', | |
last_name: 'Elcoate', | |
email: 'delcoate14@mit.edu', | |
gender: 'Female', | |
age: 61, | |
}, | |
{ | |
id: 42, | |
first_name: 'Liuka', | |
last_name: 'Lewis', | |
email: 'llewis15@bluehost.com', | |
gender: 'Female', | |
age: 43, | |
}, | |
{ | |
id: 43, | |
first_name: 'Gayla', | |
last_name: 'Inder', | |
email: 'ginder16@mediafire.com', | |
gender: 'Female', | |
age: 46, | |
}, | |
{ | |
id: 44, | |
first_name: 'Garrard', | |
last_name: 'Maxwaile', | |
email: 'gmaxwaile17@blinklist.com', | |
gender: 'Male', | |
age: 51, | |
}, | |
{ | |
id: 45, | |
first_name: 'Patric', | |
last_name: 'Woodburne', | |
email: 'pwoodburne18@java.com', | |
gender: 'Male', | |
age: 35, | |
}, | |
{ | |
id: 46, | |
first_name: 'Merrill', | |
last_name: 'Kemmis', | |
email: 'mkemmis19@ihg.com', | |
gender: 'Female', | |
age: 73, | |
}, | |
{ | |
id: 47, | |
first_name: 'Astrid', | |
last_name: 'Dorman', | |
email: 'adorman1a@trellian.com', | |
gender: 'Female', | |
age: 31, | |
}, | |
{ | |
id: 48, | |
first_name: 'Kippar', | |
last_name: 'Bastard', | |
email: 'kbastard1b@bbb.org', | |
gender: 'Male', | |
age: 31, | |
}, | |
{ | |
id: 49, | |
first_name: 'Allan', | |
last_name: 'Gibbins', | |
email: 'agibbins1c@ezinearticles.com', | |
gender: 'Genderfluid', | |
age: 44, | |
}, | |
{ | |
id: 50, | |
first_name: 'Melisenda', | |
last_name: 'Queree', | |
email: 'mqueree1d@intel.com', | |
gender: 'Female', | |
age: 52, | |
}, | |
]; | |
const [addedArray, setAdded] = React.useState([]); | |
const [id, setID] = React.useState([]); | |
const [average, setAverage] = React.useState(0); | |
const onClickAdd = item => { | |
setAdded([...addedArray, item]); | |
setID([...id, item.id]); | |
}; | |
const onClickRemove = item => { | |
let added = addedArray.filter((value, index) => value.id != item); | |
let ided = id.filter((value, index) => value !== item); | |
setAdded(added); | |
setID(ided); | |
}; | |
const renderItem = ({item}) => { | |
return ( | |
<View style={styles.main_container}> | |
{!id.includes(item.id) ? ( | |
<View style={styles.inner_box}> | |
<View style={styles.name_age_box}> | |
<Text style={styles.name_style}>{item.first_name}</Text> | |
<Text style={styles.age_style}>{item.age}</Text> | |
</View> | |
<View style={styles.add_button_main_view}> | |
<TouchableOpacity | |
style={styles.add_button_touch} | |
onPress={() => onClickAdd(item)}> | |
<Text style={styles.add_button_text}>Add</Text> | |
</TouchableOpacity> | |
</View> | |
</View> | |
) : ( | |
<View style={styles.inner_box}> | |
<View style={styles.name_age_box}> | |
<Text style={{...styles.name_style, color: '#B4B4B4'}}> | |
{item.first_name} | |
</Text> | |
<Text style={{...styles.age_style, color: '#B4B4B4'}}> | |
{item.age} | |
</Text> | |
</View> | |
</View> | |
)} | |
</View> | |
); | |
}; | |
const renderItemTeam = ({item}) => { | |
return ( | |
<View style={styles.main_container}> | |
<View style={styles.inner_box}> | |
<View style={styles.name_age_box}> | |
<Text style={styles.name_style}>{item.first_name}</Text> | |
<Text style={styles.age_style}>{item.age}</Text> | |
</View> | |
<View style={styles.add_button_main_view}> | |
<TouchableOpacity | |
style={styles.add_button_touch} | |
onPress={() => onClickRemove(item.id)}> | |
<Text style={styles.add_button_text}>Remove</Text> | |
</TouchableOpacity> | |
</View> | |
</View> | |
</View> | |
); | |
}; | |
React.useEffect(() => { | |
getAverage(); | |
}, [addedArray]); | |
const getAverage = () => { | |
if (addedArray.length !== 0) { | |
let sum = 0; | |
addedArray.forEach((value, index) => { | |
sum += value.age; | |
}); | |
setAverage(sum / addedArray.length); | |
} else { | |
setAverage(0); | |
} | |
}; | |
const SortArray = () => { | |
let sorted = addedArray.sort((a, b) => { | |
if (a.first_name < b.first_name) { | |
return -1; | |
} | |
if (a.first_name > b.first_name) { | |
return 1; | |
} | |
return 0; | |
}); | |
setAdded([...sorted]); | |
}; | |
return ( | |
<SafeAreaView style={styles.container}> | |
<TouchableOpacity | |
style={styles.title} | |
onPress={() => setModalVisible(true)}> | |
<Text style={styles.text}>Employees</Text> | |
</TouchableOpacity> | |
<FlatList | |
data={employees} | |
renderItem={renderItem} | |
keyExtractor={item => item.id} | |
/> | |
<Modal | |
animationType="none" | |
presentationStyle="fullScreen" | |
visible={modalVisible}> | |
<View style={styles.container}> | |
<View style={{...styles.title, flexDirection: 'row'}}> | |
<Text style={styles.text} onPress={() => setModalVisible(false)}> | |
Team | |
</Text> | |
<TouchableOpacity | |
style={styles.button_main_view} | |
onPress={() => SortArray()}> | |
<Text style={styles.sort_text}>Sort By Age</Text> | |
</TouchableOpacity> | |
</View> | |
<FlatList | |
data={addedArray} | |
renderItem={renderItemTeam} | |
keyExtractor={item => item.id} | |
/> | |
<View style={styles.average_main_view}> | |
<View style={styles.average_inner_box}> | |
<Text style={styles.average_text}> | |
Average Age <Text style={{fontSize: 28}}> {average}</Text> | |
</Text> | |
</View> | |
</View> | |
</View> | |
</Modal> | |
</SafeAreaView> | |
); | |
} | |
const styles = StyleSheet.create({ | |
container: { | |
flex: 1, | |
backgroundColor: '#FFF', | |
}, | |
title: { | |
margin: 10, | |
padding: 30, | |
justifyContent: 'center', | |
alignItems: 'center', | |
}, | |
text: { | |
color: '#121212', | |
fontSize: 24, | |
fontWeight: 'bold', | |
}, | |
main_container: { | |
height: 100, | |
width: '100%', | |
justifyContent: 'center', | |
alignItems: 'center', | |
}, | |
inner_box: { | |
height: '90%', | |
width: '95%', | |
backgroundColor: '#D9D9D9', | |
flexDirection: 'row', | |
}, | |
name_age_box: { | |
height: '100%', | |
width: '70%', | |
flexDirection: 'row', | |
alignItems: 'center', | |
}, | |
name_style: { | |
color: '#000', | |
fontSize: 20, | |
paddingHorizontal: 20, | |
fontWeight: 'bold', | |
}, | |
age_style: { | |
color: '#000', | |
fontSize: 20, | |
}, | |
add_button_main_view: { | |
height: '100%', | |
width: '30%', | |
justifyContent: 'center', | |
alignItems: 'center', | |
}, | |
add_button_touch: { | |
height: '50%', | |
width: '80%', | |
backgroundColor: '#5272FD', | |
justifyContent: 'center', | |
alignItems: 'center', | |
}, | |
add_button_text: { | |
fontSize: 17, | |
fontWeight: 'bold', | |
color: '#FFF', | |
}, | |
average_main_view: { | |
height: 80, | |
width: '100%', | |
justifyContent: 'center', | |
alignItems: 'center', | |
}, | |
average_inner_box: { | |
height: '90%', | |
width: '90%', | |
backgroundColor: '#A6A6A6', | |
justifyContent: 'center', | |
alignItems: 'center', | |
}, | |
average_text: { | |
fontSize: 25, | |
fontWeight: 'bold', | |
color: '#000', | |
}, | |
button_main_view: { | |
backgroundColor: '#FC66C5', | |
padding: 17, | |
margin: 10, | |
marginTop: 40, | |
borderRadius: 40, | |
}, | |
sort_text: { | |
color: '#FFF', | |
fontWeight: 'bold', | |
}, | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment