Merge pull request #231 from FleetAdmiralJakob/chats-redesign

Chat Position
FleetAdmiralJakob · Jun 15, 2024 · 2bda4e2 · 2bda4e2
2 parents e081a6b + 82c2608
commit 2bda4e2
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 23 deletions.
diff --git a/convex/chats.ts b/convex/chats.ts
@@ -151,10 +151,12 @@ export const getChats = query({
           ...chat,
           users: await chat.edge("users"),
           numberOfUnreadMessages: numberOfUnreadMessages,
-          lastMessage: {
-            ...latestMessage,
-            readBy,
-          },
+          lastMessage: latestMessage
+            ? {
+                ...latestMessage,
+                readBy,
+              }
+            : null,
         };
       });
   },

diff --git a/src/components/chat-overview.tsx b/src/components/chat-overview.tsx
@@ -20,6 +20,18 @@ const Chats: React.FC<{
   classNameChatList?: string;
 }> = ({ classNameChatList }) => {
   const chats = useQuery(api.chats.getChats);
+  chats?.sort((a, b) => {
+    const aLatestTime = Math.max(
+      new Date(a._creationTime || 0).getTime(),
+      a.lastMessage ? new Date(a.lastMessage._creationTime || 0).getTime() : 0,
+    );
+    const bLatestTime = Math.max(
+      new Date(b._creationTime || 0).getTime(),
+      b.lastMessage ? new Date(b.lastMessage._creationTime || 0).getTime() : 0,
+    );
+
+    return bLatestTime - aLatestTime;
+  });
   const clerkUser = useUser();
   const [searchTerm, setSearchTerm] = useState("");
   const [searchedChats, setSearchedChats] = useState<Chats | null | undefined>(
@@ -99,16 +111,16 @@ const Chats: React.FC<{
                           <Badge>Support</Badge>
                         </div>
                         <p className="ml-4 mt-0.5 text-sm text-destructive-foreground">
-                          {chat.lastMessage.content != "" ? (
-                            chat.lastMessage.content != undefined ? (
-                              chat.lastMessage.readBy.some(
+                          {chat.lastMessage?.content != "" ? (
+                            chat.lastMessage?.content != undefined ? (
+                              chat.lastMessage?.readBy.some(
                                 (user) =>
                                   user.username === clerkUser.user?.username,
                               ) ? (
-                                chat.lastMessage?.content
+                                chat.lastMessage.content
                               ) : (
                                 <p className="truncate font-bold">
-                                  {chat.lastMessage?.content}
+                                  {chat.lastMessage.content}
                                 </p>
                               )
                             ) : (
@@ -166,12 +178,12 @@ const Chats: React.FC<{
                           <p
                             className={cn(
                               "mt-0.5 w-10/12 truncate text-sm font-normal text-destructive-foreground",
-                              { "w-full": chat.lastMessage.content == "" },
+                              { "w-full": chat.lastMessage?.content == "" },
                             )}
                           >
-                            {chat.lastMessage.content != "" ? (
-                              chat.lastMessage.content != undefined ? (
-                                chat.lastMessage.readBy.some(
+                            {chat.lastMessage?.content != "" ? (
+                              chat.lastMessage?.content != undefined ? (
+                                chat.lastMessage?.readBy.some(
                                   (user) =>
                                     user.username === clerkUser.user?.username,
                                 ) ? (
@@ -203,16 +215,16 @@ const Chats: React.FC<{
                             <Badge>Tool</Badge>
                           </div>
                           <p className="mt-0.5 w-10/12 truncate text-sm font-normal text-destructive-foreground">
-                            {chat.lastMessage.content != "" ? (
-                              chat.lastMessage.content != undefined ? (
-                                chat.lastMessage.readBy.some(
+                            {chat.lastMessage?.content != "" ? (
+                              chat.lastMessage?.content != undefined ? (
+                                chat.lastMessage?.readBy.some(
                                   (user) =>
                                     user.username === clerkUser.user?.username,
                                 ) ? (
-                                  chat.lastMessage?.content
+                                  chat.lastMessage.content
                                 ) : (
                                   <p className="truncate font-bold">
-                                    {chat.lastMessage?.content}
+                                    {chat.lastMessage.content}
                                   </p>
                                 )
                               ) : (
@@ -232,9 +244,9 @@ const Chats: React.FC<{
                     </div>
                   </div>
                   <div className="flex">
-                    {chat.lastMessage.content != "" ? (
-                      chat.lastMessage.content != undefined ? (
-                        chat.lastMessage.readBy.some(
+                    {chat.lastMessage?.content != "" ? (
+                      chat.lastMessage?.content != undefined ? (
+                        chat.lastMessage?.readBy.some(
                           (user) => user.username === clerkUser.user?.username,
                         ) ? (
                           ""

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -14,13 +14,13 @@
 
 /* Handle */
 ::-webkit-scrollbar-thumb {
-  background: #b0b0b0;
+  background: #6E6E6E;
   border-radius: 12px;
 }
 
 /* Handle on hover */
 ::-webkit-scrollbar-thumb:hover {
-  background: #b0b0b0;
+  background: #8E8E8E;
   border-radius: 12px;
 }