Ability to delete events and more (#201)

* Add custom button link * Add custom button support * remove console log * Add some padding * Add margin around calendar * Add ability to delete events * Fix formatting * Improve Event Modal * Fix formatting * Fix typeaheaed bug in Event form * Fix typeahead background color * Fix deletion
NEARBuilders · Mar 1, 2024 · 8b73b6c · 8b73b6c
1 parent e0beac5
commit 8b73b6c
Show file tree

Hide file tree

Showing 6 changed files with 122 additions and 40 deletions.
diff --git a/apps/builddao/widget/app.jsx b/apps/builddao/widget/app.jsx
@@ -204,6 +204,11 @@ const Root = styled.div`
     src: url("https://rsms.me/inter/font-files/InterVariable-Italic.woff2?v=4.0")
       format("woff2");
   }
+
+  /* Typeahead Fix */
+  .rbt-token-removeable {
+    background: #007bff;
+  }
 `;
 
 function Router({ active, routes }) {

diff --git a/apps/builddao/widget/components/modals/event/Form.jsx b/apps/builddao/widget/components/modals/event/Form.jsx
@@ -182,7 +182,7 @@ const UUID = {
 const [title, setTitle] = useState("");
 const [description, setDescription] = useState("");
 const [link, setLink] = useState("");
-const [organizers, setOrganizers] = useState([]);
+const [organizers, setOrganizers] = useState([context.accountId]);
 const [startDate, setStartDate] = useState(getCurrentDate());
 const [endDate, setEndDate] = useState(getCurrentDate());
 const [startTime, setStartTime] = useState(getCurrentTime());

diff --git a/apps/builddao/widget/events/Calendar.jsx b/apps/builddao/widget/events/Calendar.jsx
@@ -3,7 +3,7 @@ const { Button } = VM.require("buildhub.near/widget/components") || {
 };
 
 const { fetchThings } = VM.require(
-  "buildhub.near/widget/lib.everything-sdk"
+  "buildhub.near/widget/lib.everything-sdk",
 ) || {
   fetchThings: () => {},
 };
@@ -107,6 +107,12 @@ const app = props.app ?? "every";
 const thing = props.thing ?? "event";
 const events = fetchThings(app, thing);
 
+if (!events) {
+  return <></>;
+}
+
+events = events.filter((event) => event.title);
+
 const filterEvents = () => {
   let filteredEvents = events;
 

diff --git a/apps/builddao/widget/events/ListView.jsx b/apps/builddao/widget/events/ListView.jsx
@@ -93,15 +93,17 @@ const dateKeys = Object.keys(categorizedEvents);
 
 const today = new Date();
 
-const futureEvents = dateKeys.filter((date) => {
-  return categorizedEvents[date].some((event) => {
-    const eventStartDate = new Date(event.start);
-    const eventEndDate = new Date(event.end);
-    return eventStartDate >= today || eventEndDate > today;
-  });
-});
+const futureEvents =
+  dateKeys.filter((date) => {
+    return categorizedEvents[date].some((event) => {
+      const eventStartDate = new Date(event.start);
+      const eventEndDate = new Date(event.end);
+      return eventStartDate >= today || eventEndDate > today;
+    });
+  }) || [];
 
-const pastEvents = dateKeys.filter((date) => !futureEvents.includes(date));
+const pastEvents =
+  dateKeys.filter((date) => !futureEvents.includes(date)) || [];
 
 const sortEvents = (events) => {
   return events.sort((a, b) => a.split(" ")[0] + b.split(" "[0]));
@@ -163,6 +165,23 @@ const EventGroup = ({ date }) => {
 
           const startTime = formatStartTime(event.start);
 
+          const eventAuthor = event?.key?.split("/")[0] ?? "";
+          const eventApp = event?.key?.split("/")[1] ?? "";
+          const eventType = event?.key?.split("/")[2] ?? "";
+          const eventKey = event?.key?.split("/")[3] ?? "";
+
+          const handleDelete = () => {
+            Social.set({
+              [eventApp]: {
+                [eventType]: {
+                  [eventKey]: {
+                    "": null,
+                  },
+                },
+              },
+            });
+          };
+
           return (
             <StyledEvent key={`event-${i}`}>
               <div className="d-flex align-items-center justify-content-between w-100">
@@ -237,6 +256,15 @@ const EventGroup = ({ date }) => {
                     loading=""
                   />
                 )}
+                {eventAuthor === context.accountId && (
+                  <Button
+                    onClick={handleDelete}
+                    style={{ background: "#ff2b2b" }}
+                    variant="primary"
+                  >
+                    Delete Event
+                  </Button>
+                )}
               </div>
             </StyledEvent>
           );

diff --git a/apps/builddao/widget/events/MonthView.jsx b/apps/builddao/widget/events/MonthView.jsx
@@ -1,5 +1,5 @@
 const { Modal, Hashtag, Button } = VM.require(
-  "buildhub.near/widget/components",
+  "buildhub.near/widget/components"
 ) || {
   Modal: () => <></>,
   Hashtag: () => <></>,
@@ -129,6 +129,29 @@ const hashtags =
     return it;
   }) ?? [];
 
+let eventAuthor;
+let eventApp;
+let eventType;
+let eventKey;
+if (data) {
+  eventAuthor = data?.extendedProps?.key?.split("/")[0] ?? "";
+  eventApp = data?.extendedProps?.key?.split("/")[1] ?? "";
+  eventType = data?.extendedProps?.key?.split("/")[2] ?? "";
+  eventKey = data?.extendedProps?.key?.split("/")[3] ?? "";
+}
+
+const handleDelete = () => {
+  Social.set({
+    [eventApp]: {
+      [eventType]: {
+        [eventKey]: {
+          "": null,
+        },
+      },
+    },
+  });
+};
+
 return (
   <>
     <iframe
@@ -146,16 +169,22 @@ return (
     {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">
+          <div className="mb-3 d-flex align-items-center gap-5 flex-wrap">
             <span>
-              <i className="bi bi-calendar"></i> Start Date Time:{" "}
+              <h5 style={{ fontSize: 12, fontWeight: 700, marginBottom: 8 }}>
+                START
+              </h5>
+              <i className="bi bi-calendar"></i>
               {new Date(data.start).toLocaleDateString("en-us", {
                 hour: "2-digit",
                 minute: "numeric",
               })}
             </span>
             <span>
-              <i className="bi bi-calendar"></i> End Date Time:{" "}
+              <h5 style={{ fontSize: 12, fontWeight: 700, marginBottom: 8 }}>
+                END
+              </h5>
+              <i className="bi bi-calendar"></i>
               {new Date(data.end).toLocaleDateString("en-us", {
                 hour: "2-digit",
                 minute: "numeric",
@@ -175,31 +204,33 @@ return (
               <h5 style={{ fontSize: 12, fontWeight: 700, marginBottom: 8 }}>
                 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 className="d-flex align-items-center gap-3 flex-wrap">
+                {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>
             </div>
           )}
           {hashtags.length > 0 && (
@@ -233,6 +264,15 @@ return (
           {data.extendedProps.customButtonSrc && (
             <Widget src={data.extendedProps.customButtonSrc} loading="" />
           )}
+          {eventAuthor === context.accountId && (
+            <Button
+              onClick={handleDelete}
+              style={{ background: "#ff2b2b" }}
+              variant="primary"
+            >
+              Delete Event
+            </Button>
+          )}
         </div>
       </Modal>
     )}

diff --git a/apps/builddao/widget/lib/everything-sdk.jsx b/apps/builddao/widget/lib/everything-sdk.jsx
@@ -29,7 +29,10 @@ function fetchThings(app, type) {
 
   let things = [];
   flattenedKeys.forEach((key) =>
-    things.push(JSON.parse(Social.get(key, "final"))),
+    things.push({
+      ...JSON.parse(Social.get(key, "final")),
+      key,
+    }),
   );
 
   return things;