Merge pull request #170 from ecency/bugfix/168-cannot-delete-an-image…

…-in-deck-waves-form

Fixed deleting image in wave form

src/app/decks/_components/deck-threads-form/deck-threads-form-control.tsx

@@ -9,11 +9,11 @@ import Image from "next/image";
 interface Props {
   text: string;
   setText: (v: string) => void;
-  video: string | null;
-  selectedImage: string | null;
-  setSelectedImage: (url: string | null) => void;
+  video: string | undefined;
+  selectedImage: string | undefined;
+  onClearImage: () => void;
   onAddImage: (url: string, name: string) => void;
-  onAddVideo: (value: string | null) => void;
+  onAddVideo: (value: string | undefined) => void;
   placeholder?: string;
   onTextareaFocus: () => void;
 }
@@ -23,7 +23,7 @@ export const DeckThreadsFormControl = ({
   setText,
   onAddImage,
   selectedImage,
-  setSelectedImage,
+  onClearImage,
   placeholder,
   onTextareaFocus,
   onAddVideo,
@@ -45,16 +45,16 @@ export const DeckThreadsFormControl = ({
           <div className="length-prompt">{text.length}/255</div>
         </div>
         {selectedImage && (
-          <div className="deck-threads-form-selected-image border mb-3">
+          <div className="deck-threads-form-selected-image border border-[--border-color] my-3">
             <div className="type">image</div>
             <Image width={1000} height={1000} src={selectedImage} alt="" />
-            <div className="remove" onClick={() => setSelectedImage(null)}>
+            <div className="remove" onClick={() => onClearImage()}>
               {closeSvg}
             </div>
           </div>
         )}
         {video && (
-          <div className="deck-threads-form-selected-image border mb-3">
+          <div className="deck-threads-form-selected-image border border-[--border-color] my-3">
             <div className="type">video</div>
             <Image
               width={1000}
@@ -66,7 +66,7 @@ export const DeckThreadsFormControl = ({
                 .replace(")", "")}
               alt=""
             />
-            <div className="remove" onClick={() => onAddVideo(null)}>
+            <div className="remove" onClick={() => onAddVideo(undefined)}>
               {closeSvg}
             </div>
           </div>

src/app/decks/_components/deck-threads-form/deck-threads-form-toolbar-image-picker.tsx

@@ -1,17 +1,17 @@
 import React, { useRef, useState } from "react";
 import axios from "axios";
 import { Button } from "@ui/button";
-import { UilImage } from "@tooni/iconscout-unicons-react";
+import { UilImage, UilLink, UilUpload } from "@tooni/iconscout-unicons-react";
 import { useGlobalStore } from "@/core/global-store";
 import { getAccessToken } from "@/utils";
 import { uploadImage } from "@/api/misc";
 import { error } from "@/features/shared";
 import i18next from "i18next";
 import { Tooltip } from "@ui/tooltip";
-import { PopperDropdown } from "@/features/ui";
 import { AddImage } from "@/features/shared/editor-toolbar/add-image";
 import { GalleryDialog } from "@/features/shared/gallery";
 import { EcencyConfigManager } from "@/config";
+import { Dropdown, DropdownItemWithIcon, DropdownMenu, DropdownToggle } from "@ui/dropdown";
 
 interface Props {
   onAddImage: (link: string, name: string) => void;
@@ -76,43 +76,39 @@ export const DeckThreadsFormToolbarImagePicker = ({ onAddImage }: Props) => {
     <div className="deck-threads-form-toolbar-image-picker">
       {activeUser && (
         <Tooltip content={i18next.t("editor-toolbar.image")}>
-          <PopperDropdown
-            toggle={<Button icon={<UilImage />} appearance="gray-link" noPadding={true} />}
-          >
-            <div className="dropdown-menu">
-              <div
-                className="dropdown-item"
-                onClick={() => {
-                  setImagePickInitiated(true);
-                }}
-              >
-                {i18next.t("editor-toolbar.link-image")}
-              </div>
-              <div
-                className="dropdown-item"
-                onClick={(e: React.MouseEvent<HTMLElement>) => {
+          <Dropdown>
+            <DropdownToggle>
+              <Button icon={<UilImage />} appearance="gray-link" noPadding={true} />
+            </DropdownToggle>
+            <DropdownMenu>
+              <DropdownItemWithIcon
+                onClick={() => setImagePickInitiated(true)}
+                icon={<UilLink />}
+                label={i18next.t("editor-toolbar.link-image")}
+              />
+              <DropdownItemWithIcon
+                onClick={(e) => {
                   e.stopPropagation();
                   const el = fileInputRef.current;
                   if (el) el.click();
                 }}
-              >
-                {i18next.t("editor-toolbar.upload")}
-              </div>
+                icon={<UilUpload />}
+                label={i18next.t("editor-toolbar.upload")}
+              />
               <EcencyConfigManager.Conditional
                 condition={({ visionFeatures }) => visionFeatures.gallery.enabled}
               >
-                <div
-                  className="dropdown-item"
-                  onClick={(e: React.MouseEvent<HTMLElement>) => {
+                <DropdownItemWithIcon
+                  onClick={(e) => {
                     e.stopPropagation();
                     setGalleryPickInitiated(true);
                   }}
-                >
-                  {i18next.t("editor-toolbar.gallery")}
-                </div>
+                  icon={<UilImage />}
+                  label={i18next.t("editor-toolbar.gallery")}
+                />
               </EcencyConfigManager.Conditional>
-            </div>
-          </PopperDropdown>
+            </DropdownMenu>
+          </Dropdown>
         </Tooltip>
       )}
       {imagePickInitiated && (

src/app/decks/_components/deck-threads-form/index.tsx

@@ -7,13 +7,11 @@ import useLocalStorage from "react-use/lib/useLocalStorage";
 import { DeckThreadsCreatedRecently } from "./deck-threads-created-recently";
 import { IdentifiableEntry, ThreadItemEntry } from "../columns/deck-threads-manager";
 import useClickAway from "react-use/lib/useClickAway";
-import usePrevious from "react-use/lib/usePrevious";
 import { Button } from "@ui/button";
 import { Alert } from "@ui/alert";
 import { Entry } from "@/entities";
 import { useGlobalStore } from "@/core/global-store";
 import { PollsContext } from "@/features/polls";
-import { useLocation } from "react-use";
 import { PREFIX } from "@/utils/local-storage";
 import i18next from "i18next";
 import { AvailableCredits, UserAvatar } from "@/features/shared";
@@ -51,20 +49,15 @@ export const DeckThreadsForm = ({
   const { setShow, create, createReply } = useContext(DeckThreadsFormContext);
   const { clearActivePoll } = useContext(PollsContext);
 
-  const location = useLocation();
-
   const [localDraft, setLocalDraft] = useLocalStorage<Record<string, any>>(
     PREFIX + "_local_draft",
     {}
   );
-  const [persistedForm, setPersistedForm] = useLocalStorage<Record<string, any>>(PREFIX + "_dtf_f");
-  const previousPersistedForm = usePrevious(persistedForm);
-
-  const [threadHost, setThreadHost] = useState("ecency.waves");
-  const [text, setText] = useState("");
-  const [image, setImage] = useState<string | null>(null);
-  const [imageName, setImageName] = useState<string | null>(null);
-  const [video, setVideo] = useState<string | null>(null);
+  const [threadHost, setThreadHost] = useLocalStorage(PREFIX + "_dtf_th", "ecency.waves");
+  const [text, setText, clearText] = useLocalStorage(PREFIX + "_dtf_t", "");
+  const [image, setImage, clearImage] = useLocalStorage<string>(PREFIX + "_dtf_i");
+  const [imageName, setImageName, clearImageName] = useLocalStorage<string>(PREFIX + "_dtf_in");
+  const [video, setVideo, clearVideo] = useLocalStorage<string>(PREFIX + "_dtf_v");
 
   const [disabled, setDisabled] = useState(true);
   const [loading, setLoading] = useState(false);
@@ -91,63 +84,7 @@ export const DeckThreadsForm = ({
       }
       setText(nextText);
     }
-  }, [entry]);
-
-  useEffect(() => {
-    if (persistable) {
-      if (!threadHost && persistedForm?.threadHost) {
-        setThreadHost(persistedForm.threadHost);
-      }
-
-      if (!text && persistedForm?.text) {
-        setText(persistedForm.text);
-      }
-
-      if (!image && persistedForm?.image) {
-        setImage(persistedForm.image);
-      }
-
-      if (!imageName && persistedForm?.imageName) {
-        setImageName(persistedForm.imageName);
-      }
-
-      if (!video && persistedForm?.video) {
-        setVideo(persistedForm.video);
-      }
-    }
-  }, [image, imageName, persistable, persistedForm, text, threadHost, video]);
-
-  useEffect(() => {
-    if (
-      persistable &&
-      (persistedForm?.threadHost !== threadHost ||
-        persistedForm?.text !== text ||
-        persistedForm?.image !== image ||
-        persistedForm?.imageName !== imageName ||
-        persistedForm?.video !== video)
-    ) {
-      setPersistedForm({
-        threadHost,
-        text,
-        image,
-        imageName,
-        video
-      });
-    }
-  }, [
-    threadHost,
-    text,
-    image,
-    imageName,
-    persistable,
-    persistedForm?.threadHost,
-    persistedForm?.text,
-    persistedForm?.image,
-    persistedForm?.imageName,
-    persistedForm?.video,
-    video,
-    setPersistedForm
-  ]);
+  }, [entry, setImage, setText]);
 
   const submit = async () => {
     if (!activeUser) {
@@ -203,9 +140,9 @@ export const DeckThreadsForm = ({
       if (onSuccess) {
         onSuccess(threadItem);
       }
-      setText("");
-      setImage(null);
-      setImageName(null);
+      clearText();
+      clearImage();
+      clearImageName();
       clearActivePoll();
       i18next.t("decks.threads-form.successfully-created");
     } catch (e) {
@@ -224,15 +161,15 @@ export const DeckThreadsForm = ({
     >
       {!activeUser &&
         !entry &&
-        text?.length <= 255 &&
+        (text?.length ?? 0) <= 255 &&
         i18next.t("decks.threads-form.login-and-publish")}
       {activeUser &&
         !entry &&
-        text?.length <= 255 &&
+        (text?.length ?? 0) <= 255 &&
         (loading
           ? i18next.t("decks.threads-form.publishing")
           : i18next.t("decks.threads-form.publish"))}
-      {text?.length > 255 && !entry && i18next.t("decks.threads-form.create-regular-post")}
+      {(text?.length ?? 0) > 255 && !entry && i18next.t("decks.threads-form.create-regular-post")}
       {entry && i18next.t("decks.threads-form.save")}
     </Button>
   );
@@ -273,7 +210,10 @@ export const DeckThreadsForm = ({
                 setImageName(name);
               }}
               onAddVideo={setVideo}
-              setSelectedImage={setImage}
+              onClearImage={() => {
+                clearImage();
+                clearImageName();
+              }}
               placeholder={placeholder}
               onTextareaFocus={() => setFocused(true)}
             />
@@ -287,12 +227,12 @@ export const DeckThreadsForm = ({
             )}
           </div>
         </div>
-        {inline && text?.length > 255 && (
+        {inline && (text?.length ?? 0) > 255 && (
           <Alert appearance="warning">{i18next.t("decks.threads-form.max-length")}</Alert>
         )}
         {!inline && (
           <div className="deck-toolbar-threads-form-bottom">
-            {text?.length > 255 && (
+            {(text?.length ?? 0) > 255 && (
               <Alert appearance="warning">{i18next.t("decks.threads-form.max-length")}</Alert>
             )}
             <DeckThreadsCreatedRecently

src/features/ui/dropdown/dropdown-item.tsx

@@ -26,11 +26,11 @@ export function DropdownItem(props: HTMLProps<HTMLDivElement> & Props) {
     <div
       {...props}
       className={classNameObject({
-        "min-w-[80%] cursor-pointer [&>a]:text-dark-default dark:text-white dark:[&>a]:text-white rounded-tr-2xl rounded-br-2xl":
+        "min-w-[80%] cursor-pointer [&>a]:text-dark-default dark:text-white dark:[&>a]:text-white rounded-tr-2xl rounded-br-2xl duration-200":
           true,
         "bg-blue-dark-sky-040 text-blue-dark-sky dark:bg-gray-900 hover:bg-blue-dark-sky-030 dark:hover:bg-gray-800":
           props.selected ?? false,
-        "hover:bg-blue-dark-sky-040 text-dark-default hover:text-blue-dark-sky dark:hover:bg-gray-900 ":
+        "hover:bg-blue-dark-sky-040 text-dark-default hover:text-blue-dark-sky dark:hover:bg-dark-default":
           !(props.selected ?? false),
         "px-4 py-2": !props.size || props.size === "medium",
         "px-2 py-1 text-sm": !props.size || props.size === "small",