Merge branch 'preview'

pdelfan · Feb 7, 2024 · 74c26f6 · 74c26f6
2 parents 2b31243 + 0618af5
commit 74c26f6
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 31 deletions.
diff --git a/src/components/actions/refetch/Refetch.tsx b/src/components/actions/refetch/Refetch.tsx
@@ -18,7 +18,7 @@ export default function Refetch(props: Props) {
   return (
     <Button
       onClick={debouncedRefetch}
-      className="z-40 p-3 rounded-full fixed bottom-24 md:bottom-8 ml-3 md:ml-[0.80rem] border border-neutral-300 bg-white hover:bg-neutral-50 hover:-rotate-180 ease-linear transition-all"
+      className="fixed bottom-24 z-40 ml-3 rounded-full border border-neutral-300 bg-white p-3 transition-all ease-linear hover:-rotate-180 hover:bg-neutral-50 md:bottom-8 md:ml-[0.80rem]"
       style={{
         opacity: canUpdate ? `${100 - (val ?? 0)}%` : "100%",
         transform: canUpdate ? `translateY(${val ?? 0}%)` : "translateY(0%)",

diff --git a/src/components/contentDisplay/listItem/ListItem.tsx b/src/components/contentDisplay/listItem/ListItem.tsx
@@ -4,26 +4,27 @@ import { ListView } from "@atproto/api/dist/client/types/app/bsky/graph/defs";
 import Image from "next/image";
 import Link from "next/link";
 import FallbackList from "@/assets/images/fallbackList.png";
+import { memo } from "react";
 
 interface Props {
   list: ListView;
   rounded?: boolean;
 }
 
-export default function ListItem(props: Props) {
+const ListItem = memo(function ListItem(props: Props) {
   const { list, rounded = true } = props;
   const { avatar, name, description, creator, uri, viewer, indexedAt } = list;
 
   return (
     <Link
       href={{
         pathname: `/dashboard/user/${creator.handle}/lists/${encodeURIComponent(
-          uri.split(":")[3].split("/")[2]
+          uri.split(":")[3].split("/")[2],
         )}`,
         query: { uri: uri },
       }}
       className={`flex flex-col gap-2 border border-x-0 p-3 last:border-b hover:bg-neutral-50 md:border-x ${
-        rounded ? "md:first:rounded-t-2xl first:border-t" : "first:border-t-0"
+        rounded ? "first:border-t md:first:rounded-t-2xl" : "first:border-t-0"
       } md:last:rounded-b-2xl odd:[&:not(:last-child)]:border-b-0 even:[&:not(:last-child)]:border-b-0`}
     >
       <div className="flex flex-wrap items-center justify-between gap-3">
@@ -50,4 +51,6 @@ export default function ListItem(props: Props) {
       )}
     </Link>
   );
-}
+});
+
+export default ListItem;
diff --git a/src/components/contentDisplay/notification/NotificationItem.tsx b/src/components/contentDisplay/notification/NotificationItem.tsx
@@ -13,13 +13,14 @@ import {
 import NotificationPost from "./NotificationPost";
 import NotificationContnet from "./NotificationContent";
 import { AppBskyNotificationListNotifications } from "@atproto/api";
+import { memo } from "react";
 
 interface Props {
   notification: GroupedNotification;
   filter: ContentFilterResult;
 }
 
-export default function NotificationItem(props: Props) {
+const NotificationItem = memo(function NotificationItem(props: Props) {
   const { notification, filter } = props;
   const { reason, author, indexedAt, isRead, allAuthors } = notification;
   const subjectUri =
@@ -30,11 +31,11 @@ export default function NotificationItem(props: Props) {
   const getNotificationIcon = (reason: string) => {
     switch (reason) {
       case "like":
-        return <BiSolidHeart className="text-2xl text-red-500 shrink-0" />;
+        return <BiSolidHeart className="shrink-0 text-2xl text-red-500" />;
       case "repost":
-        return <BiRepost className="text-2xl text-green-600 shrink-0" />;
+        return <BiRepost className="shrink-0 text-2xl text-green-600" />;
       case "follow":
-        return <BiSolidUserPlus className="text-2xl text-primary shrink-0" />;
+        return <BiSolidUserPlus className="text-primary shrink-0 text-2xl" />;
       default:
         return null;
     }
@@ -43,7 +44,7 @@ export default function NotificationItem(props: Props) {
   if (GROUPABLE_NOTIFICATIONS.includes(reason)) {
     return (
       <article
-        className={`flex flex-col justify-between p-3 border border-x-0 md:border-x first:border-t last:border-b even:[&:not(:last-child)]:border-b-0 odd:[&:not(:last-child)]:border-b-0 md:first:rounded-t-2xl ${
+        className={`flex flex-col justify-between border border-x-0 p-3 first:border-t last:border-b md:border-x md:first:rounded-t-2xl odd:[&:not(:last-child)]:border-b-0 even:[&:not(:last-child)]:border-b-0 ${
           !isRead && "bg-neutral-100"
         }`}
       >
@@ -77,7 +78,7 @@ export default function NotificationItem(props: Props) {
                     <Link
                       key={author.handle}
                       href={`/dashboard/user/${author.handle}`}
-                      className="font-semibold break-all text-neutral-700 hover:text-neutral-500"
+                      className="break-all font-semibold text-neutral-700 hover:text-neutral-500"
                     >
                       {author.displayName ?? author.handle}{" "}
                     </Link>
@@ -90,15 +91,15 @@ export default function NotificationItem(props: Props) {
                 {allAuthors?.length === 1 && (
                   <Link
                     href={`/dashboard/user/${author.handle}`}
-                    className="font-semibold break-all text-neutral-700 hover:text-neutral-500"
+                    className="break-all font-semibold text-neutral-700 hover:text-neutral-500"
                   >
                     {author.displayName ?? author.handle}{" "}
                   </Link>
                 )}
-                <span className="text-neutral-700 font-medium break-words">
+                <span className="break-words font-medium text-neutral-700">
                   {getNotificationLabel(reason)}
                 </span>
-                <span className="text-neutral-400 font-medium whitespace-nowrap">
+                <span className="whitespace-nowrap font-medium text-neutral-400">
                   &nbsp;· {getRelativeTime(indexedAt)}
                 </span>
                 {subjectUri && (
@@ -113,12 +114,14 @@ export default function NotificationItem(props: Props) {
   } else {
     return (
       <div
-        className={`flex flex-col justify-between p-3 border border-x-0 md:border-x first:border-t last:border-b even:[&:not(:last-child)]:border-b-0 odd:[&:not(:last-child)]:border-b-0 first:md:rounded-t-2xl ${
+        className={`flex flex-col justify-between border border-x-0 p-3 first:border-t last:border-b md:border-x first:md:rounded-t-2xl odd:[&:not(:last-child)]:border-b-0 even:[&:not(:last-child)]:border-b-0 ${
           !isRead && "bg-neutral-100"
         }`}
       >
         <NotificationPost uri={notification.uri} filter={filter} />
       </div>
     );
   }
-}
+});
+
+export default NotificationItem;
diff --git a/src/components/contentDisplay/profileCard/ProfileCard.tsx b/src/components/contentDisplay/profileCard/ProfileCard.tsx
@@ -2,13 +2,14 @@ import { ProfileView } from "@atproto/api/dist/client/types/app/bsky/actor/defs"
 import Avatar from "@/components/dataDisplay/avatar/Avatar";
 import Link from "next/link";
 import ViewerInfo from "@/components/dataDisplay/viewerInfo/ViewerInfo";
+import { memo } from "react";
 
 interface Props {
   profile: ProfileView;
   rounded?: boolean;
 }
 
-export default function ProfileCard(props: Props) {
+const ProfileCard = memo(function ProfileCard(props: Props) {
   const { profile, rounded = true } = props;
 
   return (
@@ -51,4 +52,6 @@ export default function ProfileCard(props: Props) {
       </article>
     </Link>
   );
-}
+});
+
+export default ProfileCard;
diff --git a/src/components/contentDisplay/searchPost/SearchPost.tsx b/src/components/contentDisplay/searchPost/SearchPost.tsx
@@ -9,14 +9,15 @@ import { getRelativeTime } from "@/lib/utils/time";
 import { AppBskyFeedDefs } from "@atproto/api";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
+import { memo } from "react";
 
 interface Props {
   post: AppBskyFeedDefs.PostView;
   isReply?: boolean;
   hasReply?: boolean;
 }
 
-export default function SearchPost(props: Props) {
+const SearchPost = memo(function SearchPost(props: Props) {
   const { post } = props;
   const { author, indexedAt } = post;
   const router = useRouter();
@@ -26,10 +27,10 @@ export default function SearchPost(props: Props) {
       onClick={(e) => {
         e.stopPropagation();
         router.push(
-          `/dashboard/user/${post.author.handle}/post/${getPostId(post.uri)}`
+          `/dashboard/user/${post.author.handle}/post/${getPostId(post.uri)}`,
         );
       }}
-      className="p-3 border border-x-0 md:border-x last:border-b even:[&:not(:last-child)]:border-b-0 odd:[&:not(:last-child)]:border-b-0 hover:cursor-pointer"
+      className="border border-x-0 p-3 last:border-b hover:cursor-pointer md:border-x odd:[&:not(:last-child)]:border-b-0 even:[&:not(:last-child)]:border-b-0"
     >
       <div className="relative flex items-start gap-3">
         <Link
@@ -41,7 +42,7 @@ export default function SearchPost(props: Props) {
         >
           <Avatar src={author.avatar} size="md" />
         </Link>
-        <div className="flex flex-col grow">
+        <div className="flex grow flex-col">
           <div className="flex">
             <Link
               href={`/dashboard/user/${author.handle}`}
@@ -50,14 +51,14 @@ export default function SearchPost(props: Props) {
               }}
               className="flex gap-1"
             >
-              <span className="font-semibold break-all max-w-[90%] shrink-0 line-clamp-1 overflow-ellipsis text-neutral-700 hover:text-neutral-500">
+              <span className="line-clamp-1 max-w-[90%] shrink-0 overflow-ellipsis break-all font-semibold text-neutral-700 hover:text-neutral-500">
                 {author.displayName ?? author.handle}{" "}
               </span>
-              <span className="text-neutral-400 font-medium line-clamp-1 break-all shrink min-w-[10%]">
+              <span className="line-clamp-1 min-w-[10%] shrink break-all font-medium text-neutral-400">
                 @{author.handle}
               </span>
             </Link>
-            <span className="text-neutral-400 font-medium whitespace-nowrap">
+            <span className="whitespace-nowrap font-medium text-neutral-400">
               &nbsp;· {getRelativeTime(indexedAt)}
             </span>
           </div>
@@ -70,4 +71,6 @@ export default function SearchPost(props: Props) {
       </div>
     </article>
   );
-}
+});
+
+export default SearchPost;
diff --git a/src/containers/settings/settingsContainer/InviteCodes.tsx b/src/containers/settings/settingsContainer/InviteCodes.tsx
@@ -1,10 +1,12 @@
 "use client";
 
 import { InviteCode } from "@atproto/api/dist/client/types/com/atproto/server/defs";
+import Link from "next/link";
 import { useCallback, useState } from "react";
 import toast from "react-hot-toast";
 import { BiSolidCopy } from "react-icons/bi";
 import { FaTicket } from "react-icons/fa6";
+import { PiWarningCircleFill } from "react-icons/pi";
 import { useClipboard } from "use-clipboard-copy";
 
 interface Props {
@@ -22,19 +24,19 @@ export default function InviteCodes(props: Props) {
       clipboard.copy(code);
       toast.success("Code copied to clipboard");
     },
-    [clipboard]
+    [clipboard],
   );
 
   return (
     <>
       <button
         disabled={codes.length === 0}
         onClick={() => setIsOpen((prev) => !prev)}
-        className={`flex items-center gap-2 p-3 mt-2 w-full border border-x-0 md:border-x rounded-none md:rounded-2xl hover:bg-neutral-50 disabled:opacity-30 disabled:contrast-75 disabled:hover:brightness-100 disabled:cursor-not-allowed ${
+        className={`mt-2 flex w-full items-center gap-2 rounded-none border border-x-0 p-3 hover:bg-neutral-50 disabled:cursor-not-allowed disabled:opacity-30 disabled:contrast-75 disabled:hover:brightness-100 md:rounded-2xl md:border-x ${
           isOpen ? "border-b-0 md:rounded-b-none" : "md:rounded-2xl"
         }`}
       >
-        <FaTicket className="text-neutral-600 text-xl" />
+        <FaTicket className="text-xl text-neutral-600" />
         {unusedCodes.length} available
       </button>
 
@@ -44,12 +46,26 @@ export default function InviteCodes(props: Props) {
             <button
               key={code.code}
               onClick={() => handleCopy(code.code)}
-              className="flex items-center gap-2 p-3 border border-x-0 md:border-x md:last:rounded-b-2xl last:border-b even:[&:not(:last-child)]:border-b-0 odd:[&:not(:last-child)]:border-b-0 hover:bg-neutral-50"
+              className="flex items-center gap-2 border border-x-0 p-3 last:border-b hover:bg-neutral-50 md:border-x md:last:rounded-b-2xl odd:[&:not(:last-child)]:border-b-0 even:[&:not(:last-child)]:border-b-0"
             >
-              <BiSolidCopy className="text-neutral-600 text-xl" />
+              <BiSolidCopy className="shrink-0 text-xl text-neutral-600" />
               <span>{code.code}</span>
             </button>
           ))}
+          <div className="flex items-center gap-2 border border-x-0 p-3 last:border-b hover:bg-neutral-50 md:border-x md:last:rounded-b-2xl odd:[&:not(:last-child)]:border-b-0 even:[&:not(:last-child)]:border-b-0">
+            <PiWarningCircleFill className="shrink-0 text-xl text-neutral-600" />
+            <p>
+              Note: You can now
+              <Link
+                href="https://bsky.social/about/blog/02-06-2024-join-bluesky"
+                className="text-primary hover:text-primary-dark"
+              >
+                {" "}
+                join Bluesky without an invite code!{" "}
+              </Link>
+              For now, this section is kept as a memento.
+            </p>
+          </div>
         </div>
       )}
     </>