Main.js

/* 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: '[email protected]',
      gender: 'Genderqueer',
      age: 80,
    },
    {
      id: 2,
      first_name: 'Jody',
      last_name: 'Themann',
      email: '[email protected]',
      gender: 'Agender',
      age: 29,
    },
    {
      id: 3,
      first_name: 'Cece',
      last_name: 'Carlet',
      email: '[email protected]',
      gender: 'Male',
      age: 69,
    },
    {
      id: 4,
      first_name: 'Elton',
      last_name: 'Allinson',
      email: '[email protected]',
      gender: 'Male',
      age: 31,
    },
    {
      id: 5,
      first_name: 'Garvy',
      last_name: 'Shaddick',
      email: '[email protected]',
      gender: 'Male',
      age: 32,
    },
    {
      id: 6,
      first_name: 'Fin',
      last_name: 'Realy',
      email: '[email protected]',
      gender: 'Male',
      age: 26,
    },
    {
      id: 7,
      first_name: 'Minnaminnie',
      last_name: 'Fransseni',
      email: '[email protected]',
      gender: 'Agender',
      age: 52,
    },
    {
      id: 8,
      first_name: 'Fernando',
      last_name: 'Pagon',
      email: '[email protected]',
      gender: 'Male',
      age: 40,
    },
    {
      id: 9,
      first_name: 'Tiphanie',
      last_name: 'Fenny',
      email: '[email protected]',
      gender: 'Female',
      age: 52,
    },
    {
      id: 10,
      first_name: 'Nerti',
      last_name: 'Try',
      email: '[email protected]',
      gender: 'Female',
      age: 43,
    },
    {
      id: 11,
      first_name: 'Abagael',
      last_name: 'Beadell',
      email: '[email protected]',
      gender: 'Female',
      age: 76,
    },
    {
      id: 12,
      first_name: 'Morten',
      last_name: 'McNamee',
      email: '[email protected]',
      gender: 'Male',
      age: 38,
    },
    {
      id: 13,
      first_name: 'Domenico',
      last_name: 'Shearman',
      email: '[email protected]',
      gender: 'Male',
      age: 66,
    },
    {
      id: 14,
      first_name: 'Rodolphe',
      last_name: 'Bittlestone',
      email: '[email protected]',
      gender: 'Male',
      age: 33,
    },
    {
      id: 15,
      first_name: 'Merv',
      last_name: 'Watterson',
      email: '[email protected]',
      gender: 'Male',
      age: 37,
    },
    {
      id: 16,
      first_name: 'Betty',
      last_name: 'Simm',
      email: '[email protected]',
      gender: 'Female',
      age: 26,
    },
    {
      id: 17,
      first_name: 'Rafaellle',
      last_name: 'Brighouse',
      email: '[email protected]',
      gender: 'Male',
      age: 43,
    },
    {
      id: 18,
      first_name: 'Sibby',
      last_name: 'Meanwell',
      email: '[email protected]',
      gender: 'Female',
      age: 66,
    },
    {
      id: 19,
      first_name: 'Ricky',
      last_name: 'Sissland',
      email: '[email protected]',
      gender: 'Male',
      age: 76,
    },
    {
      id: 20,
      first_name: 'Sauveur',
      last_name: 'Hessenthaler',
      email: '[email protected]',
      gender: 'Male',
      age: 48,
    },
    {
      id: 21,
      first_name: 'Carmela',
      last_name: 'Bucksey',
      email: '[email protected]',
      gender: 'Female',
      age: 22,
    },
    {
      id: 22,
      first_name: 'Nydia',
      last_name: 'Folke',
      email: '[email protected]',
      gender: 'Female',
      age: 68,
    },
    {
      id: 23,
      first_name: 'Asia',
      last_name: 'Boake',
      email: '[email protected]',
      gender: 'Female',
      age: 39,
    },
    {
      id: 24,
      first_name: 'Sterne',
      last_name: 'Jacobowitz',
      email: '[email protected]',
      gender: 'Male',
      age: 47,
    },
    {
      id: 25,
      first_name: 'Alwin',
      last_name: 'Krolak',
      email: '[email protected]',
      gender: 'Male',
      age: 58,
    },
    {
      id: 26,
      first_name: 'Linn',
      last_name: 'Copeman',
      email: '[email protected]',
      gender: 'Male',
      age: 37,
    },
    {
      id: 27,
      first_name: 'Britni',
      last_name: 'Gumley',
      email: '[email protected]',
      gender: 'Female',
      age: 56,
    },
    {
      id: 28,
      first_name: 'Trumann',
      last_name: 'Di Carli',
      email: '[email protected]',
      gender: 'Male',
      age: 62,
    },
    {
      id: 29,
      first_name: 'Deeanne',
      last_name: 'Gun',
      email: '[email protected]',
      gender: 'Female',
      age: 64,
    },
    {
      id: 30,
      first_name: 'Fielding',
      last_name: 'Begin',
      email: '[email protected]',
      gender: 'Male',
      age: 77,
    },
    {
      id: 31,
      first_name: 'Elga',
      last_name: 'Ruegg',
      email: '[email protected]',
      gender: 'Female',
      age: 35,
    },
    {
      id: 32,
      first_name: 'Cesaro',
      last_name: 'Clerk',
      email: '[email protected]',
      gender: 'Male',
      age: 37,
    },
    {
      id: 33,
      first_name: 'Harold',
      last_name: 'Davioud',
      email: '[email protected]',
      gender: 'Male',
      age: 42,
    },
    {
      id: 34,
      first_name: 'Adrianne',
      last_name: 'Sprankling',
      email: '[email protected]',
      gender: 'Female',
      age: 58,
    },
    {
      id: 35,
      first_name: 'Friedrick',
      last_name: 'Stenners',
      email: '[email protected]',
      gender: 'Male',
      age: 41,
    },
    {
      id: 36,
      first_name: 'Nan',
      last_name: 'Volette',
      email: '[email protected]',
      gender: 'Female',
      age: 27,
    },
    {
      id: 37,
      first_name: 'Darci',
      last_name: 'Keuneke',
      email: '[email protected]',
      gender: 'Female',
      age: 80,
    },
    {
      id: 38,
      first_name: 'Doug',
      last_name: 'Motton',
      email: '[email protected]',
      gender: 'Male',
      age: 66,
    },
    {
      id: 39,
      first_name: 'Cherin',
      last_name: 'Walkley',
      email: '[email protected]',
      gender: 'Female',
      age: 20,
    },
    {
      id: 40,
      first_name: 'Efren',
      last_name: 'Panter',
      email: '[email protected]',
      gender: 'Male',
      age: 45,
    },
    {
      id: 41,
      first_name: 'Dorine',
      last_name: 'Elcoate',
      email: '[email protected]',
      gender: 'Female',
      age: 61,
    },
    {
      id: 42,
      first_name: 'Liuka',
      last_name: 'Lewis',
      email: '[email protected]',
      gender: 'Female',
      age: 43,
    },
    {
      id: 43,
      first_name: 'Gayla',
      last_name: 'Inder',
      email: '[email protected]',
      gender: 'Female',
      age: 46,
    },
    {
      id: 44,
      first_name: 'Garrard',
      last_name: 'Maxwaile',
      email: '[email protected]',
      gender: 'Male',
      age: 51,
    },
    {
      id: 45,
      first_name: 'Patric',
      last_name: 'Woodburne',
      email: '[email protected]',
      gender: 'Male',
      age: 35,
    },
    {
      id: 46,
      first_name: 'Merrill',
      last_name: 'Kemmis',
      email: '[email protected]',
      gender: 'Female',
      age: 73,
    },
    {
      id: 47,
      first_name: 'Astrid',
      last_name: 'Dorman',
      email: '[email protected]',
      gender: 'Female',
      age: 31,
    },
    {
      id: 48,
      first_name: 'Kippar',
      last_name: 'Bastard',
      email: '[email protected]',
      gender: 'Male',
      age: 31,
    },
    {
      id: 49,
      first_name: 'Allan',
      last_name: 'Gibbins',
      email: '[email protected]',
      gender: 'Genderfluid',
      age: 44,
    },
    {
      id: 50,
      first_name: 'Melisenda',
      last_name: 'Queree',
      email: '[email protected]',
      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',
  },
});