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

Module View added, with images and moved view into reusable component for ModuleView. All activities done for week 2.

Browse Source
This commit is contained in:
bobbert committed 2025-10-30 10:31:03 +00:00
1 parent c18a531a9c
commit 2eacee759a
11 files changed
+120 -74
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

App.js
+30 -30
View File
@@ -1,5 +1,5 @@
import { NavigationContainer } from "@react-navigation/native"; import {NavigationContainer} from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack"; import {createNativeStackNavigator} from "@react-navigation/native-stack";
import ModuleListScreen from "./src/components/screens/ModuleListScreen"; import ModuleListScreen from "./src/components/screens/ModuleListScreen";
import ModuleModifyScreen from "./src/components/screens/ModuleModifyScreen"; import ModuleModifyScreen from "./src/components/screens/ModuleModifyScreen";
import ModuleViewScreen from "./src/components/screens/ModuleViewScreen"; import ModuleViewScreen from "./src/components/screens/ModuleViewScreen";
@@ -14,38 +14,38 @@ export const App = () => {
// View ----------------------- // View -----------------------
return ( return (
<NavigationContainer> <NavigationContainer>
<Stack.Navigator <Stack.Navigator
initialRouteName='ModuleListScreen' initialRouteName='ModuleListScreen'
screenOptions= {{ screenOptions={{
headerStyle: { backgroundColor: "black" }, headerStyle: {backgroundColor: "black"},
headerTintColor: "white" headerTintColor: "white"
}} }}
> >
<Stack.Screen <Stack.Screen
name="ModuleListScreen" name="ModuleListScreen"
component={ModuleListScreen} component={ModuleListScreen}
options={{ title: 'List Modules' }} options={{title: 'List Modules'}}
/> />
<Stack.Screen <Stack.Screen
name="ModuleAddScreen" name="ModuleAddScreen"
component={ModuleAddScreen} component={ModuleAddScreen}
options={{ title: 'Add Modules' }} options={{title: 'Add Modules'}}
/> />
<Stack.Screen <Stack.Screen
name="ModuleViewScreen" name="ModuleViewScreen"
component={ModuleViewScreen} component={ModuleViewScreen}
options={{ title: 'View Modules' }} options={{title: 'View Modules'}}
/> />
<Stack.Screen <Stack.Screen
name="ModuleModifyScreen" name="ModuleModifyScreen"
component={ModuleModifyScreen} component={ModuleModifyScreen}
options={{ title: 'Modify Modules' }} options={{title: 'Modify Modules'}}
/> />
</Stack.Navigator> </Stack.Navigator>
</NavigationContainer> </NavigationContainer>
); );
package-lock.json
Generated
+7 -1
View File
@@ -13,7 +13,8 @@
"expo": "^54.0.20", "expo": "^54.0.20",
"expo-status-bar": "~3.0.8", "expo-status-bar": "~3.0.8",
"react": "19.1.0", "react": "19.1.0",
"react-native": "^0.81.5" "react-native": "^0.81.5",
"react-native-fullwidth-image": "^0.1.3"
} }
}, },
"node_modules/@0no-co/graphql.web": { "node_modules/@0no-co/graphql.web": {
@@ -7756,6 +7757,11 @@
} }
} }
}, },
"node_modules/react-native-fullwidth-image": {
"version": "0.1.3",
"resolved": "https://registry.npmjs.org/react-native-fullwidth-image/-/react-native-fullwidth-image-0.1.3.tgz",
"integrity": "sha512-nFe5EAEPlPaT1vw1abwnNmSZN9oLMzNXJAKKxeuWqPI9L7rGhXhpZH4KEBUzbqkk+58TjdT9d2bf070/GB4PGQ=="
},
"node_modules/react-native-is-edge-to-edge": { "node_modules/react-native-is-edge-to-edge": {
"version": "1.2.1", "version": "1.2.1",
"resolved": "https://registry.npmjs.org/react-native-is-edge-to-edge/-/react-native-is-edge-to-edge-1.2.1.tgz", "resolved": "https://registry.npmjs.org/react-native-is-edge-to-edge/-/react-native-is-edge-to-edge-1.2.1.tgz",
package.json
+2 -1
View File
@@ -14,7 +14,8 @@
"expo": "^54.0.20", "expo": "^54.0.20",
"expo-status-bar": "~3.0.8", "expo-status-bar": "~3.0.8",
"react": "19.1.0", "react": "19.1.0",
"react-native": "^0.81.5" "react-native": "^0.81.5",
"react-native-fullwidth-image": "^0.1.3"
}, },
"private": true "private": true
} }
src/components/entity/modules/ModuleItem.js
+2 -2
View File
@@ -1,12 +1,12 @@
import {StyleSheet, Text, View, Pressable} from "react-native"; import {StyleSheet, Text, View, Pressable} from "react-native";
const ModuleItem = ({module, onSelect }) => { const ModuleItem = ({module, onSelect}) => {
// Initialisation ------------- // Initialisation -------------
// State ---------------------- // State ----------------------
// Handlers ------------------- // Handlers -------------------
// View ----------------------- // View -----------------------
return( return (
<Pressable key={module.ModuleCode} onPress={() => onSelect(module)}> <Pressable key={module.ModuleCode} onPress={() => onSelect(module)}>
<View style={styles.modulesItem}> <View style={styles.modulesItem}>
<Text style={styles.text}> <Text style={styles.text}>
src/components/entity/modules/ModuleList.js
+4 -4
View File
@@ -1,17 +1,17 @@
import {StyleSheet, ScrollView } from "react-native"; import {StyleSheet, ScrollView} from "react-native";
import ModuleItem from "./ModuleItem"; import ModuleItem from "./ModuleItem";
import React from "react"; import React from "react";
const ModuleList = ({modules, onSelect }) => { const ModuleList = ({modules, onSelect}) => {
// Initialisation ------------- // Initialisation -------------
// State ---------------------- // State ----------------------
// Handlers ------------------- // Handlers -------------------
// View ----------------------- // View -----------------------
return( return (
<ScrollView style={styles.modulesContainer}> <ScrollView style={styles.modulesContainer}>
{modules.map((module) => { {modules.map((module) => {
return( return (
<ModuleItem <ModuleItem
module={module} module={module}
key={module.ModuleCode} key={module.ModuleCode}
src/components/entity/modules/ModuleView.js
+42
View File
@@ -0,0 +1,42 @@
import {StyleSheet, Text, View } from "react-native";
import FullWidthImage from "react-native-fullwidth-image";
const ModuleView = ({module}) => {
// Initialisation -------------
// State ----------------------
// Handlers -------------------
// View -----------------------
return (<View style={styles.container}>
<FullWidthImage source={{uri: module.ModuleImage}} style={styles.image}/>
<View style={styles.infoTray}>
<Text style={styles.boldText}>View {module.ModuleCode} {module.ModuleName}</Text>
<Text style={styles.text}>Level {module.ModuleLevel}</Text>
<Text style={styles.Text}>
{module.ModuleLeaderName} <Text style={styles.dimText}>(Module Leader)</Text>
</Text>
</View>
</View>);
};
const styles = StyleSheet.create({
container: {
gap: 15,
}, infoTray: {
gap: 5,
}, image: {
borderRadius: 3,
}, text: {
fontSize: 16,
}, boldText: {
fontSize: 16, fontWeight: 'bold',
}, dimText: {
color: "grey",
}
});
export default ModuleView;
src/components/layout/Screen.js
+3 -3
View File
@@ -1,5 +1,5 @@
import { StatusBar } from "expo-status-bar"; import {StatusBar} from "expo-status-bar";
import { StyleSheet, View } from "react-native"; import {StyleSheet, View} from "react-native";
const Screen = ({children}) => { const Screen = ({children}) => {
// Initialisation ------------- // Initialisation -------------
@@ -9,7 +9,7 @@ const Screen = ({children}) => {
return ( return (
<View style={styles.screen}> <View style={styles.screen}>
{children} {children}
<StatusBar style="light" /> <StatusBar style="light"/>
</View> </View>
); );
}; };
src/components/screens/ModuleAddScreen.js
+6 -6
View File
@@ -1,4 +1,4 @@
import { StyleSheet, Text } from "react-native"; import {StyleSheet, Text} from "react-native";
import Screen from "../layout/Screen"; import Screen from "../layout/Screen";
export const ModuleAddScreen = () => { export const ModuleAddScreen = () => {
@@ -6,11 +6,11 @@ export const ModuleAddScreen = () => {
// State ---------------------- // State ----------------------
// Handlers ------------------- // Handlers -------------------
// View ----------------------- // View -----------------------
return ( return (
<Screen style={styles.container}> <Screen style={styles.container}>
<Text>Add</Text> <Text>Add</Text>
</Screen> </Screen>
); );
}; };
const styles = StyleSheet.create({}); const styles = StyleSheet.create({});
src/components/screens/ModuleListScreen.js
+10 -11
View File
@@ -1,17 +1,16 @@
import { useState } from "react"; import {useState} from "react";
import { StyleSheet } from "react-native"; import {StyleSheet} from "react-native";
import Screen from "../layout/Screen"; import Screen from "../layout/Screen";
import ModuleList from "../entity/modules/ModuleList"; import ModuleList from "../entity/modules/ModuleList";
import initialModules from "../../data/modules.js"; import initialModules from "../../data/modules.js";
import RenderCount from "../UI/RenderCount"; import RenderCount from "../UI/RenderCount";
import ModuleViewScreen from "./ModuleViewScreen";
const ModuleListScreen = ({navigation}) => { const ModuleListScreen = ({navigation}) => {
// Initialisation ------------- // Initialisation -------------
// let modules = initialModules; // let modules = initialModules;
// State ---------------------- // State ----------------------
const [ modules, setModules] = useState(initialModules); const [modules, setModules] = useState(initialModules);
// Handlers ------------------- // Handlers -------------------
@@ -19,15 +18,15 @@ const ModuleListScreen = ({navigation}) => {
const handleDelete = (module) => const handleDelete = (module) =>
setModules(modules.filter((item) => item.ModuleID !== module.ModuleID)); setModules(modules.filter((item) => item.ModuleID !== module.ModuleID));
const handleSelect = (module) => navigation.navigate('ModuleViewScreen', { module }); const handleSelect = (module) => navigation.navigate('ModuleViewScreen', {module});
// View ----------------------- // View -----------------------
return ( return (
<Screen> <Screen>
<RenderCount /> <RenderCount/>
<ModuleList modules={modules} onSelect={handleSelect} /> <ModuleList modules={modules} onSelect={handleSelect}/>
</Screen> </Screen>
); );
}; };
const styles = StyleSheet.create({}); const styles = StyleSheet.create({});
src/components/screens/ModuleModifyScreen.js
+6 -6
View File
@@ -1,4 +1,4 @@
import { StyleSheet, Text } from "react-native"; import {StyleSheet, Text} from "react-native";
import Screen from "../layout/Screen"; import Screen from "../layout/Screen";
export const ModuleModifyScreen = () => { export const ModuleModifyScreen = () => {
@@ -6,11 +6,11 @@ export const ModuleModifyScreen = () => {
// State ---------------------- // State ----------------------
// Handlers ------------------- // Handlers -------------------
// View ----------------------- // View -----------------------
return ( return (
<Screen style={styles.container}> <Screen style={styles.container}>
<Text>Modify</Text> <Text>Modify</Text>
</Screen> </Screen>
); );
}; };
const styles = StyleSheet.create({}); const styles = StyleSheet.create({});
src/components/screens/ModuleViewScreen.js
+8 -10
View File
@@ -1,21 +1,19 @@
import { StyleSheet, Text } from "react-native"; import {StyleSheet} from "react-native";
import Screen from "../layout/Screen"; import Screen from "../layout/Screen";
import ModuleView from "../entity/modules/ModuleView";
export const ModuleViewScreen = ({Navigate, route}) => {
export const ModuleViewScreen = ({ route }) => {
// Initialisation ------------- // Initialisation -------------
const { module } = route.params; const {module} = route.params;
// State ---------------------- // State ----------------------
// Handlers ------------------- // Handlers -------------------
// View ----------------------- // View -----------------------
return ( return (<Screen>
<Screen style={styles.container}> <ModuleView module={module}></ModuleView>
<Text> </Screen>);
View {module.ModuleCode} {module.ModuleName}
</Text>
</Screen>
);
}; };
const styles = StyleSheet.create({}); const styles = StyleSheet.create({});