joining with profiles instead of user

Author: webdevcody

package.json

@@ -4,9 +4,11 @@
   "sideEffects": false,
   "type": "module",
   "scripts": {
-    "dev": "vite dev",
+    "dev": "npm run docker:up && vite dev",
     "build": "vite build",
     "start": "npm run db:migrate && node .output/server/index.mjs",
+    "docker:up": "docker compose up -d",
+    "docker:down": "docker compose down",
     "db:push": "drizzle-kit push --config=drizzle.config.ts",
     "db:migrate": "tsx ./src/db/migrate.ts",
     "db:generate": "drizzle-kit generate --config=drizzle.config.ts",

src/data-access/comments.ts

@@ -8,11 +8,11 @@ export async function getComments(segmentId: number) {
   return database.query.comments.findMany({
     where: and(eq(comments.segmentId, segmentId), isNull(comments.parentId)),
     with: {
-      user: true,
+      profile: true,
       children: {
         with: {
-          user: true,
-          repliedTo: true,
+          profile: true,
+          repliedToProfile: true,
         },
       },
     },

src/db/schema.ts

@@ -175,9 +175,9 @@ export const segmentsRelations = relations(segments, ({ one, many }) => ({
 }));
 
 export const commentsRelations = relations(comments, ({ one, many }) => ({
-  user: one(users, {
+  profile: one(profiles, {
     fields: [comments.userId],
-    references: [users.id],
+    references: [profiles.userId],
   }),
   segment: one(segments, {
     fields: [comments.segmentId],
@@ -191,9 +191,9 @@ export const commentsRelations = relations(comments, ({ one, many }) => ({
   children: many(comments, {
     relationName: "parent",
   }),
-  repliedTo: one(users, {
+  repliedToProfile: one(profiles, {
     fields: [comments.repliedToId],
-    references: [users.id],
+    references: [profiles.userId],
   }),
 }));
 

src/hooks/mutations/use-create-comment.ts

@@ -23,8 +23,15 @@ export function useCreateComment() {
       const newComment: CommentsWithUser[number] = {
         id: Math.random(),
         content: variables.content,
-        user: user,
         userId: user.id,
+        profile: {
+          id: user.id,
+          displayName: user.email,
+          image: null,
+          userId: user.id,
+          imageId: null,
+          bio: "",
+        },
         segmentId: segment.id,
         createdAt: new Date(),
         updatedAt: new Date(),

src/routes/learn/$slug/-components/comment-list.tsx

@@ -63,7 +63,7 @@ function CommentItem({ comment, level = 0 }: CommentItemProps) {
 
   const isEditingThis = editingCommentId === comment.id;
   const isReplyingToThis = replyingToCommentId === comment.id;
-  const isOwner = user && comment.user.email === user.email;
+  const isOwner = user && comment.profile.userId === user.id;
 
   const handleEdit = (commentId: number) => {
     setEditingCommentId(commentId);
@@ -153,7 +153,7 @@ function CommentItem({ comment, level = 0 }: CommentItemProps) {
           segmentId: segment.id,
           content: replyContent,
           parentId: rootParentId,
-          repliedToId: comment.user.id,
+          repliedToId: comment.profile.userId,
         },
         {
           onSuccess: () => {
@@ -200,7 +200,7 @@ function CommentItem({ comment, level = 0 }: CommentItemProps) {
               <div className="flex shrink-0 size-10 rounded-full overflow-hidden bg-gradient-to-br from-theme-100 to-theme-200 dark:from-theme-800 dark:to-theme-700 shadow-elevation-1 hover:shadow-elevation-2 transition-all duration-200">
                 <img
                   className="max-h-10 w-auto object-cover"
-                  src={`https://api.dicebear.com/9.x/initials/svg?seed=${comment.user.email}&backgroundColor=6366f1&textColor=ffffff`}
+                  src={`https://api.dicebear.com/9.x/initials/svg?seed=${comment.profile.displayName}&backgroundColor=6366f1&textColor=ffffff`}
                   alt="User avatar"
                 />
               </div>
@@ -210,7 +210,7 @@ function CommentItem({ comment, level = 0 }: CommentItemProps) {
                 <div className="flex items-start justify-between gap-2">
                   <div className="flex items-center gap-2 min-w-0 flex-wrap">
                     <p className="text-sm font-semibold text-foreground truncate">
-                      {comment.user.email}
+                      {comment.profile.displayName}
                     </p>
 
                     {/* Visual separator */}
@@ -221,7 +221,7 @@ function CommentItem({ comment, level = 0 }: CommentItemProps) {
                     </p>
 
                     {/* Reply indicator */}
-                    {comment.repliedTo && (
+                    {comment.repliedToProfile && (
                       <>
                         <span className="text-xs text-muted-foreground/60">
                           •
@@ -231,7 +231,7 @@ function CommentItem({ comment, level = 0 }: CommentItemProps) {
                           <span className="text-xs text-muted-foreground">
                             replying to{" "}
                             <span className="font-medium text-theme-600 dark:text-theme-400 hover:text-theme-700 dark:hover:text-theme-300 transition-colors">
-                              {comment.repliedTo.email}
+                              {comment.repliedToProfile.displayName}
                             </span>
                           </span>
                         </div>
@@ -350,7 +350,7 @@ function CommentItem({ comment, level = 0 }: CommentItemProps) {
                               <div className="flex shrink-0 size-8 rounded-full overflow-hidden bg-gradient-to-br from-theme-100 to-theme-200 dark:from-theme-800 dark:to-theme-700 shadow-elevation-1">
                                 <img
                                   className="max-h-8 w-auto object-cover"
-                                  src={`https://api.dicebear.com/9.x/initials/svg?seed=${user?.email || "user"}&backgroundColor=6366f1&textColor=ffffff`}
+                                  src={`https://api.dicebear.com/9.x/initials/svg?seed=${user?.id || "user"}&backgroundColor=6366f1&textColor=ffffff`}
                                   alt="Your avatar"
                                 />
                               </div>
@@ -450,10 +450,8 @@ function CommentItem({ comment, level = 0 }: CommentItemProps) {
 }
 
 export function CommentList({
-  showCommentForm,
   onStartDiscussion,
 }: {
-  showCommentForm?: boolean;
   onStartDiscussion?: () => void;
 }) {
   const { segment } = useLoaderData({ from: "/learn/$slug/_layout/" });

src/routes/learn/$slug/-components/comments-panel.tsx

@@ -92,10 +92,7 @@ export function CommentsPanel({
             </div>
           }
         >
-          <CommentList
-            showCommentForm={showCommentForm}
-            onStartDiscussion={onStartDiscussion}
-          />
+          <CommentList onStartDiscussion={onStartDiscussion} />
         </Suspense>
       </div>
     </div>