mirror of
https://github.com/CherryHQ/cherry-studio.git
synced 2025-12-24 10:40:07 +08:00
refactor(home/Tabs): replace redux state with local state for active tab
Simplify tab state management by using useState instead of redux Remove unused imports and clean up useEffect dependencies
This commit is contained in:
parent
d1067bb6b3
commit
c70a5d63aa
@ -4,12 +4,10 @@ import { useRuntime } from '@renderer/hooks/useRuntime'
|
||||
import { useNavbarPosition, useSettings } from '@renderer/hooks/useSettings'
|
||||
import { useShowTopics } from '@renderer/hooks/useStore'
|
||||
import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService'
|
||||
import { useAppDispatch } from '@renderer/store'
|
||||
import { setActiveTabIdAction } from '@renderer/store/runtime'
|
||||
import { Assistant, Topic } from '@renderer/types'
|
||||
import { Tab } from '@renderer/types/chat'
|
||||
import { classNames, uuid } from '@renderer/utils'
|
||||
import { FC, useCallback, useEffect } from 'react'
|
||||
import { FC, useEffect, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import styled from 'styled-components'
|
||||
|
||||
@ -47,21 +45,9 @@ const HomeTabs: FC<Props> = ({
|
||||
const { t } = useTranslation()
|
||||
|
||||
const { chat } = useRuntime()
|
||||
const { activeTabId: tab, activeTopicOrSession } = chat
|
||||
const dispatch = useAppDispatch()
|
||||
|
||||
const setTab = useCallback(
|
||||
(tab: Tab) => {
|
||||
dispatch(setActiveTabIdAction(tab))
|
||||
},
|
||||
[dispatch]
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
setTab(position === 'left' ? _tab || 'assistants' : 'topic')
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [])
|
||||
const { activeTopicOrSession } = chat
|
||||
|
||||
const [tab, setTab] = useState<Tab>(position === 'left' ? _tab || 'assistants' : 'topic')
|
||||
const borderStyle = '0.5px solid var(--color-border)'
|
||||
const border =
|
||||
position === 'left'
|
||||
@ -113,7 +99,6 @@ const HomeTabs: FC<Props> = ({
|
||||
if (position === 'left' && topicPosition === 'right' && tab === 'topic') {
|
||||
setTab('assistants')
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [position, tab, topicPosition, forceToSeeAllTab])
|
||||
|
||||
return (
|
||||
@ -137,7 +122,7 @@ const HomeTabs: FC<Props> = ({
|
||||
{position === 'right' && topicPosition === 'right' && (
|
||||
<CustomTabs>
|
||||
<TabItem active={tab === 'topic'} onClick={() => setTab('topic')}>
|
||||
{t('common.topics')}
|
||||
{activeTopicOrSession === 'topic' ? t('common.topics') : t('agent.session.label_other')}
|
||||
</TabItem>
|
||||
<TabItem active={tab === 'settings'} onClick={() => setTab('settings')}>
|
||||
{t('settings.title')}
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import { createSlice, PayloadAction } from '@reduxjs/toolkit'
|
||||
import { AppLogo, UserAvatar } from '@renderer/config/env'
|
||||
import type { MinAppType, Topic, WebSearchStatus } from '@renderer/types'
|
||||
import { Tab } from '@renderer/types/chat'
|
||||
import type { UpdateInfo } from 'builder-util-runtime'
|
||||
|
||||
export interface ChatState {
|
||||
@ -15,7 +14,6 @@ export interface ChatState {
|
||||
activeSessionId: Record<string, string | null>
|
||||
/** meanwhile active Assistants or Agents */
|
||||
activeTopicOrSession: 'topic' | 'session'
|
||||
activeTabId: Tab
|
||||
/** topic ids that are currently being renamed */
|
||||
renamingTopics: string[]
|
||||
/** topic ids that are newly renamed */
|
||||
@ -86,7 +84,6 @@ const initialState: RuntimeState = {
|
||||
chat: {
|
||||
isMultiSelectMode: false,
|
||||
selectedMessageIds: [],
|
||||
activeTabId: 'assistants',
|
||||
activeTopic: null,
|
||||
activeAgentId: null,
|
||||
activeTopicOrSession: 'topic',
|
||||
@ -162,9 +159,6 @@ const runtimeSlice = createSlice({
|
||||
const { agentId, sessionId } = action.payload
|
||||
state.chat.activeSessionId[agentId] = sessionId
|
||||
},
|
||||
setActiveTabIdAction: (state, action: PayloadAction<Tab>) => {
|
||||
state.chat.activeTabId = action.payload
|
||||
},
|
||||
setActiveTopicOrSessionAction: (state, action: PayloadAction<'topic' | 'session'>) => {
|
||||
state.chat.activeTopicOrSession = action.payload
|
||||
},
|
||||
@ -208,7 +202,6 @@ export const {
|
||||
setActiveTopic,
|
||||
setActiveAgentId,
|
||||
setActiveSessionIdAction,
|
||||
setActiveTabIdAction,
|
||||
setActiveTopicOrSessionAction,
|
||||
setRenamingTopics,
|
||||
setNewlyRenamedTopics,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user