feature: fix repost and reaction contexts + prettier (#25)

app/components/aside/aside-searchbar.tsx

@@ -44,7 +44,7 @@ function AsideSearchbar(): JSX.Element {
           <CustomIcon
             className={cn(
               "h-5 w-5 transition-colors",
-              inputValue ? "fill-main-accent" : "fill-light-secondary"
+              inputValue ? "fill-main-accent" : "fill-light-secondary",
             )}
             iconName="SearchIcon"
           />
@@ -63,7 +63,7 @@ function AsideSearchbar(): JSX.Element {
           className={cn(
             "rounded-full scale-50 bg-main-accent fill-main-background p-1.5 cursor-pointer opacity-0 transition hover:brightness-90 disabled:opacity-0",
             inputValue &&
-              "focus:scale-100 focus:opacity-100 peer-focus:scale-100 peer-focus:opacity-100"
+              "focus:scale-100 focus:opacity-100 peer-focus:scale-100 peer-focus:opacity-100",
           )}
           onClick={clearInputValue(true)}
         >

app/components/common/header.tsx

@@ -31,7 +31,7 @@ function Header({
       className={cn(
         "hover-animation even z-10 bg-main-background/60 px-3 py-4 backdrop-blur-md",
         className ?? "flex items-center gap-6",
-        !disableSticky && "sticky top-0"
+        !disableSticky && "sticky top-0",
       )}
     >
       {useActionButton && (

app/components/input/image-preview.tsx

@@ -23,7 +23,7 @@ function ImagePreview({ imagesPreview }: ImagePreviewProps): JSX.Element {
     <div
       className={cn(
         "grid grid-cols-2 grid-rows-2 rounded-2xl mt-2 gap-0.5",
-        previewCount > 1 && "h-[271px]"
+        previewCount > 1 && "h-[271px]",
       )}
     >
       {images.map(({ id, src, alt }, index) => (
@@ -37,15 +37,15 @@ function ImagePreview({ imagesPreview }: ImagePreviewProps): JSX.Element {
               "col-span-2 row-span-2": previewCount === 1,
               "row-span-2":
                 previewCount === 2 || (index === 0 && previewCount === 3),
-            }
+            },
           )}
         >
           <NextImage
             className={cn(previewCount > 1 ? "w-full h-full" : "max-h-[500px]")}
             imgClassName={cn(
               "relative cursor-pointer object-cover",
               postImageBorderRadius[previewCount][index],
-              previewCount > 1 ? "w-full h-full" : "max-h-[500px]"
+              previewCount > 1 ? "w-full h-full" : "max-h-[500px]",
             )}
             src={src}
             alt={alt}

app/components/input/input-field.tsx

@@ -10,7 +10,7 @@ export type InputFieldProps = {
   useTextArea?: boolean;
   errorMessage?: string;
   handleChange: (
-    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
   ) => void;
   handleKeyboardShortcut?: ({
     key,
@@ -41,7 +41,7 @@ export function InputField({
           errorMessage
             ? "ring-accent-red"
             : `ring-light-line-reply focus-within:ring-2 
-                 focus-within:!ring-main-accent`
+                 focus-within:!ring-main-accent`,
         )}
       >
         {useTextArea ? (
@@ -74,7 +74,7 @@ export function InputField({
              peer-placeholder-shown:text-lg peer-focus:translate-y-1 peer-focus:text-sm`,
             errorMessage
               ? "!text-accent-red peer-focus:text-accent-red"
-              : "peer-focus:text-main-accent"
+              : "peer-focus:text-main-accent",
           )}
           htmlFor={inputId}
         >
@@ -85,7 +85,7 @@ export function InputField({
             className={cn(
               `absolute right-3 top-0 translate-y-1 text-sm text-light-secondary transition-opacity 
                duration-200 peer-focus:visible peer-focus:opacity-100`,
-              errorMessage ? "visible opacity-100" : "invisible opacity-0"
+              errorMessage ? "visible opacity-100" : "invisible opacity-0",
             )}
           >
             {inputLength} / {inputLimit}

app/components/input/input.tsx

@@ -116,7 +116,7 @@ function Input({
             : replyModal
             ? "pt-0"
             : "border-b-2 border-light-border dark:border-dark-border",
-          (disabled || loading) && "pointer-events-none opacity-50"
+          (disabled || loading) && "pointer-events-none opacity-50",
         )}
         // className={cn(
         //   "hover-animation grid w-full grid-cols-[auto,1fr] gap-3 p-4 border-b-2 border-light-border",

app/components/login/login-button.tsx

@@ -16,7 +16,7 @@ function LoginButton({ text, className }: LoginButtonProps): JSX.Element {
       className={cn(
         "p-2.5 rounded-full border-[1px] border-black font-bold",
         !isAvailable && "opacity-60",
-        className
+        className,
       )}
       onClick={login}
       disabled={!isAvailable}

app/components/login/login-link.tsx

@@ -14,7 +14,7 @@ function LoginButton({ text, className, href }: LoginButtonProps): JSX.Element {
       href={href}
       className={cn(
         "p-2.5 rounded-full border-[1px] border-black font-bold text-center",
-        className
+        className,
       )}
       target="blank"
     >

app/components/modal/modal.tsx

@@ -59,7 +59,7 @@ export default function Modal({
           <div
             className={cn(
               "fixed inset-0 p-4",
-              className ?? "flex items-center justify-center"
+              className ?? "flex items-center justify-center",
             )}
           >
             <Dialog.Panel

app/components/note/note-content.tsx

@@ -35,14 +35,14 @@ function NoteContent({ event }: NoteContentProps): JSX.Element {
   links.forEach((link) => {
     augmentedContent = augmentedContent.replaceAll(
       link,
-      `<a class="text-main-accent hover:underline" href=${link}>${link}</a>`
+      `<a class="text-main-accent hover:underline" href=${link}>${link}</a>`,
     );
   });
 
   tags.forEach((tag) => {
     augmentedContent = augmentedContent.replaceAll(
       tag,
-      `<a class="text-main-accent hover:underline" href="#">${tag}</a>`
+      `<a class="text-main-accent hover:underline" href="#">${tag}</a>`,
     );
   });
 

app/components/note/note-date.tsx

@@ -22,7 +22,7 @@ function NoteDate({
           onClick={(e) => e.stopPropagation()}
           className={cn(
             "custom-underline peer whitespace-nowrap",
-            viewNote && "text-light-secondary"
+            viewNote && "text-light-secondary",
           )}
         >
           {formatDate(createdAt, viewNote ? "full" : "note")}

app/components/note/note-option.tsx

@@ -30,14 +30,14 @@ function NoteOption({
         `group flex items-center gap-1.5 p-0 transition-none
          disabled:cursor-not-allowed inner:transition inner:duration-200`,
         disabled && "cursor-not-allowed",
-        className
+        className,
       )}
       onClick={onClick}
     >
       <CustomIcon
         className={cn(
           "fill-light-secondary h-9 w-9 rounded-full p-2 not-italic group-focus-visible:ring-2",
-          iconClassName
+          iconClassName,
         )}
         iconName={iconName}
         solid={solid}

app/components/note/note-relays.tsx

@@ -21,7 +21,7 @@ function NoteRelays({
           onClick={(e) => e.stopPropagation()}
           className={cn(
             "custom-underline peer whitespace-nowrap",
-            viewNote && "text-light-secondary"
+            viewNote && "text-light-secondary",
           )}
         >
           seen on {relays.length} relay{relays.length > 1 ? "s" : ""}

app/components/note/note-stats.tsx

@@ -1,22 +1,23 @@
 import cn from "clsx";
+import type { JSX } from "react";
 import NoteOption from "@/app/components/note/note-option";
 import { useAuth } from "@/app/lib/context/auth-provider";
 import { useReactions } from "@/app/lib/context/reactions-provider";
-import { useReposts } from "@/app/lib/context/repost-provider";
+import { useReposts } from "@/app/lib/context/reposts-provider";
 import type { RelayEvent } from "@/app/lib/types/event";
 
-type TweetStatsProps = {
+interface INotesStatsProps {
   isOwner: boolean;
   note: RelayEvent;
   viewNote?: boolean;
   openModal?: () => void;
-};
+}
 
 function NoteStats({
   note,
   viewNote,
   openModal,
-}: TweetStatsProps): JSX.Element {
+}: INotesStatsProps): JSX.Element {
   const { publicKey } = useAuth();
   const {
     reactions,
@@ -32,10 +33,10 @@ function NoteStats({
   } = useReposts();
 
   const reactionLoading = isLoadingReactions.has(note.id);
-  const noteIsLiked = reactions.has(note.id);
+  const noteIsLiked = !!reactions.get(note.id)?.length;
 
   const repostLoading = isLoadingReposts.has(note.id);
-  const noteIsReposted = reposts.has(note.id);
+  const noteIsReposted = !!reposts.get(note.id)?.length;
 
   const handleReply = (e: any): void => {
     e.stopPropagation();
@@ -58,7 +59,7 @@ function NoteStats({
     <div
       className={cn(
         "flex text-light-secondary inner:outline-none",
-        viewNote ? "justify-around py-2" : "max-w-md justify-between"
+        viewNote ? "justify-around py-2" : "max-w-md justify-between",
       )}
     >
       <NoteOption
@@ -73,7 +74,7 @@ function NoteStats({
       <NoteOption
         className={cn(
           "hover:text-accent-green focus-visible:text-accent-green",
-          noteIsReposted && "text-accent-green [&>svg]:fill-accent-green"
+          noteIsReposted && "text-accent-green [&>svg]:fill-accent-green",
         )}
         iconClassName="group-hover:bg-accent-green/10 group-active:bg-accent-green/20 group-hover:fill-accent-green
                        group-focus-visible:bg-accent-green/10 group-focus-visible:ring-accent-green/80 group-focus-visible:fill-accent-green"
@@ -86,7 +87,7 @@ function NoteStats({
       <NoteOption
         className={cn(
           "hover:text-accent-pink focus-visible:text-accent-pink",
-          noteIsLiked && "text-accent-pink [&>svg]:fill-accent-pink"
+          noteIsLiked && "text-accent-pink [&>svg]:fill-accent-pink",
         )}
         iconClassName="group-hover:bg-accent-pink/10 group-active:bg-accent-pink/20 group-hover:fill-accent-pink
                        group-focus-visible:bg-accent-pink/10 group-focus-visible:ring-accent-pink/80 group-focus-visible:fill-accent-pink"

app/components/note/note.tsx

@@ -5,6 +5,8 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { nip19 } from "nostr-tools";
 import { forwardRef } from "react";
+import Modal from "@/app/components/modal/modal";
+import NoteReplyModal from "@/app/components/modal/note-replay-modal";
 import NoteContent from "@/app/components/note/note-content";
 import NoteDate from "@/app/components/note/note-date";
 import NoteRelays from "@/app/components/note/note-relays";
@@ -16,21 +18,19 @@ import UserNpub from "@/app/components/user/user-npub";
 import UserTooltip from "@/app/components/user/user-tooltip";
 import { useAuth } from "@/app/lib/context/auth-provider";
 import { useProfile } from "@/app/lib/context/profile-provider";
-import { useReposts } from "@/app/lib/context/repost-provider";
+import { useReposts } from "@/app/lib/context/reposts-provider";
+import { useModal } from "@/app/lib/hooks/useModal";
 import { getUserName, shortenHash } from "@/app/lib/utils/common";
 import type { RelayEvent } from "@/app/lib/types/event";
-import Modal from "@/app/components/modal/modal";
-import { useModal } from "@/app/lib/hooks/useModal";
-import NoteReplyModal from "@/app/components/modal/note-replay-modal";
 
-export type NoteProps = {
+interface INoteProps {
   event: RelayEvent;
   modal?: boolean;
   parentNote?: boolean;
-};
+}
 
 const Note = forwardRef(
-  ({ event, modal, parentNote, ...rest }: NoteProps, ref: any) => {
+  ({ event, modal, parentNote, ...rest }: INoteProps, ref: any) => {
     const { publicKey } = useAuth();
     const { open, openModal, closeModal } = useModal();
     const { profiles } = useProfile();
@@ -43,14 +43,14 @@ const Note = forwardRef(
     const shortNpub = shortenHash(npub, 4);
     const authorUsername = author ? getUserName(author) : "";
     const isOwner = publicKey === event.pubkey;
-    const isNoteReposted = reposts.has(event.id);
+    const isNoteReposted = !!reposts.get(event.id)?.length;
 
     return (
       <article
         className={cn(
           `accent-tab hover:bg-dark-primary/30 relative flex flex-col gap-y-4 px-4 py-3 
          outline-none duration-200 cursor-pointer`,
-          parentNote ? "mt-0.5 pt-2.5 pb-0" : "border-b border-light-border"
+          parentNote ? "mt-0.5 pt-2.5 pb-0" : "border-b border-light-border",
         )}
         {...rest}
         ref={ref}
@@ -110,7 +110,7 @@ const Note = forwardRef(
               <p
                 className={cn(
                   "text-light-secondary dark:text-dark-secondary",
-                  modal && "order-1 my-2"
+                  modal && "order-1 my-2",
                 )}
               >
                 Replying to{" "}
@@ -137,7 +137,7 @@ const Note = forwardRef(
         </div>
       </article>
     );
-  }
+  },
 );
 
 Note.displayName = "Note";

app/components/relay/relay-input.tsx

@@ -42,7 +42,7 @@ function RelayInput() {
         className={cn(
           "rounded-full disabled:fill-gray-400 fill-accent-green ",
           relayUrl &&
-            "hover:bg-accent-green/10 focus-visible:bg-accent-green/10"
+            "hover:bg-accent-green/10 focus-visible:bg-accent-green/10",
         )}
         type="submit"
         disabled={!relayUrl}

app/components/settings/settings-link.tsx

@@ -17,7 +17,7 @@ function SettingsLink({ href, linkName }: SettingsLinkProps) {
       href={href}
       className={cn(
         "flex items-center justify-between px-4 py-3 text-light-secondary hover:bg-light-secondary/5",
-        isActive && "bg-light-secondary/5 border-r-2 border-main-accent"
+        isActive && "bg-light-secondary/5 border-r-2 border-main-accent",
       )}
     >
       <span>{linkName}</span>

app/components/sidebar/sidebar-profile.tsx

@@ -35,7 +35,7 @@ function SidebarProfile(): JSX.Element | null {
         <Menu.Button
           className={cn(
             `rounded-full p-3 my-2.5 dark-bg-tab flex gap-6 items-center xl:w-60
-                 justify-between hover:bg-gray-100 active:bg-gray-100 bg-dark-primary/10`
+                 justify-between hover:bg-gray-100 active:bg-gray-100 bg-dark-primary/10`,
           )}
         >
           <div className="flex gap-3 truncate">
@@ -68,7 +68,7 @@ function SidebarProfile(): JSX.Element | null {
                 <button
                   className={cn(
                     "flex w-full gap-3 p-3 font-bold",
-                    active && "bg-gray-100"
+                    active && "bg-gray-100",
                   )}
                   onClick={logout}
                 >

app/components/ui/button.tsx

@@ -18,7 +18,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         className={cn(
           "custom-button main-tab",
           loading && "relative !text-transparent disabled:cursor-wait",
-          className
+          className,
         )}
         type="button"
         disabled={isDisabled}
@@ -34,7 +34,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         {children}
       </button>
     );
-  }
+  },
 );
 
 export default Button;

app/components/ui/next-image.tsx

@@ -35,7 +35,7 @@ function NextImage({
   const handleLoad = (): void => setLoading(false);
 
   const handleError = (
-    event: SyntheticEvent<HTMLImageElement, Event>
+    event: SyntheticEvent<HTMLImageElement, Event>,
   ): void => {
     event.currentTarget.src = fallbackSrc || "";
   };
@@ -51,7 +51,7 @@ function NextImage({
             ? blurClassName ?? "bg-main-sidebar-background"
             : previewCount === 1
             ? "!h-auto !min-h-0 !w-auto !min-w-0 rounded-lg object-contain"
-            : "object-cover"
+            : "object-cover",
         )}
         width={width}
         height={height}

app/components/ui/tool-tip.tsx

@@ -24,7 +24,7 @@ export default function ToolTip({
              group-focus-visible/inner:visible group-focus-visible/inner:opacity-100 group-focus-visible/inner:delay-200`
           : `group-hover:visible group-hover:opacity-100 group-hover:delay-500 group-focus-visible:visible 
              group-focus-visible:opacity-100`,
-        className ?? "translate-y-3"
+        className ?? "translate-y-3",
       )}
     >
       <span>{tip}</span>