From 1dd160e19fc617ec854de78c73195ca60c66699b Mon Sep 17 00:00:00 2001 From: Nuwan Date: Wed, 29 Jan 2025 12:55:14 +0530 Subject: [PATCH] customURL - show modal popup instead of redirecting to a new page --- jam-ui/src/components/page/JKAppLaunch.js | 51 +++++++++---------- .../src/components/page/JKNewMusicSession.js | 27 ++++++++-- jam-ui/src/components/sessions/JKSession.js | 26 ++++++++-- 3 files changed, 69 insertions(+), 35 deletions(-) diff --git a/jam-ui/src/components/page/JKAppLaunch.js b/jam-ui/src/components/page/JKAppLaunch.js index 06ff2b56c..8a713ed6b 100644 --- a/jam-ui/src/components/page/JKAppLaunch.js +++ b/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 FalconCardHeader from '../common/FalconCardHeader'; +import { Row, Col } from 'reactstrap'; -const JKCustomUrlSchemaHandle = () => { +const JKCustomUrlSchemaHandle = ({ customQueryString, toggle }) => { const [urlScheme, setUrlScheme] = useState(null); const { t } = useTranslation(); useEffect(() => { - const queryStr = window.location.search; - if (!queryStr) return; - const urlParams = new URLSearchParams(queryStr); + //const queryStr = window.location.search; + if (!customQueryString) return; + 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 (
- - - - - -
- {urlScheme && ( - <> -

- Click Open JamKazam.app on the dialog shown by the browser.
- If you don't see the dialog, click Lauhch JamKazam App below. -

- - - )} -
- - - - + + +
+ {urlScheme && ( + <> +

+ Click Open JamKazam.app on the dialog shown by the browser.
+ If you don't see the dialog, click Lauhch JamKazam App below. +

+
+ Lauhch JamKazam App +
+ + )} +
+ + +
); }; diff --git a/jam-ui/src/components/page/JKNewMusicSession.js b/jam-ui/src/components/page/JKNewMusicSession.js index c8ce454d4..7d0fa54ae 100644 --- a/jam-ui/src/components/page/JKNewMusicSession.js +++ b/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 history = useHistory(); + const [showAppLauncher, setShowAppLauncher] = useState(false); + 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 (
@@ -215,6 +229,13 @@ const JKNewMusicSession = () => {
+ + + ); }; diff --git a/jam-ui/src/components/sessions/JKSession.js b/jam-ui/src/components/sessions/JKSession.js index 675cd4a18..a0d106df7 100644 --- a/jam-ui/src/components/sessions/JKSession.js +++ b/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(); @@ -23,6 +25,7 @@ function JKSession({ session }) { const { greaterThan } = useResponsive(); const { setNativeAppUnavailable } = useNativeApp(); const { sessionDescription } = useSessionHelper(session); + useEffect(() => { const otherUserIds = session.participants.map(p => p.user.id); @@ -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}`; - history.push(`/applaunch?act=joinSession&p=${q}`); + //const q = `sessionId~${session.id}`; + //history.push(`/applaunch?act=joinSession&p=${q}`); + setShowAppLauncher(true); return; } catch (error) { setNativeAppUnavailable(true); @@ -177,6 +186,7 @@ function JoinSessionButton({ session }) { } return ( + <>
+ + + + ); }