create BuildingList page

App.js

@@ -6,7 +6,9 @@ import { createStackNavigator } from "@react-navigation/stack";
 import HomePage from "./src/screens/HomePage";
 import NotFoundPage from "./src/screens/NotFoundPage";
 import MapPage from "./src/screens/MapPage";
+import BuildingListPage from "./src/screens/BuildingListPage";
 import NewsAndEventsPage from "./src/screens/NewsAndEventsPage";
+import BuildingDetailsPage from "./src/screens/BuildingDetailsPage";
 
 export default function App() {
   const Stack = createStackNavigator();
@@ -21,6 +23,8 @@ export default function App() {
       >
         <Stack.Screen name="Home" component={HomePage} />
         <Stack.Screen name="React Native Maps" component={MapPage} />
+        <Stack.Screen name="Building List" component={BuildingListPage} />
+        <Stack.Screen name="Building Details" component={BuildingDetailsPage} />
         <Stack.Screen name="NotFound" component={NotFoundPage} />
         <Stack.Screen name="NewsAndEventsPage" component={NewsAndEventsPage} />
       </Stack.Navigator>

src/data/buildings.json

@@ -0,0 +1,30 @@
+[
+  {
+    "id": "1",
+    "name": "Wilmeth Active Learning Center",
+    "acronym": "WALC",
+    "description": "The central library on campus.",
+    "imageUrl": "https://example.com/images/library.jpg"
+  },
+  {
+    "id": "2",
+    "name": "Purdue Memorial Union",
+    "acronym": "PMU",
+    "description": "The heart of campus life, offering dining options, study spaces, and recreational activities.",
+    "imageUrl": "https://example.com/images/student-union.jpg"
+  },
+  {
+    "id": "3",
+    "name": "Purdue University Student Health",
+    "acronym": "PUSH",
+    "description": "The university's teaching hospital and research facility for health sciences.",
+    "imageUrl": "https://example.com/images/medical-center.jpg"
+  },
+  {
+    "id": "4",
+    "name": "Lawson Computer Science Building",
+    "acronym": "LWSN",
+    "description": "Cutting-edge facilities for computer science education and research.",
+    "imageUrl": "https://example.com/images/cs-building.jpg"
+  }
+]

src/screens/BuildingDetailsPage.js

@@ -0,0 +1,139 @@
+import React, { useState, useEffect } from 'react';
+import { View, Text, Image, StyleSheet, ScrollView, ActivityIndicator } from 'react-native';
+import CustomButton from '../components/CustomButton';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+
+export default function BuildingDetailsPage({ route, navigation }) {
+  const { buildingId } = route.params;
+  const [building, setBuilding] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchBuildingDetails = async () => {
+      // try {
+      //   const response = await fetch(
+      //     `https://aspdotnet.dev.sigapp.club/api/building/${buildingId}`,
+      //     {
+      //       method: "GET",
+      //     }
+      //   );
+      //   if (!response.ok) {
+      //     throw new Error('Network response was not ok');
+      //   }
+      //   const buildingsData = await response.json();
+      //   setBuildings(buildingsData);
+      // } catch (error) {
+      //   console.error('Error fetching buildings data from API:', error);
+      try {
+        // If API fetch fails, load data from local JSON file
+        const buildingsData = require('../data/buildings.json');
+        setBuilding(buildingsData);
+        setLoading(false);
+        console.log('Loaded buildings data from local JSON file');
+      } catch (localError) {
+        console.error('Error loading buildings data from local file:', localError);
+        setLoading(false);
+      }
+      // }
+    };
+
+    fetchBuildingDetails();
+  }, []);
+
+  if (loading) {
+    return (
+      <View style={styles.loadingContainer}>
+        <ActivityIndicator size="large" color="#4CAF50" />
+      </View>
+    );
+  }
+
+  if (!building) {
+    return (
+      <View style={styles.errorContainer}>
+        <Text style={styles.errorText}>Failed to load building details.</Text>
+      </View>
+    );
+  }
+
+  return (
+    <ScrollView style={styles.container}>
+      <Image source={{ uri: building.imageUrl }} style={styles.buildingImage} />
+      <View style={styles.contentContainer}>
+        <Text style={styles.buildingName}>{building.name}</Text>
+        <Text style={styles.buildingAcronym}>{building.acronym}</Text>
+        <Text style={styles.buildingDescription}>{building.description}</Text>
+
+        <View style={styles.directionsContainer}>
+          <Icon name="directions" size={24} color="#4CAF50" />
+          <Text style={styles.directionsText}>Get Directions</Text>
+        </View>
+
+        <CustomButton
+          initialText="Go Back"
+          updatedText="Loading..."
+          onPress={() => navigation.goBack()}
+          style={styles.backButton}
+        />
+      </View>
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#F0FDF4',
+  },
+  buildingImage: {
+    width: '100%',
+    height: 200,
+    resizeMode: 'cover',
+  },
+  contentContainer: {
+    padding: 16,
+  },
+  buildingName: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    marginBottom: 8,
+  },
+  buildingAcronym: {
+    fontSize: 18,
+    color: '#666',
+    marginBottom: 16,
+  },
+  buildingDescription: {
+    fontSize: 16,
+    marginBottom: 24,
+  },
+  directionsContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 24,
+  },
+  directionsText: {
+    fontSize: 16,
+    marginLeft: 8,
+    color: '#4CAF50',
+  },
+  backButton: {
+    alignSelf: 'center',
+  },
+  loadingContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  errorContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 16,
+  },
+  errorText: {
+    fontSize: 18,
+    color: 'red',
+    textAlign: 'center',
+  },
+});

src/screens/BuildingListPage.js

@@ -0,0 +1,158 @@
+import React, { useState, useEffect } from 'react';
+import { View, Text, FlatList, StyleSheet, Image, TouchableOpacity } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import CustomButton from '../components/CustomButton';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+
+export default function BuildingListPage() {
+  const navigation = useNavigation();
+  const [buildings, setBuildings] = useState([]);
+
+  // const buildingId = "66ba8693354b31489f8e95b6";
+
+  useEffect(() => {
+    const loadBuildings = async () => {
+      // try {
+      //   const response = await fetch(
+      //     `https://aspdotnet.dev.sigapp.club/api/building/${buildingId}`,
+      //     {
+      //       method: "GET",
+      //     }
+      //   );
+      //   if (!response.ok) {
+      //     throw new Error('Network response was not ok');
+      //   }
+      //   const buildingsData = await response.json();
+      //   setBuildings(buildingsData);
+      // } catch (error) {
+      //   console.error('Error fetching buildings data from API:', error);
+      try {
+        // If API fetch fails, load data from local JSON file
+        const buildingsData = require('../data/buildings.json');
+        setBuildings(buildingsData);
+        console.log('Loaded buildings data from local JSON file');
+      } catch (localError) {
+        console.error('Error loading buildings data from local file:', localError);
+      }
+      // }
+    };
+
+    loadBuildings();
+  }, []);
+
+  const renderItem = ({ item }) => (
+    <View style={styles.itemContainer}>
+      <Image source={{ uri: item.imageUrl }} style={styles.buildingImage} />
+      <View style={styles.directionsContainer}>
+        <Icon name="directions" size={24} color="#4CAF50" />
+      </View>
+      <TouchableOpacity 
+        style={styles.buildingCard}
+        onPress={() => navigation.navigate('Building Details', { building: item })}
+      >
+        <Text style={styles.buildingName}>{item.name}</Text>
+        <Text style={styles.buildingAcronym}>{item.acronym}</Text>
+        <Text style={styles.buildingDescription}>{item.description}</Text>
+      </TouchableOpacity>
+    </View>
+  );
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Buildings at Purdue</Text>
+      <View style={styles.buttonContainer}>
+        <CustomButton
+          initialText="Filter"
+          updatedText="Filtering..."
+          onPress={() => {/* Implement filter logic */}}
+          style={styles.filterButton}
+        />
+        <CustomButton
+          initialText="Sort"
+          updatedText="Sorting..."
+          onPress={() => {/* Implement sort logic */}}
+          style={styles.sortButton}
+        />
+      </View>
+      <FlatList
+        data={buildings}
+        renderItem={renderItem}
+        keyExtractor={(item) => item.id}
+        style={styles.list}
+      />
+      <View style={styles.buttonContainer}>
+        <CustomButton
+          initialText="Go Back"
+          updatedText="Loading..."
+          onPress={() => navigation.goBack()}
+        />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#F0FDF4',
+    width: '100%',
+    height: '100%',
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    textAlign: 'center',
+    marginVertical: 16,
+  },
+  list: {
+    width: '100%',
+    paddingHorizontal: 16,
+  },
+  itemContainer: {
+    flexDirection: 'row',
+    backgroundColor: '#D1FAE5',
+    padding: 16,
+    marginVertical: 8,
+    borderRadius: 8,
+  },
+  buildingImage: {
+    width: 80,
+    height: 80,
+    borderRadius: 4,
+  },
+  directionsContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+  },
+  buildingCard: {
+    flex: 1,
+    marginLeft: 16,
+  },
+  buildingName: {
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+  buildingAcronym: {
+    fontSize: 14,
+    color: '#666',
+  },
+  buildingDescription: {
+    fontSize: 14,
+    marginTop: 4,
+  },
+  buttonContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    width: '100%',
+    marginVertical: 16,
+  },
+  filterButton: {
+    marginRight: 8,
+  },
+  sortButton: {
+    marginLeft: 8,
+  },
+});

src/screens/HomePage.js

@@ -11,6 +11,11 @@ export default function HomePage() {
     navigation.navigate("React Native Maps");
   };
 
+  const handleBuildingList = () => {
+    console.log("Going to Building List...");
+    navigation.navigate("Building List");
+  };
+
   return (
     <View style={styles.container}>
       <Text style={styles.title}>ASP.NET + React Native Demo Project</Text>
@@ -20,6 +25,12 @@ export default function HomePage() {
           updatedText="Loading..."
           onPress={handleSubmit}
         />
+        <CustomButton
+          initialText="View Buildings"
+          updatedText="Loading..."
+          onPress={handleBuildingList}
+          style={styles.secondButton}
+        />
       </View>
     </View>
   );
@@ -44,4 +55,7 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     marginTop: 16, // Equivalent to mt-4
   },
+  secondButton: {
+    marginTop: 12, // Add some space between buttons
+  },
 });