From 6b0d9c7854c0324f81ecbe545733519a0be826d1 Mon Sep 17 00:00:00 2001 From: AndrewC Date: Thu, 18 Apr 2024 20:42:15 -0500 Subject: [PATCH 1/6] added a new loading screen for rendering to get the user's location for the map --- lib/screens/mapPage/ExploreLoadingScreen.tsx | 21 ++ lib/screens/mapPage/ExploreScreen.js | 199 ++++++++++--------- 2 files changed, 122 insertions(+), 98 deletions(-) create mode 100644 lib/screens/mapPage/ExploreLoadingScreen.tsx diff --git a/lib/screens/mapPage/ExploreLoadingScreen.tsx b/lib/screens/mapPage/ExploreLoadingScreen.tsx new file mode 100644 index 0000000..cdc268f --- /dev/null +++ b/lib/screens/mapPage/ExploreLoadingScreen.tsx @@ -0,0 +1,21 @@ +import { ActivityIndicator, View, Text, StyleSheet } from 'react-native'; + +const ExploreLoadingScreen = () => { + return ( + + + Loading your location... + + ); +} + +// Add this style to your stylesheet +const styles = StyleSheet.create({ + centered: { + flex: 1, + justifyContent: 'center', + alignItems: 'center' + } +}); + +export default ExploreLoadingScreen; diff --git a/lib/screens/mapPage/ExploreScreen.js b/lib/screens/mapPage/ExploreScreen.js index 9c16235..9451870 100644 --- a/lib/screens/mapPage/ExploreScreen.js +++ b/lib/screens/mapPage/ExploreScreen.js @@ -21,6 +21,7 @@ import ApiService from "../../utils/api_calls"; import Constants from 'expo-constants'; import { Keyboard } from 'react-native'; import { useTheme } from '../../components/ThemeProvider'; +import ExploreLoadingScreen from "./ExploreLoadingScreen"; const { width } = Dimensions.get("window"); const CARD_HEIGHT = 220; @@ -35,7 +36,6 @@ const ExploreScreen = () => { const [mapType, setMapType] = useState('standard'); // New state for map type const { theme, isDarkmode } = useTheme(); const [showMapTypeOptions, setShowMapTypeOptions] = useState(false); - const toggleMapTypeOptions = () => { setShowMapTypeOptions(prevState => !prevState); @@ -274,92 +274,55 @@ const ExploreScreen = () => { }, }); -const [state, setState] = useState({ - markers: [], - categories: [ - { - name: "Events", - icon: ( - - ), - }, - { - name: "Cultural", - icon: ( - - ), - }, - { - name: "History", - icon: , - }, - { - name: "Modern", - icon: ( - - ), - }, - { - name: "Religious", - icon: ( - - ), - }, - ], - region: { - latitude: 38.631393, - longitude: -90.192226, - latitudeDelta: 0.04864195044303443, - longitudeDelta: 0.040142817690068, - }, -}); - - let mapIndex = 0; - let mapAnimation = new Animated.Value(0); - - useEffect(() => { - mapAnimation.addListener(({ value }) => { - let index = Math.floor(value / CARD_WIDTH + 0.3); // animate 30% away from landing on the next item - if (index >= state.markers.length) { - index = state.markers.length - 1; - } - if (index <= 0) { - index = 0; - } - - clearTimeout(regionTimeout); - - const regionTimeout = setTimeout(() => { - if (mapIndex !== index) { - mapIndex = index; - const { coordinate } = state.markers[index]; - _map.current.animateToRegion( - { - ...coordinate, - latitudeDelta: state.region.latitudeDelta, - longitudeDelta: state.region.longitudeDelta, - }, - 350 - ); - } - }, 10); - }); + const [state, setState] = useState({ + markers: [], + categories: [ + { + name: "Events", + icon: ( + + ), + }, + { + name: "Cultural", + icon: ( + + ), + }, + { + name: "History", + icon: , + }, + { + name: "Modern", + icon: ( + + ), + }, + { + name: "Religious", + icon: ( + + ), + }, + ], + region: null }); useEffect(() => { @@ -371,16 +334,14 @@ const [state, setState] = useState({ Alert.alert( "Permission Denied", "Permission to access location was denied. This is required on this page", - [ - { - text: "Try Again", - onPress: () => { - (async () => { - await Location.requestForegroundPermissionsAsync(); - })(); - } - }, - ] + [{ + text: "Try Again", + onPress: () => { + (async () => { + await Location.requestForegroundPermissionsAsync(); + })(); + } + }] ); return; // Early return to avoid executing further code without permission } @@ -404,6 +365,38 @@ const [state, setState] = useState({ }, []); + let mapIndex = 0; + let mapAnimation = new Animated.Value(0); + + useEffect(() => { + mapAnimation.addListener(({ value }) => { + let index = Math.floor(value / CARD_WIDTH + 0.3); // animate 30% away from landing on the next item + if (index >= state.markers.length) { + index = state.markers.length - 1; + } + if (index <= 0) { + index = 0; + } + + clearTimeout(regionTimeout); + + const regionTimeout = setTimeout(() => { + if (mapIndex !== index) { + mapIndex = index; + const { coordinate } = state.markers[index]; + _map.current.animateToRegion( + { + ...coordinate, + latitudeDelta: state.region.latitudeDelta, + longitudeDelta: state.region.longitudeDelta, + }, + 350 + ); + } + }, 10); + }); + }); + const interpolations = state.markers.map((marker, index) => { const inputRange = [ (index - 1) * CARD_WIDTH, @@ -422,6 +415,7 @@ const [state, setState] = useState({ const onMarkerPress = (mapEventData) => { const markerID = mapEventData._targetInst.return.key; + const cardIndex = markerID - 1; let x = markerID * CARD_WIDTH + markerID * 20; if (Platform.OS === "ios") { @@ -434,11 +428,20 @@ const [state, setState] = useState({ const _map = useRef(null); const _scrollView = useRef(null); + if (!state.region) { + return ExploreLoadingScreen; + } + return ( Date: Thu, 18 Apr 2024 20:53:09 -0500 Subject: [PATCH 2/6] Screen shows up properly now --- lib/screens/mapPage/ExploreLoadingScreen.tsx | 4 ++-- lib/screens/mapPage/ExploreScreen.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/lib/screens/mapPage/ExploreLoadingScreen.tsx b/lib/screens/mapPage/ExploreLoadingScreen.tsx index cdc268f..b64d30e 100644 --- a/lib/screens/mapPage/ExploreLoadingScreen.tsx +++ b/lib/screens/mapPage/ExploreLoadingScreen.tsx @@ -4,12 +4,12 @@ const ExploreLoadingScreen = () => { return ( - Loading your location... + + Loading your location... ); } -// Add this style to your stylesheet const styles = StyleSheet.create({ centered: { flex: 1, diff --git a/lib/screens/mapPage/ExploreScreen.js b/lib/screens/mapPage/ExploreScreen.js index 9451870..84d443d 100644 --- a/lib/screens/mapPage/ExploreScreen.js +++ b/lib/screens/mapPage/ExploreScreen.js @@ -429,7 +429,7 @@ const ExploreScreen = () => { const _scrollView = useRef(null); if (!state.region) { - return ExploreLoadingScreen; + return ; } return ( From 5fe98da7dd2695cbf301738753e25e4c29c42b38 Mon Sep 17 00:00:00 2001 From: AndrewC Date: Thu, 18 Apr 2024 20:57:07 -0500 Subject: [PATCH 3/6] Screen now is adaptable to the dark or light mode of the user --- lib/screens/mapPage/ExploreLoadingScreen.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/lib/screens/mapPage/ExploreLoadingScreen.tsx b/lib/screens/mapPage/ExploreLoadingScreen.tsx index b64d30e..aa2eaea 100644 --- a/lib/screens/mapPage/ExploreLoadingScreen.tsx +++ b/lib/screens/mapPage/ExploreLoadingScreen.tsx @@ -1,11 +1,14 @@ import { ActivityIndicator, View, Text, StyleSheet } from 'react-native'; +import { useTheme } from '../../components/ThemeProvider'; const ExploreLoadingScreen = () => { + const { theme, isDarkmode } = useTheme(); + return ( - Loading your location... + Loading your location... ); } From 2b4070e8655da0729db116cf493781e9abee5274 Mon Sep 17 00:00:00 2001 From: AndrewC Date: Thu, 18 Apr 2024 21:05:26 -0500 Subject: [PATCH 4/6] The screen is a bit more zoomed out from before by default --- lib/screens/mapPage/ExploreScreen.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/screens/mapPage/ExploreScreen.js b/lib/screens/mapPage/ExploreScreen.js index 84d443d..a28c789 100644 --- a/lib/screens/mapPage/ExploreScreen.js +++ b/lib/screens/mapPage/ExploreScreen.js @@ -354,8 +354,8 @@ const ExploreScreen = () => { region: { latitude, longitude, - latitudeDelta: 0.04864195044303443, - longitudeDelta: 0.040142817690068, + latitudeDelta: 0.058370340531641314, + longitudeDelta: 0.0481713812280816, } })); } From 557aa06aec2dac0e223519e010304d6a64cd31af Mon Sep 17 00:00:00 2001 From: AndrewC Date: Fri, 19 Apr 2024 14:54:02 -0500 Subject: [PATCH 5/6] unkonwn changes --- lib/screens/mapPage/ExploreScreen.js | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/screens/mapPage/ExploreScreen.js b/lib/screens/mapPage/ExploreScreen.js index a28c789..70a2012 100644 --- a/lib/screens/mapPage/ExploreScreen.js +++ b/lib/screens/mapPage/ExploreScreen.js @@ -364,7 +364,6 @@ const ExploreScreen = () => { return () => isMounted = false; }, []); - let mapIndex = 0; let mapAnimation = new Animated.Value(0); From 6190150ff2f56c5d597b2235a965e3c353541e8f Mon Sep 17 00:00:00 2001 From: AndrewC Date: Sun, 28 Apr 2024 11:22:36 -0500 Subject: [PATCH 6/6] stashed changes, nothing really changed --- lib/screens/mapPage/ExploreScreen.js | 229 ++++++++++++++------------- 1 file changed, 118 insertions(+), 111 deletions(-) diff --git a/lib/screens/mapPage/ExploreScreen.js b/lib/screens/mapPage/ExploreScreen.js index 70a2012..0b06703 100644 --- a/lib/screens/mapPage/ExploreScreen.js +++ b/lib/screens/mapPage/ExploreScreen.js @@ -21,7 +21,6 @@ import ApiService from "../../utils/api_calls"; import Constants from 'expo-constants'; import { Keyboard } from 'react-native'; import { useTheme } from '../../components/ThemeProvider'; -import ExploreLoadingScreen from "./ExploreLoadingScreen"; const { width } = Dimensions.get("window"); const CARD_HEIGHT = 220; @@ -36,7 +35,7 @@ const ExploreScreen = () => { const [mapType, setMapType] = useState('standard'); // New state for map type const { theme, isDarkmode } = useTheme(); const [showMapTypeOptions, setShowMapTypeOptions] = useState(false); - + const toggleMapTypeOptions = () => { setShowMapTypeOptions(prevState => !prevState); }; @@ -87,10 +86,18 @@ const ExploreScreen = () => { globeIcon !== "earth", "someUserId" ); - - console.log("STEP 3: fetchedNotes from ApiService.fetchMessages:", fetchedNotes); - // console.log("Notes being used: ", fetchedNotes); - + + // console.log("STEP 3: fetchedNotes from ApiService.fetchMessages:", fetchedNotes); + + // Write the count to the log file + await RNFS.appendFile(logFilePath, `Count of fetched notes: ${fetchedNotes.length}\n`, 'utf8') + .then(() => { + console.log('Logged count to file'); + }) + .catch(err => { + console.error('Error writing to log file:', err); + }); + const fetchedMarkers = fetchedNotes.map((note) => { let time; if (note.time === undefined) { @@ -101,7 +108,7 @@ const ExploreScreen = () => { } else { time = new Date(note.time); } - + return { coordinate: { latitude: parseFloat(note.latitude) || 0, @@ -113,20 +120,22 @@ const ExploreScreen = () => { description: note.BodyText || "", images: note.media.map((mediaItem) => ({ uri: mediaItem.uri })) || - require("../../../assets/map_marker.png"), // need to replace with placeholder image + require("../../../assets/map_marker.png"), // Placeholder image replacement time: formatToLocalDateString(time) || "", tags: note.tags || [], }; }); - + setState((prevState) => ({ ...prevState, markers: fetchedMarkers, + notesCount: fetchedNotes.length, // if you need to use this count in your state })); } catch (error) { console.error("Error fetching messages:", error); } }); + useEffect(() => { fetchMessages(); @@ -274,96 +283,62 @@ const ExploreScreen = () => { }, }); - const [state, setState] = useState({ - markers: [], - categories: [ - { - name: "Events", - icon: ( - - ), - }, - { - name: "Cultural", - icon: ( - - ), - }, - { - name: "History", - icon: , - }, - { - name: "Modern", - icon: ( - - ), - }, - { - name: "Religious", - icon: ( - - ), - }, - ], - region: null - }); +const [state, setState] = useState({ + markers: [], + categories: [ + { + name: "Events", + icon: ( + + ), + }, + { + name: "Cultural", + icon: ( + + ), + }, + { + name: "History", + icon: , + }, + { + name: "Modern", + icon: ( + + ), + }, + { + name: "Religious", + icon: ( + + ), + }, + ], + region: { + latitude: 38.631393, + longitude: -90.192226, + latitudeDelta: 0.04864195044303443, + longitudeDelta: 0.040142817690068, + }, +}); - useEffect(() => { - let isMounted = true; - - (async () => { - let { status } = await Location.requestForegroundPermissionsAsync(); - if (status !== "granted") { - Alert.alert( - "Permission Denied", - "Permission to access location was denied. This is required on this page", - [{ - text: "Try Again", - onPress: () => { - (async () => { - await Location.requestForegroundPermissionsAsync(); - })(); - } - }] - ); - return; // Early return to avoid executing further code without permission - } - - let location = await Location.getCurrentPositionAsync({}); - const { latitude, longitude } = location.coords; - if (isMounted) { - setState(prevState => ({ - ...prevState, - region: { - latitude, - longitude, - latitudeDelta: 0.058370340531641314, - longitudeDelta: 0.0481713812280816, - } - })); - } - })(); - - return () => isMounted = false; - }, []); - let mapIndex = 0; let mapAnimation = new Animated.Value(0); @@ -394,7 +369,49 @@ const ExploreScreen = () => { } }, 10); }); - }); + }); + + useEffect(() => { + let isMounted = true; + + (async () => { + let { status } = await Location.requestForegroundPermissionsAsync(); + if (status !== "granted") { + Alert.alert( + "Permission Denied", + "Permission to access location was denied. This is required on this page", + [ + { + text: "Try Again", + onPress: () => { + (async () => { + await Location.requestForegroundPermissionsAsync(); + })(); + } + }, + ] + ); + return; // Early return to avoid executing further code without permission + } + + let location = await Location.getCurrentPositionAsync({}); + const { latitude, longitude } = location.coords; + if (isMounted) { + setState(prevState => ({ + ...prevState, + region: { + latitude, + longitude, + latitudeDelta: 0.04864195044303443, + longitudeDelta: 0.040142817690068, + } + })); + } + })(); + + return () => isMounted = false; + }, []); + const interpolations = state.markers.map((marker, index) => { const inputRange = [ @@ -414,7 +431,6 @@ const ExploreScreen = () => { const onMarkerPress = (mapEventData) => { const markerID = mapEventData._targetInst.return.key; - const cardIndex = markerID - 1; let x = markerID * CARD_WIDTH + markerID * 20; if (Platform.OS === "ios") { @@ -427,20 +443,11 @@ const ExploreScreen = () => { const _map = useRef(null); const _scrollView = useRef(null); - if (!state.region) { - return ; - } - return ( { { setGlobeIcon(prevIcon => (prevIcon === "earth-outline" ? "earth" : "earth-outline")); - setSearchResults(null); + setSearchResults(null); }}>