Function ConversationList

src/components/Sidebar/ConversationList.tsx:13–121

()

}

const ConversationList = () => {
  const { t } = useTranslation();
  const layoutStore = useLayoutStore();
  const connectionStore = useConnectionStore();
  const conversationStore = useConversationStore();
  const [state, setState] = useState<State>({
    showUpdateConversationModal: false,
  });
  const [updateConversationModalContext, setUpdateConversationModalContext] = useState<Conversation>();
  const currentConnectionCtx = connectionStore.currentConnectionCtx;
  const conversationList = conversationStore.conversationList.filter(
    (conversation) =>
      conversation.connectionId === currentConnectionCtx?.connection.id &&
      conversation.databaseName === currentConnectionCtx?.database?.name
  );

  const toggleUpdateConversationModal = (show = true) => {
    setState({
      ...state,
      showUpdateConversationModal: show,
    });
  };

  const handleCreateConversation = () => {
    if (!currentConnectionCtx) {
      conversationStore.createConversation();
    } else {
      conversationStore.createConversation(currentConnectionCtx.connection.id, currentConnectionCtx.database?.name);
    }
  };

  const handleConversationSelect = (conversation: Conversation) => {
    conversationStore.setCurrentConversationId(conversation.id);
    if (layoutStore.isMobileView) {
      layoutStore.toggleSidebar(false);
    }
  };

  const handleEditConversation = (conversation: Conversation) => {
    setUpdateConversationModalContext(conversation);
    setState({
      ...state,
      showUpdateConversationModal: true,
    });
  };

  const handleDeleteConversation = (conversation: Conversation) => {
    conversationStore.clearConversation((item) => item.id !== conversation.id);
    if (conversationStore.currentConversationId === conversation.id) {
      conversationStore.setCurrentConversationId(undefined);
    }
  };

  return (
    <>
      {conversationList.map((conversation) => (
        <div
          key={conversation.id}