Merge pull request #210 from YeyoM/207-web-support

207 web support

.gitignore

@@ -34,3 +34,4 @@ yarn-error.*
 
 # typescript
 *.tsbuildinfo
+.vercel

README.md

@@ -36,7 +36,7 @@ Our journey doesn't end here. The Wellness app is set to evolve with the integra
 
 To execute the app locally you need to have installed node and npm on your computer. If you have already installed them on your computer the next step is to clone the repository on on your computer and install the dependencies using
 
-```
+```bash
 npm install
 ```
 
@@ -52,7 +52,7 @@ Open it in the [Expo app](https://expo.io) on your phone to view it. It will rel
 
 Sometimes you may need to reset or clear the React Native packager's cache. To do so, you can pass the `--reset-cache` flag to the start script:
 
-```
+```bash
 npm start --reset-cache
 # or
 yarn start --reset-cache
@@ -73,6 +73,37 @@ Like `npm start`, but also attempts to open your app on a connected Android devi
 1. Make sure that you can run adb from your terminal.
 2. Open Genymotion and navigate to `Settings -> ADB`. Select “Use custom Android SDK tools” and update with your [Android SDK directory](https://stackoverflow.com/questions/25176594/android-sdk-location).
 
+### Delpoying to Vercel
+
+#### Building
+
+```bash
+npx expo export -p web
+```
+
+#### Preview
+
+First, if you need to get a preview of how the app would work on production, you can execute the following command once you have build the app
+
+```bash
+npx serve dist --single
+```
+
+#### Delpoy
+
+First, make sure you have vercel CLI installed, and have the correct vercel.json file
+
+```bash
+npm install -g vercel@latest
+```
+
+Then, just deploy...
+
+```bash
+vercel
+```
+
+
 ### Environment Variables
 
 The environment variables are stored in a file called `.env` in the root of the project. This file is not included in the repository, so you need to create it manually. The file should look like this:

Screens/AccountSettings.js

@@ -1,17 +1,18 @@
+import React, { useState, useContext } from "react";
 import {
   View,
   Text,
   Pressable,
   StyleSheet,
   ScrollView,
   Dimensions,
-  Alert,
 } from "react-native";
-import React, { useState, useContext } from "react";
 import { FIREBASE_AUTH } from "../firebaseConfig";
 import { signOut } from "firebase/auth";
 import Constants from "expo-constants";
 
+import alert from "../components/Alert";
+
 import { Ionicons } from "@expo/vector-icons";
 
 import AsyncStorage from "@react-native-async-storage/async-storage";
@@ -65,7 +66,7 @@ export default function AccountSettings({ route, navigation }) {
 
   const handleDeleteAccount = async () => {
     // promt the user for confirmation
-    Alert.alert(
+    alert(
       "Delete Account",
       "Are you sure you want to delete your account? This action is irreversible.",
       [

Screens/AddLift.js

@@ -59,8 +59,8 @@ export default function AddLift({ navigation }) {
         </View>
         <View
           style={{
+            flex: 1,
             width: "100%",
-            minHeight: 600,
             backgroundColor: "#0B0B0B",
             borderTopLeftRadius: 20,
             borderTopRightRadius: 20,
@@ -79,7 +79,10 @@ export default function AddLift({ navigation }) {
               headerShown: false,
             }}
           >
-            <Tab.Screen name="Saved Lifts" component={SavedLifts} />
+            <Tab.Screen
+              name="Saved Lifts"
+              children={() => <SavedLifts navigation={navigation} />}
+            />
             <Tab.Screen name="Search Lifts" component={SearchLift} />
             <Tab.Screen name="Cardio" component={CardioExercises} />
           </Tab.Navigator>
@@ -94,13 +97,14 @@ const styles = StyleSheet.create({
     flex: 1,
     backgroundColor: "#24262B",
     alignItems: "center",
-    paddingTop: Constants.statusBarHeight,
   },
 
   home: {
+    flex: 1,
     display: "flex",
     alignItems: "center",
     width: "100%",
+    backgroundColor: "#24262B",
   },
 
   topBar: {
@@ -122,23 +126,4 @@ const styles = StyleSheet.create({
     color: "#fff",
     textAlign: "center",
   },
-
-  containerExercises: {
-    flex: 1,
-    backgroundColor: "#0B0B0B",
-    alignItems: "center",
-    width: "100%",
-    borderTopLeftRadius: 20,
-    borderTopRightRadius: 20,
-  },
-
-  exercises: {
-    width: "100%",
-    backgroundColor: "#0b0b0b",
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "center",
-    marginBottom: 60,
-    padding: 20,
-  },
 });

Screens/AddRoutineScreens/SelectNumberDaysPerWeek.js

@@ -1,7 +1,6 @@
 import React from "react";
 import {
   View,
-  Alert,
   Text,
   StyleSheet,
   Pressable,
@@ -11,6 +10,7 @@ import {
 import { useState, useContext } from "react";
 
 import TopNavigationBar from "../../components/TopNavigationBar";
+import alert from "../../components/Alert.js";
 import { CreateRoutineContext } from "../../context/CreateRoutineContext.js";
 import { EditRoutineContext } from "../../context/EditRoutineContext.js";
 import { AppContext } from "../../context/AppContext.js";
@@ -83,7 +83,7 @@ export default function SelectNumberDaysPerWeek({ route, navigation }) {
     } catch (error) {
       console.log(error);
       setLoading(false);
-      Alert.alert("Error", "Something went wrong, please try again later.");
+      alert("Error", "Something went wrong, please try again later.");
       navigation.navigate("Home");
       return;
     }

Screens/CardioExercises.js

@@ -1,14 +1,9 @@
 import React, { useContext } from "react";
-import {
-  View,
-  Text,
-  StyleSheet,
-  ScrollView,
-  Pressable,
-  Alert,
-} from "react-native";
+import { View, Text, StyleSheet, ScrollView, Pressable } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
 
+import alert from "../components/Alert.js";
+
 import calculateCaloriesCardioExercise from "../Utils/calculateCaloriesCardioExercise.js";
 
 import { EditRoutineContext } from "../context/EditRoutineContext";
@@ -32,7 +27,7 @@ export default function CardioExercises({ navigation }) {
     );
 
     if (isAlreadyInList) {
-      Alert.alert("This cardio exercise is already in the list");
+      alert("This cardio exercise is already in the list");
       return;
     }