Merge branch 'preview'

pdelfan · Jan 24, 2024 · dc4e08a · dc4e08a
2 parents 5015dd1 + e35c9c9
commit dc4e08a
Show file tree

Hide file tree

Showing 9 changed files with 75 additions and 18 deletions.
diff --git a/src/components/contentDisplay/profileCard/ProfileCardSkeleton.tsx b/src/components/contentDisplay/profileCard/ProfileCardSkeleton.tsx
@@ -8,7 +8,7 @@ export function Skeleton(props: Props) {
     <article
       className={`p-3 border border-x-0 md:border-x animate-pulse ${
         rounded && "md:first:rounded-t-2xl"
-      } md:last:rounded-b-2xl last:border-b even:[&:not(:last-child)]:border-b-0 odd:[&:not(:last-child)]:border-b-0 hover:bg-gray-50`}
+      } md:last:rounded-b-2xl last:border-b even:[&:not(:last-child)]:border-b-0 odd:[&:not(:last-child)]:border-b-0`}
     >
       <div className="flex flex-wrap justify-between gap-3">
         <div className="flex flex-wrap gap-2 items-center">

diff --git a/src/components/contentDisplay/profileHeader/ProfileHeader.tsx b/src/components/contentDisplay/profileHeader/ProfileHeader.tsx
@@ -18,6 +18,8 @@ import ViewerInfo from "@/components/dataDisplay/viewerInfo/ViewerInfo";
 import ProfileBio from "@/components/dataDisplay/profileBio/ProfileBio";
 import usePreferences from "@/lib/hooks/bsky/actor/usePreferences";
 import EditProfile from "@/components/actions/editProfile/EditProfile";
+import { getFormattedDate } from "@/lib/utils/time";
+import JoinedDate from "@/components/dataDisplay/joinedDate/JoinedDate";
 
 interface Props {
   handle: string;
@@ -146,11 +148,14 @@ export default function ProfileHeader(props: Props) {
             <h2 className="text-neutral-400 font-medium break-all">
               @{profile?.handle}
             </h2>
-
             {profile?.description && (
               <ProfileBio description={profile.description} />
             )}
-
+            {profile?.createdAt && (
+              <div className="my-2">
+                <JoinedDate date={profile.createdAt} />
+              </div>
+            )}
             {profile?.handle && (
               <FollowInfo
                 handle={profile?.handle}

diff --git a/src/components/contentDisplay/profileHeader/ProfileHeaderSkeleton.tsx b/src/components/contentDisplay/profileHeader/ProfileHeaderSkeleton.tsx
@@ -4,14 +4,14 @@ import SkeletonBanner from "@/assets/images/skeletonBanner.png";
 function Skeleton() {
   return (
     <div className="flex flex-col items-center">
-      <div className="bg-gray-200 w-20 h-6 rounded" />
+      <div className="bg-gray-200 w-20 h-8 rounded" />
     </div>
   );
 }
 
 function TabsSkeleton() {
   return (
-    <div className="flex flex-nowrap gap-6 px-3 overflow-auto no-scrollbar">
+    <div className="flex flex-nowrap gap-6 px-3 mt-5 overflow-auto no-scrollbar">
       <Skeleton />
       <Skeleton />
       <Skeleton />
@@ -21,7 +21,7 @@ function TabsSkeleton() {
 
 export default function ProfileHeaderSkeleton() {
   return (
-    <section className="border md:rounded-t-2xl overflow-hidden animate-pulse">
+    <section className="md:border md:rounded-t-2xl overflow-hidden animate-pulse">
       <div className="relative">
         <Image
           src={SkeletonBanner}
@@ -41,11 +41,13 @@ export default function ProfileHeaderSkeleton() {
         </div>
       </div>
 
-      <div className="p-4">
+      <div className="p-3">
         <div className="h-6 bg-gray-200 rounded w-2/6 mb-2" />
         <div className="h-4 bg-gray-200 rounded w-1/2 mb-5" />
-        <div className="h-4 bg-gray-200 rounded w-full mb-4" />
-        <div className="flex items-center mt-3 gap-3">
+        <div className="h-4 bg-gray-200 rounded w-full mb-2" />
+        <div className="h-4 bg-gray-200 rounded w-2/3 mb-4" />
+        <div className="h-3 bg-gray-200 rounded w-1/3 my-3" />
+        <div className="flex items-center gap-3">
           <div className="flex gap-1">
             <div className="h-4 bg-gray-200 rounded w-8" />
             <div className="h-4 bg-gray-200 rounded w-16" />

diff --git a/src/components/dataDisplay/followInfo/FollowInfo.tsx b/src/components/dataDisplay/followInfo/FollowInfo.tsx
@@ -11,7 +11,7 @@ export default function FollowInfo(props: Props) {
   const { handle, followsCount, followersCount } = props;
 
   return (
-    <div className="flex flex-gap items-center mt-3 gap-3">
+    <div className="flex flex-gap items-center gap-3">
       <Link
         href={`/dashboard/user/${handle}/following`}
         className="flex gap-1 font-semibold text-neutral-700 hover:brightness-110"

diff --git a/src/components/dataDisplay/joinedDate/JoinedDate.tsx b/src/components/dataDisplay/joinedDate/JoinedDate.tsx
@@ -0,0 +1,22 @@
+import { BiCalendar } from "react-icons/bi";
+
+interface Props {
+  date: Date;
+}
+
+export default function JoinedDate(props: Props) {
+  const { date } = props;
+
+  return (
+    <div className="flex items-center gap-1">
+      <BiCalendar className="text-neutral-400" />
+      <span className="font-medium text-neutral-400 text-sm">
+        Joined {""}
+        {date.toLocaleDateString("en-US", {
+          year: "numeric",
+          month: "long",
+        })}
+      </span>
+    </div>
+  );
+}
diff --git a/src/containers/FeedContainer.tsx b/src/containers/FeedContainer.tsx
@@ -39,7 +39,7 @@ export default function FeedContainer(props: Props) {
   const feedFilter = preferences?.feedFilter;
 
   return (
-    <div>
+    <section>
       <Refetch
         onRefetch={() => {
           window.scrollTo({ top: 0, behavior: "smooth" });
@@ -51,7 +51,7 @@ export default function FeedContainer(props: Props) {
       {feedData &&
         contentFilter &&
         feedFilter &&
-        feedData?.pages.map((page, i) => (
+        feedData.pages.map((page, i) => (
           <div key={i}>
             {page.data.feed
               .filter((f) =>
@@ -80,6 +80,6 @@ export default function FeedContainer(props: Props) {
         !feedHasNextPage &&
         !isFetchingFeedNextPage && <EndOfFeed />}
       <div ref={observerRef} />
-    </div>
+    </section>
   );
 }
diff --git a/src/lib/hooks/bsky/actor/useProfile.tsx b/src/lib/hooks/bsky/actor/useProfile.tsx
@@ -2,6 +2,7 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import useAgent from "../useAgent";
 import { getProfile } from "@/lib/api/bsky/actor";
 import { follow, unfollow } from "@/lib/api/bsky/social";
+import { AppBskyActorDefs } from "@atproto/api";
 
 export const profileKey = (handle: string) => ["profile", handle];
 
@@ -10,7 +11,31 @@ export default function useProfile(handle: string) {
   const queryClient = useQueryClient();
   const { data, isLoading, isFetching, isRefetching } = useQuery({
     queryKey: profileKey(handle),
-    queryFn: () => getProfile(handle, agent),
+    queryFn: async (): Promise<
+      | (AppBskyActorDefs.ProfileViewDetailed & {
+          createdAt?: Date;
+        })
+      | undefined
+    > => {
+      const profile = await getProfile(handle, agent);
+      if (profile) {
+        // actor creation date
+        const result = await fetch(
+          `https://plc.directory/${profile.did}/log/audit`
+        );
+        if (result.ok) {
+          const profileAuditLog = (await result.json()) as AuditLog;
+
+          if (profileAuditLog[0]?.createdAt) {
+            return {
+              ...profile,
+              createdAt: new Date(profileAuditLog[0].createdAt),
+            };
+          }
+        }
+        return profile;
+      }
+    },
   });
 
   const updateFollowCount = (mode: "decrease" | "increase") => {

diff --git a/src/lib/hooks/bsky/actor/useUpdateProfile.tsx b/src/lib/hooks/bsky/actor/useUpdateProfile.tsx
@@ -17,14 +17,12 @@ export function useUpdateProfile(props: Props) {
   const queryClient = useQueryClient();
   const mutation = useMutation({
     mutationFn: async () => {
-      if (!displayName && !description && !banner && !avatar) return;
-
       await agent.upsertProfile(async (existing) => {
         const profile = existing || {};
-        if (displayName) {
+        if (displayName || displayName === "") {
           profile.displayName = displayName;
         }
-        if (description) {
+        if (description || description === "") {
           profile.description = description;
         }
         if (banner) {

diff --git a/types/data.ts b/types/data.ts
@@ -36,3 +36,8 @@ interface LinkMeta {
   description?: string;
   image?: string;
 }
+
+type AuditLog = {
+  cid: string;
+  createdAt: string;
+}[];