76 lines
2.4 KiB
TypeScript
76 lines
2.4 KiB
TypeScript
import { createSignal, Show } from "solid-js";
|
|
import type { EditCommentModalProps } from "~/types/comment";
|
|
import Xmark from "~/components/icons/Xmark";
|
|
|
|
export default function EditCommentModal(props: EditCommentModalProps) {
|
|
let bodyRef: HTMLTextAreaElement | undefined;
|
|
const [showNoChange, setShowNoChange] = createSignal(false);
|
|
|
|
const editCommentWrapper = (e: SubmitEvent) => {
|
|
e.preventDefault();
|
|
if (
|
|
bodyRef &&
|
|
bodyRef.value.length > 0 &&
|
|
bodyRef.value !== props.commentBody
|
|
) {
|
|
setShowNoChange(false);
|
|
props.editComment(bodyRef.value, props.commentID);
|
|
} else {
|
|
setShowNoChange(true);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div class="flex justify-center">
|
|
<div class="fixed top-48 h-fit w-11/12 sm:w-4/5 md:w-2/3">
|
|
<div
|
|
id="edit_prompt"
|
|
class="fade-in bg-surface1 z-50 rounded-md px-8 py-4 shadow-lg"
|
|
>
|
|
<button class="absolute right-4" onClick={() => {}}>
|
|
<Xmark
|
|
strokeWidth={0.5}
|
|
color="var(--color-text)"
|
|
height={50}
|
|
width={50}
|
|
/>
|
|
</button>
|
|
<div class="text-text py-4 text-center text-3xl tracking-wide">
|
|
Edit Comment
|
|
</div>
|
|
<form onSubmit={editCommentWrapper}>
|
|
<div class="textarea-group home">
|
|
<textarea
|
|
required
|
|
ref={bodyRef}
|
|
placeholder=" "
|
|
value={props.commentBody}
|
|
class="underlinedInput text-blue w-full bg-transparent"
|
|
rows={4}
|
|
/>
|
|
<span class="bar" />
|
|
<label class="underlinedInputLabel">Edit Comment</label>
|
|
</div>
|
|
<div class="flex justify-end pt-2">
|
|
<button
|
|
type="submit"
|
|
disabled={props.editCommentLoading}
|
|
class={`${
|
|
props.editCommentLoading
|
|
? "bg-surface2 opacity-50"
|
|
: "border-sapphire bg-blue hover:brightness-125"
|
|
} rounded border px-4 py-2 text-base shadow-md transition-all duration-300 ease-in-out active:scale-90`}
|
|
>
|
|
Submit
|
|
</button>
|
|
</div>
|
|
</form>
|
|
<Show when={showNoChange()}>
|
|
<div class="text-red text-center italic">No change detected</div>
|
|
</Show>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|