Merge pull request #9 from Saadaan-Hassan/NotificationsFeature

Setup notifications, make font size responsive, remove unwanted files, create a mockup screen for notifications, add comments in the files

.expo-shared/README.md

@@ -0,0 +1,11 @@
+> Why do I have a folder named ".expo-shared" in my project?
+
+The ".expo-shared" folder is created when running commands that produce state that is intended to be shared with all developers on the project. For example, "npx expo-optimize".
+
+> What does the "assets.json" file contain?
+
+The "assets.json" file describes the assets that have been optimized through "expo-optimize" and do not need to be processed again.
+
+> Should I commit the ".expo-shared" folder?
+
+Yes, you should share the ".expo-shared" folder with your collaborators.

.expo-shared/assets.json

@@ -0,0 +1 @@
+{}

.gitignore

@@ -8,6 +8,7 @@ node_modules/
 dist/
 web-build/
 eas.json
+google-services.json
 
 # Native
 *.orig.*

App.jsx

@@ -12,9 +12,14 @@ import NoInternet from "./src/screens/NoInternetScreen";
 import NetInfo from "@react-native-community/netinfo";
 import Mapbox from "@rnmapbox/maps";
 import { LocationProvider } from "./src/utils/context/LocationContext";
+import { NotificationProvider } from "./src/utils/context/NotificationContext.js";
+import Constants from "expo-constants";
+
+// AsyncStorage.clear();
 
 Mapbox.setAccessToken(
-	"pk.eyJ1Ijoic2FhZGFhbi1oYXNzYW4iLCJhIjoiY2x5MzFyZmg3MDMzZTJqczdhY2xydjc3eiJ9.tMsFRe3duBTeqeI8lwbugw"
+	Constants.expoConfig.extra.RN_MAPBOX_ACCESS_TOKEN ??
+		process.env.RN_MAPBOX_ACCESS_TOKEN
 );
 
 export default function App() {
@@ -51,14 +56,16 @@ export default function App() {
 
 	return (
 		<UserProvider>
-			<GestureHandlerRootView style={{ flex: 1 }}>
-				<PaperProvider theme={theme}>
-					<LocationProvider>
-						<StatusBar style='light' />
-						<AppNavigator />
-					</LocationProvider>
-				</PaperProvider>
-			</GestureHandlerRootView>
+			<NotificationProvider>
+				<LocationProvider>
+					<GestureHandlerRootView style={{ flex: 1 }}>
+						<PaperProvider theme={theme}>
+							<StatusBar style='light' />
+							<AppNavigator />
+						</PaperProvider>
+					</GestureHandlerRootView>
+				</LocationProvider>
+			</NotificationProvider>
 		</UserProvider>
 	);
 }

app.config.js

@@ -1,5 +1,4 @@
 import "dotenv/config";
-
 export default {
 	expo: {
 		name: "tutorify",
@@ -18,6 +17,8 @@ export default {
 			supportsTablet: true,
 		},
 		android: {
+			package: "com.codingnerd.tutorify",
+			googleServicesFile: process.env.GOOGLE_SERVICES_JSON,
 			adaptiveIcon: {
 				foregroundImage: "./assets/beta-adaptive-icon.png",
 				backgroundColor: "#ffffff",
@@ -30,6 +31,16 @@ export default {
 			eas: {
 				projectId: process.env.EAS_PROJECT_ID,
 			},
+			FIREBASE_API_KEY: process.env.FIREBASE_API_KEY,
+			FIREBASE_AUTH_DOMAIN: process.env.FIREBASE_AUTH_DOMAIN,
+			FIREBASE_PROJECT_ID: process.env.FIREBASE_PROJECT_ID,
+			FIREBASE_STORAGE_BUCKET: process.env.FIREBASE_STORAGE_BUCKET,
+			FIREBASE_MESSAGING_SENDER_ID: process.env.FIREBASE_MESSAGING_SENDER_ID,
+			FIREBASE_APP_ID: process.env.FIREBASE_APP_ID,
+			EAS_PROJECT_ID: process.env.EAS_PROJECT_ID,
+			EXPO_UPDATES_URL: process.env.EXPO_UPDATES_URL,
+			RN_MAPBOX_MAPS_DOWNLOAD_TOKEN: process.env.RN_MAPBOX_MAPS_DOWNLOAD_TOKEN,
+			RN_MAPBOX_ACCESS_TOKEN: process.env.RN_MAPBOX_ACCESS_TOKEN,
 		},
 		owner: "coding-nerd",
 		runtimeVersion: {

package.json

@@ -9,9 +9,7 @@
     "web": "expo start --web"
   },
   "dependencies": {
-    "@dotlottie/react-player": "^1.6.19",
     "@gorhom/bottom-sheet": "^4",
-    "@lottiefiles/react-lottie-player": "^3.5.3",
     "@react-native-async-storage/async-storage": "^1.23.1",
     "@react-native-community/netinfo": "11.3.1",
     "@react-native-picker/picker": "2.7.5",
@@ -29,7 +27,6 @@
     "expo-status-bar": "1.12.1",
     "expo-updates": "~0.25.18",
     "firebase": "^10.11.1",
-    "firebase-admin": "^12.1.1",
     "lottie-react-native": "6.7.0",
     "react": "18.2.0",
     "react-native": "0.74.2",
@@ -39,7 +36,6 @@
     "react-native-paper": "^5.12.3",
     "react-native-reanimated": "~3.10.1",
     "react-native-safe-area-context": "4.10.1",
-    "react-native-screens": "3.31.1",
     "rn-placeholder": "^3.0.3"
   },
   "devDependencies": {

src/components/ChatCard.jsx

@@ -28,7 +28,7 @@ const RightContent = (props) => (
 					: { color: commonStyles.colors.textSecondary },
 				{
 					marginBottom: 20 * scaleFactor,
-					fontSize: responsiveFontSize(5),
+					fontSize: responsiveFontSize(0.4),
 					marginRight: 20 * scaleFactor,
 				},
 			]}>
@@ -88,12 +88,12 @@ const styles = StyleSheet.create({
 	},
 	title: {
 		color: commonStyles.colors.textPrimary,
-		fontSize: responsiveFontSize(9),
+		fontSize: responsiveFontSize(0.65),
 		minHeight: 25 * scaleFactor,
 		marginLeft: 5 * scaleFactor,
 	},
 	subtitle: {
-		fontSize: responsiveFontSize(7),
+		fontSize: responsiveFontSize(0.4),
 		marginLeft: 5 * scaleFactor,
 	},
 });

src/components/Header.jsx

@@ -24,7 +24,7 @@ export default function Header() {
 
 	const goBack = () => {
 		if (route.name === "Profile") {
-			navigation.navigate("Home");
+			navigation.navigate("TabNavigator");
 		} else {
 			navigation.goBack();
 		}
@@ -96,6 +96,8 @@ export default function Header() {
 				return renderHeaderContent("Profile");
 			case "Password":
 				return renderHeaderContent("Password");
+			case "Settings":
+				return renderHeaderContent("Settings");
 			case "PrivacyScreen":
 				return renderHeaderContent("Privacy Policy");
 			case "ChatDetail":
@@ -131,7 +133,7 @@ const styles = StyleSheet.create({
 		justifyContent: "center",
 	},
 	welcomeText: {
-		fontSize: responsiveFontSize(8.5),
+		fontSize: responsiveFontSize(0.65),
 		fontWeight: "500",
 		color: commonStyles.colors.textSecondary,
 	},

src/components/LocationSelector.jsx

@@ -1,98 +1,63 @@
-import React, { useEffect, useState } from "react";
-import { View, StyleSheet, Alert } from "react-native";
+import React from "react";
+import { View, StyleSheet } from "react-native";
 import Mapbox from "@rnmapbox/maps";
-import * as Location from "expo-location";
-import { Text, Button } from "react-native-paper";
+import { Text, Button, Switch } from "react-native-paper";
+import useLocation from "../utils/hooks/useLocation";
 import {
 	commonStyles,
 	scaleFactor,
 	responsiveFontSize,
 } from "../styles/commonStyles";
 
-const MAX_RETRIES = 3;
-const RETRY_DELAY = 2000; // 2 seconds
-
-export default function LocationSelector({
+const LocationSelector = ({
 	title,
 	subtitle,
-	coordinates,
-	setCoordinates,
 	selectedCity,
-	setSelectedCity,
 	selectedCountry,
+	setSelectedCity,
 	setSelectedCountry,
+	setCoordinates,
 	titleStyle,
-}) {
-	const [permissionStatus, setPermissionStatus] = useState(null);
-
-	// Function to request location permission
-	const requestLocationPermission = async () => {
-		let { status } = await Location.requestForegroundPermissionsAsync();
-		setPermissionStatus(status);
-		if (status !== "granted") {
-			Alert.alert(
-				"Location Permission Required",
-				"Please enable location services to select a location from the settings.",
-				[{ text: "OK" }]
-			);
-			return false;
-		}
-		return true;
-	};
-
-	const getCurrentLocation = async () => {
-		if (await requestLocationPermission()) {
-			if (coordinates) return;
-			let location = await Location.getCurrentPositionAsync({});
-			setCoordinates(location.coords);
-		}
-	};
-
-	useEffect(() => {
-		getCurrentLocation();
-	}, []);
-
-	const reverseGeocodeWithRetry = async (coords, retries = 0) => {
-		try {
-			const reverseGeocode = await Location.reverseGeocodeAsync(coords);
-			if (reverseGeocode && reverseGeocode.length > 0) {
-				setSelectedCity(reverseGeocode[0].city);
-				setSelectedCountry(reverseGeocode[0].country);
-			}
-		} catch (error) {
-			if (retries < MAX_RETRIES) {
-				setTimeout(() => {
-					reverseGeocodeWithRetry(coords, retries + 1);
-				}, RETRY_DELAY);
-			} else {
-				Alert.alert(
-					"Error",
-					"Failed to retrieve location details. Please try again later.",
-					[{ text: "OK" }]
-				);
-			}
-		}
-	};
-
-	useEffect(() => {
-		if (coordinates) {
-			reverseGeocodeWithRetry(coordinates);
-		}
-	}, [coordinates]);
+	hasSwitch = true,
+	setIsDragging,
+}) => {
+	const {
+		coordinates,
+		locationEnabled,
+		setCoordinates: setLocalCoordinates,
+		getCurrentLocation,
+		reverseGeocodeWithRetry,
+		handleLocationToggle,
+	} = useLocation(setSelectedCity, setSelectedCountry);
 
 	const handleMarkerDragEnd = async (e) => {
 		const newMarkerCoordinates = {
 			latitude: e.geometry.coordinates[1],
 			longitude: e.geometry.coordinates[0],
 		};
-		setCoordinates(newMarkerCoordinates);
+		setLocalCoordinates(newMarkerCoordinates);
+		setCoordinates(newMarkerCoordinates); // Update the coordinates in the RegistrationScreen
 		reverseGeocodeWithRetry(newMarkerCoordinates);
 	};
 
 	return (
 		<View style={styles.container}>
 			<Text style={[styles.title, titleStyle]}>{title || "Add Location"}</Text>
 			{subtitle && <Text style={styles.subtitle}>{subtitle}</Text>}
+
+			{hasSwitch && (
+				<View style={styles.switchContainer}>
+					<Text style={styles.switchLabel}>
+						Location Services: {locationEnabled ? "On" : "Off"}
+					</Text>
+					<Switch
+						value={locationEnabled}
+						onValueChange={handleLocationToggle}
+						color={commonStyles.colors.primary}
+					/>
+				</View>
+			)}
+
 			<View style={styles.mapContainer}>
 				{coordinates && (
 					<Mapbox.MapView
@@ -113,38 +78,44 @@ export default function LocationSelector({
 							title='Your Location'
 							coordinate={[coordinates.longitude, coordinates.latitude]}
 							draggable
-							onDragEnd={handleMarkerDragEnd}
+							onDragStart={() => setIsDragging(true)}
+							onDragEnd={(e) => {
+								handleMarkerDragEnd(e);
+								setIsDragging(false);
+							}}
 						/>
 					</Mapbox.MapView>
 				)}
 			</View>
 			<Text style={styles.selectedLocation}>
 				{selectedCity || "Unknown"}, {selectedCountry || "Unknown"}
 			</Text>
+
 			<Button
 				mode='contained'
 				onPress={getCurrentLocation}
-				style={styles.refreshButton}>
+				style={styles.refreshButton}
+				labelStyle={{ fontSize: responsiveFontSize(0.38) }}>
 				Refresh Location
 			</Button>
 		</View>
 	);
-}
+};
 
 const styles = StyleSheet.create({
 	container: {
 		alignItems: "center",
 		marginBottom: scaleFactor * 20,
 	},
 	title: {
-		fontSize: responsiveFontSize(10),
+		fontSize: responsiveFontSize(0.5),
 		fontWeight: "700",
 		color: commonStyles.colors.primary,
 		marginBottom: scaleFactor * 20,
 		textAlign: "center",
 	},
 	subtitle: {
-		fontSize: responsiveFontSize(6),
+		fontSize: responsiveFontSize(0.4),
 		color: commonStyles.colors.primary,
 		textAlign: "center",
 		marginBottom: scaleFactor * 20,
@@ -161,12 +132,24 @@ const styles = StyleSheet.create({
 		flex: 1,
 	},
 	selectedLocation: {
-		fontSize: responsiveFontSize(6),
+		fontSize: responsiveFontSize(0.4),
 		color: commonStyles.colors.primary,
 		textAlign: "center",
 	},
+	switchContainer: {
+		flexDirection: "row",
+		alignItems: "center",
+		marginBottom: scaleFactor * 5,
+	},
+	switchLabel: {
+		fontSize: responsiveFontSize(0.45),
+		color: commonStyles.colors.primary,
+		marginRight: scaleFactor * 10,
+	},
 	refreshButton: {
 		marginTop: scaleFactor * 10,
 		backgroundColor: commonStyles.colors.primary,
 	},
 });
+
+export default LocationSelector;

src/components/MessageBox.jsx

@@ -35,12 +35,12 @@ const styles = StyleSheet.create({
 		alignSelf: "flex-start",
 	},
 	text: {
-		fontSize: responsiveFontSize(7),
+		fontSize: responsiveFontSize(0.55),
 		color: commonStyles.colors.neutral,
 	},
 	time: {
 		color: commonStyles.colors.textSecondary,
-		fontSize: responsiveFontSize(5),
+		fontSize: responsiveFontSize(0.3),
 		textAlign: "right",
 		marginTop: 5 * scaleFactor,
 	},