Events (#132)

* Events monthly view and create modal * Add filter modal * wip: data fetch and create * Comments * fix: events query * Fetch events and list events * Filters * Change filter button names * Border radius * Revert "Border radius" * rename fetchEvents to fetchThings * Fix clear filter not clearing date * Rename image upload widget * Convert hashtags into component * Replace events with things in everything sdk * Add location, organizer, and link to list view * Replace test with every --------- Co-authored-by: Elliot Braem <[email protected]>
NEARBuilders · Feb 8, 2024 · 9b00e17 · 9b00e17
1 parent fb7d8a0
commit 9b00e17
Show file tree

Hide file tree

Showing 15 changed files with 1,373 additions and 33 deletions.
diff --git a/apps/builddao/widget/components.jsx b/apps/builddao/widget/components.jsx
@@ -12,6 +12,7 @@ const { TextEditor } = VM.require("buildhub.near/widget/components.TextEditor");
 const { Checkbox } = VM.require("buildhub.near/widget/components.Checkbox");
 const { Avatar } = VM.require("buildhub.near/widget/components.Avatar");
 const { Modal } = VM.require("buildhub.near/widget/components.Modal");
+const { Hashtag } = VM.require("buildhub.near/widget/components.Hashtag");
 
 function Pagination({
   totalPages,
@@ -61,6 +62,7 @@ return {
   ProgressState,
   Modal,
   Step,
+  Hashtag,
   InputField,
   UploadField,
   TextBox,

diff --git a/apps/builddao/widget/components/Button.jsx b/apps/builddao/widget/components/Button.jsx
@@ -30,6 +30,8 @@ const StyledButton = styled.button`
         return "var(--button-primary-bg, #FFAF51)";
       case "outline":
         return "var(--button-outline-bg, transparent)";
+      case "secondary":
+        return "var(--button-secondary-bg, #23242B)";
       default:
         return "var(--button-default-bg, #23242B)";
     }
@@ -41,6 +43,8 @@ const StyledButton = styled.button`
         return "var(--button-primary-color, #000)";
       case "outline":
         return "var(--button-outline-color, #fff)";
+      case "secondary":
+        return "var(--button-secondary-color, #CDD0D5)";
       default:
         return "var(--button-default-color, #CDD0D5)";
     }
@@ -79,6 +83,7 @@ function Button({
   type,
   onClick,
   className,
+  target,
   linkClassName,
   href,
   style,
@@ -89,6 +94,7 @@ function Button({
         to={href}
         className={linkClassName}
         style={{ textDecoration: "none" }}
+        target={target}
       >
         <StyledButton
           id={id}

diff --git a/apps/builddao/widget/components/Hashtag.jsx b/apps/builddao/widget/components/Hashtag.jsx
@@ -0,0 +1,33 @@
+const StyledHashtag = styled.span`
+  display: flex;
+  padding: 4px 8px;
+  justify-content: center;
+  align-items: center;
+  align-content: center;
+  gap: 4px;
+  flex-wrap: wrap;
+
+  border-radius: 2px;
+  border: 1px solid var(--Yellow, #ffaf51);
+
+  color: var(--White-100, #fff);
+
+  /* Body/10px */
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+
+  .tag {
+    color: var(--Yellow, #ffaf51);
+  }
+`;
+const Hashtag = ({ children }) => {
+  return (
+    <StyledHashtag>
+      <span className="tag">#</span> {children}
+    </StyledHashtag>
+  );
+};
+
+return { Hashtag };
diff --git a/apps/builddao/widget/components/ImageUploader.jsx b/apps/builddao/widget/components/ImageUploader.jsx
@@ -0,0 +1,158 @@
+const image = props.image;
+const onChange = props.onChange;
+
+const Tab = {
+  Upload: "Upload",
+  NFT: "NFT",
+  URL: "URL",
+};
+
+const origTab = () =>
+  image.nft.contractId || image.nft.tokenId
+    ? Tab.NFT
+    : !image.ipfs_cid && image.url
+    ? Tab.URL
+    : Tab.Upload;
+
+State.init({
+  origImage: image,
+  tab: origTab(),
+  url: image.url,
+  nft: image.nft ?? {},
+  img: { cid: image.ipfs_cid },
+});
+
+const setTab = (tab) => State.update({ tab });
+
+if (JSON.stringify(image) !== JSON.stringify(state.image)) {
+  State.update({
+    image,
+  });
+}
+
+let localImage = {};
+
+if (state.origImage.nft.contractId || state.origImage.nft.tokenId) {
+  localImage.nft = {};
+  if (state.origImage.nft.contractId) {
+    localImage.nft.contractId = null;
+  }
+  if (state.origImage.nft.tokenId) {
+    localImage.nft.tokenId = null;
+  }
+}
+if (state.origImage.ipfs_cid) {
+  localImage.ipfs_cid = null;
+}
+if (state.origImage.url) {
+  localImage.url = null;
+}
+
+if (state.tab === Tab.NFT && (state.nft.contractId || state.nft.tokenId)) {
+  localImage.nft = {
+    contractId: state.nft.contractId || "",
+    tokenId: state.nft.tokenId || "",
+  };
+} else if (state.tab === Tab.Upload && state.img.cid) {
+  localImage.ipfs_cid = state.img.cid;
+}
+if (state.tab === Tab.URL && state.url) {
+  localImage.url = state.url;
+}
+
+if (onChange && JSON.stringify(image) !== JSON.stringify(localImage)) {
+  onChange(localImage);
+}
+
+const debounce = (func, wait) => {
+  const pause = wait || 350;
+  let timeout;
+
+  return (args) => {
+    const later = () => {
+      clearTimeout(timeout);
+      func(args);
+    };
+
+    clearTimeout(timeout);
+    timeout = setTimeout(later, pause);
+  };
+};
+
+const onNFTChange = debounce((e) => {
+  State.update({
+    nft: {
+      ...state.nft,
+      [e.target.id]: e.target.value,
+    },
+  });
+});
+const onImageChange = debounce((e) => {
+  State.update({
+    [e.target.id]: e.target.value,
+  });
+});
+
+return (
+  <div>
+    <ul className={`nav nav-tabs`}>
+      <li className="nav-item">
+        <button
+          className={`nav-link ${state.tab === Tab.Upload ? "active" : ""}`}
+          aria-current="page"
+          onClick={() => setTab(Tab.Upload)}
+        >
+          Upload
+        </button>
+      </li>
+      <li className="nav-item">
+        <button
+          className={`nav-link ${state.tab === Tab.NFT ? "active" : ""}`}
+          aria-current="page"
+          onClick={() => setTab(Tab.NFT)}
+        >
+          NFT
+        </button>
+      </li>
+      <li className="nav-item">
+        <button
+          className={`nav-link ${state.tab === Tab.URL ? "active" : ""}`}
+          aria-current="page"
+          onClick={() => setTab(Tab.URL)}
+        >
+          URL
+        </button>
+      </li>
+    </ul>
+    <div className="p-2">
+      <div className={`${state.tab === Tab.Upload ? "" : "visually-hidden"}`}>
+        <IpfsImageUpload image={state.img} />
+      </div>
+      <div className={`${state.tab === Tab.NFT ? "" : "visually-hidden"}`}>
+        NFT contract
+        <input
+          type="text"
+          id="contractId"
+          defaultValue={state.nft.contractId}
+          onChange={onNFTChange}
+        />
+        NFT token id
+        <input
+          type="text"
+          id="tokenId"
+          defaultValue={state.nft.tokenId}
+          onChange={onNFTChange}
+        />
+      </div>
+      <div className={`${state.tab === Tab.URL ? "" : "visually-hidden"}`}>
+        Image URL
+        <input
+          type="text"
+          id="url"
+          defaultValue={state.url}
+          onChange={onImageChange}
+        />
+      </div>
+    </div>
+  </div>
+);
diff --git a/apps/builddao/widget/components/Modal.jsx b/apps/builddao/widget/components/Modal.jsx
@@ -41,6 +41,7 @@ const NoButton = styled.button`
   padding: 0;
   margin: 0;
   box-shadow: none;
+  display: none;
 `;
 
 const CloseContainer = styled.div`

diff --git a/apps/builddao/widget/components/modals/CreateEvent.jsx b/apps/builddao/widget/components/modals/CreateEvent.jsx
@@ -0,0 +1,26 @@
+const { Modal } = VM.require("buildhub.near/widget/components") || {
+  Modal: () => <></>,
+};
+
+const showModal = props.showModal;
+const toggleModal = props.toggleModal;
+const toggle = props.toggle;
+const bootstrapTheme = props.bootstrapTheme || "dark";
+
+return (
+  <Modal
+    open={showModal}
+    title={"Create Event"}
+    onOpenChange={toggleModal}
+    toggle={toggle}
+  >
+    <Widget
+      src="buildhub.near/widget/components.modals.event.Form"
+      loading=""
+      props={{
+        bootstrapTheme,
+        toggleModal,
+      }}
+    />
+  </Modal>
+);
diff --git a/apps/builddao/widget/components/modals/FilterEvents.jsx b/apps/builddao/widget/components/modals/FilterEvents.jsx
@@ -0,0 +1,30 @@
+const { Modal } = VM.require("buildhub.near/widget/components") || {
+  Modal: () => <></>,
+};
+
+const showModal = props.showModal;
+const toggleModal = props.toggleModal;
+const toggle = props.toggle;
+const bootstrapTheme = props.bootstrapTheme || "dark";
+const filters = props.filters;
+const setFilters = props.setFilters;
+
+return (
+  <Modal
+    open={showModal}
+    title={"Filter Events"}
+    onOpenChange={toggleModal}
+    toggle={toggle}
+  >
+    <Widget
+      src="buildhub.near/widget/components.modals.event.Filters"
+      loading=""
+      props={{
+        bootstrapTheme,
+        toggleModal,
+        filters,
+        setFilters,
+      }}
+    />
+  </Modal>
+);