Fce 2879/fix docs (#485)

## Description

Fix documentation to tell the user where to get env variables from as
well as remove env buttons from Room tab when env variable for
VIDEOROOM_STAGING_SANDBOX_URL is not present. I also deleted some code
that was left over from the times when we didn't use env variables to
save in async storage preferred environment.

## Motivation and Context

It helps outsiders build fishjam-chat example and cleans the code a
little bit

## Documentation impact

- [ ] Documentation update required
- [ ] Documentation updated [in another PR](_)
- [X] No documentation update required

## Types of changes

- [X] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to
      not work as expected)

Author: Magmusacy

examples/mobile-client/fishjam-chat/README.md

@@ -2,11 +2,16 @@
 
 ## Prerequisites
 
-Create a `.env` file in the `examples/mobile-client/fishjam-chat` directory (optional), or copy the `.env.example` file. The following environment variables are required:
+Copy `.env.example` to `.env` in the `examples/mobile-client/fishjam-chat` directory and fill in the required value:
 
-- `EXPO_PUBLIC_VIDEOROOM_STAGING_SANDBOX_URL` - Sandbox URL for VideoRoom staging environment
 - `EXPO_PUBLIC_FISHJAM_ID` - Fishjam ID for production environment
 
+You can find the value for this variable by creating an account on [fishjam.io](https://fishjam.io) and copying it from the sandbox dashboard.
+
+There also exists this additional environment variable, which is used for internal testing purposes: 
+
+- `EXPO_PUBLIC_VIDEOROOM_STAGING_SANDBOX_URL` - Sandbox URL for VideoRoom staging environment
+
 ## Example Overview
 
 The app has 2 tabs showing different ways to connect to Fishjam video calls:

examples/mobile-client/fishjam-chat/app/(tabs)/room.tsx

@@ -1,17 +1,16 @@
-import React, { useState, useCallback } from "react";
+import { router } from "expo-router";
+import { useState } from "react";
 import {
   Dimensions,
   Image,
-  KeyboardAvoidingView,
   Keyboard,
+  KeyboardAvoidingView,
   StyleSheet,
   Text,
-  View,
+  View
 } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
-import { router, useFocusEffect } from "expo-router";
-import AsyncStorage from "@react-native-async-storage/async-storage";
-import { Button, TextInput, DismissKeyboard } from "../../components";
+import { Button, DismissKeyboard, TextInput } from "../../components";
 import { changeFishjamId } from "../../utils/fishjamIdStore";
 
 const FishjamLogo = require("../../assets/images/fishjam-logo.png");
@@ -23,31 +22,12 @@ const VIDEOROOM_PROD_SANDBOX_URL =
 
 type VideoRoomEnv = "staging" | "prod";
 
-type VideoRoomData = {
-  videoRoomEnv: VideoRoomEnv;
-  roomName: string;
-  userName: string;
-};
-
-async function saveStorageData(videoRoomData: VideoRoomData) {
-  await AsyncStorage.setItem("videoRoomData", JSON.stringify(videoRoomData));
-}
-
-async function readStorageData(): Promise<VideoRoomData> {
-  const storageData = await AsyncStorage.getItem("videoRoomData");
-  if (storageData) {
-    const videoRoomData = JSON.parse(storageData) as VideoRoomData;
-    return videoRoomData;
-  }
-  return { videoRoomEnv: "staging", roomName: "", userName: "" };
-}
-
 export default function RoomScreen() {
   const [connectionError, setConnectionError] = useState<string | null>(null);
   const [roomName, setRoomName] = useState("");
   const [userName, setUserName] = useState("");
-  const [videoRoomEnv, setVideoRoomEnv] = useState<VideoRoomEnv>("staging");
-
+  const [videoRoomEnv, setVideoRoomEnv] = useState<VideoRoomEnv>("prod");
+  
   const handleEnvChange = (env: VideoRoomEnv) => {
     setVideoRoomEnv(env);
     if (env === "staging") {
@@ -57,43 +37,18 @@ export default function RoomScreen() {
     }
   };
 
-  useFocusEffect(
-    useCallback(() => {
-      const loadData = async () => {
-        const {
-          videoRoomEnv: storedVideoRoomEnv,
-          roomName: storedRoomName,
-          userName: storedUserName,
-        } = await readStorageData();
-
-        setRoomName(storedRoomName);
-        setUserName(storedUserName);
-        setVideoRoomEnv(storedVideoRoomEnv);
-
-        if (storedVideoRoomEnv === "staging") {
-          changeFishjamId(VIDEOROOM_STAGING_SANDBOX_URL);
-        } else {
-          changeFishjamId(VIDEOROOM_PROD_SANDBOX_URL);
-        }
-      };
-      loadData();
-    }, [])
-  );
-
   const validateInputs = () => {
     if (!roomName) {
       throw new Error("Room name is required");
     }
   };
 
   const onTapConnectButton = async () => {
+    const displayName = userName || "Mobile User";
     try {
       validateInputs();
       setConnectionError(null);
 
-      const displayName = userName || "Mobile User";
-      await saveStorageData({ videoRoomEnv, roomName, userName: displayName });
-      
       Keyboard.dismiss();
       router.push({
         pathname: "/room/preview",
@@ -118,7 +73,7 @@ export default function RoomScreen() {
             source={FishjamLogo}
             resizeMode="contain"
           />
-          <View
+          {VIDEOROOM_STAGING_SANDBOX_URL && (<View
             style={{
               flexDirection: 'row',
               justifyContent: 'space-around',
@@ -134,7 +89,7 @@ export default function RoomScreen() {
               type={videoRoomEnv === 'prod' ? 'primary' : 'secondary'}
               onPress={() => handleEnvChange('prod')}
             />
-          </View>
+          </View>)}
           <TextInput
             onChangeText={setRoomName}
             placeholder="Room Name"

examples/mobile-client/fishjam-chat/app/_layout.tsx

@@ -1,6 +1,6 @@
-import { Stack } from "expo-router";
 import { FishjamProvider } from "@fishjam-cloud/react-native-client";
-import { useState, useEffect } from "react";
+import { Stack } from "expo-router";
+import { useEffect, useState } from "react";
 
 import { setFishjamIdChangeCallback } from "../utils/fishjamIdStore";
 
@@ -13,6 +13,12 @@ export default function RootLayout() {
     setFishjamIdChangeCallback(setFishjamId);
   }, []);
 
+  useEffect(() => {
+    if (!fishjamId) {
+      console.error("Fishjam ID is not set. Please set the EXPO_PUBLIC_FISHJAM_ID environment variable.");
+    }
+  }, [fishjamId]);
+
   return (
     <FishjamProvider fishjamId={fishjamId}>
       <Stack screenOptions={{ headerShown: false }}>

examples/mobile-client/fishjam-chat/package.json

@@ -15,7 +15,6 @@
   "dependencies": {
     "@expo/vector-icons": "^15.0.3",
     "@fishjam-cloud/react-native-client": "workspace:*",
-    "@react-native-async-storage/async-storage": "^2.2.0",
     "@react-navigation/bottom-tabs": "^7.4.0",
     "@react-navigation/elements": "^2.6.3",
     "@react-navigation/native": "^7.1.8",

yarn.lock

@@ -5715,17 +5715,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-native-async-storage/async-storage@npm:^2.2.0":
-  version: 2.2.0
-  resolution: "@react-native-async-storage/async-storage@npm:2.2.0"
-  dependencies:
-    merge-options: "npm:^3.0.4"
-  peerDependencies:
-    react-native: ^0.0.0-0 || >=0.65 <1.0
-  checksum: 10c0/84900eba46a40225c4ac9bf5eb58885200dc1e789d873ecda46a2a213870cc7110536ed1fd7a74b873071f3603c093958fbd84c635d6f6d4f94bfbb616ffa0ef
-  languageName: node
-  linkType: hard
-
 "@react-native/assets-registry@npm:0.81.5":
   version: 0.81.5
   resolution: "@react-native/assets-registry@npm:0.81.5"
@@ -12038,7 +12027,6 @@ __metadata:
   dependencies:
     "@expo/vector-icons": "npm:^15.0.3"
     "@fishjam-cloud/react-native-client": "workspace:*"
-    "@react-native-async-storage/async-storage": "npm:^2.2.0"
     "@react-navigation/bottom-tabs": "npm:^7.4.0"
     "@react-navigation/elements": "npm:^2.6.3"
     "@react-navigation/native": "npm:^7.1.8"
@@ -13175,13 +13163,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-plain-obj@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "is-plain-obj@npm:2.1.0"
-  checksum: 10c0/e5c9814cdaa627a9ad0a0964ded0e0491bfd9ace405c49a5d63c88b30a162f1512c069d5b80997893c4d0181eadc3fed02b4ab4b81059aba5620bfcdfdeb9c53
-  languageName: node
-  linkType: hard
-
 "is-potential-custom-element-name@npm:^1.0.1":
   version: 1.0.1
   resolution: "is-potential-custom-element-name@npm:1.0.1"
@@ -14615,15 +14596,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"merge-options@npm:^3.0.4":
-  version: 3.0.4
-  resolution: "merge-options@npm:3.0.4"
-  dependencies:
-    is-plain-obj: "npm:^2.1.0"
-  checksum: 10c0/02b5891ceef09b0b497b5a0154c37a71784e68ed71b14748f6fd4258ffd3fe4ecd5cb0fd6f7cae3954fd11e7686c5cb64486daffa63c2793bbe8b614b61c7055
-  languageName: node
-  linkType: hard
-
 "merge-stream@npm:^2.0.0":
   version: 2.0.0
   resolution: "merge-stream@npm:2.0.0"