feat(url-support): base functionality added to support url parameter, r…

…esolves #550 (#551)

cypress/e2e/find-my-combos.cy.ts

@@ -0,0 +1,25 @@
+describe('Find My Combos', () => {
+  let testUrl = 'https://www.moxfield.com/decks/chDG34jh6E-vPEugnXO1BA';
+
+  it('can find a combo using url parameter', () => {
+    cy.visit('/find-my-combos/?url=' + testUrl);
+
+    cy.url().should('include', testUrl);
+
+    cy.get('#decklist-input').should('have.length', 1);
+    cy.get('#commander-input').should('have.length', 1);
+  });
+
+  it('can clear the url and data', () => {
+    cy.visit('/find-my-combos/?url=' + testUrl);
+    cy.url().should('include', testUrl);
+
+    cy.get('#clear-decklist-input').click();
+
+    cy.get('#decklist-input').should('be.empty');
+    cy.get('#commander-input').should('be.empty');
+    cy.url().should('not.contain', testUrl);
+  });
+});
+
+export {};

src/pages/find-my-combos.tsx

@@ -66,6 +66,7 @@ class Decklist {
 const FindMyCombos: React.FC = () => {
   const router = useRouter();
 
+  const { query } = router;
   const [decklist, setDecklist] = useState<string>('');
   const [commanderList, setCommanderList] = useState<string>('');
   const [decklistErrors, setDecklistErrors] = useState<string[]>([]);
@@ -198,6 +199,9 @@ const FindMyCombos: React.FC = () => {
   };
 
   const clearDecklist = () => {
+    if (query.url){
+      router.push({pathname: '/find-my-combos/',query: {}});
+    }
     setCurrentlyParsedDeck(undefined);
     setDecklist('');
     setCommanderList('');
@@ -208,6 +212,18 @@ const FindMyCombos: React.FC = () => {
     localStorage.removeItem(LOCAL_STORAGE_DECK_STORAGE_KEY);
   };
 
+  useEffect(() => {
+    if (query.url && !deckUrl) {
+      setDeckUrl(decodeURIComponent(query.url as string));
+    }
+  }, [query.url]);
+
+  useEffect(() => {
+    if (query.url && deckUrl) {
+      handleUrlInput();
+    }
+  }, [deckUrl]);
+
   useEffect(() => {
     if (!router.isReady) {
       return;
@@ -313,7 +329,7 @@ const FindMyCombos: React.FC = () => {
               {!lookupInProgress && (
                 <>
                   <button
-                    id="clear-decklist-input"
+                    id="parse-decklist-input"
                     className={`${styles.clearDecklistInput} button`}
                     onClick={() => parseDecklist(decklist, commanderList).then((decklist) => lookupCombos(decklist))}
                   >