Merge pull request #159 from NEARBuilders/events-fix

Events fix
NEARBuilders · Feb 15, 2024 · 86dad2b · 86dad2b
2 parents 05e5bff + 00cc4d6
commit 86dad2b
Show file tree

Hide file tree

Showing 3 changed files with 159 additions and 4 deletions.
diff --git a/apps/builddao/widget/components/Button.jsx b/apps/builddao/widget/components/Button.jsx
@@ -86,6 +86,7 @@ function Button({
   target,
   linkClassName,
   href,
+  noLink,
   style,
 }) {
   if (href) {
@@ -111,6 +112,29 @@ function Button({
     );
   }
 
+  if (href && noLink) {
+    return (
+      <a
+        href={href}
+        className={linkClassName}
+        style={{ textDecoration: "none" }}
+        target={target}
+      >
+        <StyledButton
+          id={id}
+          key={`ButtonLink-${type ?? "Normal"}-${variant ?? "Default"}-${id}`}
+          className={className}
+          variant={variant}
+          type={type}
+          style={style}
+          href={href}
+        >
+          {children}
+        </StyledButton>
+      </a>
+    );
+  }
+
   return (
     <StyledButton
       id={id}

diff --git a/apps/builddao/widget/events/ListView.jsx b/apps/builddao/widget/events/ListView.jsx
@@ -189,7 +189,8 @@ return (
                 </div>
                 <div>
                   <Button
-                    href={`https://${event?.url}`}
+                    noLink
+                    href={`${event?.url}`}
                     target="_blank"
                     variant="primary"
                   >

diff --git 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>
+    )}
+  </>
+);