!1 优化

Merge pull request !1 from 白书科技/fix/0804

src/pages/course/index.tsx

@@ -8,12 +8,12 @@ import { HourCompenent } from "./compenents/hour";
 import { Empty } from "../../compenents";
 import iconRoute from "../../assets/images/commen/icon-route.png";
 
-type tabModal = {
+type TabModel = {
   key: number;
   label: string;
 };
 
-type attachModal = {
+type AttachModel = {
   id: number;
   course_id: number;
   rid: number;
@@ -23,19 +23,40 @@ type attachModal = {
   url?: string;
 };
 
+type HoursModel = {
+  [key: number]: HourModel[];
+};
+
+type ChapterModel = {
+  course_id: number;
+  created_at: string;
+  id: number;
+  name: string;
+  sort: number;
+  updated_at: string;
+};
+
+type LearnHourRecordsModel = {
+  [key: number]: HourRecordModel;
+};
+
 const CoursePage = () => {
   const params = useParams();
   const navigate = useNavigate();
   const result = new URLSearchParams(useLocation().search);
   const [loading, setLoading] = useState<boolean>(true);
-  const [course, setCourse] = useState<any>({});
-  const [chapters, setChapters] = useState<any>([]);
-  const [hours, setHours] = useState<any>({});
-  const [learnRecord, setLearnRecord] = useState<any>({});
-  const [learnHourRecord, setLearnHourRecord] = useState<any>({});
+  const [course, setCourse] = useState<CourseModel | null>(null);
+  const [chapters, setChapters] = useState<ChapterModel[]>([]);
+  const [hours, setHours] = useState<HoursModel>({});
+  const [learnRecord, setLearnRecord] = useState<CourseRecordModel | null>(
+    null
+  );
+  const [learnHourRecord, setLearnHourRecord] = useState<LearnHourRecordsModel>(
+    {}
+  );
   const [tabKey, setTabKey] = useState(Number(result.get("tab") || 1));
-  const [attachments, setAttachments] = useState<attachModal[]>([]);
-  const [items, setItems] = useState<tabModal[]>([]);
+  const [attachments, setAttachments] = useState<AttachModel[]>([]);
+  const [items, setItems] = useState<TabModel[]>([]);
 
   useEffect(() => {
     getDetail();
@@ -55,8 +76,8 @@ const CoursePage = () => {
         if (res.data.learn_hour_records) {
           setLearnHourRecord(res.data.learn_hour_records);
         }
-        let arr = res.data.attachments;
-        let tabs = [
+        let arr: AttachModel[] = res.data.attachments;
+        let tabs: TabModel[] = [
           {
             key: 1,
             label: `课程目录`,
@@ -115,18 +136,18 @@ const CoursePage = () => {
                   height={90}
                   style={{ borderRadius: 10 }}
                   preview={false}
-                  src={course.thumb}
+                  src={course?.thumb}
                 />
                 <div className={styles["info"]}>
-                  <div className={styles["title"]}>{course.title}</div>
+                  <div className={styles["title"]}>{course?.title}</div>
                   <div className={styles["status"]}>
-                    {course.is_required === 1 && (
+                    {course?.is_required === 1 && (
                       <div className={styles["type"]}>必修课</div>
                     )}
-                    {course.is_required === 0 && (
+                    {course?.is_required === 0 && (
                       <div className={styles["active-type"]}>选修课</div>
                     )}
-                    {learnRecord.progress / 100 >= 100 && (
+                    {learnRecord && learnRecord.progress / 100 >= 100 && (
                       <div className={styles["success"]}>
                         <Image
                           width={24}
@@ -140,7 +161,8 @@ const CoursePage = () => {
                   </div>
                 </div>
               </div>
-              {JSON.stringify(learnRecord) === "{}" &&
+              {learnRecord &&
+                JSON.stringify(learnRecord) === "{}" &&
                 JSON.stringify(learnHourRecord) === "{}" && (
                   <Progress
                     type="circle"
@@ -152,7 +174,8 @@ const CoursePage = () => {
                     format={(percent) => `${percent}%`}
                   />
                 )}
-              {JSON.stringify(learnRecord) === "{}" &&
+              {learnRecord &&
+                JSON.stringify(learnRecord) === "{}" &&
                 JSON.stringify(learnHourRecord) !== "{}" && (
                   <Progress
                     type="circle"
@@ -164,7 +187,8 @@ const CoursePage = () => {
                     format={(percent) => `${percent}%`}
                   />
                 )}
-              {JSON.stringify(learnRecord) !== "{}" &&
+              {learnRecord &&
+                JSON.stringify(learnRecord) !== "{}" &&
                 JSON.stringify(learnHourRecord) !== "{}" && (
                   <Progress
                     type="circle"
@@ -177,7 +201,7 @@ const CoursePage = () => {
                   />
                 )}
             </div>
-            {course.short_desc && (
+            {course?.short_desc && (
               <div className={styles["desc"]}>{course.short_desc}</div>
             )}
           </div>

src/pages/course/video.tsx

@@ -13,15 +13,15 @@ const CoursePalyPage = () => {
   const params = useParams();
   const systemConfig = useSelector((state: any) => state.systemConfig.value);
   const user = useSelector((state: any) => state.loginUser.value.user);
-  const [playUrl, setPlayUrl] = useState<string>("");
+  const [playUrl, setPlayUrl] = useState("");
   const [playDuration, setPlayDuration] = useState(0);
-  const [playendedStatus, setPlayendedStatus] = useState<Boolean>(false);
+  const [playendedStatus, setPlayendedStatus] = useState(false);
   const [lastSeeValue, setLastSeeValue] = useState({});
-  const [course, setCourse] = useState<any>({});
-  const [hour, setHour] = useState<any>({});
-  const [loading, setLoading] = useState<Boolean>(false);
-  const [isLastpage, setIsLastpage] = useState<Boolean>(false);
-  const [totalHours, setTotalHours] = useState<any>([]);
+  const [course, setCourse] = useState<CourseModel | null>(null);
+  const [hour, setHour] = useState<HourModel | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [isLastpage, setIsLastpage] = useState(false);
+  const [totalHours, setTotalHours] = useState<HourModel[]>([]);
   const [playingTime, setPlayingTime] = useState(0);
   const [watchedSeconds, setWatchedSeconds] = useState(0);
   const myRef = useRef(0);
@@ -59,17 +59,17 @@ const CoursePalyPage = () => {
   }, [watchedSeconds]);
 
   useEffect(() => {
-    totalRef.current = hour.duration;
+    totalRef.current = hour?.duration || 0;
   }, [hour]);
 
   const getCourse = () => {
     Course.detail(Number(params.courseId)).then((res: any) => {
-      let totalHours: any = [];
+      let totalHours: HourModel[] = [];
       if (res.data.chapters.length === 0) {
         setTotalHours(res.data.hours[0]);
         totalHours = res.data.hours[0];
       } else if (res.data.chapters.length > 0) {
-        const arr: any = [];
+        const arr: HourModel[] = [];
         for (let key in res.data.hours) {
           res.data.hours[key].map((item: any) => {
             arr.push(item);
@@ -97,7 +97,7 @@ const CoursePalyPage = () => {
         setCourse(res.data.course);
         setHour(res.data.hour);
         document.title = res.data.hour.title;
-        let record = res.data.user_hour_record;
+        let record: HourRecordModel = res.data.user_hour_record;
         let params = null;
         if (record && record.finished_duration && record.is_finished === 0) {
           params = {
@@ -249,7 +249,7 @@ const CoursePalyPage = () => {
         </div>
       </div>
       <div className={styles["video-body"]}>
-        <div className={styles["video-title"]}>{hour.title}</div>
+        <div className={styles["video-title"]}>{hour?.title}</div>
         <div className={styles["video-box"]}>
           <div
             className="play-box"

src/pages/index/index.tsx

@@ -11,6 +11,29 @@ import studyTime from "../../assets/images/commen/icon-studytime.png";
 import iconRoute from "../../assets/images/commen/icon-route.png";
 import { studyTimeFormat } from "../../utils/index";
 
+type StatsModel = {
+  learn_duration: number;
+  nun_required_course_count: number;
+  nun_required_finished_course_count: number;
+  nun_required_finished_hour_count: number;
+  nun_required_hour_count: number;
+  required_course_count: number;
+  required_finished_course_count: number;
+  required_finished_hour_count: number;
+  required_hour_count: number;
+  today_learn_duration: number;
+};
+
+type LearnCourseRecordsModel = {
+  [key: number]: CourseRecordModel;
+};
+
+type CategoryModel = {
+  key: number;
+  title: any;
+  children?: CategoryModel[];
+};
+
 const IndexPage = () => {
   const navigate = useNavigate();
   const result = new URLSearchParams(useLocation().search);
@@ -18,8 +41,8 @@ const IndexPage = () => {
   const [open, setOpen] = useState(false);
   const [loading, setLoading] = useState<boolean>(false);
   const [tabKey, setTabKey] = useState(Number(result.get("tab") || 0));
-  const [coursesList, setCoursesList] = useState<any>([]);
-  const [categories, setCategories] = useState<any>([]);
+  const [coursesList, setCoursesList] = useState<CourseModel[]>([]);
+  const [categories, setCategories] = useState<CategoryModel[]>([]);
   const [categoryId, setCategoryId] = useState<number>(
     Number(result.get("cid") || 0)
   );
@@ -27,9 +50,10 @@ const IndexPage = () => {
     String(result.get("catName") || "所有分类")
   );
   const [selectKey, setSelectKey] = useState<any>([0]);
-  const [learnCourseRecords, setLearnCourseRecords] = useState<any>({});
+  const [learnCourseRecords, setLearnCourseRecords] =
+    useState<LearnCourseRecordsModel>({});
   const [learnCourseHourCount, setLearnCourseHourCount] = useState<any>({});
-  const [stats, setStats] = useState<any>({});
+  const [stats, setStats] = useState<StatsModel | null>(null);
   const currentDepId = useSelector(
     (state: any) => state.loginUser.value.currentDepId
   );
@@ -62,14 +86,14 @@ const IndexPage = () => {
   const getData = () => {
     setLoading(true);
     user.courses(currentDepId, categoryId).then((res: any) => {
-      const records = res.data.learn_course_records;
+      const records: LearnCourseRecordsModel = res.data.learn_course_records;
       setStats(res.data.stats);
       setLearnCourseRecords(records);
       setLearnCourseHourCount(res.data.user_course_hour_count);
       if (tabKey === 0) {
         setCoursesList(res.data.courses);
       } else if (tabKey === 1) {
-        const arr: any = [];
+        const arr: CourseModel[] = [];
         res.data.courses.map((item: any) => {
           if (item.is_required === 1) {
             arr.push(item);
@@ -77,7 +101,7 @@ const IndexPage = () => {
         });
         setCoursesList(arr);
       } else if (tabKey === 2) {
-        const arr: any = [];
+        const arr: CourseModel[] = [];
         res.data.courses.map((item: any) => {
           if (item.is_required === 0) {
             arr.push(item);
@@ -85,7 +109,7 @@ const IndexPage = () => {
         });
         setCoursesList(arr);
       } else if (tabKey === 3) {
-        const arr: any = [];
+        const arr: CourseModel[] = [];
         res.data.courses.map((item: any) => {
           if (records[item.id] && records[item.id].progress >= 10000) {
             arr.push(item);
@@ -93,7 +117,7 @@ const IndexPage = () => {
         });
         setCoursesList(arr);
       } else if (tabKey === 4) {
-        const arr: any = [];
+        const arr: CourseModel[] = [];
         res.data.courses.map((item: any) => {
           if (
             !records[item.id] ||
@@ -112,7 +136,7 @@ const IndexPage = () => {
     user.coursesCategories().then((res: any) => {
       const categories = res.data.categories;
       if (JSON.stringify(categories) !== "{}") {
-        const new_arr: any[] = checkArr(categories, 0);
+        const new_arr: CategoryModel[] = checkArr(categories, 0);
         new_arr.unshift({
           key: 0,
           title: "所有分类",
@@ -123,7 +147,7 @@ const IndexPage = () => {
   };
 
   const checkArr = (categories: any[], id: number) => {
-    const arr = [];
+    const arr: CategoryModel[] = [];
     for (let i = 0; i < categories[id].length; i++) {
       if (!categories[categories[id][i].id]) {
         arr.push({
@@ -133,7 +157,10 @@ const IndexPage = () => {
           key: categories[id][i].id,
         });
       } else {
-        const new_arr: any[] = checkArr(categories, categories[id][i].id);
+        const new_arr: CategoryModel[] = checkArr(
+          categories,
+          categories[id][i].id
+        );
         arr.push({
           title: (
             <span style={{ marginRight: 20 }}>{categories[id][i].name}</span>
@@ -240,17 +267,17 @@ const IndexPage = () => {
             <div className={styles["info"]}>
               <div className={styles["info-item"]}>
                 <span>必修课：已学完课程</span>
-                <strong> {stats.required_finished_course_count || 0} </strong>
-                <span>/ {stats.required_course_count || 0}</span>
+                <strong> {stats?.required_finished_course_count || 0} </strong>
+                <span>/ {stats?.required_course_count || 0}</span>
               </div>
-              {stats.nun_required_course_count > 0 && (
+              {stats && stats.nun_required_course_count > 0 && (
                 <div className={styles["info-item"]}>
                   <span>选修课：已学完课程</span>
                   <strong>
                     {" "}
-                    {stats.nun_required_finished_course_count || 0}{" "}
+                    {stats?.nun_required_finished_course_count || 0}{" "}
                   </strong>
-                  <span>/ {stats.nun_required_course_count || 0}</span>
+                  <span>/ {stats?.nun_required_course_count || 0}</span>
                 </div>
               )}
             </div>
@@ -260,70 +287,76 @@ const IndexPage = () => {
               <img className={styles["icon"]} src={studyTime} />
               <span>学习时长</span>
             </div>
-            <div className={styles["info"]}>
-              <div className={styles["info-item"]}>
-                今日：
-                {studyTimeFormat(stats.today_learn_duration)[0] !== 0 && (
-                  <>
-                    <strong>
-                      {" "}
-                      {studyTimeFormat(stats.today_learn_duration)[0] || 0}{" "}
-                    </strong>
-                    天
-                  </>
-                )}
-                {studyTimeFormat(stats.today_learn_duration)[1] !== 0 && (
-                  <>
-                    <strong>
-                      {" "}
-                      {studyTimeFormat(stats.today_learn_duration)[1] || 0}{" "}
-                    </strong>
-                    小时
-                  </>
-                )}
-                <strong>
-                  {" "}
-                  {studyTimeFormat(stats.today_learn_duration)[2] || 0}{" "}
-                </strong>
-                分钟
-                <strong>
-                  {" "}
-                  {studyTimeFormat(stats.today_learn_duration)[3] || 0}{" "}
-                </strong>
-                秒
+            {stats ? (
+              <div className={styles["info"]}>
+                <div className={styles["info-item"]}>
+                  今日：
+                  {studyTimeFormat(stats.today_learn_duration)[0] !== 0 && (
+                    <>
+                      <strong>
+                        {" "}
+                        {studyTimeFormat(stats.today_learn_duration)[0] ||
+                          0}{" "}
+                      </strong>
+                      天
+                    </>
+                  )}
+                  {studyTimeFormat(stats.today_learn_duration)[1] !== 0 && (
+                    <>
+                      <strong>
+                        {" "}
+                        {studyTimeFormat(stats.today_learn_duration)[1] ||
+                          0}{" "}
+                      </strong>
+                      小时
+                    </>
+                  )}
+                  <strong>
+                    {" "}
+                    {studyTimeFormat(stats.today_learn_duration)[2] || 0}{" "}
+                  </strong>
+                  分钟
+                  <strong>
+                    {" "}
+                    {studyTimeFormat(stats.today_learn_duration)[3] || 0}{" "}
+                  </strong>
+                  秒
+                </div>
+                <div className={styles["info-item"]}>
+                  累计：
+                  {studyTimeFormat(stats.learn_duration || 0)[0] !== 0 && (
+                    <>
+                      <strong>
+                        {" "}
+                        {studyTimeFormat(stats.learn_duration || 0)[0] ||
+                          0}{" "}
+                      </strong>
+                      天
+                    </>
+                  )}
+                  {studyTimeFormat(stats.learn_duration || 0)[1] !== 0 && (
+                    <>
+                      <strong>
+                        {" "}
+                        {studyTimeFormat(stats.learn_duration || 0)[1] ||
+                          0}{" "}
+                      </strong>
+                      小时
+                    </>
+                  )}
+                  <strong>
+                    {" "}
+                    {studyTimeFormat(stats.learn_duration || 0)[2] || 0}{" "}
+                  </strong>
+                  分钟
+                  <strong>
+                    {" "}
+                    {studyTimeFormat(stats.learn_duration || 0)[3] || 0}{" "}
+                  </strong>
+                  秒
+                </div>
               </div>
-              <div className={styles["info-item"]}>
-                累计：
-                {studyTimeFormat(stats.learn_duration || 0)[0] !== 0 && (
-                  <>
-                    <strong>
-                      {" "}
-                      {studyTimeFormat(stats.learn_duration || 0)[0] || 0}{" "}
-                    </strong>
-                    天
-                  </>
-                )}
-                {studyTimeFormat(stats.learn_duration || 0)[1] !== 0 && (
-                  <>
-                    <strong>
-                      {" "}
-                      {studyTimeFormat(stats.learn_duration || 0)[1] || 0}{" "}
-                    </strong>
-                    小时
-                  </>
-                )}
-                <strong>
-                  {" "}
-                  {studyTimeFormat(stats.learn_duration || 0)[2] || 0}{" "}
-                </strong>
-                分钟
-                <strong>
-                  {" "}
-                  {studyTimeFormat(stats.learn_duration || 0)[3] || 0}{" "}
-                </strong>
-                秒
-              </div>
-            </div>
+            ) : null}
           </div>
         </div>
         <div className={styles["tabs"]}>

src/pages/latest-learn/index.tsx

@@ -7,12 +7,46 @@ import mediaIcon from "../../assets/images/commen/icon-medal.png";
 import { useNavigate } from "react-router-dom";
 import { useSelector } from "react-redux";
 
+type LastLearnModel = {
+  [key: number]: LearnModel;
+};
+
+type LearnModel = {
+  course: LastCourseModel;
+  hour_record: HourRecordModel;
+  last_learn_hour: LastHourModel;
+  record: CourseRecordModel;
+};
+
+type LastCourseModel = {
+  charge?: number;
+  class_hour: number;
+  created_at?: string;
+  id: number;
+  is_required: number;
+  is_show?: number;
+  short_desc: string;
+  thumb: string;
+  title: string;
+};
+
+type LastHourModel = {
+  chapter_id: number;
+  course_id: number;
+  duration: number;
+  id: number;
+  rid: number;
+  sort: number;
+  title: string;
+  type: string;
+};
+
 const LatestLearnPage = () => {
   document.title = "最近学习";
   const navigate = useNavigate();
   const systemConfig = useSelector((state: any) => state.systemConfig.value);
   const [loading, setLoading] = useState<boolean>(false);
-  const [courses, setCourses] = useState<any>([]);
+  const [courses, setCourses] = useState<LastLearnModel[]>([]);
 
   useEffect(() => {
     getCourses();

src/playedu.d.ts

@@ -0,0 +1,53 @@
+declare global {
+  interface CourseModel {
+    charge: number;
+    class_hour: number;
+    created_at: string;
+    id: number;
+    is_required: number;
+    is_show: number;
+    short_desc: string;
+    thumb: string;
+    title: string;
+  }
+
+  interface HourModel {
+    chapter_id: number;
+    course_id: number;
+    duration: number;
+    id: number;
+    rid: number;
+    sort: number;
+    title: string;
+    type: string;
+  }
+
+  interface HourRecordModel {
+    course_id: number;
+    created_at: string;
+    finished_at?: string;
+    finished_duration: number;
+    hour_id: number;
+    id: number;
+    is_finished: number;
+    real_duration: number;
+    total_duration: number;
+    updated_at: string;
+    user_id: number;
+  }
+
+  interface CourseRecordModel {
+    course_id: number;
+    created_at: string;
+    finished_at?: string;
+    finished_count: number;
+    hour_count: number;
+    id: number;
+    is_finished: number;
+    progress: number;
+    updated_at: string;
+    user_id: number;
+  }
+}
+
+export {};