migration of comments

src/components/blog/CommentDeletionPrompt.tsx

@@ -0,0 +1,146 @@
+import { createSignal, Show } from "solid-js";
+import type { CommentDeletionPromptProps, DeletionType } from "~/types/comment";
+import UserDefaultImage from "~/components/icons/UserDefaultImage";
+import Xmark from "~/components/icons/Xmark";
+
+export default function CommentDeletionPrompt(
+  props: CommentDeletionPromptProps
+) {
+  const [normalDeleteChecked, setNormalDeleteChecked] = createSignal(false);
+  const [adminDeleteChecked, setAdminDeleteChecked] = createSignal(false);
+  const [fullDeleteChecked, setFullDeleteChecked] = createSignal(false);
+
+  const handleNormalDeleteCheckbox = () => {
+    setNormalDeleteChecked(!normalDeleteChecked());
+    setFullDeleteChecked(false);
+    setAdminDeleteChecked(false);
+  };
+
+  const handleAdminDeleteCheckbox = () => {
+    setAdminDeleteChecked(!adminDeleteChecked());
+    setFullDeleteChecked(false);
+    setNormalDeleteChecked(false);
+  };
+
+  const handleFullDeleteCheckbox = () => {
+    setFullDeleteChecked(!fullDeleteChecked());
+    setNormalDeleteChecked(false);
+    setAdminDeleteChecked(false);
+  };
+
+  const deletionWrapper = () => {
+    let deleteType: DeletionType = "user";
+    if (normalDeleteChecked()) {
+      deleteType = "user";
+    } else if (adminDeleteChecked()) {
+      deleteType = "admin";
+    } else if (fullDeleteChecked()) {
+      deleteType = "database";
+    }
+    props.deleteComment(props.commentID, props.commenterID, deleteType);
+  };
+
+  const isDeleteEnabled = () =>
+    normalDeleteChecked() || adminDeleteChecked() || fullDeleteChecked();
+
+  return (
+    <div class="flex justify-center">
+      <div class="fixed top-48 z-50 h-fit w-11/12 sm:w-4/5 md:w-2/3">
+        <div
+          id="delete_prompt"
+          class="fade-in rounded-md bg-red-400 px-8 py-4 shadow-lg dark:bg-red-900"
+        >
+          <button class="absolute right-4" onClick={() => {}}>
+            <Xmark strokeWidth={0.5} color="white" height={50} width={50} />
+          </button>
+          <div class="py-4 text-center text-3xl tracking-wide">
+            Comment Deletion
+          </div>
+          <div class="mx-auto w-3/4 rounded bg-zinc-50 px-6 py-4 dark:bg-zinc-800">
+            <div class="flex overflow-x-auto overflow-y-hidden select-text">
+              {/* Comment body will be passed as prop */}
+            </div>
+            <div class="my-2 flex pl-2">
+              <Show
+                when={props.commenterImage}
+                fallback={
+                  <UserDefaultImage strokeWidth={1} height={24} width={24} />
+                }
+              >
+                <img
+                  src={props.commenterImage}
+                  height={24}
+                  width={24}
+                  alt="user-image"
+                  class="h-6 w-6 rounded-full object-cover object-center"
+                />
+              </Show>
+              <div class="px-1">
+                {props.commenterDisplayName ||
+                  props.commenterEmail ||
+                  "[removed]"}
+              </div>
+            </div>
+          </div>
+          <div class="flex w-full justify-center">
+            <div class="flex pt-4">
+              <input
+                type="checkbox"
+                class="my-auto"
+                checked={normalDeleteChecked()}
+                onChange={handleNormalDeleteCheckbox}
+              />
+              <div class="my-auto px-2 text-sm font-normal">
+                {props.privilegeLevel === "admin"
+                  ? "Confirm User Delete?"
+                  : "Confirm Delete?"}
+              </div>
+            </div>
+          </div>
+          <Show when={props.privilegeLevel === "admin"}>
+            <div class="flex w-full justify-center">
+              <div class="flex pt-4">
+                <input
+                  type="checkbox"
+                  class="my-auto"
+                  checked={adminDeleteChecked()}
+                  onChange={handleAdminDeleteCheckbox}
+                />
+                <div class="my-auto px-2 text-sm font-normal">
+                  Confirm Admin Delete?
+                </div>
+              </div>
+            </div>
+            <div class="flex w-full justify-center">
+              <div class="flex pt-4">
+                <input
+                  type="checkbox"
+                  class="my-auto"
+                  checked={fullDeleteChecked()}
+                  onChange={handleFullDeleteCheckbox}
+                />
+                <div class="my-auto px-2 text-sm font-normal">
+                  Confirm Full Delete (removal from database)?
+                </div>
+              </div>
+            </div>
+          </Show>
+          <div class="flex w-full justify-center pt-2">
+            <button
+              type="button"
+              onClick={deletionWrapper}
+              disabled={props.commentDeletionLoading || !isDeleteEnabled()}
+              class={`${
+                props.commentDeletionLoading || !isDeleteEnabled()
+                  ? "bg-zinc-400"
+                  : "border-orange-500 bg-orange-400 hover:bg-orange-500"
+              } rounded border px-4 py-2 text-white shadow-md transition-all duration-300 ease-in-out active:scale-90`}
+            >
+              Delete
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}