从零搭建基于 AI GitHub 分析平台 (8) 创建 Project Hook

效果

实现步骤如下：

设置 Projects API

修改 src/server/api/routers/project.ts:

getProjects: authenticatedProcedure.query( async ( { ctx }) =>{
  const projects = await ctx.db.project.findMany({
    where: {
      usersProject: {
        some: {
          userId: ctx.user.userId!
        }
      },
      deleteAt: null
  }});
  return projects;
})

设置 Projects Hook

修改 src/hooks/use-project.ts:

import React from "react"; 
import { api } from "@/trpc/react";
import { useLocalStorage } from "usehooks-ts";

const useProject = () => {
  const { data: projects } = api.project.getProjects.useQuery();
  const [ projectId, setProjectId] = useLocalStorage("aigithub-projectId","");
  const project = projects?.find(project => project.id === projectId);

  return {
    projects,
    project,
    projectId,
    setProjectId
  }
}

export default useProject;

侧边栏整合 Hook

修改 src/app/(protected)/AppSiderbar.tsx:

const { projects, projectId, setProjectId} = useProject();

  <div onClick={()=>{
      setProjectId(project.id)
    }}>
    <div className={cn(
      "rounded-sm border size-6 flex items-center justify-center text-sm bg-white text-primary",
      { "bg-primary text-white" : project.id === projectId }
    )}>
      {project?.name[0]}
    </div>
    <span>{project?.name}</span>
  </div>

动态刷新项目列表

添加Hook，src/hooks/use-refresh.ts:

import { useQueryClient } from '@tanstack/react-query';

const useRefresh = () => {
  const queryClient = useQueryClient();
  return async () => {
    await queryClient.refetchQueries({
      type: "active"
    })
  }
}

export default useRefresh;

添加项目时调用：

 const refresh = useRefresh();
 
onSuccess: ()=>{
   toast.success("项目创建成功");
   refresh();
   reset();
 },

---

作者：Bearalise
出处：从零搭建基于 AI GitHub 分析平台 (8) 创建 Project Hook
版权：本文版权归作者所有
转载：欢迎转载，但未经作者同意，必须保留此段声明，必须在文章中给出原文链接。