Remove non-null assertion in ConversationProvider

- Add `createOptionalContext` that is used by `AuthContext` and `ConversationContext` to create a context with a hook
  that can be used to retrieve its value and throw an error if it's undefined.
- In `router.tsx`, put `Messenger` inside `ConversationProvider`.
- In `ConversationListItem`, use the conversationId from the `ConversationContext ` instead of the url params.
- Fix bug in `CallInterface` with fullscreen.
- Remove unecessary useEffect dependency in `NotificationManager`.

Change-Id: Ib5f0ae6a0a34cdbdb02f871e36194376d945230d
diff --git a/client/src/pages/CallInterface.tsx b/client/src/pages/CallInterface.tsx
index 54c9b10..f21c49c 100644
--- a/client/src/pages/CallInterface.tsx
+++ b/client/src/pages/CallInterface.tsx
@@ -47,7 +47,7 @@
 } from '../components/CallButtons';
 import CallChatDrawer from '../components/CallChatDrawer';
 import { CallContext, CallStatus } from '../contexts/CallProvider';
-import { ConversationContext } from '../contexts/ConversationProvider';
+import { useConversationContext } from '../contexts/ConversationProvider';
 import { WebRtcContext } from '../contexts/WebRtcProvider';
 import { VideoElementWithSinkId } from '../utils/utils';
 import { CallPending } from './CallPending';
@@ -63,7 +63,7 @@
 
     if (isFullscreen && document.fullscreenElement === null) {
       callInterfaceRef.current.requestFullscreen();
-    } else if (!isFullscreen && document.fullscreenEnabled !== null) {
+    } else if (!isFullscreen && document.fullscreenElement !== null) {
       document.exitFullscreen();
     }
   }, [isFullscreen]);
@@ -187,7 +187,7 @@
 
 const CallInterfaceInformation = () => {
   const { callStartTime } = useContext(CallContext);
-  const { conversation } = useContext(ConversationContext);
+  const { conversation } = useConversationContext();
   const [elapsedTime, setElapsedTime] = useState(0);
   const memberName = useMemo(() => conversation.getFirstMember().contact.getRegisteredName(), [conversation]);
 
diff --git a/client/src/pages/CallPending.tsx b/client/src/pages/CallPending.tsx
index 4bdbef4..2cd57c6 100644
--- a/client/src/pages/CallPending.tsx
+++ b/client/src/pages/CallPending.tsx
@@ -29,13 +29,13 @@
 } from '../components/CallButtons';
 import ConversationAvatar from '../components/ConversationAvatar';
 import { CallContext, CallStatus } from '../contexts/CallProvider';
-import { ConversationContext } from '../contexts/ConversationProvider';
+import { useConversationContext } from '../contexts/ConversationProvider';
 import { WebRtcContext } from '../contexts/WebRtcProvider';
 import { VideoElementWithSinkId } from '../utils/utils';
 
 export const CallPending = () => {
   const { localStream } = useContext(WebRtcContext);
-  const { conversation } = useContext(ConversationContext);
+  const { conversation } = useConversationContext();
   const { callRole } = useContext(CallContext);
   const localVideoRef = useRef<VideoElementWithSinkId | null>(null);
 
@@ -148,7 +148,7 @@
 export const CallPendingCallerInterface = () => {
   const { callStatus } = useContext(CallContext);
   const { t } = useTranslation();
-  const { conversation } = useContext(ConversationContext);
+  const { conversation } = useConversationContext();
   const memberName = useMemo(() => conversation.getFirstMember().contact.getRegisteredName(), [conversation]);
 
   let title = t('loading');
@@ -182,7 +182,7 @@
   const { callStatus } = useContext(CallContext);
 
   const { t } = useTranslation();
-  const { conversation } = useContext(ConversationContext);
+  const { conversation } = useConversationContext();
   const memberName = useMemo(() => conversation.getFirstMember().contact.getRegisteredName(), [conversation]);
 
   let title = t('loading');
diff --git a/client/src/pages/ChatInterface.tsx b/client/src/pages/ChatInterface.tsx
index f6a637a..4ae9ce6 100644
--- a/client/src/pages/ChatInterface.tsx
+++ b/client/src/pages/ChatInterface.tsx
@@ -24,14 +24,14 @@
 import LoadingPage from '../components/Loading';
 import MessageList from '../components/MessageList';
 import SendMessageForm from '../components/SendMessageForm';
-import { ConversationContext } from '../contexts/ConversationProvider';
+import { useConversationContext } from '../contexts/ConversationProvider';
 import { WebSocketContext } from '../contexts/WebSocketProvider';
 import { useMessagesQuery, useSendMessageMutation } from '../services/conversationQueries';
 import { FileHandler } from '../utils/files';
 
 const ChatInterface = () => {
   const webSocket = useContext(WebSocketContext);
-  const { conversationId, conversation } = useContext(ConversationContext);
+  const { conversationId, conversation } = useConversationContext();
   const [messages, setMessages] = useState<Message[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(false);