fix: duplication error

2026-01-21 12:57:58 -05:00
parent 58d48dac70
commit 7b60494d6d
6 changed files with 11 additions and 12 deletions
--- a/src/components/blog/AuthenticatedLike.tsx
+++ b/src/components/blog/AuthenticatedLike.tsx
@@ -0,0 +1,115 @@
+import { createSignal, Show } from "solid-js";
+import { api } from "~/lib/api";
+import LikeIcon from "~/components/icons/LikeIcon";
+
+export interface PostLike {
+  id: number;
+  user_id: string;
+  post_id: string;
+}
+
+export interface AuthenticatedLikeProps {
+  currentUserID: string | undefined | null;
+  isAuthenticated: boolean;
+  likes: PostLike[];
+  projectID: number;
+}
+
+export default function AuthenticatedLike(props: AuthenticatedLikeProps) {
+  const [hovering, setHovering] = createSignal(false);
+  const [likes, setLikes] = createSignal(props.likes);
+  const [instantOffset, setInstantOffset] = createSignal(0);
+  const [hasLiked, setHasLiked] = createSignal(
+    props.likes.some((like) => like.user_id === props.currentUserID)
+  );
+
+  const giveProjectLike = async () => {
+    if (!props.currentUserID) return;
+
+    const initialHasLiked = hasLiked();
+    const initialInstantOffset = initialHasLiked ? -1 : 1;
+
+    setHasLiked(!hasLiked());
+    setInstantOffset(initialInstantOffset);
+
+    try {
+      if (initialHasLiked) {
+        const result = await api.database.removePostLike.mutate({
+          user_id: props.currentUserID,
+          post_id: props.projectID.toString()
+        });
+        setLikes(result.newLikes as PostLike[]);
+      } else {
+        const result = await api.database.addPostLike.mutate({
+          user_id: props.currentUserID,
+          post_id: props.projectID.toString()
+        });
+        setLikes(result.newLikes as PostLike[]);
+      }
+      setInstantOffset(0);
+    } catch (error) {
+      console.error(
+        "There has been a problem with your like operation:",
+        error
+      );
+      setHasLiked(initialHasLiked);
+      setInstantOffset(0);
+    }
+  };
+
+  const likeCount = () => likes().length + instantOffset();
+
+  return (
+    <Show
+      when={props.isAuthenticated}
+      fallback={
+        <button class="tooltip flex flex-col">
+          <div class="mx-auto">
+            <LikeIcon
+              strokeWidth={1}
+              color="fill-text"
+              height={32}
+              width={32}
+            />
+          </div>
+          <div class="my-auto pt-0.5 pl-2 text-sm">
+            {likes().length} {likes().length === 1 ? "Like" : "Likes"}
+          </div>
+          <div class="tooltip-text -ml-12 w-12">Must be logged in</div>
+        </button>
+      }
+    >
+      <button
+        onClick={() => giveProjectLike()}
+        onMouseOver={() => setHovering(true)}
+        onMouseLeave={() => setHovering(false)}
+      >
+        <div class="tooltip text-text flex flex-col hover:brightness-125">
+          <div class="mx-auto hover:brightness-125">
+            <LikeIcon
+              strokeWidth={1}
+              color={`fill-blue`}
+              height={32}
+              width={32}
+            />
+          </div>
+          <div
+            class={`${
+              hasLiked() ? "text-blue" : ""
+            } mx-auto flex pl-2 transition-colors duration-200 ease-in`}
+          >
+            {likeCount()} {likeCount() === 1 ? "Like" : "Likes"}
+          </div>
+          <div class="tooltip-text -ml-14 w-12 px-2">
+            <Show
+              when={hasLiked()}
+              fallback={<div class="px-2 text-center">Leave a Like</div>}
+            >
+              <div class="px-2">Remove Like</div>
+            </Show>
+          </div>
+        </div>
+      </button>
+    </Show>
+  );
+}