fix: redirection handler

Author: fredshema

src/components/InvitationTable.tsx

@@ -63,10 +63,9 @@ function DataTableStats({ data, columns, error, loading }: TableData) {
 
   return (
     <div
-      className={``}
+      className=""
     >
-      <div className="flex items-center justify-between pb-6 ">
-      </div>
+      <div className="flex items-center justify-between pb-6 " />
       <div style={{ overflowX: 'auto' }}>
         <table className="min-w-full leading-normal" {...getTableProps()}>
           <thead>

src/containers/Routes.tsx

@@ -1,13 +1,13 @@
 /* eslint-disable */
 import React, { Suspense } from 'react';
-import { Routes, Route, Outlet } from 'react-router-dom';
-import Home from '../pages/Home';
-import Header from '../components/Header';
+import { Outlet, Route, Routes } from 'react-router-dom';
 import Footer from '../components/Footer';
-import Error from './../pages/Error';
+import Header from '../components/Header';
 import Skeleton from '../components/Skeleton';
-import UserRegister from '../pages/Organization/UserRegister';
+import Home from '../pages/Home';
 import Message from '../pages/Organization/Message';
+import UserRegister from '../pages/Organization/UserRegister';
+import Error from './../pages/Error';
 /* istanbul ignore next */
 const OrgRegister = React.lazy(() => import('../pages/OrgRegister'));
 /* istanbul ignore next */
@@ -32,19 +32,20 @@ const SignupOrgDocs = React.lazy(
 const SigninOrgDocs = React.lazy(
   () => import('../components/Docs/SigninOrgDocs'),
 );
-const UsersDocs = React.lazy( () => import ('../components/Docs/users'),)
+const UsersDocs = React.lazy(() => import('../components/Docs/users'));
 /* istanbul ignore next */
+import DashRoutes from '../containers/DashRoutes';
 import Noredirect from '../pages/Noredirect';
+import RedirectHandler from '../pages/RedirectHandler';
 import ProtectedRoutes from '../ProtectedRoute';
 import RemoveTokenPage from '../utils/RemoveTokenPage';
-import DashRoutes from '../containers/DashRoutes';
 
 function MainRoutes() {
   return (
     <div className="min-h-screen page-layout">
       <Suspense fallback={<Skeleton />}>
         <Routes>
-          <Route path="/*" element={<DashRoutes />} />     
+          <Route path="/*" element={<DashRoutes />} />
           <Route
             path="/"
             element={
@@ -91,7 +92,8 @@ function MainRoutes() {
             />
             <Route path="/docs/org-signup" element={<SignupOrgDocs />} />
             <Route path="/docs/org-signin" element={<SigninOrgDocs />} />
-            <Route path='/docs/getting-started' element={< UsersDocs />} />
+            <Route path="/docs/getting-started" element={<UsersDocs />} />
+            <Route path="/redirect" element={<RedirectHandler />} />
             <Route path="/noredirect" element={<Noredirect />} />
           </Route>
           <Route path="*" element={<Error />} />

src/pages/Organization/UserRegister.tsx

@@ -1,21 +1,21 @@
 /* eslint-disable */
-import { useApolloClient, useLazyQuery, useMutation } from '@apollo/client';
-import React, { useContext, useState, useEffect } from 'react';
+import { useLazyQuery, useMutation } from '@apollo/client';
+import React, { useContext, useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 
+import jwt_decode from 'jwt-decode';
 import { useTranslation } from 'react-i18next';
-import { FaGoogle, FaRegEnvelope, FaRegEye } from 'react-icons/fa';
+import { FaRegEnvelope, FaRegEye } from 'react-icons/fa';
 import { FiEyeOff } from 'react-icons/fi';
 import { MdLockOutline } from 'react-icons/md';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import ButtonLoading from '../../components/ButtonLoading';
 import Button from '../../components/Buttons';
+import ControlledSelect from '../../components/ControlledSelect';
 import { UserContext } from '../../hook/useAuth';
 import useDocumentTitle from '../../hook/useDocumentTitle';
-import { SIGN_UP_MUTATION, GET_SIGNUP_ORGANIZATION } from './Mutations';
-import ControlledSelect from '../../components/ControlledSelect';
-import jwt_decode from 'jwt-decode';
+import { GET_SIGNUP_ORGANIZATION, SIGN_UP_MUTATION } from './Mutations';
 
 const Signup = () => {
   const token: any = window.location.href.substring(

src/pages/RedirectHandler.tsx

@@ -0,0 +1,65 @@
+import React, { useEffect } from 'react';
+
+const APP_ID = 'com.atlp.pulseapp';
+
+export default function RedirectHandler() {
+  const [redirectUrl, setRedirectUrl] = React.useState('');
+
+  const buildQueryString = (params: URLSearchParams) => {
+    let queryParams = '?';
+    const ignoredKeys = ['path', 'dest', 'fallback'];
+
+    params.forEach((value, key) => {
+      if (ignoredKeys.includes(key)) return;
+
+      if (!queryParams?.endsWith('?') && !queryParams?.endsWith('&'))
+        queryParams += '&';
+
+      queryParams += `${key}=${value}`;
+    });
+
+    return queryParams;
+  };
+
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const queryParams = buildQueryString(params);
+    const path = params.get('path');
+    const destnation = params.get('dest');
+    const fallback = params.get('fallback');
+    setRedirectUrl(fallback ?? '/');
+    console.log(fallback);
+
+    if (path != null) {
+      if (destnation === 'web') {
+        return window.location.replace(path + queryParams);
+      }
+
+      if (destnation === 'app') {
+        setTimeout(() => {
+          window.location.replace(`${APP_ID}://${path}${queryParams}`);
+        }, 500);
+        window.location.replace(redirectUrl);
+      }
+
+      window.location.replace(redirectUrl);
+    } else {
+      // eslint-disable-next-line no-console
+      console.error('Invalid redirect data');
+    }
+
+    return () => {};
+  }, [redirectUrl]);
+
+  return (
+    <div className=" dark:bg-dark-frame-bg flex flex-col py-8 px-5  items-center justify-center grow h-full w-full">
+      <p>Redirecting...</p>
+      <p>
+        If you are not redirected in a few seconds, please click{' '}
+        <a className="underline" href={redirectUrl}>
+          here
+        </a>
+      </p>
+    </div>
+  );
+}