From b835a8c8458377d60dac340664ac165cbab52b42 Mon Sep 17 00:00:00 2001
From: Aravind Balla <bsaaravind@gmail.com>
Date: Sun, 14 Jul 2024 12:35:36 +0530
Subject: [PATCH] feat: wishlist auth

---
 pages/wishlist.js | 135 ++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 114 insertions(+), 21 deletions(-)

diff --git a/pages/wishlist.js b/pages/wishlist.js
index 7eeee8c..720487c 100644
--- a/pages/wishlist.js
+++ b/pages/wishlist.js
@@ -1,8 +1,13 @@
+import { useEffect, useState } from 'react';
 import { NextSeo } from 'next-seo';
+import { useSearchParams } from 'next/navigation';
+import { useRouter } from 'next/navigation';
 
 import { baseUrl } from '../seo.config';
 import Layout from '../components/Layout';
 
+const unallowedPeople = ['gautami', 'krushi'];
+
 const gifts = {
   'Coffee Stuff': {
     subheading: 'Yes, he owns a lot of coffee stuff. But there is always room for more.',
@@ -88,6 +93,25 @@ const gifts = {
 };
 
 export default function WishlistPage() {
+  const searchParams = useSearchParams();
+  const show = searchParams.get('show');
+
+  const router = useRouter();
+
+  const [name, setName] = useState('');
+
+  useEffect(() => {
+    if (show === 'true') {
+      const wishlistName = localStorage.getItem('wishlistName');
+      if (!wishlistName) {
+        router.push({
+          pathname: '/wishlist',
+          search: ``,
+        });
+      }
+    }
+  }, [show]);
+
   return (
     <Layout>
       <NextSeo
@@ -103,28 +127,97 @@ export default function WishlistPage() {
 
       <div className="mt-12 prose lg:prose-lg dark:prose-light">
         <h1>Wishlist 2024</h1>
-        <p>
-          <i>A surprise gift is best, but it should not go unused.</i>
-        </p>
 
-        {Object.entries(gifts).map(([category, { subheading, items }]) => (
-          <div key={category}>
-            <h2>{category}</h2>
-            {subheading && <p>{subheading}</p>}
-            <ul>
-              {items.map((item) => (
-                <li key={item.title}>
-                  <a href={item.link} target="_blank" rel="noopener noreferrer">
-                    {item.title}
-                  </a>{' '}
-                  - ₹{item.price}
-                  {/* <br /> */}
-                  {/* {item.description} */}
-                </li>
-              ))}
-            </ul>
-          </div>
-        ))}
+        {show === 'true' ? (
+          <>
+            <p>
+              <i>A surprise gift is best, but it should not go unused.</i>
+            </p>
+            <p>If you pick something, let Aravind know so he can strike it off here.</p>
+            {Object.entries(gifts).map(([category, { subheading, items }]) => (
+              <div key={category}>
+                <h2>{category}</h2>
+                {subheading && <p>{subheading}</p>}
+                <ul>
+                  {items.map((item) => (
+                    <li key={item.title}>
+                      <a href={item.link} target="_blank" rel="noopener noreferrer">
+                        {item.title}
+                      </a>{' '}
+                      - ₹{item.price}
+                      {/* <br /> */}
+                      {/* {item.description} */}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </>
+        ) : (
+          <form
+            className="flex items-start flex-col mt-12 px-4 pb-4 border border-gray-200 dark:border-gray-700 rounded-md"
+            onSubmit={(e) => {
+              e.preventDefault();
+
+              if (unallowedPeople.includes(name.toLowerCase())) {
+                alert(
+                  'Sorry, you are not allowed to see the list. You might have already gifted something.'
+                );
+              } else {
+                localStorage.setItem('wishlistName', name);
+                router.push({
+                  pathname: '/wishlist',
+                  search: `show=true`,
+                });
+              }
+            }}
+          >
+            <div className="flex gap-y-4 flex-col w-full">
+              <p>
+                There no pressure to gift anything. Having you in his life is itself a gift for
+                Aravind. If you still insist, please proceed.
+              </p>
+              <input
+                type="text"
+                className="px-3 py-1 dark:bg-purple-800 dark:bg-opacity-50 bg-purple-200 placeholder-purple-400 text-base rounded"
+                placeholder="Your name"
+                required
+                onChange={(e) => {
+                  setName(e.target.value);
+                }}
+              />
+
+              <div className="relative flex items-start">
+                <div className="flex h-6 items-center">
+                  <input
+                    id="agree"
+                    name="agree"
+                    required
+                    type="checkbox"
+                    aria-describedby="agree-description"
+                    className="h-4 w-4 rounded border-gray-300 text-purple-600 focus:ring-purple-600"
+                  />
+                </div>
+                <div className="ml-3 text-sm leading-6">
+                  <label htmlFor="agree" className="">
+                    I agree that I will share my wishlist with Aravind before my birthday this year.
+                  </label>
+                </div>
+              </div>
+
+              <div>
+                <button
+                  type="submit"
+                  className="dark:bg-purple-50 bg-purple-900 dark:text-purple-900 text-purple-50 text-base font-bold px-6 py-2 md:py-0 rounded"
+                  data-umami-event={name ? `wishlist:show` : undefined}
+                  data-umami-event-name={name}
+                >
+                  Show
+                </button>
+              </div>
+            </div>
+          </form>
+        )}
       </div>
     </Layout>
   );