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

Merge pull request #6 from mudabbir-ahmad/week3act3

Browse Source 
Week3act3
This commit is contained in:
bobbert authored and GitHub committed 2025-12-04 14:21:14 +00:00
2 parents b6e43cdf16 8511afddcd
commit 2b8dc4c249
9 files changed
+211 -40
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Template.js
+17
View File
@@ -0,0 +1,17 @@
import {Pressable, ScrollView, StyleSheet, Text, View} from "react-native";
const Component = () => {
// Initialisation -------------
// State ----------------------
// Handlers -------------------
// View -----------------------
return (
<Text></Text>
);
};
const styles = StyleSheet.create({});
export default Component;
package-lock.json
Generated
+30 -28
View File
@@ -8,6 +8,7 @@
"name": "crudler",
"version": "1.0.0",
"dependencies": {
"@expo/vector-icons": "^15.0.3",
"@react-navigation/native": "^7.1.18",
"@react-navigation/native-stack": "^7.5.1",
"expo": "^54.0.20",
@@ -15,6 +16,9 @@
"react": "19.1.0",
"react-native": "^0.81.5",
"react-native-fullwidth-image": "^0.1.3"
},
"devDependencies": {
"baseline-browser-mapping": "^2.9.0"
}
},
"node_modules/@0no-co/graphql.web": {
@@ -2539,6 +2543,16 @@
"integrity": "sha512-HHQigo3rQWKMDzYDLkubN5WQOYXJJE2eNqIQC2axC2iO3mHdwnIR7FgZVvHWtBwAdzBgAP0ECp8KqS8TiMKvgw==",
"license": "MIT"
},
"node_modules/@expo/vector-icons": {
"version": "15.0.3",
"resolved": "https://registry.npmjs.org/@expo/vector-icons/-/vector-icons-15.0.3.tgz",
"integrity": "sha512-SBUyYKphmlfUBqxSfDdJ3jAdEVSALS2VUPOUyqn48oZmb2TL/O7t7/PQm5v4NQujYEPLPMTLn9KVw6H7twwbTA==",
"peerDependencies": {
"expo-font": ">=14.0.4",
"react": "*",
"react-native": "*"
}
},
"node_modules/@expo/ws-tunnel": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/@expo/ws-tunnel/-/ws-tunnel-1.0.6.tgz",
@@ -3936,9 +3950,9 @@
]
},
"node_modules/baseline-browser-mapping": {
"version": "2.8.10",
"resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.10.tgz",
"integrity": "sha512-uLfgBi+7IBNay8ECBO2mVMGZAc1VgZWEChxm4lv+TobGdG82LnXMjuNGo/BSSZZL4UmkWhxEHP2f5ziLNwGWMA==",
"version": "2.9.0",
"resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.0.tgz",
"integrity": "sha512-Mh++g+2LPfzZToywfE1BUzvZbfOY52Nil0rn9H1CPC5DJ7fX+Vir7nToBeoiSbB1zTNeGYbELEvJESujgGrzXw==",
"bin": {
"baseline-browser-mapping": "dist/cli.js"
}
@@ -4779,6 +4793,19 @@
}
}
},
"node_modules/expo-font": {
"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==",
"dependencies": {
"fontfaceobserver": "^2.1.0"
},
"peerDependencies": {
"expo": "*",
"react": "*",
"react-native": "*"
}
},
"node_modules/expo-modules-autolinking": {
"version": "3.0.19",
"resolved": "https://registry.npmjs.org/expo-modules-autolinking/-/expo-modules-autolinking-3.0.19.tgz",
@@ -5060,17 +5087,6 @@
}
}
},
"node_modules/expo/node_modules/@expo/vector-icons": {
"version": "15.0.3",
"resolved": "https://registry.npmjs.org/@expo/vector-icons/-/vector-icons-15.0.3.tgz",
"integrity": "sha512-SBUyYKphmlfUBqxSfDdJ3jAdEVSALS2VUPOUyqn48oZmb2TL/O7t7/PQm5v4NQujYEPLPMTLn9KVw6H7twwbTA==",
"license": "MIT",
"peerDependencies": {
"expo-font": ">=14.0.4",
"react": "*",
"react-native": "*"
}
},
"node_modules/expo/node_modules/ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -5222,20 +5238,6 @@
"react-native": "*"
}
},
"node_modules/expo/node_modules/expo-font": {
"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==",
"license": "MIT",
"dependencies": {
"fontfaceobserver": "^2.1.0"
},
"peerDependencies": {
"expo": "*",
"react": "*",
"react-native": "*"
}
},
"node_modules/expo/node_modules/expo-keep-awake": {
"version": "15.0.7",
"resolved": "https://registry.npmjs.org/expo-keep-awake/-/expo-keep-awake-15.0.7.tgz",
package.json
+5 -1
View File
@@ -9,6 +9,7 @@
"web": "expo start --web"
},
"dependencies": {
"@expo/vector-icons": "^15.0.3",
"@react-navigation/native": "^7.1.18",
"@react-navigation/native-stack": "^7.5.1",
"expo": "^54.0.20",
@@ -17,5 +18,8 @@
"react-native": "^0.81.5",
"react-native-fullwidth-image": "^0.1.3"
},
"private": true
"private": true,
"devDependencies": {
"baseline-browser-mapping": "^2.9.0"
}
}
src/components/UI/Button.js
+58
View File
@@ -0,0 +1,58 @@
import {Pressable, StyleSheet, Text, View} from "react-native";
export const Button = ({label, icon, onClick, styleLabel, styleButton}) => {
// Initialisation -------------
// State ----------------------
// Handlers -------------------
// View -----------------------
return (
<Pressable onPress={onClick} style={[styles.button, styleButton]}>
{
icon ? icon : null
}
<Text style={[styles.label, styleLabel]}>
{label}
</Text>
</Pressable>
);
};
export const ButtonTray = ({children}) => {
// Initialisation -------------
// State ----------------------
// Handlers -------------------
// View -----------------------
return (
<View style={styles.buttonTray}>{children}</View>
);
};
const styles = StyleSheet.create({
button: {
minHeight: 50,
borderWidth: 1,
borderRadius: 7,
borderColor: 'grey',
backgroundColor: 'white',
alignItems: 'center',
justifyContent: 'center',
padding: 3,
flex: 1,
flexDirection: 'row',
gap: 5,
},
label: {
fontSize: 16,
},
buttonTray: {
flexDirection: 'row',
gap: 15,
}
});
src/components/UI/Icons.js
+18
View File
@@ -0,0 +1,18 @@
import {MaterialIcons} from '@expo/vector-icons';
const Icons = {};
const Add = () => <MaterialIcons name='add' size={16}/>;
const Close = () => <MaterialIcons name='close' size={16}/>;
const Delete = () => <MaterialIcons name='delete' size={16}/>;
const Edit = () => <MaterialIcons name='edit' size={16}/>;
const Submit = () => <MaterialIcons name='check' size={16}/>;
// Compose
Icons.Add = Add;
Icons.Close = Close;
Icons.Delete = Delete;
Icons.Edit = Edit;
Icons.Submit = Submit;
export default Icons;
src/components/entity/modules/ModuleView.js
+30 -3
View File
@@ -1,10 +1,26 @@
import {StyleSheet, Text, View } from "react-native";
import {Alert, StyleSheet, Text, View} from "react-native";
import FullWidthImage from "react-native-fullwidth-image";
import {Button, ButtonTray} from "../../UI/Button";
import Icons from "../../UI/Icons.js"
const ModuleView = ({module}) => {
const ModuleView = ({module, onDelete}) => {
// Initialisation -------------
// State ----------------------
// Handlers -------------------
const handleDelete = () => onDelete(module);
const requestDelete = () => {
Alert.alert(
'Delete Warning',
`Are you sure you want to delete module ${module.ModuleCode} ${module.ModuleName}?`,
[
{text: 'cancel'},
{text: 'Delete', onPress: handleDelete}
]
);
}
// View -----------------------
return (<View style={styles.container}>
@@ -16,8 +32,19 @@ const ModuleView = ({module}) => {
<Text style={styles.Text}>
{module.ModuleLeaderName} <Text style={styles.dimText}>(Module Leader)</Text>
</Text>
</View>
<ButtonTray>
<Button icon={<Icons.Edit/>} label={"Modify"}/>
<Button
icon={<Icons.Delete/>}
label={"Delete"}
// styleButton={{backgroundColor: 'mistyrose'}}
// styleLabel={{color: 'red'}}
onClick={requestDelete}
/>
</ButtonTray>
</View>);
};
src/components/screens/ModuleAddScreen.js
+23 -1
View File
@@ -1,14 +1,36 @@
import {StyleSheet, Text} from "react-native";
import Screen from "../layout/Screen";
import {Button, ButtonTray} from "../UI/Button";
import Icons from "../UI/Icons";
export const ModuleAddScreen = () => {
const defaultModule = {
ModuleID: Math.floor(100000 + Math.random()*900000),
ModuleCode: "CI6330",
ModuleName: "Mobile Application Development",
ModuleLevel: 6,
ModuleLeaderID: 1,
ModuleLeaderName: "Graeme Jones",
ModuleImage: 'https://images.freeimages.com/images/small-preview/cf5/cellphone-1313194.jpg',
};
export const ModuleAddScreen = ({navigation, route}) => {
// Initialisation -------------
const { onAdd } = route.params;
// State ----------------------
// Handlers -------------------
const handleAdd = () => onAdd(defaultModule);
const handleCancel = navigation.goBack;
// View -----------------------
return (
<Screen style={styles.container}>
<Text>Add</Text>
<ButtonTray>
<Button label='Cancel' onClick={handleCancel} />
<Button label='Add' icon={<Icons.Add/>} onClick={handleAdd} />
</ButtonTray>
</Screen>
);
};
src/components/screens/ModuleListScreen.js
+28 -5
View File
@@ -1,13 +1,16 @@
import {useState} from "react";
import {StyleSheet} from "react-native";
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 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);
@@ -18,13 +21,33 @@ const ModuleListScreen = ({navigation}) => {
const handleDelete = (module) =>
setModules(modules.filter((item) => item.ModuleID !== module.ModuleID));
const handleSelect = (module) => navigation.navigate('ModuleViewScreen', {module});
const onDelete = (module) => {
handleDelete(module);
navigation.goBack();
}
const handleAdd = (module) => setModules([ ...modules, module]);
const onAdd = (module) => {
handleAdd(module);
navigation.goBack();
};
const goToViewScreen = (module) =>
navigation.navigate('ModuleViewScreen', {module, onDelete});
const goToAddScreen = () => navigation.navigate('ModuleAddScreen', {onAdd});
// View -----------------------
return (
<Screen>
<RenderCount/>
<ModuleList modules={modules} onSelect={handleSelect}/>
{/*<RenderCount/>*/}
<ButtonTray>
<Button label='Add' icon={<Icons.Add/>} onClick={goToAddScreen} />
</ButtonTray>
<ModuleList modules={modules} onSelect={goToViewScreen} />
</Screen>
);
};
src/components/screens/ModuleViewScreen.js
+2 -2
View File
@@ -6,13 +6,13 @@ import ModuleView from "../entity/modules/ModuleView";
export const ModuleViewScreen = ({route}) => {
// Initialisation -------------
const {module} = route.params;
const {module, onDelete} = route.params;
// State ----------------------
// Handlers -------------------
// View -----------------------
return (<Screen>
<ModuleView module={module}></ModuleView>
<ModuleView module={module} onDelete={onDelete}></ModuleView>
</Screen>);
};