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

Template.js
+1 -1
View File
@@ -8,7 +8,7 @@ const Component = () => {
// View -----------------------
return (
<Text></Text>
<View></View>
);
};
package-lock.json
Generated
+8 -1
View File
@@ -55,6 +55,7 @@
"version": "7.28.4",
"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.4.tgz",
"integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==",
"peer": true,
"dependencies": {
"@babel/code-frame": "^7.27.1",
"@babel/generator": "^7.28.3",
@@ -4050,6 +4051,7 @@
"url": "https://github.com/sponsors/ai"
}
],
"peer": true,
"dependencies": {
"baseline-browser-mapping": "^2.8.9",
"caniuse-lite": "^1.0.30001746",
@@ -4746,6 +4748,7 @@
"resolved": "https://registry.npmjs.org/expo/-/expo-54.0.20.tgz",
"integrity": "sha512-mWHky+H63W60P5Oo+VbtqzF2sLvdaoSSwG57H9rlq1DrgIla++QJZuwJkXXo55lYPymVmkVhwG6FjWYKKylwpw==",
"license": "MIT",
"peer": true,
"dependencies": {
"@babel/runtime": "^7.20.0",
"@expo/cli": "54.0.13",
@@ -4797,6 +4800,7 @@
"version": "14.0.9",
"resolved": "https://registry.npmjs.org/expo-font/-/expo-font-14.0.9.tgz",
"integrity": "sha512-xCoQbR/36qqB6tew/LQ6GWICpaBmHLhg/Loix5Rku/0ZtNaXMJv08M9o1AcrdiGTn/Xf/BnLu6DgS45cWQEHZg==",
"peer": true,
"dependencies": {
"fontfaceobserver": "^2.1.0"
},
@@ -7672,6 +7676,7 @@
"version": "19.1.0",
"resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
"integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
"peer": true,
"engines": {
"node": ">=0.10.0"
}
@@ -7689,7 +7694,6 @@
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/react-freeze/-/react-freeze-1.0.4.tgz",
"integrity": "sha512-r4F0Sec0BLxWicc7HEyo2x3/2icUTrRmDjaaRyzzn+7aDyFZliszMDOgLVwSnQnYENOlL1o569Ze2HZefk8clA==",
"peer": true,
"engines": {
"node": ">=10"
},
@@ -7707,6 +7711,7 @@
"resolved": "https://registry.npmjs.org/react-native/-/react-native-0.81.5.tgz",
"integrity": "sha512-1w+/oSjEXZjMqsIvmkCRsOc8UBYv163bTWKTI8+1mxztvQPhCRYGTvZ/PL1w16xXHneIj/SLGfxWg2GWN2uexw==",
"license": "MIT",
"peer": true,
"dependencies": {
"@jest/create-cache-key-function": "^29.7.0",
"@react-native/assets-registry": "0.81.5",
@@ -7882,6 +7887,7 @@
"version": "0.14.2",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
"integrity": "sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==",
"peer": true,
"engines": {
"node": ">=0.10.0"
}
@@ -9330,6 +9336,7 @@
"resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
"integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
"license": "MIT",
"peer": true,
"funding": {
"url": "https://github.com/sponsors/colinhacks"
}
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>);
};