customURL - show modal popup instead of redirecting to a new page

jam-ui/src/components/page/JKAppLaunch.js

@@ -1,17 +1,16 @@
 import React, { useEffect, useState } from 'react';
 import jkCustomUrlScheme from '../../helpers/jkCustomUrlScheme';
 import { useTranslation } from 'react-i18next';
-import { Card, CardBody, Row, Col } from 'reactstrap';
+import { Row, Col } from 'reactstrap';
-import FalconCardHeader from '../common/FalconCardHeader';
 
-const JKCustomUrlSchemaHandle = () => {
+const JKCustomUrlSchemaHandle = ({ customQueryString, toggle }) => {
   const [urlScheme, setUrlScheme] = useState(null);
   const { t } = useTranslation();
 
   useEffect(() => {
-    const queryStr = window.location.search;
+    //const queryStr = window.location.search;
-    if (!queryStr) return;
+    if (!customQueryString) return;
-    const urlParams = new URLSearchParams(queryStr);
+    const urlParams = new URLSearchParams(customQueryString);
     const action = urlParams.get('act');
     const params = urlParams.get('p');
     const appUrl = jkCustomUrlScheme(action, params);
@@ -27,28 +26,24 @@ const JKCustomUrlSchemaHandle = () => {
 
   return (
     <div>
-      <Card>
+      <Row>
-        <FalconCardHeader title={t('new.page_title', { ns: 'sessions' })} titleClass="font-weight-bold" />
+        <Col>
-        <CardBody className="pt-0">
+          <div className="mt-8 text-center mb-8">
-          <Row>
+            {urlScheme && (
-            <Col>
+              <>
-              <div className="mt-8 text-center mb-8">
+                <p>
-                {urlScheme && (
+                  Click <strong>Open JamKazam.app</strong> on the dialog shown by the browser. <br />
-                  <>
+                  If you don't see the dialog, click <strong>Lauhch JamKazam App</strong> below.
-                    <p>
+                </p>
-                      Click <strong>Open JamKazam.app</strong> on the dialog shown by the browser. <br />
+                <div>
-                      If you don't see the dialog, click <strong>Lauhch JamKazam App</strong> below.
+                  <a href={urlScheme} className='btn btn-primary' onClick={toggle}>Lauhch JamKazam App</a>
-                    </p>
+                </div>
-                    <div>
+              </>
-                      <a href={urlScheme} className='btn btn-primary'>Lauhch JamKazam App</a>
+            )}
-                    </div>
+          </div>
-                  </>
+        </Col>
-                )}
+      </Row>
-              </div>
+
-            </Col>
-          </Row>
-        </CardBody>
-      </Card>
     </div>
   );
 };

jam-ui/src/components/page/JKNewMusicSession.js

@@ -13,6 +13,7 @@ import useNativeAppCheck from '../../hooks/useNativeAppCheck';
 import { useNativeApp } from '../../context/NativeAppContext';
 import { useResponsive } from '@farfetch/react-context-responsive';
 import { sessionPrivacyMap } from '../../config';
+import JKAppLaunch from './JKAppLaunch';
 
 const JKNewMusicSession = () => {
   const { currentUser } = useAuth();
@@ -23,8 +24,9 @@ const JKNewMusicSession = () => {
   const [invitees, setInvitees] = useState([]);
   const [privacy, setPrivacy] = useState('1');
   const [submitted, setSubmitted] = useState(false);
-  const [showAppUnavailable, setShowAppUnavailable] = useState(false);
+  const [showAppLauncher, setShowAppLauncher] = useState(false);
-  const history = useHistory();
+  const [customQueryString, setCustomQueryString] = useState(null);
+  //const history = useHistory();
   const formRef = useRef();
   const isNativeAppAvailable = useNativeAppCheck();
   const { nativeAppUnavailable, setNativeAppUnavailable } = useNativeApp();
@@ -88,13 +90,21 @@ const JKNewMusicSession = () => {
       //check if jamkazam app is installed
       await isNativeAppAvailable();
       const q = `privacy~${payload.privacy}|description~${payload.description}|inviteeIds~${payload.inviteeIds}`;
-      history.push(`/applaunch?act=createSession&p=${q}`);
+      setCustomQueryString(`act=createSession&p=${q}`);
+      //history.push(`/applaunch?act=createSession&p=${q}`);
+      
     } catch (error) {
       toggleAppUnavilableModel();
     }
     return false;
   };
 
+  useEffect(() => {
+    if (customQueryString) {
+      setShowAppLauncher(true);
+    }
+  }, [customQueryString]);
+
   const handleOnSelect = submittedItems => {
     updateSessionInvitations(submittedItems);
   };
@@ -122,6 +132,10 @@ const JKNewMusicSession = () => {
     }
   };
 
+  const toggleAppLauncher = () => {
+    setShowAppLauncher(prev => !prev);
+  }
+
   return (
     <div>
       <Card>
@@ -215,6 +229,13 @@ const JKNewMusicSession = () => {
           </a>
         </div>
       </JKModalDialog>
+      <JKModalDialog
+        show={showAppLauncher}
+        onToggle={toggleAppLauncher}
+        title={t('new.page_title', { ns: 'sessions' })}
+      >
+        <JKAppLaunch customQueryString={customQueryString} toggle={toggleAppLauncher} />
+      </JKModalDialog>
     </div>
   );
 };

jam-ui/src/components/sessions/JKSession.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useAuth } from '../../context/UserAuth';
 import { useDispatch, useSelector } from 'react-redux';
 import { fetchUserLatencies } from '../../store/features/latencySlice';
@@ -15,6 +15,8 @@ import EnterIcon from '../../icons/enter.svg';
 import JKInstrumentIcon from '../profile/JKInstrumentIcon';
 import {useHistory} from 'react-router-dom';
 import useSessionHelper from './JKUseSessionHelper';
+import JKModalDialog from '../common/JKModalDialog';
+import JKAppLaunch from '../page/JKAppLaunch';
 
 function JKSession({ session }) {
   const { currentUser } = useAuth();
@@ -24,6 +26,7 @@ function JKSession({ session }) {
   const { setNativeAppUnavailable } = useNativeApp();
   const { sessionDescription } = useSessionHelper(session);
   
+
   useEffect(() => {
     const otherUserIds = session.participants.map(p => p.user.id);
     const options = { currentUserId: currentUser.id, otherUserIds };
@@ -158,7 +161,12 @@ function JoinSessionButton({ session }) {
   const isNativeAppAvailable = useNativeAppCheck();
   const { setNativeAppUnavailable } = useNativeApp();
   const { t } = useTranslation();
-  const history = useHistory();
+  //const history = useHistory();
+
+  const [showAppLauncher, setShowAppLauncher] = useState(false);
+  const customQueryString = `act=joinSession&p=session~${session.id}`;
+
+  const toggleAppLauncher = () => setShowAppLauncher(!showAppLauncher);
 
   async function joinSession(e) {
     e.preventDefault();
@@ -167,8 +175,9 @@ function JoinSessionButton({ session }) {
     } else {
       try {
         await isNativeAppAvailable();
-        const q = `sessionId~${session.id}`;
+        //const q = `sessionId~${session.id}`;
-        history.push(`/applaunch?act=joinSession&p=${q}`);
+        //history.push(`/applaunch?act=joinSession&p=${q}`);
+        setShowAppLauncher(true);
         return;
       } catch (error) {
         setNativeAppUnavailable(true);
@@ -177,6 +186,7 @@ function JoinSessionButton({ session }) {
   }
 
   return (
+    <>
     <div>
       <Button
         data-testid="joinBtn"
@@ -193,6 +203,14 @@ function JoinSessionButton({ session }) {
         </a>
       </div>
     </div>
+    <JKModalDialog
+        show={showAppLauncher}
+        onToggle={toggleAppLauncher}
+        title={t('new.page_title', { ns: 'sessions' })}
+      >
+        <JKAppLaunch customQueryString={customQueryString} toggle={toggleAppLauncher} />
+      </JKModalDialog>
+    </>
   );
 }