Skip "original form" and "help page url" links if the URL isn't valid (…

…#96)

* Fix #86

* Format with prettier

* Restore accidentally removed comment

src/app/[path]/forms/[form]/page.tsx

@@ -13,6 +13,15 @@ interface PageProps {
   };
 }
 
+const isValidUrl = (url: string): boolean => {
+  try {
+    new URL(url);
+    return true;
+  } catch (e) {
+    return false;
+  }
+};
+
 const Page = async ({ params }: PageProps) => {
   const { form } = params;
   const { interviewsByTopic, isError } = await fetchInterviews('ma');
@@ -46,7 +55,8 @@ const Page = async ({ params }: PageProps) => {
         {formDetails.metadata.description}
       </ReactMarkdown>
       {(formDetails.metadata.help_page_url ||
-        formDetails.metadata.original_form) && (
+        (formDetails.metadata.original_form &&
+          isValidUrl(formDetails.metadata.original_form))) && (
         <>
           <p>
             <strong>More information:</strong>
@@ -59,13 +69,17 @@ const Page = async ({ params }: PageProps) => {
                 </Link>
               </li>
             )}
-            {formDetails.metadata.original_form && (
-              <li>
-                <Link href={formDetails.metadata.original_form} target="_blank">
-                  Original form
-                </Link>
-              </li>
-            )}
+            {formDetails.metadata.original_form &&
+              isValidUrl(formDetails.metadata.original_form) && (
+                <li>
+                  <Link
+                    href={formDetails.metadata.original_form}
+                    target="_blank"
+                  >
+                    Original form
+                  </Link>
+                </li>
+              )}
           </ul>
         </>
       )}

src/app/css/AffiliatesSection.module.css

@@ -1,13 +1,12 @@
 .AffiliatesSection {
-  background: rgba(0,0,0,.1);
-
+  background: rgba(0, 0, 0, 0.1);
 }
 
 .AffiliatesContainer {
   margin-right: auto;
   margin-left: auto;
   max-width: 576px;
-  
+
   & > :not(:last-child) {
     margin-bottom: 1em;
   }
@@ -16,4 +15,4 @@
 .AffiliateLogo {
   height: auto;
   max-width: 100%;
-}
+}

src/app/css/AllFormsContainer.module.css

@@ -1,3 +1,3 @@
 .AllFormsContainer {
   max-width: calc(992px);
-}
+}

src/app/css/Footer.module.css

@@ -9,4 +9,4 @@
   margin-right: auto;
   max-width: 576px;
   width: 100%;
-}
+}

src/app/css/FormPage.module.css

@@ -1,3 +1,3 @@
 .FormPage {
   max-width: 768px;
-}
+}

src/app/css/HeroSection.module.css

@@ -4,4 +4,4 @@
   & textarea {
     min-height: 6lh;
   }
-}
+}

src/app/css/HowItWorksSection.module.css

@@ -1,3 +1,3 @@
 .HowItWorksSection {
   background-color: #3e7d9a54;
-}
+}

src/app/css/InteractiveForm.module.css

@@ -1,7 +1,7 @@
 .Form {
   gap: 1rem;
 
-  &:last-child{
+  &:last-child {
     border-bottom: 0 !important;
   }
 
@@ -12,7 +12,6 @@
   }
 }
 
-
 .FormTitleContainer {
   max-width: 768px;
 }
@@ -24,7 +23,6 @@
   }
 }
 
-
 .FormButtonContainer {
   margin-left: auto;
 
@@ -33,4 +31,4 @@
       margin-left: 0;
     }
   }
-}
+}

src/app/css/NavigationBar.module.css

@@ -21,15 +21,14 @@
   &:not(:hover) {
     text-decoration: none;
   }
-
 }
 
 .AllFormsPath {
   text-transform: uppercase;
 }
 
 .ExternalLinkIcon {
-  height: .8em;
-  width: .8em;
+  height: 0.8em;
+  width: 0.8em;
   vertical-align: top;
-}
+}

src/app/css/SearchSection.module.css

@@ -1,3 +1,3 @@
 .ClearSearchButton {
   font-size: 80%;
-}
+}

src/app/css/ShowAllToggle.module.css

@@ -3,4 +3,4 @@
   border: none !important;
   background: #002e60 !important;
   margin-top: 10px;
-}
+}

src/app/css/ThankYou.module.css

@@ -6,4 +6,4 @@
     height: auto;
     max-width: 100%;
   }
-}
+}

src/app/css/TopicCard.module.css

@@ -17,7 +17,7 @@
 .TagContainer {
   overflow: hidden;
   transition: max-height 0.4s ease-in-out;
-  gap: .5rem;
+  gap: 0.5rem;
 }
 
 .FormTag {
@@ -46,4 +46,4 @@
 }
 
 .ShowContainer {
-}
+}

src/app/css/TopicPage.module.css

@@ -1,3 +1,3 @@
 .TopicPage {
   max-width: 768px;
-}
+}

src/app/css/TopicsSection.module.css

@@ -1,3 +1,3 @@
 .TopicsSection {
   background-color: #fbfafe;
-}
+}

src/app/globals.css

@@ -53,4 +53,4 @@ h5,
 /* Removes body bottom padding if the last child element is the affiliates section. */
 .body-container:has(#affiliates-section:last-child) {
   padding-bottom: 0 !important;
-}
+}