fixed the invite system

TravelCostApp/components/ManageProfile/ProfileForm.js

@@ -17,9 +17,7 @@ import FlatButton from "../UI/FlatButton";
 const ProfileForm = ({ navigation, onCancel }) => {
   const AuthCtx = useContext(AuthContext);
   const UserCtx = useContext(UserContext);
-  const TripCtx = useContext(TripContext);
   const freshlyCreated = UserCtx.freshlyCreated;
-  const uid = AuthContext.uid;
 
   let currencyPickerRef = undefined;
 
@@ -133,20 +131,24 @@ const ProfileForm = ({ navigation, onCancel }) => {
   );
 
   function joinInvite() {
-    UserCtx.setFreshlyCreatedTo(false);
+    // TODO: this hardcoded join
     navigation.navigate("Join", { id: "-NCIxnq4MrQjGB_unKiE" });
   }
+
   const freshlyNavigationButtons = (
     <View style={styles.navButtonContainer}>
       <FlatButton style={styles.navButton} onPress={joinInvite}>
         I have an invitation from another Traveller!
       </FlatButton>
-      <Button
-        style={styles.navButton}
-        onPress={() => navigation.navigate("ManageTrip")}
-      >
-        Create first Trip
-      </Button>
+      {/*  for debugging i leave this condition only around this button, it should be around the whole view though */}
+      {freshlyCreated && (
+        <Button
+          style={styles.navButton}
+          onPress={() => navigation.navigate("ManageTrip")}
+        >
+          Create first Trip
+        </Button>
+      )}
     </View>
   );
 
@@ -181,7 +183,7 @@ const ProfileForm = ({ navigation, onCancel }) => {
       </View>
       <View style={styles.inputsRow}></View>
       {changedName && changedNameButtons}
-      {freshlyCreated && freshlyNavigationButtons}
+      {freshlyNavigationButtons}
     </View>
   );
 };
@@ -254,7 +256,7 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: "flex-end",
     alignContent: "flex-end",
-    padding: 30,
+    padding: 24,
   },
   navButton: {
     minWidth: 120,

TravelCostApp/components/ManageTrip/TripForm.js

@@ -25,6 +25,7 @@ const TripForm = ({ navigation }) => {
   const ExpenseCtx = useContext(ExpensesContext);
 
   const uid = AuthCtx.uid;
+  const userName = UserCtx.userName;
   let currencyPickerRef = undefined;
 
   const [inputs, setInputs] = useState({
@@ -72,7 +73,7 @@ const TripForm = ({ navigation }) => {
     TripCtx.setCurrentTrip(tripid, tripData);
     UserCtx.addTripHistory(TripCtx.getcurrentTrip());
 
-    storeUserToTrip(tripid, { travellerid: uid });
+    storeUserToTrip(tripid, { travellerid: uid, userName: userName });
 
     updateUser(uid, {
       userName: UserCtx.userName,

TravelCostApp/components/ProfileOutput/ShareTrip.js

@@ -4,8 +4,7 @@ export async function onShare(shareId) {
   const link = "exp://192.168.100.102:19000/--/join/" + shareId;
   try {
     const result = await Share.share({
-      message:
-        "Invite to trip: " + " You are welcome to join me on TripExpense!",
+      message: `Invite to trip: ${shareId} - You are welcome to join me on TripExpense!`,
       url: link,
     });
     if (result.action === Share.sharedAction) {

TravelCostApp/screens/JoinTrip.js

@@ -1,59 +1,88 @@
-import { StyleSheet, Text, View } from "react-native";
+import { Alert, StyleSheet, Text, View } from "react-native";
 import { useContext, useEffect, useLayoutEffect, useState } from "react";
-import { fetchTrip, storeUserToTrip, updateTrip } from "../util/http";
+import {
+  fetchTrip,
+  storeUserToTrip,
+  updateTrip,
+  updateUser,
+} from "../util/http";
 import { Button } from "react-native";
 import { UserContext } from "../store/user-context";
 import { AuthContext } from "../store/auth-context";
+import { TripContext } from "../store/trip-context";
+import { GlobalStyles } from "../constants/styles";
+import Input from "../components/Auth/Input";
 
 const JoinTrip = ({ navigation, route }) => {
+  // join Trips via route params (route.params.id -> tripid)
+  // or with an invitation link (Input -> joinTripid)
+
   if (!route.params.id) return;
   const userCtx = useContext(UserContext);
   const authCtx = useContext(AuthContext);
+  const tripCtx = useContext(TripContext);
   const uid = authCtx.uid;
   const tripid = route.params.id;
-  let tripdata = {};
+
+  // NOTE: joinTripid for debug purposes
+  //("-NCIxnq4MrQjGB_unKiE");
+  const [joinTripid, setJoinTripid] = useState("");
+  const [tripdata, setTripdata] = useState({});
   const [tripName, setTripName] = useState("");
 
-  useLayoutEffect(() => {
-    async function getTrip() {
-      //   setIsFetching(true);
-      try {
-        const trip = await fetchTrip(tripid);
-        setTripName(trip.tripName);
-        tripdata = trip;
-        // expensesCtx.setExpenses(expenses);
-        // const user = await fetchUser(uid);
-        // userCtx.addUser(user);
-      } catch (error) {
-        console.log(
-          "An error happened while joining trip! (fetchTrip). Please try again later."
-        );
-      }
-      //   setIsFetching(false);
+  async function getTrip(tripID = tripid) {
+    //   setIsFetching(true);
+    try {
+      const trip = await fetchTrip(tripID);
+      setTripName(trip.tripName);
+      setTripdata(trip);
+    } catch (e) {
+      Alert.alert(
+        "Could not find trip!",
+        " Please try another invitation or try again later."
+      );
     }
+    //   setIsFetching(false);
+  }
 
+  useLayoutEffect(() => {
     getTrip();
-  }, [tripid]);
+  }, []);
 
   function joinHandler(join) {
     if (join) {
       const traveller = { travellerid: uid, userName: userCtx.userName };
       storeUserToTrip(tripid, traveller);
       userCtx.addTripHistory(tripdata);
-      // TODO: SAVE triphistory online
-      navigation.navigate("Profile");
-      return;
+      tripCtx.setCurrentTrip(tripid, tripdata);
+      updateUser(uid, {
+        userName: userCtx.userName,
+        tripHistory: userCtx.tripHistory,
+      });
+      userCtx.setFreshlyCreatedTo(false);
     }
-    navigation.navigate("Home");
+    navigation.navigate("Profile");
+  }
+
+  async function joinLinkHandler() {
+    setTripdata({});
+    setTripName("");
+    await getTrip(joinTripid);
+    joinHandler(true);
   }
 
   return (
     <View style={styles.container}>
-      <Text>Do you want to join the Trip named : {tripName}</Text>
+      <Text>Do you want to join the Trip : {tripName}?</Text>
       <View style={styles.buttonContainer}>
         <Button title="Yes" onPress={joinHandler.bind(this, true)} />
         <Button title="No" onPress={joinHandler.bind(this, false)} />
       </View>
+      <View style={styles.linkInputContainer}>
+        <Text> I have an invitation link!</Text>
+        <Input value={joinTripid} onUpdateValue={setJoinTripid}></Input>
+        <Button title={"Join"} onPress={joinLinkHandler}></Button>
+      </View>
     </View>
   );
 };
@@ -73,4 +102,11 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignContent: "space-between",
   },
+  linkInputContainer: {
+    flex: 1,
+    padding: 12,
+    margin: 12,
+    borderWidth: 1,
+    borderColor: GlobalStyles.colors.gray500,
+  },
 });

TravelCostApp/screens/ProfileScreen.js

@@ -14,6 +14,9 @@ const ProfileScreen = ({ route, navigation, param }) => {
   const FreshlyCreated = UserCtx.freshlyCreated;
   const TripCtx = useContext(TripContext);
 
+  const trip = [TripCtx.tripName];
+  console.log("ProfileScreen ~ trip", trip);
+
   const ACTIVETRIPS = [
     {
       tripid: TripCtx.tripid,

TravelCostApp/store/trip-context.js

@@ -21,13 +21,7 @@ export const TripContext = createContext({
   deleteTrip: (tripid) => {},
   updateTrip: ({ tripid, tripName, tripTotalBudget }) => {},
   getcurrentTrip: () => {},
-  setCurrentTrip: ({
-    tripName,
-    totalBudget,
-    tripCurrency,
-    dailyBudget,
-    travellers,
-  }) => {},
+  setCurrentTrip: ({ tripid, trip }) => {},
   deleteCurrentTrip: (uid) => {},
   getCurrentTripFromStorage: () => {},
   fetchCurrentTrip: (tripid) => {},

TravelCostApp/util/http.js

@@ -87,7 +87,7 @@ export async function fetchTrip(tripid) {
 }
 
 export async function storeUserToTrip(tripid, uid) {
-  const response = await axios.post(
+  const response = await axios.put(
     BACKEND_URL + "/trips/" + `${tripid}/` + `travellers.json`,
     uid
   );