Andrew firebase to testing

.gitignore

@@ -12,6 +12,7 @@ client.zip
 .vscode
 *.DS_Store
 package-lock.json
+serviceAccountKey.json
 
 # Logs
 logs

client/app/drawer/index.js

@@ -0,0 +1,107 @@
+import { View, StyleSheet, Text, Image } from "react-native";
+import { Stack as Header } from "expo-router";
+import ProfileContainer from "../../components/user/ProfileContainer";
+import { Link } from "expo-router";
+import { AntDesign, Entypo, FontAwesome, MaterialIcons } from "@expo/vector-icons";
+import { theme } from "../../theme";
+import { Box } from "native-base";
+import { useAuth } from "../../auth/provider";
+
+
+export default function Drawer() {
+
+    const { signOut } = useAuth();
+    return  (
+        <>
+            <View
+                style={{
+                    flex: 1,
+                    backgroundColor: "white"
+                }}
+            >
+                <View style={styles.closeIcon}>
+                    <Link href='/'>
+                        <AntDesign
+                            name="close"
+                            size={35}
+                            color={theme.colors.drawerIconColor}
+                        // onPress={() => setIsMenuOpen(false)}
+                        />
+                    </Link>
+                </View>
+                <Link href="/">
+                    <View style={styles.link}>
+                        <Entypo name="home" size={24} color={theme.colors.drawerIconColor} />
+
+                        <Text style={{ color: "#3B3B3B" }}>Home</Text>
+                    </View>
+                </Link>
+                <Link href="profile">
+                    <View style={styles.link}>
+                        <FontAwesome name="book" size={24} color={theme.colors.drawerIconColor} />
+                        <Text style={{ color: "#3B3B3B" }}>Profile</Text>
+                    </View>
+                </Link>
+                <Link href="/packs">
+                    <View style={styles.link}>
+                        <MaterialIcons
+                            name="backpack"
+                            size={24}
+                            color={theme.colors.drawerIconColor}
+                        />
+
+                        <Text style={{ color: "#3B3B3B" }}>Packs</Text>
+                    </View>
+                </Link>
+                <View style={styles.link}>
+                    <MaterialIcons name="logout" size={24} color={theme.colors.drawerIconColor} />
+                    <Text style={{ color: "#3B3B3B" }} onPress={() => signOut()}>
+                        Logout
+                    </Text>
+                </View>
+            </View>
+        </>
+    );
+}
+
+
+const styles = StyleSheet.create({
+    mobileContainer: {
+        backgroundColor: theme.colors.background,
+        width: "100%",
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        padding: 25,
+        position: "relative",
+    },
+
+    logo: {
+        width: 60,
+        height: 50,
+    },
+    smallLogo: {
+        width: 100,
+        height: 95,
+    },
+
+    link: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 15,
+        paddingVertical: 20,
+        paddingHorizontal: 15,
+        width: "100%",
+        color: "black",
+    },
+    closeIcon: {
+        flexDirection: "row",
+        alignSelf: "flex-end",
+        justifyContent: "flex-end",
+        paddingVertical: 20,
+        paddingHorizontal: 25,
+        width: "100%",
+        color: "black",
+
+    }
+});

client/screens/firebase.js → client/auth/firebase.js

@@ -1,17 +1,18 @@
 import { initializeApp } from "firebase/app";
 import { getAuth, GoogleAuthProvider, signInWithPopup } from "firebase/auth";
-import { FIREBASE_API_KEY } from "@env"
+import { FIREBASE_API_KEY, FIREBASE_AUTH_DOMAIN, FIREBASE_PROJECT_ID, FIREBASE_STORAGE_BUCKET, FIREBASE_MESSAGING_SENDER_ID, FIREBASE_APP_ID, FIREBASE_MEASUREMENT_ID } from "@env"
 
 const firebaseConfig = {
     apiKey: FIREBASE_API_KEY,
-    authDomain: "auth-8b1ef.firebaseapp.com",
-    projectId: "auth-8b1ef",
-    storageBucket: "auth-8b1ef.appspot.com",
-    messagingSenderId: "445273762769",
-    appId: "1:445273762769:web:81f403cae7cb5fe3760ef0",
+    authDomain: FIREBASE_AUTH_DOMAIN,
+    projectId: FIREBASE_PROJECT_ID,
+    storageBucket: FIREBASE_STORAGE_BUCKET,
+    messagingSenderId: FIREBASE_MESSAGING_SENDER_ID,
+    appId: FIREBASE_APP_ID,
+    measurementId: FIREBASE_MEASUREMENT_ID
 };
 
-const app = initializeApp(firebaseConfig);
+export const app = initializeApp(firebaseConfig);
 export const auth = getAuth(app);
 
 const provider = new GoogleAuthProvider();

client/components/SearchInput.js

@@ -20,7 +20,6 @@ import { SafeAreaView } from "react-native";
 import { Platform } from "react-native";
 
 import { GooglePlacesAutocomplete } from "react-native-google-places-autocomplete";
-// import { Google_Api_Key } from "../constants/api";
 import { GOOGLE_PLACES_API_KEY } from "@env";
 
 // redux
@@ -35,18 +34,19 @@ import { getWeatherWeek } from "../api/getWeatherWeek";
 
 export const SearchInput = () => {
   const [searchString, setSearchString] = useState("Virginia US");
-  const [geoCode, setGeoCode] = useState();
+  const [geoCode, setGeoCode] = useState({});
   const [isLoadingMobile, setIsLoadingMobile] = useState(false);
 
   const dispatch = useDispatch();
-  const lat = geoCode?.features[0]?.geometry?.coordinates[1];
-  const lon = geoCode?.features[0]?.geometry?.coordinates[0];
-  const state = geoCode?.features[0]?.properties.state;
+  // const lat = geoCode?.features[0]?.geometry?.coordinates[1];
+  // const lon = geoCode?.features[0]?.geometry?.coordinates[0];
+  // const state = geoCode?.features[0]?.properties?.state;
 
   useEffect(() => {
     const getCode = async () => {
       setIsLoadingMobile(true);
       const code = await getGeoCode(searchString);
+      console.log("code:", code);
       setIsLoadingMobile(false);
       setGeoCode(code);
     };
@@ -67,12 +67,18 @@ export const SearchInput = () => {
       const weeekArray = await getWeatherWeek(lat, lon);
       dispatch(addWeek(weeekArray));
     };
-
-    if (lat && lon) {
-      getWeatherObject();
-      getWeek();
+
+    if (geoCode?.features) {
+      const lat = geoCode.features[0]?.geometry?.coordinates?.[1];
+      const lon = geoCode.features[0]?.geometry?.coordinates?.[0];
+      const state = geoCode.features[0]?.properties?.state;
+
+      if (lat && lon) {
+        getWeatherObject();
+        getWeek();
+      }
     }
-  }, [lat, lon, state]);
+  }, [geoCode, dispatch]);
 
   return Platform.OS === "web" ? (
     <VStack my="4" space={5} w="100%" maxW="300px">

client/components/map/MapContainer.js

@@ -28,9 +28,12 @@ export function CustomizedMap() {
 
   const [style, setStyle] = React.useState("mapbox://styles/mapbox/outdoors-v11");
 
+
   useEffect(() => {
-    console.log("StyleURL:", Mapbox?.StyleURL);
-  }, []);
+    if (mapViewLoaded) {
+      handleShapeSourceLoad();
+    }
+  }, [mapViewLoaded]);
 
   const [lng, setLng] = useState(103.8519599);
   const [lat, setLat] = useState(1.29027);
@@ -39,6 +42,7 @@ export function CustomizedMap() {
 
   function handleMapViewLayout() {
     setMapViewLoaded(true);
+
   }
 
   const handleStyleChange = (value) => {
@@ -106,22 +110,26 @@ export function CustomizedMap() {
 
     const bounds = getShapeSourceBounds(shape);
 
-    mapViewRef.current.fitBounds(bounds, {
+    mapViewRef?.current?.fitBounds(bounds, {
       edgePadding: {
-        top: 5,
-        right: 5,
-        bottom: 5,
-        left: 5
+        top: 100,
+        right: 100,
+        bottom: 100,
+        left: 100
       }
+    }, () => {
+      const centerLng = (bounds[0][0] + bounds[1][0]) / 2;
+      const centerLat = (bounds[0][1] + bounds[1][1]) / 2;
+
+      mapViewRef.current.setCamera({
+        centerCoordinate: [centerLng, centerLat],
+        minZoomLevel: 10,
+      });
     });
 
-    mapViewRef.current.setCamera({
-      centerCoordinate: mapViewRef.current.getCenter(),
-      zoomLevel: Math.min(
-        mapViewRef.current.zoomLevel,
-        mapViewRef.current.getZoomForBounds(bounds, { padding: 50 })
-      )
-    });
+    console.log('shape:', shape);
+    console.log('bounds:', bounds);
+    console.log('mapViewRef:', mapViewRef);
   }
 
 
@@ -174,6 +182,7 @@ export function CustomizedMap() {
       >
         <Mapbox.Camera
           centerCoordinate={[-77.035, 38.875]}
+
         // zoomLevel={12}
         />
 
@@ -241,7 +250,7 @@ export function MapContainer() {
   return (
     <View style={styles.container}>
       <Text>Map - Basic</Text>
-      <BasicMap />
+      {/* <BasicMap /> */}
 
       <Text>Map - Customized</Text>
       <CustomizedMap />

client/components/pack/AddPack.js

@@ -25,6 +25,7 @@ export const AddPack = () => {
       />
 
       <Button
+        width={Platform.OS === "web" ? null : "50%"}
         onPress={() => {
           addPack.mutate({ name, owner_id: user?._id });
           setName("");
@@ -56,7 +57,7 @@ const styles = StyleSheet.create({
     justifyContent: "space-between",
     alignItems: "center",
     paddingHorizontal: 25,
-    gap: 10,
+    gap: 25,
   },
 
   input: {