feat: skill refactor #152
feat: skill refactor #152
Conversation
|
@Coooder-Crypto is attempting to deploy a commit to the OpenBuild Team on Vercel. A member of the Team first needs to authorize it. |
|
|
||
| import { baseInputStyles } from '#/domain/profile/widgets/blocks'; | ||
| import { useConfig } from '#/state/application/hooks'; | ||
| const selectedOptions = selectedSkills?.map(id => |
There was a problem hiding this comment.
这 selectedOptions 的长度跟 selectedSkills 是一样的，应该是过滤出符合要求的子集。下一行的用法也不对。
selectedOptions 重命名为 resolvedOptions 语义更准确
|
|
||
| import { classNames, arrRemove } from '@/utils'; | ||
| export default function SelectSkills({ selectedSkills, onChange, limit = Infinity, className = 'no-bg hauto' }) { |
There was a problem hiding this comment.
组件名和文件名都重命名为 SkillSelect。
这个组件实际上是个字段类的，这类组件代表值的属性统一用 value，也就是把 selectedSkills 改名，且在这里赋上默认值，下面代码中不需要做 fallback 处理。
加上 placeholder 属性，默认值为 'Select skills'。
limit 不需要默认值，ReactSelect 中已经进行了处理。
className 不需要默认值，用的地方指定。
| import { Transition } from '../control/headlessui'; | ||
| import { CheckIcon, XMarkIcon } from '../icon/solid'; | ||
| const handleChange = selectedOptions => { | ||
| const limitedOptions = selectedOptions.slice(0, limit); |
There was a problem hiding this comment.
这个逻辑多余吧？ReactSelect 如果传入 limit 属性，那么它返回的选项数量应该就是已经处理好的。
| const handleChange = selectedOptions => { | ||
| const limitedOptions = selectedOptions.slice(0, limit); | ||
| const selectedIds = limitedOptions.map(option => option.value); | ||
| onChange(selectedIds); |
There was a problem hiding this comment.
直接 onChange(selectedOptions.map(option => option.value))，并且要用 isFunction 判断 onChange 是否为一个函数
| @@ -15,112 +15,32 @@ | |||
| */ | |||
|
|
|||
| 'use client'; | |||
|
|
||
| import useMounted from '#/shared/hooks/useMounted'; |
There was a problem hiding this comment.
'#/shared/hooks/useMounted' => '@/hooks/useMounted'
| import SkillInsight from '../../widgets/skill-insight'; | ||
| import SkillCircle from './SkillCircle'; | ||
|
|
||
| function SkillOverviewView({ userId }) { | ||
| const skills = useAllSkills(); | ||
| const { data } = useSWR(userId ? `ts/v1/hub/general/skills/${userId}` : null, fetcher); | ||
| const userSkills = data?.skill_datas || []; | ||
| const [data, setData] = useState([]); |
There was a problem hiding this comment.
从下面逻辑看，data 不是数组而是对象，这里改成 userSkills 和 setUserSkills；下面的请求那块就是 setUserSkills(res.data?.skill_datas || [])
|
|
||
| import httpClient from '@/utils/http'; | ||
|
|
||
| async function getUserSkills({ userId }) { |
There was a problem hiding this comment.
改为 fetchUserSkills(userId)：
- 远程获取数据时用 fetch 替代 get
- 只有一个参数时不要用对象
| import httpClient from '@/utils/http'; | ||
|
|
||
| async function getUserSkills({ userId }) { | ||
| return await httpClient.get(`hub/general/skills/${userId}`); |
| ))} | ||
| </div> | ||
| </div> | ||
| <SkillOverviewView userId={params.id} /> |
There was a problem hiding this comment.
不能直接用 SkillOverviewView，把它里面的下图部分代码拆成单独的 widget：
然后在 SkillOverviewView 和这里复用那个新 widget。
This pull request addresses the changes required for adapting the user-side skill-related code to the new directory structure and data request method as outlined in Issue #133