From 8914c7c3573a2f2047df80718fca1e6e9721fefa Mon Sep 17 00:00:00 2001
From: Stan Girard <girard.stanislas@gmail.com>
Date: Mon, 18 Sep 2023 18:25:28 +0200
Subject: [PATCH] fix(chats): now in order and with a little bonus ;) (#1200)

* fix(chats): now in order and with a little bonus ;)

* style(eslint): fixed
---
 backend/models/databases/supabase/chats.py    |  1 +
 .../ChatsListItem/ChatsListItem.tsx           |  2 +-
 .../app/chat/components/ChatsList/index.tsx   | 29 ++++++++++++++++--
 frontend/lib/utils.ts                         | 30 +++++++++++++++++++
 4 files changed, 59 insertions(+), 3 deletions(-)

diff --git a/backend/models/databases/supabase/chats.py b/backend/models/databases/supabase/chats.py
index 7952eed86..9fa5bb54e 100644
--- a/backend/models/databases/supabase/chats.py
+++ b/backend/models/databases/supabase/chats.py
@@ -46,6 +46,7 @@ class Chats(Repository):
             self.db.from_("chats")
             .select("chat_id,user_id,creation_time,chat_name")
             .filter("user_id", "eq", user_id)
+            .order("creation_time", desc=False)
             .execute()
         )
         return response
diff --git a/frontend/app/chat/components/ChatsList/components/ChatsListItem/ChatsListItem.tsx b/frontend/app/chat/components/ChatsList/components/ChatsListItem/ChatsListItem.tsx
index ed0d81b19..637164f48 100644
--- a/frontend/app/chat/components/ChatsList/components/ChatsListItem/ChatsListItem.tsx
+++ b/frontend/app/chat/components/ChatsList/components/ChatsListItem/ChatsListItem.tsx
@@ -25,7 +25,7 @@ export const ChatsListItem = ({ chat }: ChatsListItemProps): JSX.Element => {
   return (
     <div
       className={cn(
-        "w-full border-b border-black/10 dark:border-white/25 last:border-none relative group flex overflow-x-hidden hover:bg-gray-100 dark:hover:bg-gray-800",
+        "w-full relative group flex overflow-x-hidden hover:bg-gray-100 dark:hover:bg-gray-800",
         selected
           ? "bg-gray-100 dark:bg-gray-800 text-primary dark:text-white"
           : ""
diff --git a/frontend/app/chat/components/ChatsList/index.tsx b/frontend/app/chat/components/ChatsList/index.tsx
index f3e405351..662161db3 100644
--- a/frontend/app/chat/components/ChatsList/index.tsx
+++ b/frontend/app/chat/components/ChatsList/index.tsx
@@ -1,9 +1,10 @@
+/* eslint-disable complexity */
 "use client";
 import { motion, MotionConfig } from "framer-motion";
 import { MdChevronRight } from "react-icons/md";
 
 import { useChatsContext } from "@/lib/context/ChatsProvider/hooks/useChatsContext";
-import { cn } from "@/lib/utils";
+import { cn, isToday, isWithinLast30Days, isWithinLast7Days, isYesterday } from "@/lib/utils";
 
 import { ChatsListItem } from "./components/ChatsListItem";
 import { MiniFooter } from "./components/ChatsListItem/components/MiniFooter";
@@ -16,6 +17,13 @@ export const ChatsList = (): JSX.Element => {
   const { open, setOpen } = useChatsList();
   useSelectedChatPage();
 
+ 
+  // Filtering chats into different groups
+  const todayChats = allChats.filter(chat => isToday(new Date(chat.creation_time)));
+  const yesterdayChats = allChats.filter(chat => isYesterday(new Date(chat.creation_time)));
+  const last7DaysChats = allChats.filter(chat => isWithinLast7Days(new Date(chat.creation_time)));
+  const last30DaysChats = allChats.filter(chat => isWithinLast30Days(new Date(chat.creation_time)));
+
   return (
     <MotionConfig transition={{ mass: 1, damping: 10 }}>
       <motion.div
@@ -48,9 +56,26 @@ export const ChatsList = (): JSX.Element => {
               data-testid="chats-list-items"
               className="flex-1 overflow-auto scrollbar h-full"
             >
-              {allChats.map((chat) => (
+              {todayChats.length > 0 && <div className="bg-gray-100 text-black rounded-md px-3 py-1 mt-2">Today</div>}
+              {todayChats.map((chat) => (
                 <ChatsListItem key={chat.chat_id} chat={chat} />
               ))}
+
+              {yesterdayChats.length > 0 && <div className="bg-gray-100 text-black rounded-md px-3 py-1 mt-2">Yesterday</div>}
+              {yesterdayChats.map((chat) => (
+                <ChatsListItem key={chat.chat_id} chat={chat} />
+              ))}
+
+              {last7DaysChats.length > 0 && <div className="bg-gray-100 text-black rounded-md px-3 py-1 mt-2">Previous 7 Days</div>}
+              {last7DaysChats.map((chat) => (
+                <ChatsListItem key={chat.chat_id} chat={chat} />
+              ))}
+
+              {last30DaysChats.length > 0 && <div className="bg-gray-100 text-black rounded-md px-3 py-1 mt-2">Previous 30 Days</div>}
+              {last30DaysChats.map((chat) => (
+                <ChatsListItem key={chat.chat_id} chat={chat} />
+              ))}
+
             </div>
             <MiniFooter />
           </div>
diff --git a/frontend/lib/utils.ts b/frontend/lib/utils.ts
index 5ac647a0f..d95e132b7 100644
--- a/frontend/lib/utils.ts
+++ b/frontend/lib/utils.ts
@@ -4,3 +4,33 @@ import { twMerge } from "tailwind-merge";
 export const cn = (...inputs: ClassValue[]): string => {
   return twMerge(clsx(inputs));
 };
+
+
+const isToday = (date: Date): boolean => {
+  const today = new Date();
+
+  return date.toDateString() === today.toDateString();
+};
+
+const isYesterday = (date: Date): boolean => {
+  const yesterday = new Date();
+  yesterday.setDate(yesterday.getDate() - 1);
+
+  return date.toDateString() === yesterday.toDateString();
+};
+
+const isWithinLast7Days = (date: Date): boolean => {
+  const weekAgo = new Date();
+  weekAgo.setDate(weekAgo.getDate() - 7);
+
+  return date > weekAgo && !isToday(date) && !isYesterday(date);
+};
+
+const isWithinLast30Days = (date: Date): boolean => {
+  const monthAgo = new Date();
+  monthAgo.setDate(monthAgo.getDate() - 30);
+
+  return date > monthAgo && !isToday(date) && !isYesterday(date) && !isWithinLast7Days(date);
+};
+
+export { isToday, isWithinLast30Days, isWithinLast7Days, isYesterday };