feat: replace native confirm (#612)

* feat: replace native confirm * chore: cleanup
tapexyz · Feb 13, 2023 · c33730d · c33730d · vercel · Feb 13, 2023
1 parent 1d967a9
commit c33730d
Show file tree

Hide file tree

Showing 8 changed files with 158 additions and 120 deletions.
diff --git a/apps/web/src/components/Bytes/CommentModal.tsx b/apps/web/src/components/Bytes/CommentModal.tsx
@@ -31,7 +31,6 @@ const CommentModal: FC<Props> = ({ trigger, video }) => {
         }
         panelClassName="max-w-lg lg:ml-9"
         show={show}
-        autoClose
         onClose={() => setShow(false)}
       >
         <div className="no-scrollbar max-h-[40vh] overflow-y-auto pt-3">

diff --git a/apps/web/src/components/Common/Header.tsx b/apps/web/src/components/Common/Header.tsx
@@ -146,7 +146,6 @@ const Header: FC<Props> = ({ className }) => {
         </div>
         {showFilter && <CategoryFilters />}
       </div>
-
       <Modal
         title="Search"
         onClose={() => setSearchModal(false)}

diff --git a/apps/web/src/components/Common/VideoCard/VideoOptions.tsx b/apps/web/src/components/Common/VideoCard/VideoOptions.tsx
@@ -1,4 +1,5 @@
 import { LENS_PERIPHERY_ABI } from '@abis/LensPeriphery'
+import Confirm from '@components/UIElements/Confirm'
 import DropMenu, { NextLink } from '@components/UIElements/DropMenu'
 import { Menu } from '@headlessui/react'
 import useAppStore from '@lib/store'
@@ -17,7 +18,7 @@ import {
   useHidePublicationMutation
 } from 'lens'
 import type { FC } from 'react'
-import React from 'react'
+import React, { useState } from 'react'
 import toast from 'react-hot-toast'
 import type { CustomErrorWithData } from 'utils'
 import {
@@ -56,6 +57,7 @@ const VideoOptions: FC<Props> = ({
   setShowReport,
   showOnHover = true
 }) => {
+  const [showConfirm, setShowConfirm] = useState(false)
   const selectedChannel = useAppStore((state) => state.selectedChannel)
   const selectedChannelId = usePersistStore((state) => state.selectedChannelId)
   const isVideoOwner = selectedChannel?.id === video?.profile?.id
@@ -77,13 +79,7 @@ const VideoOptions: FC<Props> = ({
   })
 
   const onHideVideo = () => {
-    if (
-      confirm(
-        'This will hide your video from lens, are you sure want to continue?\n\nNote: This cannot be reverted.'
-      )
-    ) {
-      hideVideo({ variables: { request: { publicationId: video?.id } } })
-    }
+    hideVideo({ variables: { request: { publicationId: video?.id } } })
   }
 
   const onClickReport = () => {
@@ -225,73 +221,80 @@ const VideoOptions: FC<Props> = ({
   }
 
   return (
-    <DropMenu
-      trigger={
-        <div
-          onClick={() => Analytics.track(TRACK.CLICK_VIDEO_OPTIONS)}
-          className={clsx(
-            'py-1 text-white group-hover:visible md:text-inherit',
-            showOnHover && 'lg:invisible'
-          )}
-          role="button"
-        >
-          <ThreeDotsOutline className="h-3.5 w-3.5" />
-        </div>
-      }
-    >
-      <div className="bg-secondary mt-0.5 w-36 overflow-hidden rounded-xl border border-gray-200 p-1 shadow dark:border-gray-800">
-        <div className="flex flex-col rounded-lg text-sm transition duration-150 ease-in-out">
-          {isVideoOwner && (
-            <>
-              {pinnedVideoId !== video.id && (
+    <>
+      <Confirm
+        showConfirm={showConfirm}
+        setShowConfirm={setShowConfirm}
+        action={onHideVideo}
+      />
+      <DropMenu
+        trigger={
+          <div
+            onClick={() => Analytics.track(TRACK.CLICK_VIDEO_OPTIONS)}
+            className={clsx(
+              'py-1 text-white group-hover:visible md:text-inherit',
+              showOnHover && 'lg:invisible'
+            )}
+            role="button"
+          >
+            <ThreeDotsOutline className="h-3.5 w-3.5" />
+          </div>
+        }
+      >
+        <div className="bg-secondary mt-0.5 w-36 overflow-hidden rounded-xl border border-gray-200 p-1 shadow dark:border-gray-800">
+          <div className="flex flex-col rounded-lg text-sm transition duration-150 ease-in-out">
+            {isVideoOwner && (
+              <>
+                {pinnedVideoId !== video.id && (
+                  <Menu.Item
+                    as="button"
+                    className="flex items-center space-x-2 rounded-lg px-3 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-800"
+                    onClick={() => onPinVideo()}
+                  >
+                    <PinOutline className="h-3.5 w-3.5" />
+                    <span className="whitespace-nowrap">Pin Video</span>
+                  </Menu.Item>
+                )}
+                <Menu.Item
+                  as={NextLink}
+                  href={getPublicationMediaUrl(video)}
+                  target="_blank"
+                >
+                  <div className="flex items-center space-x-2 rounded-lg px-3 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-800">
+                    <ExternalOutline className="h-3 w-3" />
+                    <span className="whitespace-nowrap">Raw Video</span>
+                  </div>
+                </Menu.Item>
                 <Menu.Item
                   as="button"
-                  className="flex items-center space-x-2 rounded-lg px-3 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-800"
-                  onClick={() => onPinVideo()}
+                  className="inline-flex items-center space-x-2 rounded-lg px-3 py-1.5 text-red-500 opacity-100 hover:bg-red-100 dark:hover:bg-red-900"
+                  onClick={() => setShowConfirm(true)}
                 >
-                  <PinOutline className="h-3.5 w-3.5" />
-                  <span className="whitespace-nowrap">Pin Video</span>
+                  <TrashOutline className="h-3.5 w-3.5" />
+                  <span className="whitespace-nowrap">Delete</span>
                 </Menu.Item>
-              )}
-              <Menu.Item
-                as={NextLink}
-                href={getPublicationMediaUrl(video)}
-                target="_blank"
-              >
-                <div className="flex items-center space-x-2 rounded-lg px-3 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-800">
-                  <ExternalOutline className="h-3 w-3" />
-                  <span className="whitespace-nowrap">Raw Video</span>
-                </div>
-              </Menu.Item>
-              <Menu.Item
-                as="button"
-                className="inline-flex items-center space-x-2 rounded-lg px-3 py-1.5 text-red-500 opacity-100 hover:bg-red-100 dark:hover:bg-red-900"
-                onClick={() => onHideVideo()}
-              >
-                <TrashOutline className="h-3.5 w-3.5" />
-                <span className="whitespace-nowrap">Delete</span>
-              </Menu.Item>
-            </>
-          )}
-          <button
-            type="button"
-            onClick={() => setShowShare(true)}
-            className="inline-flex items-center space-x-2 rounded-lg px-3 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-800"
-          >
-            <ShareOutline className="h-3.5 w-3.5" />
-            <span className="whitespace-nowrap">Share</span>
-          </button>
-          <button
-            type="button"
-            onClick={() => onClickReport()}
-            className="hhover:opacity-100 inline-flex items-center space-x-2 rounded-lg px-3 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-800"
-          >
-            <FlagOutline className="h-3.5 w-3.5" />
-            <span className="whitespace-nowrap">Report</span>
-          </button>
+              </>
+            )}
+            <button
+              type="button"
+              onClick={() => setShowShare(true)}
+              className="inline-flex items-center space-x-2 rounded-lg px-3 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-800"
+            >
+              <ShareOutline className="h-3.5 w-3.5" />
+              <span className="whitespace-nowrap">Share</span>
+            </button>
+            <button
+              type="button"
+              onClick={() => onClickReport()}
+              className="hhover:opacity-100 inline-flex items-center space-x-2 rounded-lg px-3 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-800"
+            >
+              <FlagOutline className="h-3.5 w-3.5" />
+              <span className="whitespace-nowrap">Report</span>
+            </button>
+          </div>
         </div>
-      </div>
-    </DropMenu>
+      </DropMenu>
+    </>
   )
 }
 

diff --git a/apps/web/src/components/UIElements/Confirm.tsx b/apps/web/src/components/UIElements/Confirm.tsx
@@ -0,0 +1,37 @@
+import type { Dispatch, FC } from 'react'
+import React from 'react'
+
+import { Button } from './Button'
+import Modal from './Modal'
+
+type Props = {
+  showConfirm: boolean
+  setShowConfirm: Dispatch<boolean>
+  action: () => void
+}
+
+const Confirm: FC<Props> = ({ showConfirm, setShowConfirm, action }) => {
+  return (
+    <Modal
+      title="Confirmation"
+      panelClassName="max-w-lg"
+      show={showConfirm}
+      onClose={() => setShowConfirm(false)}
+    >
+      <div className="pt-4">
+        <h5 className="pb-3">Are you sure want to continue?</h5>
+        <span className="text-red-500 opacity-75">
+          This cannot be reverted.
+        </span>
+        <div className="flex justify-end space-x-2 pt-2">
+          <Button variant="hover" onClick={() => setShowConfirm(false)}>
+            Cancel
+          </Button>
+          <Button onClick={action}>Confirm</Button>
+        </div>
+      </div>
+    </Modal>
+  )
+}
+
+export default Confirm
diff --git a/apps/web/src/components/UIElements/Modal.tsx b/apps/web/src/components/UIElements/Modal.tsx
@@ -10,24 +10,18 @@ type Props = {
   onClose?: () => void
   children: React.ReactNode
   panelClassName?: string
-  autoClose?: boolean
 }
 
 const Modal: FC<Props> = ({
   show,
   onClose,
   children,
   title,
-  panelClassName,
-  autoClose = true
+  panelClassName
 }) => {
   return (
     <Transition appear show={show} as={Fragment}>
-      <Dialog
-        as="div"
-        className="relative z-20"
-        onClose={() => (onClose && !autoClose ? onClose?.() : null)}
-      >
+      <Dialog as="div" className="relative z-20" onClose={() => onClose?.()}>
         <Transition.Child
           as={Fragment}
           enter="ease-out duration-300"

diff --git a/apps/web/src/components/Watch/CommentOptions.tsx b/apps/web/src/components/Watch/CommentOptions.tsx
@@ -1,11 +1,12 @@
 import FlagOutline from '@components/Common/Icons/FlagOutline'
 import ThreeDotsOutline from '@components/Common/Icons/ThreeDotsOutline'
+import Confirm from '@components/UIElements/Confirm'
 import DropMenu from '@components/UIElements/DropMenu'
 import useAppStore from '@lib/store'
 import type { Publication } from 'lens'
 import { useHidePublicationMutation } from 'lens'
 import type { Dispatch, FC } from 'react'
-import React from 'react'
+import React, { useState } from 'react'
 import toast from 'react-hot-toast'
 import { AiOutlineDelete } from 'react-icons/ai'
 import { Analytics, TRACK } from 'utils'
@@ -16,6 +17,7 @@ type Props = {
 }
 
 const CommentOptions: FC<Props> = ({ comment, setShowReport }) => {
+  const [showConfirm, setShowConfirm] = useState(false)
   const selectedChannel = useAppStore((state) => state.selectedChannel)
 
   const [hideComment] = useHidePublicationMutation({
@@ -34,46 +36,47 @@ const CommentOptions: FC<Props> = ({ comment, setShowReport }) => {
   })
 
   const onHideComment = () => {
-    if (
-      confirm(
-        'This will hide your comment from lens, are you sure want to continue?\n\nNote: This cannot be reverted.'
-      )
-    ) {
-      hideComment({ variables: { request: { publicationId: comment?.id } } })
-    }
+    hideComment({ variables: { request: { publicationId: comment?.id } } })
   }
 
   return (
-    <DropMenu
-      trigger={
-        <div className="p-1">
-          <ThreeDotsOutline className="h-3.5 w-3.5" />
-        </div>
-      }
-    >
-      <div className="bg-secondary mt-0.5 w-36 overflow-hidden rounded-lg border border-gray-200 p-1 shadow dark:border-gray-800">
-        <div className="flex flex-col rounded-lg text-sm transition duration-150 ease-in-out">
-          {selectedChannel?.id === comment?.profile?.id && (
+    <>
+      <Confirm
+        showConfirm={showConfirm}
+        setShowConfirm={setShowConfirm}
+        action={onHideComment}
+      />
+      <DropMenu
+        trigger={
+          <div className="p-1">
+            <ThreeDotsOutline className="h-3.5 w-3.5" />
+          </div>
+        }
+      >
+        <div className="bg-secondary mt-0.5 w-36 overflow-hidden rounded-xl border border-gray-200 p-1 shadow dark:border-gray-800">
+          <div className="flex flex-col rounded-lg text-sm transition duration-150 ease-in-out">
+            {selectedChannel?.id === comment?.profile?.id && (
+              <button
+                type="button"
+                onClick={() => setShowConfirm(true)}
+                className="inline-flex items-center space-x-2 rounded-lg px-3 py-1.5 text-red-500 hover:bg-red-100 dark:hover:bg-red-900"
+              >
+                <AiOutlineDelete className="text-base" />
+                <span className="whitespace-nowrap">Delete</span>
+              </button>
+            )}
             <button
               type="button"
-              onClick={() => onHideComment()}
-              className="inline-flex items-center space-x-2 rounded-lg px-3 py-1.5 text-red-500 hover:bg-red-100 dark:hover:bg-red-900"
+              onClick={() => setShowReport(true)}
+              className="inline-flex items-center space-x-2 rounded-lg px-3 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-800"
             >
-              <AiOutlineDelete className="text-base" />
-              <span className="whitespace-nowrap">Delete</span>
+              <FlagOutline className="h-3.5 w-3.5" />
+              <span className="whitespace-nowrap">Report</span>
             </button>
-          )}
-          <button
-            type="button"
-            onClick={() => setShowReport(true)}
-            className="inline-flex items-center space-x-2 rounded-lg px-3 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-800"
-          >
-            <FlagOutline className="h-3.5 w-3.5" />
-            <span className="whitespace-nowrap">Report</span>
-          </button>
+          </div>
         </div>
-      </div>
-    </DropMenu>
+      </DropMenu>
+    </>
   )
 }
 

diff --git a/apps/web/src/components/Watch/SuggestedVideoCard.tsx b/apps/web/src/components/Watch/SuggestedVideoCard.tsx
@@ -110,8 +110,8 @@ const SuggestedVideoCard: FC<Props> = ({ video }) => {
         </div>
       </div>
       <VideoOptions
-        setShowReport={setShowReport}
         video={video}
+        setShowReport={setShowReport}
         setShowShare={setShowShare}
       />
     </div>

diff --git a/apps/web/src/components/Watch/VideoComments.tsx b/apps/web/src/components/Watch/VideoComments.tsx
@@ -119,12 +119,15 @@ const VideoComments: FC<Props> = ({ video, hideTitle = false }) => {
                   />
                 )
             )}
-            {comments?.map((comment: Publication) => (
-              <Comment
-                key={`${comment?.id}_${comment.createdAt}`}
-                comment={comment}
-              />
-            ))}
+            {comments?.map(
+              (comment: Publication) =>
+                !comment.hidden && (
+                  <Comment
+                    key={`${comment?.id}_${comment.createdAt}`}
+                    comment={comment}
+                  />
+                )
+            )}
           </div>
           {pageInfo?.next && (
             <span ref={observe} className="flex justify-center p-10">