bobbert/Project-MAD-crudler
1
0 Fork 0
mirror of https://github.com/mudabbir-ahmad/Project-MAD-crudler.git synced 2026-10-07 20:40:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactored Code

Browse Source
This commit is contained in:
bobbert committed 2025-12-04 16:26:58 +00:00
1 parent 6f062bb150
commit a08c48b8b1
6 files changed
+179 -97
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/UI/Form.js
+73
View File
@@ -0,0 +1,73 @@
import {StyleSheet, Text, TextInput, View} from "react-native";
import {Button, ButtonTray} from "./Button";
import Icons from "./Icons";
const Form = ({children, onSubmit, onCancel, submitLabel, submitIcon}) => {
// Initialisation -------------
// State ----------------------
// Handlers -------------------
// View -----------------------
return (
<View style={styles.formContainer}>
<View style={styles.formItems}>
{children}
</View>
<ButtonTray>
<Button label='Cancel' icon={<Icons.Close/>} onClick={onCancel}/>
<Button label={submitLabel} icon={submitIcon} onClick={onSubmit}/>
</ButtonTray>
</View>
);
};
const InputText = ({label, value, onChange}) => {
// Initialisation -------------
// State ----------------------
// Handlers -------------------
// View -----------------------
return (
<View style={styles.item}>
<Text style={styles.itemLabel}>{label}</Text>
<TextInput
value={value}
onChangeText={onChange}
style={styles.itemTextInput}
/>
</View>
)
};
// Compose components
Form.InputText = InputText;
// Styles
const styles = StyleSheet.create({
itemLabel: {
color: 'gray',
fontSize: 16,
margin: 5,
},
itemTextInput: {
height: 50,
paddingLeft: 10,
fontSize: 16,
backgroundColor: 'white',
borderRadius: 7,
borderWidth: 1,
borderColor: 'lightgray',
},
formItems: {
gap: 5,
},
formContainer: {
gap: 10
},
});
export default Form;
src/components/entity/modules/moduleForm.js
+93
View File
@@ -0,0 +1,93 @@
import {StyleSheet, Text, TextInput, View} from "react-native";
import {useState} from "react";
import Icons from "../../UI/Icons";
import Form from "../../UI/Form";
const defaultModule = {
ModuleID: null,
ModuleCode: null,
ModuleName: null,
ModuleLevel: null,
ModuleLeaderID: null,
ModuleLeaderName: null,
ModuleImage: null,
};
const ModuleForm = ({onSubmit, onCancel}) => {
// Initialisation -------------
defaultModule.ModuleID = Math.floor(100000 + Math.random() * 900000);
defaultModule.ModuleImage = 'https://images.freeimages.com/images/small-preview/cf5/cellphone-1313194.jpg';
// State ----------------------
const [module, setModule] = useState(defaultModule);
// Handlers -------------------
const handleChange = (field, value) => {
setModule({...module, [field]: value})
};
const handleSubmit = () => onSubmit(module);
// View -----------------------
const submitLabel = 'Add';
const submitIcon = <Icons.Add/>;
return (
<Form
onSubmit={handleSubmit}
onCancel={onCancel}
submitLabel={submitLabel}
submitIcon={submitIcon}
>
<Form.InputText
label='Module Code'
value={module.ModuleCode}
onChange={(value) => handleChange('ModuleCode', value)}
/>
<Form.InputText
label='Module Name'
value={module.ModuleName}
onChange={(value) => handleChange('ModuleName', value)}
/>
<Form.InputText
label='Module Level'
value={module.ModuleLevel}
onChange={(value) => handleChange('ModuleLevel', value)}
/>
<Form.InputText
label='Module Leader Name'
value={module.ModuleLeaderName}
onChange={(value) => handleChange('ModuleLeaderName', value)}
/>
<Form.InputText
label='Module Image URL'
value={module.ModuleImage}
onChange={(value) => handleChange('ModuleImage', value)}
/>
{/* This is to test whether the correct Data was being stored in Local State */}
{/*<Text> {module.ModuleCode} {module.ModuleName} </Text>*/}
</Form>
);
};
const styles = StyleSheet.create({
formContainer: {},
item: {},
});
export default ModuleForm;
src/components/screens/ModuleAddScreen.js
+3 -94
View File
@@ -1,115 +1,24 @@
import {StyleSheet, Text, TextInput, View} from "react-native";
import Screen from "../layout/Screen";
import {Button, ButtonTray} from "../UI/Button";
import Icons from "../UI/Icons";
import {useState} from "react";
import ModuleForm from "../entity/modules/moduleForm";
const defaultModule = {
ModuleID: null,
ModuleCode: null,
ModuleName: null,
ModuleLevel: null,
ModuleLeaderID: null,
ModuleLeaderName: null,
ModuleImage: null,
};
export const ModuleAddScreen = ({navigation, route}) => {
// Initialisation -------------
const {onAdd} = route.params;
defaultModule.ModuleID = Math.floor(100000 + Math.random() * 900000);
defaultModule.ModuleImage = 'https://images.freeimages.com/images/small-preview/cf5/cellphone-1313194.jpg';
// State ----------------------
const [module, setModule] = useState(defaultModule);
// Handlers -------------------
const handleAdd = () => onAdd(module);
const handleCancel = navigation.goBack;
const handleChange = (field, value) => {setModule( {...module, [field]: value} )};
// View -----------------------
return (
<Screen style={styles.container}>
<View style={styles.item}>
<Text style={styles.itemLabel}>Module Code</Text>
<TextInput
value={module.ModuleCode}
onChangeText={ (value) => handleChange('ModuleCode',value) }
style={styles.itemTextInput}
/>
</View>
<View style={styles.item}>
<Text style={styles.itemLabel}>Module Name</Text>
<TextInput
value={module.ModuleName}
onChangeText={ (value) => handleChange('ModuleName',value) }
style={styles.itemTextInput}
/>
</View>
<View style={styles.item}>
<Text style={styles.itemLabel}>Module Level</Text>
<TextInput
value={module.ModuleLevel}
onChangeText={ (value) => handleChange('ModuleLevel',value) }
style={styles.itemTextInput}
/>
</View>
<View style={styles.item}>
<Text style={styles.itemLabel}>Module Leader Name</Text>
<TextInput
value={module.ModuleLeaderName}
onChangeText={ (value) => handleChange('ModuleLeaderName',value) }
style={styles.itemTextInput}
/>
</View>
<View style={styles.item}>
<Text style={styles.itemLabel}>Module Image URL</Text>
<TextInput
value={module.ModuleImage}
onChangeText={ (value) => handleChange('ModuleImage',value) }
style={styles.itemTextInput}
/>
</View>
{/* This is to test whether the correct Data was being stored in Local State */}
{/*<Text> {module.ModuleCode} {module.ModuleName} </Text>*/}
<ButtonTray>
<Button label='Cancel' onClick={handleCancel}/>
<Button label='Add' icon={<Icons.Add/>} onClick={handleAdd}/>
</ButtonTray>
<ModuleForm onSubmit={onAdd} onCancel={handleCancel}/>
</Screen>
);
};
const styles = StyleSheet.create({
item: {},
itemLabel: {
color: 'gray',
fontSize: 16,
margin: 5,
},
itemTextInput: {
height: 50,
paddingLeft: 10,
fontSize: 16,
backgroundColor: 'white',
borderRadius: 7,
borderWidth: 1,
borderColor: 'lightgray',
},
});
const styles = StyleSheet.create({});
export default ModuleAddScreen;
src/components/screens/ModuleViewScreen.js
+1 -1
View File
@@ -12,7 +12,7 @@ export const ModuleViewScreen = ({route}) => {
// Handlers -------------------
// View -----------------------
return (<Screen>
<ModuleView module={module} onDelete={onDelete}></ModuleView>
<ModuleView module={module} onDelete={onDelete} />
</Screen>);
};