App.js

import React, {useEffect, useState} from 'react';
import {
  View,
  TextInput,
  TouchableOpacity,
  Text,
  ScrollView,
  Modal,
} from 'react-native';
import Amplify, {Auth, API, graphqlOperation} from 'aws-amplify';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {withAuthenticator} from 'aws-amplify-react-native';
import {listTodos} from './src/graphql/queries';
import {createTodo, deleteTodo} from './src/graphql/mutations';

import config from './src/aws-exports';

Amplify.configure({
  ...config,
  Analytics: {
    disabled: true,
  },
});

function App() {
  const [listTasks, setListTaks] = useState([]);
  const [inputTask, setInputTask] = useState('');
  const [visibleModalUpdate, setVisibleModalUpdate] = useState(false);
  const [selectedTask, setSelectedTaks] = useState([]);
  const [isDetailModal, setIsDetailModal] = useState(false);
  const [visibleModalDetail, setVisibleModalDetail] = useState(false);

  async function handleSendTask() {
    const todo = {name: inputTask, description: ''};
    await API.graphql(graphqlOperation(createTodo, {input: todo}));
    return setInputTask('');
  }

  function handleDeleteTask(taskID) {
    API.graphql(graphqlOperation(deleteTodo, {input: {id: taskID}}));
  }

  function handleUpdateTask(taskID) {
    setIsDetailModal(!isDetailModal);
    setVisibleModalUpdate(!visibleModalUpdate);
  }

  function handleDetailTask(task) {
    setIsDetailModal(!isDetailModal);
    setVisibleModalDetail(!visibleModalDetail);
    setSelectedTaks(task);
  }

  useEffect(() => {
    async function fetchData() {
      const listTasksData = await API.graphql(graphqlOperation(listTodos));
      setListTaks(
        listTasksData.data.listTodos.items.sort(
          (a, b) => a.createdAt > b.createdAt,
        ),
      );
    }

    fetchData();
  });

  return (
    <View style={styles.mainContainer}>
      <Header />

      <UpdateModal
        visibleModalUpdate={visibleModalUpdate}
        handleModalVisible={() => setVisibleModalUpdate(!visibleModalUpdate)}
      />

      <DetailModal
        selectedTask={selectedTask}
        visibleModalDetail={visibleModalDetail}
        handleVisibleModalDetail={() =>
          setVisibleModalDetail(!visibleModalDetail)
        }
      />

      <View style={styles.container}>
        <View>
          <TextInput
            style={styles.textInputTask}
            onChangeText={(task) => setInputTask(task)}
            placeholder="Write your task ..."
            value={inputTask}
          />
        </View>
        <View>
          <TouchableOpacity
            style={styles.btnGeneral}
            onPress={() => handleSendTask()}>
            <View>
              <Text style={styles.textGeneralBtn}>Add Task</Text>
            </View>
          </TouchableOpacity>
        </View>
      </View>

      <ScrollView>
        {listTasks.map((item, key) => (
          <View key={key} style={styles.field}>
            <View style={styles.subFieldName}>
              <Text>{item.name}</Text>
            </View>
            <View style={styles.marginSubField}>
              <TouchableOpacity onPress={() => handleUpdateTask(item.id)}>
                <Icon name="restart" size={20} />
              </TouchableOpacity>
            </View>
            <View style={styles.marginSubField}>
              <TouchableOpacity onPress={() => handleDetailTask(item)}>
                <Icon name="eye" size={20} />
              </TouchableOpacity>
            </View>
            <View style={styles.marginSubField}>
              <TouchableOpacity onPress={() => handleDeleteTask(item.id)}>
                <Icon name="trash-can-outline" size={20} />
              </TouchableOpacity>
            </View>
          </View>
        ))}
      </ScrollView>
    </View>
  );
}

function Header(props) {
  const {
    isModal,
    handleModalVisible,
    visibleModalUpdate,
    handleVisibleModalDetail,
    visibleModalDetail,
  } = props;

  function SignOut() {
    try {
      Auth.signOut();
    } catch (err) {
      console.log(err);
    }
  }

  return (
    <View style={styles.header}>
      <View style={styles.headerText}>
        <Text style={styles.textColor}>App</Text>
      </View>

      <View>
        {isModal ? (
          !visibleModalDetail ? (
            <TouchableOpacity
              onPress={() => handleModalVisible(!visibleModalUpdate)}>
              <Icon name="close" size={20} color="white" />
            </TouchableOpacity>
          ) : (
            <TouchableOpacity
              onPress={() => handleVisibleModalDetail(!visibleModalDetail)}>
              <Icon name="close" size={20} color="white" />
            </TouchableOpacity>
          )
        ) : (
          <TouchableOpacity onPress={() => SignOut()}>
            <Icon name="logout" size={20} color="white" />
          </TouchableOpacity>
        )}
      </View>
    </View>
  );
}

function UpdateModal(props) {
  const {handleModalVisible, visibleModalUpdate} = props;

  return (
    <Modal visible={visibleModalUpdate}>
      <Header
        isModal={true}
        handleModalVisible={handleModalVisible}
        visibleModalUpdate={visibleModalUpdate}
      />

      <View>
        <Text>isUpdate</Text>
      </View>
    </Modal>
  );
}

function DetailModal(props) {
  const {selectedTask, handleVisibleModalDetail, visibleModalDetail} = props;

  return (
    <Modal visible={visibleModalDetail}>
      <Header
        isModal={true}
        handleVisibleModalDetail={handleVisibleModalDetail}
        visibleModalDetail={visibleModalDetail}
      />

      <View style={styles.containerModalDetail}>
        <View style={styles.containerField}>
          <Text>ID: </Text>
          <Text>{selectedTask.id}</Text>
        </View>

        <View style={styles.containerField}>
          <Text>Name: </Text>
          <Text>{selectedTask.name}</Text>
        </View>

        <View style={styles.containerField}>
          <Text>Created At</Text>
          <Text>{selectedTask.createdAt}</Text>
        </View>
      </View>
    </Modal>
  );
}

const styles = {
  containerField: {
    flex: 1,
    flexDirection: 'row',
  },
  containerModalDetail: {
    flex: 1,
    width: '100%',
    alignItems: 'center',
    flexDirection: 'column',
    justifyContent: 'center',
  },
  containerDetail: {
    flex: 1,
    justifyContent: 'center',
  },
  mainContainer: {
    flex: 1,
    width: '100%',
  },
  container: {
    flex: 0,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  containerField: {
    flex: 1,
    width: '100%',
  },
  field: {
    flex: 0,
    flexDirection: 'row',
    margin: 20,
    padding: 20,
  },
  header: {
    flex: 0,
    flexDirection: 'row',
    backgroundColor: '#003366',
    alignItems: 'center',
    paddingHorizontal: 10,
    height: 50,
    width: '100%',
  },
  headerText: {
    marginRight: 'auto',
  },
  textColor: {
    color: 'white',
    fontWeight: 'bold',
  },
  textInputTask: {
    borderBottomWidth: 1,
    minWidth: 255,
  },
  btnGeneral: {
    flex: 0,
    width: 90,
    height: 40,
    borderRadius: 5,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'purple',
  },
  textGeneralBtn: {
    color: 'white',
  },
  subFieldName: {
    width: '60%',
  },
  marginSubField: {
    marginHorizontal: 10,
  },
};

export default withAuthenticator(App);