refactor: update user profile photo handling and improve article feed query structure

Author: kingRayhan

package.json

@@ -65,7 +65,7 @@
     "recharts": "^2.15.1",
     "schema-dts": "^1.1.5",
     "sonner": "^2.0.5",
-    "sqlkit": "^1.0.15",
+    "sqlkit": "^1.0.17",
     "tailwind-merge": "^3.0.2",
     "tw-animate-css": "^1.2.4",
     "use-immer": "^0.11.0",

src/app/[username]/(profile-page)/articles/UserArticleFeed.tsx

@@ -16,11 +16,22 @@ const UserArticleFeed: React.FC<UserArticleFeedProps> = ({ userId }) => {
   const feedInfiniteQuery = useInfiniteQuery({
     queryKey: ["user-article-feed", userId],
     queryFn: ({ pageParam }) =>
-      articleActions.userArticleFeed({
-        user_id: userId,
-        limit: 5,
-        page: pageParam,
-      }),
+      articleActions.userArticleFeed(
+        {
+          user_id: userId,
+          limit: 5,
+          page: pageParam,
+        },
+        [
+          "id",
+          "title",
+          "handle",
+          "cover_image",
+          "body",
+          "created_at",
+          "excerpt",
+        ]
+      ),
     initialPageParam: 1,
     getNextPageParam: (lastPage) => {
       const _page = lastPage?.meta?.currentPage ?? 1;
@@ -46,6 +57,8 @@ const UserArticleFeed: React.FC<UserArticleFeedProps> = ({ userId }) => {
         </div>
       )}
 
+      {/* <pre>{JSON.stringify(feedArticles, null, 2)}</pre> */}
+
       {feedArticles?.map((article) => (
         <ArticleCard
           key={article?.id}
@@ -59,7 +72,7 @@ const UserArticleFeed: React.FC<UserArticleFeedProps> = ({ userId }) => {
             avatar: getFileUrl(article?.user?.profile_photo) ?? "",
             username: article?.user?.username ?? "",
           }}
-          publishedAt={article?.created_at.toDateString() ?? ""}
+          publishedAt={article?.created_at?.toDateString() ?? ""}
           readingTime={readingTime(article?.body ?? "")}
         />
       ))}

src/app/[username]/(profile-page)/articles/page.tsx

@@ -1,7 +1,7 @@
+import { getUserByUsername } from "@/backend/services/user.action";
 import { sanitizedUsername } from "@/lib/utils";
 import React from "react";
 import UserArticleFeed from "./UserArticleFeed";
-import { getUserByUsername } from "@/backend/services/user.action";
 
 interface PageProps {
   params: Promise<{ username: string }>;
@@ -13,6 +13,7 @@ const Page: React.FC<PageProps> = async ({ params }) => {
 
   return (
     <main className="border rounded-bl-2xl rounded-br-2xl md:col-span-9 col-span-full">
+      {/* <pre>{JSON.stringify(profile, null, 2)}</pre> */}
       <UserArticleFeed userId={profile?.id!} />
     </main>
   );

src/backend/persistence/persistence-repositories.ts

@@ -16,7 +16,7 @@ import { pgClient } from "./clients";
 import { DatabaseTableName } from "./persistence-contracts";
 
 const repositoryConfig = {
-  // logging: true,
+  logging: true,
 };
 
 const userRepository = new Repository<User>(

src/backend/services/action-type.ts

@@ -15,7 +15,7 @@ export interface ISessionUser {
   name: string;
   username: string;
   email: string;
-  profile_photo: string;
+  profile_photo_url: string;
 }
 
 export type SessionResult =

src/backend/services/article.actions.ts

@@ -359,6 +359,7 @@ export async function userArticleFeed(
     const input = await ArticleRepositoryInput.userFeedInput.parseAsync(_input);
 
     const response = await persistenceRepository.article.paginate({
+      operationName: "userArticleFeed",
       where: and(
         eq("is_published", true),
         neq("approved_at", null),
@@ -367,19 +368,12 @@ export async function userArticleFeed(
       page: input.page,
       limit: input.limit,
       orderBy: [desc("published_at")],
-      columns: columns ?? [
-        "id",
-        "title",
-        "handle",
-        "cover_image",
-        "body",
-        "created_at",
-        "excerpt",
-      ],
+      columns,
       joins: [
         {
-          as: "tags",
+          as: "user",
           table: DatabaseTableName.users,
+          type: "left",
           on: {
             foreignField: "id",
             localField: "author_id",

src/backend/services/session.actions.ts

@@ -11,6 +11,7 @@ import { persistenceRepository } from "../persistence/persistence-repositories";
 import { handleActionException } from "./RepositoryException";
 import { SessionResult, USER_SESSION_KEY } from "./action-type";
 import { UserSessionInput } from "./inputs/session.input";
+import getFileUrl from "@/utils/getFileUrl";
 
 /**
  * Creates a new login session for a user and sets a session cookie.
@@ -64,6 +65,7 @@ export const validateSessionToken = async (
   token: string
 ): Promise<SessionResult> => {
   const [session] = await persistenceRepository.userSession.find({
+    operationName: "validateSessionToken/userSession.find",
     limit: 1,
     where: eq("token", token),
     columns: ["id", "user_id", "token", "device"],
@@ -73,13 +75,15 @@ export const validateSessionToken = async (
   }
 
   await persistenceRepository.userSession.update({
+    operationName: "validateSessionToken/userSession.update--",
     where: eq("id", session.id),
     data: {
       last_action_at: new Date(),
     },
   });
 
   const [user] = await persistenceRepository.user.find({
+    operationName: "validateSessionToken/user.find",
     limit: 1,
     where: eq("id", session.user_id),
     columns: ["id", "name", "username", "email", "profile_photo"],
@@ -96,7 +100,7 @@ export const validateSessionToken = async (
       name: user?.name,
       username: user?.username,
       email: user?.email,
-      profile_photo: user?.profile_photo,
+      profile_photo_url: getFileUrl(user?.profile_photo),
     },
   };
 };

src/backend/services/user.action.ts

@@ -147,6 +147,7 @@ export async function getUserByUsername(
 ): Promise<User | null> {
   try {
     const [user] = await persistenceRepository.user.find({
+      operationName: "getUserByUsername",
       where: eq("username", username),
       limit: 1,
       columns: columns ? columns : undefined,

src/components/ArticleCard.tsx

@@ -111,8 +111,6 @@ const ArticleCard = ({
         )}
       </div>
 
-      <pre>{JSON.stringify(author, null, 2)}</pre>
-
       <div className="mt-4 flex items-center justify-between">
         <ResourceReaction resource_type="ARTICLE" resource_id={id} />
         <ResourceBookmark resource_type="ARTICLE" resource_id={id} />

src/components/Navbar/AuthenticatedUserMenu.tsx

@@ -33,7 +33,7 @@ const AuthenticatedUserMenu = () => {
     <DropdownMenu>
       <DropdownMenuTrigger>
         <Avatar>
-          <AvatarImage src={authSession?.user?.profile_photo ?? ""} />
+          <AvatarImage src={authSession?.user?.profile_photo_url ?? ""} />
           <AvatarFallback>{authSession?.user?.name.charAt(0)}</AvatarFallback>
         </Avatar>
       </DropdownMenuTrigger>