Pass url as query string param (#623)

* feat: allow url to be passed in qs

* chore: tidy up

Author: tsmith123

apps/router/src/hooks/custom/useQuery.tsx

@@ -0,0 +1,9 @@
+// taken from react-router-dom examples
+import { useMemo } from 'react';
+import { useLocation } from 'react-router-dom';
+
+export const useQuery = () => {
+  const { search } = useLocation();
+
+  return useMemo(() => new URLSearchParams(search), [search]);
+};

apps/router/src/hooks/index.tsx

@@ -63,3 +63,4 @@ export * from './guardian/useGuardian';
 export * from './guardian/useGuardianSetup';
 export * from './gateway/useGateway';
 export * from './custom/useTrimmedInput';
+export * from './custom/useQuery';

apps/router/src/pages/Home/Home.test.tsx

@@ -11,8 +11,10 @@ import HomePage from './Home';
 
 // Mock AppContext
 const mockedUseAppContext = jest.fn();
+const mockedUseQuery = jest.fn();
 jest.mock('../../hooks', () => ({
   useAppContext: () => mockedUseAppContext(),
+  useQuery: () => mockedUseQuery(),
 }));
 
 // Mock sha256Hash
@@ -22,20 +24,24 @@ jest.mock('@fedimint/utils', () => ({
 }));
 
 describe('pages/Home', () => {
+  const mockDispatch = jest.fn();
+
+  beforeEach(() => {
+    mockedUseAppContext.mockImplementation(() => ({
+      service: null,
+      dispatch: mockDispatch,
+    }));
+
+    mockedUseQuery.mockReturnValue({
+      get: jest.fn(),
+    });
+  });
+
   afterEach(() => {
     jest.clearAllMocks();
   });
 
   describe('When a user clicks the connect button with an empty input value', () => {
-    const mockDispatch = jest.fn();
-
-    beforeEach(() => {
-      mockedUseAppContext.mockImplementation(() => ({
-        service: null,
-        dispatch: mockDispatch,
-      }));
-    });
-
     it('should not call dispatch', async () => {
       render(<HomePage />);
 
@@ -52,15 +58,6 @@ describe('pages/Home', () => {
 
   // We don't support gateway urls at this time so check for this
   describe('When a user clicks the connect button with a gateway url input value', () => {
-    const mockDispatch = jest.fn();
-
-    beforeEach(() => {
-      mockedUseAppContext.mockImplementation(() => ({
-        service: null,
-        dispatch: mockDispatch,
-      }));
-    });
-
     it('should not call dispatch', async () => {
       render(<HomePage />);
 
@@ -82,15 +79,6 @@ describe('pages/Home', () => {
   });
 
   describe('When a user clicks the connect button with a guardian url input value', () => {
-    const mockDispatch = jest.fn();
-
-    beforeEach(() => {
-      mockedUseAppContext.mockImplementation(() => ({
-        service: null,
-        dispatch: mockDispatch,
-      }));
-    });
-
     it('should call dispatch', async () => {
       render(<HomePage />);
 
@@ -112,13 +100,6 @@ describe('pages/Home', () => {
   });
 
   describe('When there is no service in LocalStorage', () => {
-    beforeEach(() => {
-      mockedUseAppContext.mockImplementation(() => ({
-        service: null,
-        dispatch: jest.fn(),
-      }));
-    });
-
     it('should render an input without a value', () => {
       render(<HomePage />);
       const input = screen.getByPlaceholderText('Guardian URL');
@@ -170,4 +151,18 @@ describe('pages/Home', () => {
       expect(url).toBeInTheDocument();
     });
   });
+
+  describe('When a url is passed as a query param', () => {
+    beforeEach(() => {
+      mockedUseQuery.mockReturnValue({
+        get: jest.fn().mockReturnValue('wss://guardian-url.test.com:8174'),
+      });
+    });
+
+    it('should set query param value in input box', () => {
+      render(<HomePage />);
+      const url = screen.getByDisplayValue('wss://guardian-url.test.com:8174');
+      expect(url).toBeInTheDocument();
+    });
+  });
 });

apps/router/src/pages/Home/Home.tsx

@@ -21,6 +21,7 @@ import { FaDiscord, FaGithub } from 'react-icons/fa';
 import { FiX } from 'react-icons/fi';
 import { APP_ACTION_TYPE } from '../../context/AppContext';
 import { useAppContext } from '../../hooks';
+import { useQuery } from '../../hooks';
 import HeroSvg from '../../images/hero-1.svg';
 import { getServiceType } from '../../helpers/service';
 import { LATEST_RELEASE_TAG } from '../../constants';
@@ -29,6 +30,8 @@ import { Logo } from '../../components/Logo';
 const HomePage: React.FC = () => {
   const { t } = useTranslation();
   const navigate = useNavigate();
+  const query = useQuery();
+
   const { dispatch, service } = useAppContext();
 
   const [serviceUrl, setServiceUrl] = useState<string>('');
@@ -38,11 +41,12 @@ const HomePage: React.FC = () => {
     setIsGateway(false);
   }, [serviceUrl]);
 
+  // If url query param provided then set this in input
+  // as priority, otherwise fallback to url in state and then empty string
   useEffect(() => {
-    if (service?.config) {
-      setServiceUrl(service.config.baseUrl);
-    }
-  }, [service]);
+    const url = query.get('url') || service?.config.baseUrl || '';
+    setServiceUrl(url);
+  }, [query, service]);
 
   const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const url = e.target.value;