add ArticleSkeleton

dashboard/src/pages/library/course/course.tsx

@@ -13,6 +13,8 @@ import {
   TCourseJoinMode,
 } from "../../../components/api/Course";
 import CourseHead from "../../../components/course/CourseHead";
+import ArticleSkeleton from "../../../components/article/ArticleSkeleton";
+import ErrorResult from "../../../components/general/ErrorResult";
 
 export interface ICourse {
   id: string; //课程ID
@@ -35,43 +37,63 @@ export interface ICourse {
 const Widget = () => {
   const { id } = useParams(); //url 参数
   const [courseInfo, setCourseInfo] = useState<ICourse>();
+  const [loading, setLoading] = useState(false);
+  const [errorCode, setErrorCode] = useState<number>();
+
   useEffect(() => {
-    get<ICourseResponse>(`/v2/course/${id}`).then((json) => {
-      if (json.ok) {
-        console.log(json.data);
-        const course: ICourse = {
-          id: json.data.id,
-          title: json.data.title,
-          subtitle: json.data.subtitle,
-          teacher: json.data.teacher,
-          privacy: json.data.publicity,
-          createdAt: json.data.created_at,
-          updatedAt: json.data.updated_at,
-          anthologyId: json.data.anthology_id,
-          channelId: json.data.channel_id,
-          startAt: json.data.start_at,
-          endAt: json.data.end_at,
-          intro: json.data.content,
-          coverUrl: json.data.cover_url,
-          join: json.data.join,
-          exp: json.data.request_exp,
-        };
-        setCourseInfo(course);
-      } else {
-        message.error(json.message);
-      }
-    });
+    const url = `/v2/course/${id}`;
+    console.info("course url", url);
+    setLoading(true);
+    get<ICourseResponse>(url)
+      .then((json) => {
+        if (json.ok) {
+          console.log(json.data);
+          const course: ICourse = {
+            id: json.data.id,
+            title: json.data.title,
+            subtitle: json.data.subtitle,
+            teacher: json.data.teacher,
+            privacy: json.data.publicity,
+            createdAt: json.data.created_at,
+            updatedAt: json.data.updated_at,
+            anthologyId: json.data.anthology_id,
+            channelId: json.data.channel_id,
+            startAt: json.data.start_at,
+            endAt: json.data.end_at,
+            intro: json.data.content,
+            coverUrl: json.data.cover_url,
+            join: json.data.join,
+            exp: json.data.request_exp,
+          };
+          setCourseInfo(course);
+        } else {
+          message.error(json.message);
+        }
+      })
+      .finally(() => setLoading(false))
+      .catch((e) => {
+        console.error(e);
+        setErrorCode(e);
+      });
   }, [id]);
   return (
     <>
-      <CourseHead {...courseInfo} />
-      <Divider />
-      <CourseIntro {...courseInfo} />
-      <Divider />
-      <TextBook
-        anthologyId={courseInfo?.anthologyId}
-        courseId={courseInfo?.id}
-      />
+      {loading ? (
+        <ArticleSkeleton />
+      ) : errorCode ? (
+        <ErrorResult code={errorCode} />
+      ) : (
+        <div>
+          <CourseHead {...courseInfo} />
+          <Divider />
+          <CourseIntro {...courseInfo} />
+          <Divider />
+          <TextBook
+            anthologyId={courseInfo?.anthologyId}
+            courseId={courseInfo?.id}
+          />
+        </div>
+      )}
     </>
   );
 };