Files
Project-MAD-crudler/src/components/screens/ModuleListScreen.js
T

70 lines
2.0 KiB
JavaScript

import {useState} from "react";
import {LogBox, StyleSheet} from "react-native";
import Screen from "../layout/Screen";
import ModuleList from "../entity/modules/ModuleList";
import initialModules from "../../data/modules.js";
// import RenderCount from "../UI/RenderCount";
import {Button, ButtonTray} from "../UI/Button";
import Icons from "../UI/Icons";
const ModuleListScreen = ({navigation}) => {
// Initialisation -------------
// let modules = initialModules;
LogBox.ignoreLogs(['Non-serializable values were found in the navigation state']);
// State ----------------------
const [modules, setModules] = useState(initialModules);
// Handlers -------------------
const handleDelete = (module) =>
setModules(modules.filter((item) => item.ModuleID !== module.ModuleID));
const onDelete = (module) => {
handleDelete(module);
navigation.goBack();
}
const handleAdd = (module) => setModules([...modules, module]);
const handleModify = (updatedModule) => setModules(
modules.map((module) => (module.ModuleID === updatedModule.ModuleID) ? updatedModule : module),
);
const onAdd = (module) => {
handleAdd(module);
navigation.goBack();
};
const onModify = (module) => {
handleModify(module);
navigation.replace('ModuleViewScreen', { module, onDelete, onModify });
};
const goToViewScreen = (module) =>
navigation.navigate('ModuleViewScreen', {module, onDelete, onModify});
const goToAddScreen = () =>
navigation.navigate('ModuleAddScreen', {onAdd});
// View -----------------------
return (
<Screen>
{/*<RenderCount/>*/}
<ButtonTray>
<Button label='Add' icon={<Icons.Add/>} onClick={goToAddScreen}/>
</ButtonTray>
<ModuleList modules={modules} onSelect={goToViewScreen}/>
</Screen>
);
};
const styles = StyleSheet.create({});
export default ModuleListScreen;