Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixed deleting image in wave form #170

Merged
merged 1 commit into from
Nov 13, 2024
Merged

Fixed deleting image in wave form #170

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions src/app/decks/_components/deck-threads-form/deck-threads-form-control.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -23,7 +23,7 @@ export const DeckThreadsFormControl = ({
setText,
onAddImage,
selectedImage,
setSelectedImage,
onClearImage,
placeholder,
onTextareaFocus,
onAddVideo,
Expand All @@ -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}
Expand All @@ -66,7 +66,7 @@ export const DeckThreadsFormControl = ({
.replace(")", "")}
alt=""
/>
<div className="remove" onClick={() => onAddVideo(null)}>
<div className="remove" onClick={() => onAddVideo(undefined)}>
{closeSvg}
</div>
</div>
Expand Down
52 changes: 24 additions & 28 deletions src/app/decks/_components/deck-threads-form/deck-threads-form-toolbar-image-picker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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 && (
Expand Down
96 changes: 18 additions & 78 deletions src/app/decks/_components/deck-threads-form/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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);
Expand All @@ -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) {
Expand Down Expand Up @@ -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) {
Expand All @@ -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>
);
Expand Down Expand Up @@ -273,7 +210,10 @@ export const DeckThreadsForm = ({
setImageName(name);
}}
onAddVideo={setVideo}
setSelectedImage={setImage}
onClearImage={() => {
clearImage();
clearImageName();
}}
placeholder={placeholder}
onTextareaFocus={() => setFocused(true)}
/>
Expand All @@ -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
Expand Down
4 changes: 2 additions & 2 deletions src/features/ui/dropdown/dropdown-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Loading