Skip to content

Instantly share code, notes, and snippets.

@fernandoamz
Last active Mar 5, 2021
Embed
What would you like to do?
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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment