From 186b85cd622db47bb8e0dd30b76eab44ef73d755 Mon Sep 17 00:00:00 2001 From: JzoNg Date: Tue, 5 Mar 2024 15:27:20 +0800 Subject: [PATCH] add store of app detail --- .../app/(appDetailLayout)/[appId]/layout.tsx | 19 ++++++++++++------- web/app/(commonLayout)/apps/AppCard.tsx | 4 ++-- web/app/components/app/store.ts | 15 +++++++++++++++ web/app/components/workflow/index.tsx | 4 ++++ web/utils/app-redirection.ts | 15 +++++++++++++++ 5 files changed, 48 insertions(+), 9 deletions(-) create mode 100644 web/app/components/app/store.ts create mode 100644 web/utils/app-redirection.ts diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout.tsx index 8e98927cf2..09e511b9a6 100644 --- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout.tsx +++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout.tsx @@ -6,6 +6,7 @@ import cn from 'classnames' import useSWR from 'swr' import { useTranslation } from 'react-i18next' import s from './style.module.css' +import { useStore } from '@/app/components/app/store' import AppSideBar from '@/app/components/app-sidebar' import { fetchAppDetail } from '@/service/apps' import { useAppContext } from '@/context/app-context' @@ -27,14 +28,9 @@ const AppDetailLayout: FC = (props) => { const pathname = usePathname() const { isCurrentWorkspaceManager } = useAppContext() const detailParams = { url: '/apps', id: appId } + const { appDetail, setAppDetail } = useStore() const { data: response } = useSWR(detailParams, fetchAppDetail) - // redirections - if (response && (response?.mode === 'workflow' || response?.mode === 'advanced-chat') && (pathname).endsWith('configuration')) - router.replace(`/app/${appId}/workflow`) - if (response && (response?.mode !== 'workflow' && response?.mode !== 'advanced-chat') && (pathname).endsWith('workflow')) - router.replace(`/app/${appId}/configuration`) - const appModeName = (() => { if (response?.mode === 'chat' || response?.mode === 'advanced-chat') return t('app.types.chatbot') @@ -86,10 +82,19 @@ const AppDetailLayout: FC = (props) => { useEffect(() => { if (response?.name) document.title = `${(response.name || 'App')} - Dify` - }, [response]) + if (response && response !== appDetail) + setAppDetail(response) + }, [appDetail, response, setAppDetail]) + if (!response) return null + // redirections + if (response && (response?.mode === 'workflow' || response?.mode === 'advanced-chat') && (pathname).endsWith('configuration')) + router.replace(`/app/${appId}/workflow`) + if (response && (response?.mode !== 'workflow' && response?.mode !== 'advanced-chat') && (pathname).endsWith('workflow')) + router.replace(`/app/${appId}/configuration`) + return (
diff --git a/web/app/(commonLayout)/apps/AppCard.tsx b/web/app/(commonLayout)/apps/AppCard.tsx index f7d586cf74..e917e2422a 100644 --- a/web/app/(commonLayout)/apps/AppCard.tsx +++ b/web/app/(commonLayout)/apps/AppCard.tsx @@ -22,6 +22,7 @@ import type { HtmlContentProps } from '@/app/components/base/popover' import CustomPopover from '@/app/components/base/popover' import Divider from '@/app/components/base/divider' import { asyncRunSafe } from '@/utils' +import { getRedirection } from '@/utils/app-redirection' import { useProviderContext } from '@/context/provider-context' import { NEED_REFRESH_APP_LIST_KEY } from '@/config' @@ -207,8 +208,7 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => { if (showSettingsModal) return e.preventDefault() - - push(`/app/${app.id}/${isCurrentWorkspaceManager ? 'configuration' : 'overview'}`) + getRedirection(isCurrentWorkspaceManager, app, push) }} className={style.listItem} > diff --git a/web/app/components/app/store.ts b/web/app/components/app/store.ts new file mode 100644 index 0000000000..dfe9072441 --- /dev/null +++ b/web/app/components/app/store.ts @@ -0,0 +1,15 @@ +import { create } from 'zustand' +import type { App } from '@/types/app' + +type State = { + appDetail?: App +} + +type Action = { + setAppDetail: (appDetail: App) => void +} + +export const useStore = create(set => ({ + appDetail: undefined, + setAppDetail: appDetail => set(() => ({ appDetail })), +})) diff --git a/web/app/components/workflow/index.tsx b/web/app/components/workflow/index.tsx index 0f09c5ab8d..0f7cf5be13 100644 --- a/web/app/components/workflow/index.tsx +++ b/web/app/components/workflow/index.tsx @@ -34,6 +34,7 @@ import { fetchWorkflowDraft, syncWorkflowDraft, } from '@/service/workflow' +import { useStore as useAppStore } from '@/app/components/app/store' import Loading from '@/app/components/base/loading' import { FeaturesProvider } from '@/app/components/base/features' @@ -118,6 +119,9 @@ const WorkflowWrap: FC = ({ nodes, edges, }) => { + const appDetail = useAppStore(state => state.appDetail) + console.log(appDetail?.name) + console.log(appDetail?.description) const appId = useParams().appId const { data, isLoading, error } = useSWR(`/apps/${appId}/workflows/draft`, fetchWorkflowDraft) const nodesInitialData = useNodesInitialData() diff --git a/web/utils/app-redirection.ts b/web/utils/app-redirection.ts new file mode 100644 index 0000000000..cc122398a2 --- /dev/null +++ b/web/utils/app-redirection.ts @@ -0,0 +1,15 @@ +export const getRedirection = ( + isCurrentWorkspaceManager: boolean, + app: any, + redirectionFunc: (href: string) => void, +) => { + if (!isCurrentWorkspaceManager) { + redirectionFunc(`/app/${app.id}/overview`) + } + else { + if (app.mode === 'workflow' || app.mode === 'advanced-chat') + redirectionFunc(`/app/${app.id}/workflow`) + else + redirectionFunc(`/app/${app.id}/configuration`) + } +}