feat(web): EMOTIONAL_MEMORY & IMPLICIT_MEMORY type user memory detail add refresh btn
This commit is contained in:
@@ -121,7 +121,7 @@ const EmotionTags: FC = () => {
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
: <Empty size={88} className="rb:h-full" />
|
||||
: <Empty size={88} className="rb:h-full rb:mb-4" />
|
||||
}
|
||||
</RbCard>
|
||||
)
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { type FC, useEffect, useState } from 'react'
|
||||
import { useEffect, useState, forwardRef, useImperativeHandle } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useParams } from 'react-router-dom'
|
||||
import { Skeleton, Space, Progress } from 'antd';
|
||||
@@ -20,7 +20,7 @@ interface HabitsItem {
|
||||
specific_examples: string[];
|
||||
}
|
||||
|
||||
const Habits: FC = () => {
|
||||
const Habits = forwardRef<{ handleRefresh: () => void; }>((_props, ref) => {
|
||||
const { t } = useTranslation()
|
||||
const { id } = useParams()
|
||||
const [loading, setLoading] = useState<boolean>(false)
|
||||
@@ -43,6 +43,9 @@ const Habits: FC = () => {
|
||||
setLoading(false)
|
||||
})
|
||||
}
|
||||
useImperativeHandle(ref, () => ({
|
||||
handleRefresh: getData
|
||||
}));
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -80,5 +83,5 @@ const Habits: FC = () => {
|
||||
</RbCard>
|
||||
</>
|
||||
)
|
||||
}
|
||||
})
|
||||
export default Habits
|
||||
@@ -1,4 +1,4 @@
|
||||
import { type FC, useEffect, useState } from 'react'
|
||||
import { useEffect, useState, forwardRef, useImperativeHandle } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useParams } from 'react-router-dom'
|
||||
import { Skeleton, Progress } from 'antd';
|
||||
@@ -23,7 +23,7 @@ interface InterestAreasItem {
|
||||
art: Item;
|
||||
}
|
||||
|
||||
const InterestAreas: FC = () => {
|
||||
const InterestAreas = forwardRef<{ handleRefresh: () => void; }>((_props, ref) => {
|
||||
const { t } = useTranslation()
|
||||
const { id } = useParams()
|
||||
const [loading, setLoading] = useState<boolean>(false)
|
||||
@@ -47,6 +47,9 @@ const InterestAreas: FC = () => {
|
||||
})
|
||||
}
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
handleRefresh: getData
|
||||
}));
|
||||
return (
|
||||
<RbCard
|
||||
title={t('implicitDetail.interestAreas')}
|
||||
@@ -70,5 +73,5 @@ const InterestAreas: FC = () => {
|
||||
}
|
||||
</RbCard>
|
||||
)
|
||||
}
|
||||
})
|
||||
export default InterestAreas
|
||||
@@ -1,4 +1,4 @@
|
||||
import { type FC, useEffect, useState } from 'react'
|
||||
import { useEffect, useState, forwardRef, useImperativeHandle } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useParams } from 'react-router-dom'
|
||||
import { Skeleton, Progress } from 'antd';
|
||||
@@ -25,7 +25,7 @@ interface PortraitItem {
|
||||
literature: Item;
|
||||
}
|
||||
|
||||
const Portrait: FC = () => {
|
||||
const Portrait = forwardRef<{ handleRefresh: () => void; }>((_props, ref) => {
|
||||
const { t } = useTranslation()
|
||||
const { id } = useParams()
|
||||
const [loading, setLoading] = useState<boolean>(false)
|
||||
@@ -49,6 +49,9 @@ const Portrait: FC = () => {
|
||||
})
|
||||
}
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
handleRefresh: getData
|
||||
}));
|
||||
return (
|
||||
<RbCard
|
||||
title={t('implicitDetail.portrait')}
|
||||
@@ -73,5 +76,5 @@ const Portrait: FC = () => {
|
||||
}
|
||||
</RbCard>
|
||||
)
|
||||
}
|
||||
})
|
||||
export default Portrait
|
||||
@@ -1,4 +1,4 @@
|
||||
import { type FC, useEffect, useState, useRef, useMemo } from 'react'
|
||||
import { useEffect, useState, useRef, useMemo, forwardRef, useImperativeHandle } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useParams } from 'react-router-dom'
|
||||
import { Row, Col, Skeleton } from 'antd'
|
||||
@@ -31,7 +31,7 @@ const generateCategoryColors = (categories: string[]) => {
|
||||
return colors
|
||||
}
|
||||
|
||||
const Preferences: FC = () => {
|
||||
const Preferences = forwardRef<{ handleRefresh: () => void; }>((_props, ref) => {
|
||||
const { t } = useTranslation()
|
||||
const { id } = useParams()
|
||||
const chartRef = useRef<HTMLDivElement>(null)
|
||||
@@ -138,6 +138,9 @@ const Preferences: FC = () => {
|
||||
return selectedWord !== null && data[selectedWord].tag_name ? <>{data[selectedWord].tag_name}{t('implicitDetail.preferencesDetail')}</> : ''
|
||||
}, [selectedWord, data, t])
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
handleRefresh: getData
|
||||
}));
|
||||
return (
|
||||
<>
|
||||
<div className="rb:bg-[rgba(21,94,239,0.12)] rb:px-4 rb:py-2.5 rb:font-medium rb:leading-5 rb:mb-4 rb:mt-6 rb:rounded-md">{t('forgetDetail.overviewTitle')}</div>
|
||||
@@ -184,6 +187,6 @@ const Preferences: FC = () => {
|
||||
</Row>
|
||||
</>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
export default Preferences
|
||||
@@ -1,4 +1,4 @@
|
||||
import { type FC, useEffect, useState } from 'react'
|
||||
import { useEffect, useState, forwardRef, useImperativeHandle } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useParams } from 'react-router-dom'
|
||||
|
||||
@@ -18,7 +18,7 @@ interface Suggestions {
|
||||
actionable_steps: string[];
|
||||
}>;
|
||||
}
|
||||
const Suggestions: FC = () => {
|
||||
const Suggestions = forwardRef<{ handleRefresh: () => void; }>((_props, ref) => {
|
||||
const { t } = useTranslation()
|
||||
const { id } = useParams()
|
||||
const [suggestions, setSuggestions] = useState<Suggestions | null>(null)
|
||||
@@ -37,6 +37,9 @@ const Suggestions: FC = () => {
|
||||
})
|
||||
}
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
handleRefresh: getSuggestionData
|
||||
}));
|
||||
return (
|
||||
<RbCard
|
||||
title={t('statementDetail.suggestions')}
|
||||
@@ -64,6 +67,6 @@ const Suggestions: FC = () => {
|
||||
}
|
||||
</RbCard>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
export default Suggestions
|
||||
@@ -1,34 +1,57 @@
|
||||
import { type FC } from 'react'
|
||||
import { forwardRef, useImperativeHandle, useRef } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Row, Col } from 'antd'
|
||||
import { useParams } from 'react-router-dom'
|
||||
|
||||
import Preferences from '../components/Preferences'
|
||||
import Portrait from '../components/Portrait'
|
||||
import InterestAreas from '../components/InterestAreas'
|
||||
import Habits from '../components/Habits'
|
||||
import {
|
||||
generateProfile,
|
||||
} from '@/api/memory'
|
||||
|
||||
const ImplicitDetail: FC = () => {
|
||||
const ImplicitDetail = forwardRef<{ handleRefresh: () => void; }>((_props, ref) => {
|
||||
const { t } = useTranslation()
|
||||
const { id } = useParams()
|
||||
const preferencesRef = useRef<{ handleRefresh: () => void; }>(null)
|
||||
const portraitRef = useRef<{ handleRefresh: () => void; }>(null)
|
||||
const interestAreasRef = useRef<{ handleRefresh: () => void; }>(null)
|
||||
const habitsRef = useRef<{ handleRefresh: () => void; }>(null)
|
||||
|
||||
const handleRefresh = () => {
|
||||
if (!id) return
|
||||
generateProfile(id)
|
||||
.then(() => {
|
||||
preferencesRef.current?.handleRefresh()
|
||||
portraitRef.current?.handleRefresh()
|
||||
interestAreasRef.current?.handleRefresh()
|
||||
habitsRef.current?.handleRefresh()
|
||||
})
|
||||
}
|
||||
useImperativeHandle(ref, () => ({
|
||||
handleRefresh
|
||||
}));
|
||||
|
||||
return (
|
||||
<div className="rb:h-full rb:max-w-266 rb:mx-auto">
|
||||
<div className="rb:text-[#5B6167] rb:leading-5 rb:mt-3">{t('implicitDetail.title')}</div>
|
||||
|
||||
<Preferences />
|
||||
<Preferences ref={preferencesRef} />
|
||||
|
||||
<div className="rb:bg-[rgba(21,94,239,0.12)] rb:px-3 rb:py-2.5 rb:font-medium rb:leading-5 rb:mb-4 rb:mt-6 rb:rounded-md">{t('implicitDetail.portraitTitle')}</div>
|
||||
<div className="rb:my-3 rb:text-[#5B6167] rb:leading-5">{t('implicitDetail.portraitSubTitle')}</div>
|
||||
<Row gutter={[16, 16]} className="rb:mt-4">
|
||||
<Col span={12}>
|
||||
<Portrait />
|
||||
<Portrait ref={portraitRef} />
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<InterestAreas />
|
||||
<InterestAreas ref={interestAreasRef} />
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Habits />
|
||||
<Habits ref={habitsRef} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
export default ImplicitDetail
|
||||
@@ -1,13 +1,27 @@
|
||||
import { type FC } from 'react'
|
||||
import { forwardRef, useImperativeHandle, useRef } from 'react'
|
||||
import { Row, Col, Space } from 'antd';
|
||||
import { useParams } from 'react-router-dom'
|
||||
|
||||
import WordCloud from '../components/WordCloud'
|
||||
import EmotionTags from '../components/EmotionTags'
|
||||
import Health from '../components/Health'
|
||||
import Suggestions from '../components/Suggestions'
|
||||
import { generateSuggestions } from '@/api/memory'
|
||||
|
||||
|
||||
const StatementDetail: FC = () => {
|
||||
const StatementDetail = forwardRef((_props, ref) => {
|
||||
const { id } = useParams()
|
||||
const suggestionsRef = useRef<{ handleRefresh: () => void; }>(null)
|
||||
const handleRefresh = () => {
|
||||
if (!id) return
|
||||
generateSuggestions(id)
|
||||
.then(() => {
|
||||
suggestionsRef.current?.handleRefresh()
|
||||
})
|
||||
}
|
||||
useImperativeHandle(ref, () => ({
|
||||
handleRefresh
|
||||
}));
|
||||
return (
|
||||
<Row gutter={[16, 16]}>
|
||||
<Col span={12}>
|
||||
@@ -18,10 +32,10 @@ const StatementDetail: FC = () => {
|
||||
</Space>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Suggestions />
|
||||
<Suggestions ref={suggestionsRef} />
|
||||
</Col>
|
||||
</Row>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
export default StatementDetail
|
||||
@@ -24,6 +24,8 @@ const Detail: FC = () => {
|
||||
const navigate = useNavigate()
|
||||
const [name, setName] = useState<string>('')
|
||||
const forgetDetailRef = useRef<{ handleRefresh: () => void }>(null)
|
||||
const statementDetailRef = useRef<{ handleRefresh: () => void }>(null)
|
||||
const implicitDetailRef = useRef<{ handleRefresh: () => void }>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (!id) return
|
||||
@@ -45,7 +47,17 @@ const Detail: FC = () => {
|
||||
navigate(`/user-memory/detail/${id}/${key}`, { replace: true })
|
||||
}
|
||||
const handleRefresh = () => {
|
||||
forgetDetailRef.current?.handleRefresh()
|
||||
switch(type) {
|
||||
case 'FORGET_MEMORY':
|
||||
forgetDetailRef.current?.handleRefresh()
|
||||
break;
|
||||
case 'EMOTIONAL_MEMORY':
|
||||
statementDetailRef.current?.handleRefresh()
|
||||
break
|
||||
case 'IMPLICIT_MEMORY':
|
||||
implicitDetailRef.current?.handleRefresh()
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
if (type === 'GRAPH') {
|
||||
@@ -67,16 +79,16 @@ const Detail: FC = () => {
|
||||
</div>
|
||||
</Dropdown>
|
||||
}
|
||||
extra={type === 'FORGET_MEMORY' &&
|
||||
extra={['FORGET_MEMORY', 'EMOTIONAL_MEMORY', 'IMPLICIT_MEMORY'].includes(type as string) &&
|
||||
<Button type="primary" ghost className="rb:group rb:h-6! rb:px-2!" onClick={handleRefresh}>
|
||||
<img src={refreshIcon} className="rb:w-4 rb:h-4" />
|
||||
{t('common.refresh')}
|
||||
</Button>}
|
||||
/>
|
||||
<div className="rb:h-[calc(100vh-64px)] rb:overflow-y-auto rb:py-3 rb:px-4">
|
||||
{type === 'EMOTIONAL_MEMORY' && <StatementDetail />}
|
||||
{type === 'EMOTIONAL_MEMORY' && <StatementDetail ref={statementDetailRef} />}
|
||||
{type === 'FORGET_MEMORY' && <ForgetDetail ref={forgetDetailRef} />}
|
||||
{type === 'IMPLICIT_MEMORY' && <ImplicitDetail />}
|
||||
{type === 'IMPLICIT_MEMORY' && <ImplicitDetail ref={implicitDetailRef} />}
|
||||
{type === 'SHORT_TERM_MEMORY' && <ShortTermDetail />}
|
||||
{type === 'PERCEPTUAL_MEMORY' && <PerceptualDetail />}
|
||||
{type === 'EPISODIC_MEMORY' && <EpisodicDetail />}
|
||||
|
||||
Reference in New Issue
Block a user