fix: make changes to api call, conditional styling and state manageme…

…nt for threads

packages/app-akeru/src/app/(dashboard)/threads/features/assistants-list/assistants-list.tsx

@@ -4,16 +4,21 @@ import useAssistant from "./use-assistant";
 import { cn } from "@/lib/utils";
 import { Combobox } from "@/components/ui/combobox";
 
-
-
 const AssistantsList = () => {
   const { isFetchingAssistants, assistants } = useAssistant();
   return (
-    <div className={cn("w-96 rounded-md bg-white p-4 shadow-md", {
-      "animate-pulse": isFetchingAssistants
-    })}>
-      <Combobox 
-        items={assistants?.map((assistant: any) => ({ value: assistant.name, label: assistant.name })) || []}
+    <div
+      className={cn("w-96 rounded-md bg-white p-4 shadow-md", {
+        "animate-pulse": isFetchingAssistants,
+      })}
+    >
+      <Combobox
+        items={
+          assistants?.map((assistant: any) => ({
+            value: assistant.name,
+            label: assistant.name,
+          })) || []
+        }
         placeholder="Select assistant"
         value={""}
         onChange={(value) => console.log(value)}

packages/app-akeru/src/app/(dashboard)/threads/features/thread-list/threads-list-item.tsx

@@ -1,3 +1,4 @@
+import { cn } from "@/lib/utils";
 import React from "react";
 
 export interface ThreadsListItemProps {
@@ -10,7 +11,10 @@ export interface ThreadsListItemProps {
 const ThreadsListItem = (props: ThreadsListItemProps) => {
   return (
     <div
-      className={`max-w-52 px-2 py-1 duration-200 hover:bg-gray-600/75 hover:text-white ${props.isActive && "bg-gray-600/75 text-white"}`}
+      className={cn(
+        "max-w-52 px-2 py-1 duration-200 hover:bg-gray-600/75 hover:text-white",
+        { "bg-gray-600/75 text-white": props.isActive },
+      )}
     >
       <p className="overflow-hidden text-ellipsis whitespace-nowrap text-sm ">
         {props.title}

packages/app-akeru/src/app/(dashboard)/threads/features/thread-list/threads-list.tsx

@@ -1,30 +1,30 @@
 "use client";
+
 import React, { useState, useEffect } from "react";
 import { THREADS_LIST_MOCK_DATA } from "./test-data";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import ThreadsListItem from "./threads-list-item";
 import { Input } from "@/components/ui/input";
 import { Search } from "lucide-react";
 import { Skeleton } from "@/components/ui/skeleton";
+import useThreads from "./use-threads";
+import { useThreadStore } from "./useThreadStore";
+import { useRouter } from "next/navigation";
 
 const ThreadsList = () => {
-  const [isLoading, setIsLoading] = useState(true);
-  const [activeId, setActiveId] = useState("");
+  const router = useRouter();
+  const activeThread = useThreadStore((state) => state.activeId);
+  const setActiveThread = useThreadStore((state) => state.setActiveId);
 
-  useEffect(() => {
-    const fetchData = async () => {
-      setTimeout(() => {
-        setIsLoading(false);
-      }, 2000);
-    };
-    fetchData();
-  }, []);
+  const { isFetchingThreads, threads } = useThreads();
 
   const handleSetActiveId = (id: string) => {
-    setActiveId(id);
+    const parsedString = id.replace(/\s+/g, "-");
+    setActiveThread(id);
+    router.push(`/threads?${parsedString}`);
   };
 
-  const isActive = (id: string) => id === activeId;
+  const isActive = (id: string) => id === activeThread;
 
   return (
     <div className="w-64 rounded-md bg-white p-4 shadow-md">
@@ -36,7 +36,7 @@ const ThreadsList = () => {
         <div className="pointer-events-none absolute right-0 top-0 h-4/5 w-8 bg-gradient-to-r from-transparent to-white"></div>
         {/* This is just for the overflow gradient */}
         <div className="flex flex-col gap-4">
-          {isLoading
+          {isFetchingThreads
             ? Array.from({ length: THREADS_LIST_MOCK_DATA.length }).map(
                 (_, idx) => <Skeleton key={idx} className="h-8" />,
               )

packages/app-akeru/src/app/(dashboard)/threads/features/thread-list/use-threads.tsx

@@ -0,0 +1,20 @@
+import { axiosInstance } from "@/lib/axios";
+import useSWR from "swr";
+
+const threadsFetcher = async (_: string) => {
+  const response = await axiosInstance.get("/thread");
+  return response.data;
+};
+
+/**
+ * Fetches all threads related data, and provides all apis to mutate thread data.
+ */
+export default function useThreads() {
+  const {
+    data: threads,
+    error,
+    isLoading: isFetchingThreads,
+    mutate,
+  } = useSWR("assistant", threadsFetcher);
+  return { threads, error, mutate, isFetchingThreads };
+}

packages/app-akeru/src/app/(dashboard)/threads/features/thread-list/useThreadStore.ts

@@ -0,0 +1,11 @@
+import { create } from "zustand";
+
+interface ThreadState {
+  activeId: string;
+  setActiveId: (id: string) => void;
+}
+
+export const useThreadStore = create<ThreadState>((set) => ({
+  activeId: "",
+  setActiveId: (id: string) => set({ activeId: id }),
+}));

packages/app-akeru/src/lib/utils.ts

@@ -1,6 +1,6 @@
-import { type ClassValue, clsx } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }