Success redirect (#52)

* remove logging * added success page with github url after posting * dropped l
PlanBee-dev · Sep 12, 2023 · 183b213 · 183b213
1 parent d7fbc09
commit 183b213
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 3 deletions.
diff --git a/packages/site/public/images/oulu-meetup-submit-image.jpg b/packages/site/public/images/oulu-meetup-submit-image.jpg
diff --git a/packages/site/src/pages/submit.astro b/packages/site/src/pages/submit.astro
@@ -275,6 +275,7 @@ Stable diffusion for the win. For images and animations. But what is facebook do
                     viewBox="0 0 20 20"
                     fill="currentColor"
                     aria-hidden="true"
+                    onclick="document.getElementById('submit-error-element').classList.add('hidden');"
                   >
                     <path
                       fill-rule="evenodd"
@@ -361,8 +362,11 @@ Stable diffusion for the win. For images and animations. But what is facebook do
       }
 
       const json = await res.value.json();
-
       console.log(json);
+
+      window.location.href = `/success?githubLink=${encodeURIComponent(
+        json.issueUrl,
+      )}`;
     }
 
     form.addEventListener('submit', onSubmit, false);

diff --git a/packages/site/src/pages/success.astro b/packages/site/src/pages/success.astro
@@ -0,0 +1,80 @@
+---
+import Footer from '../components/Footer.astro';
+import Header from '../components/Header.astro';
+import { SITE_TITLE } from '../consts';
+import BaseHead from '../components/BaseHead.astro';
+---
+
+<head>
+  <BaseHead title={SITE_TITLE} description={'thank you for participating'} />
+</head>
+<body class="h-full">
+  <div class="min-h-full">
+    <Header headerText={'Successful submitting!'} />
+    <div class="py-4">
+      <main>
+        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div class="mx-auto max-w-4xl p-8 sm:px-24">
+            <main>
+              <section>
+                <img
+                  class="sm:rounded-2xl"
+                  width={800}
+                  height={400}
+                  src={`${
+                    import.meta.env.BASE_URL
+                  }images/oulu-meetup-submit-image.jpg`}
+                  alt="Thank you image for submittig meetup"
+                />
+              </section>
+              <div class="mt-12" id="success-message">
+                <div class="rounded-md bg-blue-50 p-4">
+                  <div class="flex">
+                    <div class="mt-3 flex-shrink-0">
+                      <svg
+                        class="h-5 w-5 text-blue-400"
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                        aria-hidden="true"
+                      >
+                        <path
+                          fill-rule="evenodd"
+                          d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z"
+                          clip-rule="evenodd"
+                        >
+                        </path>
+                      </svg>
+                    </div>
+                    <div class="ml-3 flex flex-col md:flex md:justify-between">
+                      <p class="text-l text-blue-700">
+                        Heres the Github issue link for your meetup:
+                      </p>
+                      <p
+                        class="text-l mt-3 text-cyan-900 hover:text-cyan-700 md:mt-0"
+                        id="issue-link"
+                      >
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </main>
+          </div>
+        </div>
+      </main>
+      <Footer />
+    </div>
+  </div>
+</body>
+<script>
+  const urlSearchParams = new URLSearchParams(window.location.search);
+  const githubLink = urlSearchParams.get('githubLink');
+  if (githubLink) {
+    const a = document.createElement('a');
+    a.innerText = githubLink;
+    a.href = githubLink;
+    document.getElementById('issue-link')!.appendChild(a);
+  } else {
+    document.getElementById('success-message')!.classList.add('hidden');
+  }
+</script>
diff --git a/packages/site/src/utils.ts b/packages/site/src/utils.ts
@@ -74,14 +74,12 @@ export const getNextMeetup = (meetups: Meetup[]) => {
 
 export const createShortDescription = (descriptionToCut: string) => {
   const description = descriptionToCut.trimStart();
-  console.log('SHORTING', description.at(0));
 
   let shortDesc =
     description.length > 150
       ? description.substring(0, 150) + '...'
       : description;
   if (shortDesc.startsWith('#')) {
-    console.log('CUTTING DESCRIPTION STARTING WITH #', shortDesc);
     shortDesc = shortDesc.substring(description.indexOf(' ') + 1);
   }
   return shortDesc;