Add additional fail safe for action cable (#5453)

app/javascript/components/rooms/room/join/JoinCard.jsx

@@ -48,9 +48,10 @@ export default function JoinCard() {
   const currentUser = useAuth();
   const { friendlyId } = useParams();
   const [hasStarted, setHasStarted] = useState(false);
+  const [joinInterval, setJoinInterval] = useState();
 
   const publicRoom = usePublicRoom(friendlyId);
-  const roomStatusAPI = useRoomStatus(friendlyId);
+  const roomStatusAPI = useRoomStatus(friendlyId, joinInterval);
 
   const { data: env } = useEnv();
 
@@ -76,6 +77,8 @@ export default function JoinCard() {
     }
 
     roomStatusAPI.mutate(data);
+    const interval = setInterval(() => roomStatusAPI.mutate(data), 5000);
+    setJoinInterval(interval);
   };
   const reset = () => { setHasStarted(false); };// Reset pipeline;
 

app/javascript/hooks/mutations/rooms/useRoomStatus.jsx

@@ -19,7 +19,7 @@ import { useMutation } from 'react-query';
 import { useTranslation } from 'react-i18next';
 import axios from '../../../helpers/Axios';
 
-export default function useRoomStatus(friendlyId) {
+export default function useRoomStatus(friendlyId, joinInterval) {
   const { t } = useTranslation();
 
   return useMutation(
@@ -27,11 +27,13 @@ export default function useRoomStatus(friendlyId) {
     {
       onSuccess: ({ joinUrl }) => {
         if (joinUrl) {
+          clearInterval(joinInterval);
           toast.loading(t('toast.success.room.joining_meeting'));
           window.location.replace(joinUrl);
         }
       },
       onError: () => {
+        clearInterval(joinInterval);
         toast.error(t('toast.error.problem_completing_action'));
       },
     },