feat: improvements and fixes (#17)

## Description Improvements - Added the possibility to delete an event (Draft events or events not Live) - Improved Buttons, now using `primereact` - Removed some useless caching Other changes - Bumped `next` to v13.5 - Removed unused packages - Bumped `desmjs` - Bumpex `axios`  --- ### Author Checklist *All items are required. Please add a note to the item if the item is not applicable and please add links to any relevant follow up issues.* I have... - [x] included the correct [type prefix](https://github.com/commitizen/conventional-commit-types/blob/v3.0.0/index.json) in the PR title - [ ] targeted the correct branch - [ ] provided a link to the relevant issue or specification - [ ] reviewed "Files changed" and left comments if necessary - [ ] confirmed all CI checks have passed ### Reviewers Checklist *All items are required. Please add a note if the item is not applicable and please add your handle next to the items reviewed if you only reviewed selected items.* I have... - [ ] confirmed the correct [type prefix](https://github.com/commitizen/conventional-commit-types/blob/v3.0.0/index.json) in the PR title - [ ] confirmed all author checklist items have been addressed
desmos-labs · Oct 6, 2023 · 9094a14 · 9094a14
1 parent 11b2b97
commit 9094a14
Show file tree

Hide file tree

Showing 15 changed files with 534 additions and 584 deletions.
diff --git a/app/components/BondscapeButton.tsx b/app/components/BondscapeButton.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { ClipLoader } from "react-spinners";
+import { Button } from "primereact/button";
 
 interface Props {
   readonly text: string;
@@ -21,21 +21,21 @@ const BondscapeButton = ({
   textClassName,
 }: Props) => {
   return (
-    <button
+    <Button
       type={type}
       disabled={disabled}
       onClick={onClick}
+      loading={loading}
       className={`${className} ${
         disabled && "opacity-[0.5]"
-      } self-center bg-bondscape-primary justify-center items-center gap-2 inline-flex transition ease-in-out cursor-pointer`}
+      } h-12 self-center bg-bondscape-primary justify-center items-center gap-2 inline-flex transition ease-in-out cursor-pointer`}
     >
-      <ClipLoader size={20} color={"white"} loading={loading} />
       <div
         className={`${textClassName} text-center text-white font-semibold leading-normal`}
       >
         {text}
       </div>
-    </button>
+    </Button>
   );
 };
 

diff --git a/app/components/EventComponent.tsx b/app/components/EventComponent.tsx
@@ -1,9 +1,13 @@
 "use client";
-import React, { useMemo } from "react";
+import React, { useMemo, useRef } from "react";
 import { Event } from "@/types/event";
 import Image from "next/image";
 import useFormatDateToTZ from "@/hooks/timeformat/useFormatDateToTZ";
 import Link from "next/link";
+import { Button } from "primereact/button";
+import { OverlayPanel } from "primereact/overlaypanel";
+import { classNames } from "primereact/utils";
+import { useSetDeleteEventModal } from "@/jotai/deleteEventModal";
 
 interface Props {
   event: Event;
@@ -13,7 +17,8 @@ interface Props {
 
 const EventComponent = ({ event, isLive, lastItemRef }: Props) => {
   const { getEventPeriod } = useFormatDateToTZ();
-
+  const setDeleteEventModalOpen = useSetDeleteEventModal();
+  const opRef = useRef<OverlayPanel>(null);
   const CoverPictureComponent = useMemo(() => {
     return (
       <Image
@@ -49,16 +54,100 @@ const EventComponent = ({ event, isLive, lastItemRef }: Props) => {
           </div>
         </div>
         <div>
-          {isLive && (
+          {isLive ? (
             <div className="flex flex-row items-center gap-1">
               <div className="w-[10px] h-[10px] rounded-[5px] bg-feedback-success" />
               <div className="text-[14px] font-semibold text-feedback-success">
                 LIVE
               </div>
             </div>
+          ) : (
+            <Button
+              onClick={(e) => {
+                e.preventDefault();
+                opRef.current && opRef.current.toggle(e);
+              }}
+              text
+              pt={{
+                root: {
+                  className: "p-0",
+                },
+              }}
+            >
+              <svg
+                width="24"
+                height="25"
+                viewBox="0 0 24 25"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <g id="More-vertical">
+                  <path
+                    id="Union"
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M13.75 5.5C13.75 4.5335 12.9665 3.75 12 3.75C11.0335 3.75 10.25 4.5335 10.25 5.5C10.25 6.4665 11.0335 7.25 12 7.25C12.9665 7.25 13.75 6.4665 13.75 5.5ZM13.75 12.5C13.75 11.5335 12.9665 10.75 12 10.75C11.0335 10.75 10.25 11.5335 10.25 12.5C10.25 13.4665 11.0335 14.25 12 14.25C12.9665 14.25 13.75 13.4665 13.75 12.5ZM13.75 19.5C13.75 18.5335 12.9665 17.75 12 17.75C11.0335 17.75 10.25 18.5335 10.25 19.5C10.25 20.4665 11.0335 21.25 12 21.25C12.9665 21.25 13.75 20.4665 13.75 19.5Z"
+                    fill="#F6F6F7"
+                  />
+                </g>
+              </svg>
+            </Button>
           )}
         </div>
       </div>
+      <OverlayPanel
+        ref={opRef}
+        className={
+          "bg-bondscape-text_neutral_100 before:border-none after:border-none"
+        }
+        pt={{
+          root: {
+            className: classNames("bg-bondscape-text_neutral_100"),
+          },
+          content: {
+            className: "p-1",
+          },
+        }}
+      >
+        <div>
+          <Link
+            onClick={() => opRef.current && opRef.current.hide()}
+            href={`/creator/create/${event.id}`}
+            className="flex flex-row py-[12px] px-[16px] gap-2 border-b-[1px] border-solid border-[#4B4A58]"
+          >
+            <Image
+              alt={"My events icon"}
+              src={"/editEventIcon.png"}
+              width={24}
+              height={24}
+            />
+            <div className="text-bondscape-text_neutral_900 hover:text-bondscape-text_neutral_700 transition ease-in-out text-[16px] font-normal leading-normal">
+              Edit Event
+            </div>
+          </Link>
+          <button
+            className="flex flex-row py-[12px] px-[16px] gap-2"
+            onClick={(e) => {
+              e.preventDefault();
+              opRef.current && opRef.current.hide();
+              setDeleteEventModalOpen({
+                visible: true,
+                eventId: event.id,
+              });
+            }}
+          >
+            <Image
+              alt={"My events icon"}
+              src={"/trashIcon.png"}
+              width={24}
+              height={24}
+            />
+            <div className="text-bondscape-text_neutral_900 hover:text-bondscape-text_neutral_700 transition ease-in-out text-[16px] font-normal leading-normal">
+              Delete Event
+            </div>
+          </button>
+        </div>
+      </OverlayPanel>
     </Link>
   );
 };

diff --git a/app/components/NavigationBar.tsx b/app/components/NavigationBar.tsx
@@ -3,14 +3,16 @@ import React, { useCallback, useEffect, useMemo, useState } from "react";
 import Link from "next/link";
 import BondscapeLogo from "./BondscapeLogo";
 import useBreakpoints from "../hooks/layout/useBreakpoints";
-import { usePathname, useRouter } from "next/navigation";
+import { usePathname } from "next/navigation";
 import useUser from "@/hooks/user/useUser";
 import SelectComponent from "@/components/SelectComponent";
 import { AnimatePresence, motion } from "framer-motion";
 import EventsHeader from "@/components/EventsHeader";
 import Tabs from "@/components/Tabs";
 import { useActiveTab, useSetActiveTab } from "@/jotai/activeTab";
 import CreateEventHeader from "@/components/CreateEventHeader";
+import { useAtomValue } from "jotai";
+import { loginVisibilityState } from "@/jotai/loginVisibility";
 
 interface Props {
   readonly disableNavbarBgInDesktop?: boolean;
@@ -29,12 +31,12 @@ const NavigationBar = ({
 }: Props) => {
   const activeTab = useActiveTab();
   const setActiveTab = useSetActiveTab();
+  const isLoginButtonVisible = useAtomValue(loginVisibilityState);
   const [navbarBgVisible, setNavbarBgVisible] = useState(false);
   // Hooks
   const [isMobile, isMd, isLg, isXl, isDesktop, isBreakpointReady] =
     useBreakpoints();
   const pathname = usePathname();
-  const router = useRouter();
   const { user } = useUser();
   const handleScroll = useCallback(() => {
     if (window.scrollY >= 60 && (isMobile || isMd)) {
@@ -66,7 +68,11 @@ const NavigationBar = ({
     ) {
       return;
     }
-    if (!user || !isDesktop || process.env.NODE_ENV === "production") {
+    if (
+      !user ||
+      !isDesktop ||
+      (process.env.NODE_ENV === "production" && !isLoginButtonVisible)
+    ) {
       return;
     }
     return user.profile ? (
@@ -78,7 +84,7 @@ const NavigationBar = ({
         </div>
       </Link>
     );
-  }, [isDesktop, pathname, user]);
+  }, [isDesktop, isLoginButtonVisible, pathname, user]);
 
   return (
     <nav

diff --git a/app/creator/events/[id]/page.tsx b/app/creator/events/[id]/page.tsx
@@ -86,8 +86,8 @@ export default function EventDetails({ params }: { params: any }) {
             </div>
             {selectedEvent && (
               <BondscapeButton
-                textClassName={"text-sm"}
-                className={"w-[165px] px-[20px] py-[10px] rounded-[10px] z-4"}
+                textClassName="text-sm"
+                className="w-[165px] px-[20px] py-[10px] rounded-[10px] z-4 h-10"
                 loading={false}
                 text={"Show QR Code"}
                 onClick={() => setQrCodeVisible(true)}
@@ -186,7 +186,13 @@ export default function EventDetails({ params }: { params: any }) {
                   </div>
                 </div>
               </div>
-              <button className="flex basis-1/2 flex-row gap-2 items-center">
+              <button
+                className="flex basis-1/2 flex-row gap-2 items-center"
+                onClick={() =>
+                  googlePlace?.url &&
+                  window.open(googlePlace.url, "_blank", "noreferrer")
+                }
+              >
                 <div>
                   <Image
                     width={40}

diff --git a/app/creator/events/page.tsx b/app/creator/events/page.tsx
@@ -7,11 +7,27 @@ import EventsTabs from "@/creator/events/EventsTabs";
 import { PuffLoader } from "react-spinners";
 import useHooks from "@/creator/events/useHooks";
 import { useActiveTab } from "@/jotai/activeTab";
+import { Dialog } from "primereact/dialog";
+import { Button } from "primereact/button";
+import {
+  useDeleteEventModal,
+  useSetDeleteEventModal,
+} from "@/jotai/deleteEventModal";
+import { classNames } from "primereact/utils";
 
 export default function Events() {
   const activeTab = useActiveTab();
+  const deleteEventModal = useDeleteEventModal();
+  const setDeleteEventModal = useSetDeleteEventModal();
   const [isMobile, isMd] = useBreakpoints();
-  const { data, isActuallyLoading, fetchingMore, lastElementRef } = useHooks();
+  const {
+    data,
+    isActuallyLoading,
+    fetchingMore,
+    lastElementRef,
+    deleteEvent,
+    deletingEvent,
+  } = useHooks();
 
   if (isMobile || isMd) {
     return (
@@ -44,6 +60,53 @@ export default function Events() {
           )}
         </div>
       </div>
+      <Dialog
+        closable={false}
+        header={"Delete Event"}
+        visible={deleteEventModal.visible}
+        onHide={() =>
+          setDeleteEventModal({
+            visible: false,
+            eventId: "",
+          })
+        }
+        pt={{
+          header: {
+            className: classNames("text-center"),
+          },
+        }}
+      >
+        <div className="text-base text-center text-bondscape-text_neutral_900 mb-10">
+          Are you sure you want to delete this event?
+        </div>
+        <div className="flex flex-1 flex-row justify-center gap-6">
+          <Button
+            outlined
+            disabled={deletingEvent}
+            label={"No"}
+            className="h-11 w-52"
+            onClick={() =>
+              setDeleteEventModal({
+                visible: false,
+                eventId: "",
+              })
+            }
+          />
+          <Button
+            label={"Yes, Delete"}
+            className="h-11 w-52"
+            disabled={deletingEvent}
+            loading={deletingEvent}
+            onClick={async () => {
+              await deleteEvent(deleteEventModal.eventId);
+              setDeleteEventModal({
+                visible: false,
+                eventId: "",
+              });
+            }}
+          />
+        </div>
+      </Dialog>
     </MainLayout>
   );
 }
diff --git a/app/creator/events/useHooks.ts b/app/creator/events/useHooks.ts
@@ -1,5 +1,5 @@
 import { GQLEventsResult } from "@/types/event";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import useUser from "@/hooks/user/useUser";
 import GetMyPastEvents from "@/services/graphql/queries/bondscape/GetMyPastEvents";
 import GetMyDraftEvents from "@/services/graphql/queries/bondscape/GetMyDraftEvents";
@@ -8,14 +8,15 @@ import { useInView } from "react-intersection-observer";
 import { useActiveTab } from "@/jotai/activeTab";
 import GetMyLiveEvents from "@/services/graphql/queries/bondscape/GetMyLiveEvents";
 import { useQuery } from "@apollo/client";
-import { useSetEvents } from "@/jotai/liveEvents";
+import DeleteEvent from "@/services/axios/requests/DeleteEvent";
+import { toast } from "react-toastify";
 
 const EVENTS_QUERY_LIMIT = 20;
 
 export const useHooks = () => {
   const [loadingEvents, setLoadingEvents] = useState(false);
+  const [deletingEvent, setDeletingEvent] = useState(false);
   const activeTab = useActiveTab();
-  const setLiveEvents = useSetEvents();
   const [fetchingMore, setFetchingMore] = useState(false);
   const now = useRef(new Date());
   const { ref: lastElementRef, inView: lastElementInView } = useInView();
@@ -44,18 +45,12 @@ export const useHooks = () => {
     };
   }, [user]);
 
-  const { data, loading, fetchMore, networkStatus, client } =
+  const { data, loading, refetch, fetchMore, networkStatus, client } =
     useQuery<GQLEventsResult>(currentQuery, {
       variables: queryVariables,
       fetchPolicy: "cache-and-network",
     });
 
-  useEffect(() => {
-    if (data) {
-      setLiveEvents(data.events);
-    }
-  }, [data, setLiveEvents]);
-
   useEffect(() => {
     if (loading) {
       setLoadingEvents(true);
@@ -77,6 +72,21 @@ export const useHooks = () => {
     );
   }, [client, currentQuery, loadingEvents, queryVariables]);
 
+  const deleteEvent = useCallback(
+    async (eventId: string) => {
+      setDeletingEvent(true);
+      const deleteResult = await DeleteEvent({ eventId });
+      setDeletingEvent(false);
+      if (deleteResult.isErr()) {
+        toast.error(deleteResult.error.message);
+      } else {
+        toast.success("Event deleted");
+        await refetch();
+      }
+    },
+    [refetch],
+  );
+
   useEffect(() => {
     if (!data) return;
     if (lastElementInView && data.events.length === EVENTS_QUERY_LIMIT) {
@@ -105,6 +115,8 @@ export const useHooks = () => {
     networkStatus,
     fetchingMore,
     lastElementRef,
+    deleteEvent,
+    deletingEvent,
   };
 };