Andrew osm route to testing

.gitignore

@@ -88,6 +88,7 @@ web_modules/
 .env
 .env.test
 
+.expo/
 # parcel-bundler cache (https://parceljs.org/)
 .cache
 .parcel-cache

client/.gitignore

@@ -1,6 +1,6 @@
 # For users to edit
 app.json
-
+.env
 
 .expo/
 dist/

client/_layout.js

@@ -8,7 +8,10 @@ import { QueryClientProvider } from "@tanstack/react-query";
 import { queryClient } from "../constants/queryClient";
 import { NativeBaseProvider } from "native-base";
 import store from "../store/store";
-import NavigationMobile from "../screens/NavigationMobile";
+import NavigationMobile from "./screens/NavigationMobile";
+import 'mapbox-gl/dist/mapbox-gl.css';
+import 'mapbox://mapbox.mapbox-streets-v7'
+
 
 import { ProviderAuth } from "../auth/provider";
 

client/api/getGeoCode.js

@@ -1,26 +1,8 @@
-// import { Geoapify_Key } from "../constants/api";
-import { GEOAPIFY_KEY } from "@env";
+import { api } from "../constants/api";
 
-export const getGeoCode = async (addressArray = "Virginia") => {
-  const transform = addressArray.split(", ").join("%20").split(" ").join("%20");
-
-  const root = "https://api.geoapify.com/v1/geocode/search";
-
-  let params = `?`;
-
-  //   let addressParams = addressArray.join("%20").replace(/\s/g, "%20");
-
-  if (addressArray) params += `text=${transform}`;
-
-  const api_key = `&apiKey=${GEOAPIFY_KEY}`;
-
-  params += api_key;
-
-  const url = root + params;
-
-  let resultReturn;
-
-  await fetch(url)
+export const getGeoCode = async (addressArray) => {
+  let resultReturn
+  await fetch(`${api}/geocode?addressArray=${addressArray}`)
     .then((response) => response.json())
     .then((result) => {
       resultReturn = result;

client/api/getParks.js

@@ -1,34 +1,18 @@
-// import { NPS_API } from "../constants/api";
-import { NPS_API, X_RAPIDAPI_KEY } from "@env";
+import { api } from "../constants/api";
 import abbrRegion from "../constants/convertStateToAbbr";
 
 export const getParksRapid = async (state) => {
   let parksArray = [];
-
-  const host = `https://jonahtaylor-national-park-service-v1.p.rapidapi.com/parks?stateCode=${
-    abbrRegion(state, "abbr") ?? ""
-  }`;
-
-  const options = {
-    method: "GET",
-    headers: {
-      "X-Api-Key": `${NPS_API}`,
-      "X-RapidAPI-Key": `${X_RAPIDAPI_KEY}`,
-      "X-RapidAPI-Host": "jonahtaylor-national-park-service-v1.p.rapidapi.com",
-      "User-Agent": "PackRat",
-    },
-  };
-
-  await fetch(host, options)
-    .then((res) => res.json())
-    .then((json) => {
-      // console.log("json.data:", json.data);
-      json.data.forEach((item) => {
-        parksArray.push(item);
-      });
-    })
-    .catch((err) => console.error("error:" + err));
-
+  const abbrState = abbrRegion(state, "abbr") ?? "";
+  if (abbrState) {
+    await fetch(`${api}/getparks?abbrState=${abbrState}`)
+      .then((res) => res.json())
+      .then((json) => {
+        json.data.forEach((item) => {
+          parksArray.push(item);
+        });
+      }).catch((err) => console.error("error:" + err));
+  }
   if (parksArray.length > 0) {
     parksArray = parksArray.map((park) => park.name);
   } else {

client/api/getTrails.js

@@ -1,65 +1,16 @@
-import { X_RAPIDAPI_KEY } from "@env";
+import { api } from "../constants/api";
 
 export const getTrailsRapid = async (locationObject, latParams, lonParams) => {
   let trailsArray = [];
 
-  let radiusParams = 25;
-  let activityParams = true;
-
-  const {
-    administrative_area_level_1: state,
-    country,
-    locality: city,
-  } = locationObject;
-
-  let paramsConditional = "";
-
-  const root = "https://trailapi-trailapi.p.rapidapi.com/trails/explore/?";
-
-  if (latParams) paramsConditional += `lat=${latParams}`;
-  if (lonParams) paramsConditional += `&lon=${lonParams}`;
-
-  if (city) paramsConditional += `&q-city_cont=${city.replace(/\s/g, "")}`;
-
-  if (radiusParams) paramsConditional += `&radius=${radiusParams}`;
-  if (activityParams)
-    paramsConditional += `&q-activities_activity_type_name_eq=hiking`;
-
-  // const limitParams = `limit=${limit}`
-
-  // const latParams = `lat=34.1`
-
-  // const lonParams = `lon=-105.2`
-
-  // const cityParams = `q-city_cont=${city}`
-
-  // const radiusParams = `radius=50`
-
-  // const activityParams = 'q-activities_activity_type_name_eq=hiking'
-
-  // const params = `?${limitParams}&${latParams}&${lonParams}&${city ? cityParams : ''}&${radiusParams}&${activityParams}`
-
-  // const params = `?${limitParams}&${latParams}&${lonParams}&${cityParams}&${radiusParams}&${activityParams}`
-
-  const url1 = root + paramsConditional;
-
-  // https://trailapi-trailapi.p.rapidapi.com/activity/?&lat=34.1&lon=-105.2&q-city_cont=Charlottesville&radius=50&q-activities_activity_type_name_eq=hiking
-  const url =
-    "https://trailapi-trailapi.p.rapidapi.com/activity/?lat=34.1&lon=-105.2&q-city_cont=Denver&radius=25&q-activities_activity_type_name_eq=hiking";
-  // const url = 'https://trailapi-trailapi.p.rapidapi.com/activity?lat=34.1&limit=25&lon=-105.2&q-city_cont=Denver&q-country_cont=Australia&q-state_cont=California&radius=25&q-activities_activity_type_name_eq=hiking'
-  // const url = root + `${cityParams}&${activityParams}`
-  // const url = root + `?${activityParams}&${limitParams}`
-
-  const options = {
-    method: "GET",
+  await fetch(api + "/gettrails", {
+    method: 'POST',
     headers: {
-      "X-RapidAPI-Key": `${X_RAPIDAPI_KEY}`,
-      "X-RapidAPI-Host": "trailapi-trailapi.p.rapidapi.com",
+      'Accept': 'application/json',
+      'Content-Type': 'application/json'
     },
-  };
-
-  await fetch(url1, options)
-    .then((res) => res.json())
+    body: JSON.stringify({ ...locationObject, latitude: latParams, longitude: lonParams })
+  }).then((res) => res.json())
     .then((json) => {
       Object.values(json).forEach((item) => {
         trailsArray.push(item);

client/api/getWeather.js

@@ -1,36 +1,19 @@
-// import { OpenWeather_Key } from "../constants/api";
-import { OPENWEATHER_KEY } from "@env";
+import { api } from "../constants/api";
 
 export const getWeather = async (lat, lon, state) => {
   let weatherObject = {};
 
-  const root = "https://api.openweathermap.org/data/2.5/weather";
-
   let params = `?`;
 
-  const latParams = lat;
-  const lonParams = lon;
-  const unitParams = "imperial";
-  const apiParams = true;
-
-  if (latParams) params += `lat=${latParams}`;
-  if (lonParams) params += `&lon=${lonParams}`;
-  if (unitParams) params += `&units=${unitParams}`;
-  if (apiParams) params += `&appid=${OPENWEATHER_KEY}`;
+  if (lat) params += `lat=${lat}`;
+  if (lon) params += `&lon=${lon}`;
 
-  const url = root + params;
+  const url = api + "/weather" + params;
 
   await fetch(url)
     .then((res) => res.json())
     .then((json) => {
       weatherObject = json;
-      // for (const key of Object.keys(json)) {
-      //     const {weatherObject[key]} = json[key]
-      // }
-
-      // Object.values(json).forEach(item => {
-      //     weatherArray.push(item)
-      // })
     })
     .catch((err) => {
       console.error("error:" + err);

client/api/getWeatherWeek.js

@@ -1,25 +1,17 @@
-// import { OpenWeather_Key } from "../constants/api";
-import { OPENWEATHER_KEY } from "@env";
+import { api } from "../constants/api";
 
 export const getWeatherWeek = async (lat, lon) => {
   let weatherObject = {};
 
-  const root = "https://api.openweathermap.org/data/2.5/forecast";
-
   let params = `?`;
 
   const latParams = lat;
   const lonParams = lon;
-  const unitParams = "imperial";
-
-  const apiParams = true;
 
   if (latParams) params += `lat=${latParams}`;
   if (lonParams) params += `&lon=${lonParams}`;
-  if (unitParams) params += `&units=${unitParams}`;
-  if (apiParams) params += `&appid=${OPENWEATHER_KEY}`;
 
-  const url = root + params;
+  const url = api + "/weather/week" + params;
 
   await fetch(url)
     .then((res) => res.json())

client/app.example.json

@@ -0,0 +1,44 @@
+{
+  "expo": {
+    "name": "packrat-front",
+    "slug": "packrat-front",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "scheme": "./app/index.js",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff",
+      "scheme": "myapp"
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "com.andrewbierman.packratfront"
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      },
+      "package": "com.andrewbierman.packratfront"
+    },
+    "web": {
+      "favicon": "./assets/favicon.png",
+      "bundler": "metro"
+    },
+    "plugins": [
+      [
+        "@rnmapbox/maps",
+        {
+          "RNMapboxMapsImpl": "mapbox",
+          "RNMapboxMapsDownloadToken": "sk..."
+        }
+      ]
+    ]
+  }
+}

client/app/index.js

@@ -137,7 +137,7 @@ export default function Index() {
           />
         </Stack>
 
-        <MapContainer />
+        <MapContainer style="height: 100%" />
 
       </Box>
 

client/babel.config.js

@@ -11,6 +11,6 @@ module.exports = function (api) {
         safe: false,
         allowUndefined: true,
       }]
-    ],
+    ]
   };
 };

client/components/Card.js

@@ -22,10 +22,10 @@ export default function Card({ title, Icon, isMap, data, isSearch, isTrail }) {
         isSearch
           ? styles.searchContainer
           : isMap
-          ? styles.mapCard
-          : styles.containerMobile
-          ? styles.containerMobile
-          : styles.mutualStyles
+            ? styles.mapCard
+            : styles.containerMobile
+              ? styles.containerMobile
+              : styles.mutualStyles
       }
     >
       <Box
@@ -49,6 +49,7 @@ export default function Card({ title, Icon, isMap, data, isSearch, isTrail }) {
       </Box>
       {isMap ? null : isSearch ? (
         <SearchInput />
+        // <Text>Search</Text>
       ) : (
         <DropdownComponent
           {...{

client/components/SearchInput.js

@@ -20,7 +20,7 @@ import { SafeAreaView } from "react-native";
 import { Platform } from "react-native";
 
 import { GooglePlacesAutocomplete } from "react-native-google-places-autocomplete";
-import { GOOGLE_API_KEY } from "@env";
+import { GOOGLE_PLACES_API_KEY } from "@env";
 
 // redux
 import { useDispatch } from "react-redux";
@@ -38,7 +38,6 @@ export const SearchInput = () => {
   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;
@@ -79,7 +78,7 @@ export const SearchInput = () => {
       <GooglePlacesAutocomplete
         placeholder="Search"
         query={{
-          key: GOOGLE_API_KEY,
+          key: GOOGLE_PLACES_API_KEY,
           language: "en", // language of the results
         }}
         minLength={2}

client/env.example

@@ -4,10 +4,12 @@ ENVIRONMENT='development'
 API_URL='your api url'
 NPS_API = "your api key"
 GEOAPIFY_KEY = "your api key"
-OPENWEATHER_KEY = "your api key"
 GOOGLE_PLACES_API_KEY = 'your api key'
 MAPBOX_API_KEY = "your api key, starts with pk..."
 
 X_RAPIDAPI_KEY = "your api key"
 MAPBOX_ACCESS_TOKEN = "your api key, starts with pk..."
-MAPBOX_DOWNLOADS_TOKEN="your api key, starts with sk..."
+MAPBOX_DOWNLOADS_TOKEN="your api key, starts with sk..."
+
+WEB_CLIENT_ID="962352557394-..................apps.googleusercontent.com"
+ANDROID_CLIENT_ID="962352557394-........................apps.googleusercontent.com"