整理项目代码，抽离逻辑

src/context/auth-context.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useContext, ReactNode } from "react"
-import { useMount } from "../utils";
+import useMount from "../hook/useMount"
 import { request } from "../utils/request";
 import * as auth from "../utils/token"
 

src/hook/useAsync.ts

@@ -0,0 +1,51 @@
+import { useState } from "react";
+
+interface State<D> {
+  error: Error | null;
+  data: D | null;
+  stat: "idle" | "loading" | "error" | "success";
+}
+
+const defaultInitialState: State<null> = {
+  stat: "idle",
+  data: null,
+  error: null,
+};
+
+const useAsync = <D>(initialState?: State<D>) => {
+  const [state, setState] = useState<State<D>>({
+    ...defaultInitialState,
+    ...initialState,
+  });
+
+  const setData = (data: D) => setState({ data, stat: "success", error: null });
+  const setError = (error: Error) =>
+    setState({ data: null, stat: "error", error });
+
+  const run = (promise: Promise<D>) => {
+    if (!promise || !promise.then) throw new Error("请传入 Promise 数据类型");
+    setState({ ...state, stat: "loading" });
+    return promise
+      .then((data) => {
+        setData(data);
+        return data;
+      })
+      .catch((error) => {
+        setError(error);
+        return error;
+      });
+  };
+
+  return {
+    isIdle: state.stat === "idle",
+    isLoading: state.stat === "loading",
+    isError: state.stat === "error",
+    isSuccess: state.stat === "success",
+    run,
+    setData,
+    setError,
+    ...state,
+  };
+};
+
+export default useAsync;

src/hook/useDebounce.ts

@@ -0,0 +1,19 @@
+import { useState, useEffect } from "react";
+
+/**
+ * 防抖 hook
+ * @param value
+ * @param delay
+ * @returns
+ */
+const useDebounce = <T>(value: T, delay: number) => {
+  const [debounceParams, setDebounceParams] = useState(value);
+  useEffect(() => {
+    const timeout = setTimeout(() => setDebounceParams(value), delay);
+    return () => clearTimeout(timeout);
+  }, [value, delay]);
+
+  return debounceParams;
+};
+
+export default useDebounce;

src/hook/useMount.ts

@@ -0,0 +1,9 @@
+import { useEffect } from "react";
+
+const useMount = (callback: () => void) => {
+  useEffect(() => {
+    callback();
+  }, []);
+};
+
+export default useMount;

src/hook/useProjects.ts

@@ -0,0 +1,26 @@
+import { useEffect } from "react";
+import { cleanObject } from "../utils";
+import { useRequest } from "../utils/request";
+import useAsync from "./useAsync";
+
+interface Project {
+  id: string;
+  name: string;
+  personId: string;
+  pin: boolean;
+  organization: string;
+  created: number;
+}
+
+const useProjects = (param?: Partial<Project>) => {
+  const request = useRequest();
+  const { run, ...result } = useAsync<Project[]>();
+
+  useEffect(() => {
+    run(request("/projects", { data: cleanObject(param || {}) }));
+  }, [param]);
+
+  return result;
+};
+
+export default useProjects;

src/hook/useUsers.ts

@@ -0,0 +1,26 @@
+import { useEffect } from "react";
+import { cleanObject } from "../utils";
+import { useRequest } from "../utils/request";
+import useAsync from "./useAsync";
+
+interface User {
+  id: string;
+  name: string;
+  email: string;
+  title: string;
+  token: string;
+  organization: string;
+}
+
+const useUser = (param?: Partial<User>) => {
+  const request = useRequest();
+  const { run, ...result } = useAsync<User[]>();
+
+  useEffect(() => {
+    run(request("/users", { data: cleanObject(param || {}) }));
+  }, [param]);
+
+  return result;
+};
+
+export default useUser;

src/pages/Project/List/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Table } from "antd";
+import { Table, TableProps } from "antd";
 import dayjs from "dayjs";
 
 interface Project {
@@ -19,12 +19,11 @@ interface User {
   organization: string;
 }
 
-interface ListProps {
-  list: Project[];
+interface ListProps extends TableProps<Project> {
   users: User[];
 }
 
-const ProjectList = ({ list, users }: ListProps) => {
+const ProjectList = ({ users, ...props }: ListProps) => {
   return (
     <Table
       pagination={false}
@@ -62,8 +61,8 @@ const ProjectList = ({ list, users }: ListProps) => {
           },
         },
       ]}
-      dataSource={list}
       rowKey="id"
+      {...props}
     ></Table>
   );
 };

src/pages/Project/index.tsx

@@ -1,31 +1,39 @@
-import React, { useEffect, useState } from "react";
-import { cleanObject, useDebounce, useMount } from "../../utils";
-import { useRequest } from "../../utils/request";
+import React, { useState } from "react";
+import { Typography } from "antd";
+import useDebounce from "../../hook/useDebounce";
 import List from "./List";
 import SearchPanel from "./Search";
 import { Container } from "./style";
+import useProjects from "../../hook/useProjects";
+import useUsers from "../../hook/useUsers";
+
+interface Project {
+  id: string;
+  name: string;
+  personId: string;
+  pin: boolean;
+  organization: string;
+  created: number;
+}
 
 const Project = () => {
   const [param, setParam] = useState({ name: "", personId: "" });
-  const [list, setList] = useState([]);
-  const [users, setUsers] = useState([]);
-
-  const debouncedParam = useDebounce(param, 200);
-  const request = useRequest();
-
-  useEffect(() => {
-    request("/projects", { data: cleanObject(debouncedParam) }).then(setList);
-  }, [debouncedParam]);
-
-  useMount(() => {
-    request("/users", {}).then(setUsers);
-  });
+  const debounceParams = useDebounce(param, 200);
+  const { isLoading, error, data: list } = useProjects(debounceParams);
+  const { data: users } = useUsers();
 
   return (
     <Container>
       <h1>项目列表</h1>
-      <SearchPanel users={users} param={param} setParam={setParam} />
-      <List list={list} users={users}></List>
+      <SearchPanel users={users || []} param={param} setParam={setParam} />
+      {error ? (
+        <Typography.Text type="danger">{error.message}</Typography.Text>
+      ) : null}
+      <List
+        loading={isLoading}
+        dataSource={list || []}
+        users={users || []}
+      ></List>
     </Container>
   );
 };

src/utils/config.ts

@@ -1 +0,0 @@
-export const baseURL = 'http://localhost:3001'

src/utils/index.ts

@@ -1,27 +1,3 @@
-import { useState, useEffect } from "react";
-
-/**
- * 防抖 hook
- * @param value 
- * @param delay 
- * @returns 
- */
-export const useDebounce = <T>(value: T, delay: number) => {
-  const [debounceParams, setDebounceParams] = useState(value)
-  useEffect(() => {
-    const timeout = setTimeout(() => setDebounceParams(value), delay);
-    return () => clearTimeout(timeout)
-  }, [value, delay])
-
-  return debounceParams
-}
-
-export const useMount = (callback: () => void) => {
-  useEffect(() => {
-    callback()
-  }, [])
-}
-
 export const isFalsy = (value: unknown) => (value === 0 ? false : !value);
 
 export const isVoid = (value: unknown) => value === undefined || value === null || value === '';