From 00cc4d6dc501406c322711f81ae051bd6ccc7d29 Mon Sep 17 00:00:00 2001
From: Zeeshan Ahmad <itexpert120@outlook.com>
Date: Thu, 15 Feb 2024 08:03:11 +0500
Subject: [PATCH] Add Modal pop up for month view

---
 apps/builddao/widget/events/ListView.jsx  |   2 -
 apps/builddao/widget/events/MonthView.jsx | 136 +++++++++++++++++++++-
 2 files changed, 133 insertions(+), 5 deletions(-)

diff --git a/apps/builddao/widget/events/ListView.jsx b/apps/builddao/widget/events/ListView.jsx
index c23249c1..817bb6c1 100644
--- a/apps/builddao/widget/events/ListView.jsx
+++ b/apps/builddao/widget/events/ListView.jsx
@@ -130,8 +130,6 @@ return (
                 return it;
               }) ?? [];
 
-            console.log(event);
-
             const organizer = organizers[0];
             const organizerProfile = Social.getr(`${organizer}/profile`);
 
diff --git a/apps/builddao/widget/events/MonthView.jsx b/apps/builddao/widget/events/MonthView.jsx
index 319909cd..99ffe86e 100644
--- a/apps/builddao/widget/events/MonthView.jsx
+++ b/apps/builddao/widget/events/MonthView.jsx
@@ -1,3 +1,11 @@
+const { Modal, Hashtag, Button } = VM.require(
+  "buildhub.near/widget/components"
+) || {
+  Modal: () => <></>,
+  Hashtag: () => <></>,
+  Button: () => <></>,
+};
+
 const currentDate = props.currentDate || new Date();
 const events = props.events || [];
 
@@ -71,7 +79,7 @@ const embedCss = props.embedCss || customCSS;
 const code = `
 <script src='https://cdn.jsdelivr.net/npm/fullcalendar/index.global.js'></script>
 <!-- iframe-resizer -->
-<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.6/iframeResizer.contentWindow.js"></script>
+<!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.6/iframeResizer.contentWindow.js"></script> -->
 
 <style>
   ${embedCss}
@@ -89,7 +97,7 @@ const code = `
       eventClick: function(info) {
         info.jsEvent.preventDefault(); // don't let the browser navigate
         // Post the event details to the parent window
-        window.parent.postMessage(JSON.stringify({ handler: "event-click", data: info.event }), '*');
+        window.parent.postMessage(JSON.stringify({ event: info.event}), '*');
       },
     });
     calendar.render();
@@ -98,4 +106,126 @@ const code = `
 </script>
 `;
 
-return <iframe iframeResizer srcDoc={code} />;
+const [data, setData] = useState(null);
+const [showModal, setShowModal] = useState(false);
+
+const toggleModal = () => {
+  setShowModal((prev) => !prev);
+};
+
+const organizers =
+  (data?.extendedProps?.organizers || []).map((it) => {
+    if (it.customOption) {
+      return it.organizer;
+    }
+    return it;
+  }) ?? [];
+
+const hashtags =
+  (data?.extendedProps?.hashtags || []).map((it) => {
+    if (it.customOption) {
+      return it.hashtags;
+    }
+    return it;
+  }) ?? [];
+
+return (
+  <>
+    <iframe
+      srcDoc={code}
+      onMessage={(data) => {
+        const dataObj = JSON.parse(data);
+        setData(dataObj.event);
+        toggleModal();
+      }}
+      style={{
+        width: "100%",
+        height: "100vh",
+      }}
+    />
+    {data && (
+      <Modal open={showModal} onOpenChange={toggleModal} title={data.title}>
+        <div style={{ maxWidth: 600 }}>
+          <div className="mb-3 d-flex align-items-center justify-content-between flex-wrap">
+            <span>
+              <i className="bi bi-calendar"></i> Start Date Time:{" "}
+              {new Date(data.start).toLocaleDateString("en-us", {
+                hour: "2-digit",
+                minute: "numeric",
+              })}
+            </span>
+            <span>
+              <i className="bi bi-calendar"></i> End Date Time:{" "}
+              {new Date(data.end).toLocaleDateString("en-us", {
+                hour: "2-digit",
+                minute: "numeric",
+              })}
+            </span>
+          </div>
+          {data.extendedProps.description && (
+            <div className="mb-3">
+              <h5>DESCRIPTION</h5>
+              <p>{data.extendedProps.description}</p>
+            </div>
+          )}
+          {organizers.length > 0 && (
+            <div className="mb-3">
+              <h5>ORGANIZERS</h5>
+              {organizers.map((organizer) => {
+                const organizerProfile = Social.getr(`${organizer}/profile`);
+                return (
+                  <span className="d-flex align-items-center gap-1">
+                    <Widget
+                      src="mob.near/widget/Image"
+                      loading=""
+                      props={{
+                        image: organizerProfile.image,
+                        fallbackUrl:
+                          "https://ipfs.near.social/ipfs/bafkreibas66y6ewop5ix2n6mgybpjz6epg7opqvcplmm5jw4jlhdik5nhe",
+                        style: {
+                          width: 24,
+                          height: 24,
+                          borderRadius: 12,
+                          objectFit: "cover",
+                        },
+                      }}
+                    />
+                    {organizerProfile.name ??
+                      organizers[0] ??
+                      "No name profile"}
+                  </span>
+                );
+              })}
+            </div>
+          )}
+          {hashtags.length > 0 && (
+            <div className="mb-3">
+              <h5>HASHTAGS</h5>
+              <div className="d-flex align-items-center gap-2 flex-wrap">
+                {hashtags.map((tag) => (
+                  <Hashtag key={tag}>{tag}</Hashtag>
+                ))}
+              </div>
+            </div>
+          )}
+          {data.extendedProps.location && (
+            <span className="d-flex align-items-center gap-1 mb-3">
+              <i className="bi bi-geo-alt"></i>
+              {data?.extendedProps?.location}
+            </span>
+          )}
+        </div>
+        <div>
+          <Button
+            noLink
+            href={`${data?.url}`}
+            target="_blank"
+            variant="primary"
+          >
+            Join Now
+          </Button>
+        </div>
+      </Modal>
+    )}
+  </>
+);