Redirect user from call page when not in call

When a user tries to access a call page while not in a call, redirect the user to the home page.

Misc changes:

- Add route state to the call route that includes the CallStatus.
- CallProvider redirects to home if the callStatus isn't set (meaning
  the user isn't in a call).
- Remove `beginCall` function in `ConversationProvider`. Added `useStartCall` hook that redirects the user to the call page. The `CallProvider` automatically sends the `BeginCall` message when the user reaches the page for the first time.
- Reorder functions in CallProvider to have `useEffect` functions at the top

GitLab: #164
Change-Id: I6cec1b9f31cb308d92a69112f5b38d1bdf79e05f
diff --git a/client/src/contexts/ConversationProvider.tsx b/client/src/contexts/ConversationProvider.tsx
index a282664..7d09881 100644
--- a/client/src/contexts/ConversationProvider.tsx
+++ b/client/src/contexts/ConversationProvider.tsx
@@ -15,9 +15,8 @@
  * License along with this program.  If not, see
  * <https://www.gnu.org/licenses/>.
  */
-import { CallAction, Conversation, ConversationView, WebSocketMessageType } from 'jami-web-common';
-import { createContext, useCallback, useContext, useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { Conversation, ConversationView, WebSocketMessageType } from 'jami-web-common';
+import { createContext, useContext, useEffect, useState } from 'react';
 
 import LoadingPage from '../components/Loading';
 import { useUrlParams } from '../hooks/useUrlParams';
@@ -30,8 +29,6 @@
 interface IConversationProvider {
   conversationId: string;
   conversation: Conversation;
-
-  beginCall: () => void;
 }
 
 export const ConversationContext = createContext<IConversationProvider>(undefined!);
@@ -45,9 +42,8 @@
   const [isLoading, setIsLoading] = useState(false);
   const [isError, setIsError] = useState(false);
   const [conversation, setConversation] = useState<Conversation | undefined>();
-  const navigate = useNavigate();
 
-  const conversationQuery = useConversationQuery(conversationId);
+  const conversationQuery = useConversationQuery(conversationId!);
 
   useEffect(() => {
     if (conversationQuery.isSuccess) {
@@ -64,28 +60,8 @@
     setIsError(conversationQuery.isError);
   }, [conversationQuery.isError]);
 
-  const beginCall = useCallback(() => {
-    if (!webSocket || !conversation) {
-      throw new Error('Could not begin call');
-    }
-
-    // TODO: Could we move this logic to the server? The client could make a single request with the conversationId,
-    // and the server is tasked with sending all the individual requests to the members of the conversation
-    for (const member of conversation.getMembers()) {
-      const callBegin: CallAction = {
-        contactId: member.contact.getUri(),
-        conversationId,
-      };
-
-      console.info('Sending CallBegin', callBegin);
-      webSocket.send(WebSocketMessageType.CallBegin, callBegin);
-    }
-
-    navigate(`/conversation/${conversationId}/call?role=caller`);
-  }, [conversationId, webSocket, conversation, navigate]);
-
   useEffect(() => {
-    if (!conversation || !webSocket) {
+    if (!conversation || !conversationId || !webSocket) {
       return;
     }
 
@@ -108,7 +84,6 @@
       value={{
         conversationId,
         conversation,
-        beginCall,
       }}
     >
       {children}