Update server gateway and fix bug in CreateLiveCourseDialog component

public/app_params.json

@@ -1,3 +1,3 @@
 {
-    "server_gateway": "http://192.168.6.117:8303"
-}
+  "server_gateway": "http://192.168.6.103:8303"
+}

src/apis/coursesAPI.js

@@ -95,6 +95,12 @@ const sendChatMessageServicenRequest = async (method, params) => {
 const getUserInfo = async () => {
   try {
     const data = await sendUserServicenRequest('GetUserInfoAsync');
+    if (data.error && data.error.code === 1) {
+      /// 如果信息获取接口报错，尝试重新获取服务器地址
+      sessionStorage.setItem('server_gateway', '');
+      const dataFixed = await sendUserServicenRequest('GetUserInfoAsync');
+      return dataFixed.result;
+    }
     return data.result;
   } catch (err) {
     console.log('%c Line:55 👾 err', 'color:#4fff4B', err);

src/components/courses/CreateLiveCourseDialog.jsx

@@ -2,12 +2,19 @@ import { Form, Input, Row, Col, Upload, Modal, message } from 'antd';
 import { PlusOutlined, LoadingOutlined } from '@ant-design/icons';
 import * as coursesAPI from '../../apis/coursesAPI';
 import { useTranslation } from 'react-i18next';
-import React, { useEffect, useState } from 'react';
+import React, {
+  useEffect,
+  useState,
+  useImperativeHandle,
+  forwardRef,
+} from 'react';
+import { useForm } from 'antd/lib/form/Form';
 import ImgCrop from 'antd-img-crop';
 
 // 创建直播课，由 CreateCoursePage 精简得到
-function CreateLiveCourseDialog(param) {
-  const { code, form, onRequestClose } = param;
+const CreateLiveCourseDialog = forwardRef(function Component(props, ref) {
+  const { code, onRequestClose } = props.props;
+  const [form] = useForm();
   const [isEditMode, setIsEditMode] = useState(); // 是否为编辑模式
   const [initialValues, setInitialValues] = useState(null); // 设置表单的编辑初始化
   const [fileList, setFileList] = useState([]);
@@ -19,6 +26,14 @@ function CreateLiveCourseDialog(param) {
   const { t, i18n } = useTranslation();
   const { TextArea } = Input;
 
+  // useImperativeHandle 可以自定义暴露给父组件的方法
+  // 与 forwardRef 一起使用
+  useImperativeHandle(ref, () => ({
+    submit() {
+      form.submit();
+    },
+  }));
+
   const layout = {
     labelCol: {
       span: 8,
@@ -230,8 +245,14 @@ function CreateLiveCourseDialog(param) {
       </Form>
     </div>
   ) : (
-    <div>{'loadding...'}</div>
+    <center>
+      <div className='h-[9rem]'></div>
+      <LoadingOutlined />
+      <div className='h-3'></div>
+      {t('加载中')}
+      <div className='h-[9rem]'></div>
+    </center>
   );
-}
+});
 
 export default CreateLiveCourseDialog;

src/i18n/en.json

@@ -18,7 +18,6 @@
     "下载": "Download",
     "不在线": "Offline",
     "专辑": "Album",
-    "专辑名称": "Album Name",
     "专辑描述": "Album Description",
     "专辑简介": "Album Introduction",
     "专辑：": "Album: ",
@@ -32,8 +31,6 @@
     "关闭": "Close",
     "分享": "Share",
     "分享链接已复制到剪贴板🔗": "Shared link has been copied to clipboard🔗",
-    "创建专辑": "Create Album",
-    "创建专辑【按钮】": "Create",
     "创建失败": "Creation Failed",
     "创建时间": "Creation Time",
     "创建课程": "Create Course",
@@ -41,6 +38,7 @@
     "删除": "Delete",
     "删除失败": "Deletion Failed",
     "刷新": "Refresh",
+    "加载中": "Loading",
     "助教": "Teaching Assistant",
     "助教不能是参会者": "The teaching assistant can't be a participant",
     "参会者": "Participant",
@@ -76,7 +74,6 @@
     "我创建的": "Created",
     "我参与的": "Participated",
     "我报名的": "Registered",
-    "所属专辑": "Belongs to Album",
     "报名": "Sign Up",
     "报名成功：": "Registration Successful: ",
     "搜索": "Search",
@@ -93,7 +90,6 @@
     "无权限，请使用杏聆荟账号下载资源": "No permission, please use Flyinsono account to download resources",
     "时间：": "Time: ",
     "是": "Yes",
-    "是否删除该专辑": "Whether to Delete This Album",
     "是否删除该课程": "Whether to Delete This Course",
     "是否小班化": "Is it a small class",
     "暂无": "None",
@@ -102,7 +98,6 @@
     "更多": "More",
     "更新时间": "Update Time",
     "最终版本不会存在此控件": "This control will not exist in the final version",
-    "未填写": "Not Filled In",
     "杏聆荟学院": "Flyinsono College",
     "查看更多": "View More",
     "查询前12条数据": "Query the First 12 Records",
@@ -121,7 +116,6 @@
     "结束失败": "Ending Failed",
     "结束录制": "Stop Recording",
     "结束课程": "End Course",
-    "编辑专辑": "Edit Album",
     "编辑失败": "Editing Failed",
     "编辑课程": "Edit Course",
     "老师暂时离开，请稍后": "The Teacher is Temporarily Away, Please Wait",
@@ -133,6 +127,7 @@
     "请输入": "Please Enter",
     "请输入名称": "Please Enter the Name",
     "请输入姓名": "Please Enter Name",
+    "请输入描述": "Please Enter Description",
     "请输入用户姓名": "Please Enter User's Name",
     "请选择": "Please Select",
     "请选择jpg、jpeg、png的图片上传": "Please upload a jpg, jpeg or png image",
@@ -145,7 +140,6 @@
     "课程列表": "Course List",
     "课程名称": "Course Name",
     "课程已结束": "Course Ended",
-    "课程形式": "Course Format",
     "课程描述": "Course Description",
     "课程未开始，请稍后": "The Course Hasn't Started Yet, Please Wait",
     "课程标签": "Course Tag",

src/i18n/zh.json

@@ -18,7 +18,6 @@
     "下载": "下载",
     "不在线": "不在线",
     "专辑": "专辑",
-    "专辑名称": "专辑名称",
     "专辑描述": "专辑描述",
     "专辑简介": "专辑简介",
     "专辑：": "专辑：",
@@ -32,8 +31,6 @@
     "关闭": "关闭",
     "分享": "分享",
     "分享链接已复制到剪贴板🔗": "分享链接已复制到剪贴板🔗",
-    "创建专辑": "创建专辑",
-    "创建专辑【按钮】": "创建专辑",
     "创建失败": "创建失败",
     "创建时间": "创建时间",
     "创建课程": "创建课程",
@@ -41,6 +38,7 @@
     "删除": "删除",
     "删除失败": "删除失败",
     "刷新": "刷新",
+    "加载中": "加载中",
     "助教": "助教",
     "助教不能是参会者": "助教不能是参会者",
     "参会者": "参会者",
@@ -76,7 +74,6 @@
     "我创建的": "我创建的",
     "我参与的": "我参与的",
     "我报名的": "我报名的",
-    "所属专辑": "所属专辑",
     "报名": "报名",
     "报名成功：": "报名成功：",
     "搜索": "搜索",
@@ -93,7 +90,6 @@
     "无权限，请使用杏聆荟账号下载资源": "无权限，请使用杏聆荟账号下载资源",
     "时间：": "时间：",
     "是": "是",
-    "是否删除该专辑": "是否删除该专辑",
     "是否删除该课程": "是否删除该课程",
     "是否小班化": "是否小班化",
     "暂无": "暂无",
@@ -102,7 +98,6 @@
     "更多": "更多",
     "更新时间": "更新时间",
     "最终版本不会存在此控件": "最终版本不会存在此控件",
-    "未填写": "未填写",
     "杏聆荟学院": "杏聆荟学院",
     "查看更多": "查看更多",
     "查询前12条数据": "查询前12条数据",
@@ -121,7 +116,6 @@
     "结束失败": "结束失败",
     "结束录制": "结束录制",
     "结束课程": "结束课程",
-    "编辑专辑": "编辑专辑",
     "编辑失败": "编辑失败",
     "编辑课程": "编辑课程",
     "老师暂时离开，请稍后": "老师暂时离开，请稍后",
@@ -133,6 +127,7 @@
     "请输入": "请输入",
     "请输入名称": "请输入名称",
     "请输入姓名": "请输入姓名",
+    "请输入描述": "请输入描述",
     "请输入用户姓名": "请输入用户姓名",
     "请选择": "请选择",
     "请选择jpg、jpeg、png的图片上传": "请选择jpg、jpeg、png的图片上传",
@@ -145,7 +140,6 @@
     "课程列表": "课程列表",
     "课程名称": "课程名称",
     "课程已结束": "课程已结束",
-    "课程形式": "课程形式",
     "课程描述": "课程描述",
     "课程未开始，请稍后": "课程未开始，请稍后",
     "课程标签": "课程标签",
@@ -160,4 +154,4 @@
     "进入课程": "进入课程",
     "首页": "首页"
   }
-}
+}

src/pages/MyCoursePage.jsx

@@ -1,15 +1,13 @@
-import React, { useState, useCallback, useEffect } from 'react';
+import React, { useState, useCallback, useEffect, useRef } from 'react';
 import TopTabs from '../components/public/TopTabs';
 import Pagination from '../components/public/Pagination';
 import MyCoursesList from '../components/courses/MyCourseList';
 import CourseTable from '../components/courses/CourseTable';
 import CreateLiveCourseDialog from '../components/courses/CreateLiveCourseDialog';
-import CreateAlbum from './CreateAlbumPage';
 import Modal from 'react-modal';
-import { useForm } from 'antd/lib/form/Form';
 import { useCopyToClipboard } from 'react-use';
 import { useParams } from 'react-router-dom';
-import { Button, Modal as AntdModal, message, notification } from 'antd';
+import { Modal as AntdModal, message, notification } from 'antd';
 import * as coursesAPI from '../apis/coursesAPI';
 import { useSessionStorage } from 'react-use';
 import { useNavigate } from 'react-router-dom';
@@ -19,13 +17,13 @@ import { useTranslation } from 'react-i18next';
 
 /// 创建课程模态框
 const CreateCourseModal = ({ isOpen, onRequestClose, code }) => {
-  const [form] = useForm();
   const { t, i18n } = useTranslation();
 
-  form.resetFields();
   const handleCloseModal = () => {
     onRequestClose();
   };
+  const formRef = useRef(); // 表单引用
+
   useEffect(() => {}, [code]);
   return (
     <AntdModal
@@ -39,7 +37,7 @@ const CreateCourseModal = ({ isOpen, onRequestClose, code }) => {
         <div className='flex justify-center' key={'course'}>
           <button
             className='rounded border bg-blue-500 hover:bg-blue-400  flex items-center justify-center mx-2 px-4 py-2 w-20'
-            onClick={form.submit}>
+            onClick={() => formRef.current.submit()}>
             <span className='text-white font-medium'>{t('确定')}</span>
           </button>
           <button
@@ -51,9 +49,11 @@ const CreateCourseModal = ({ isOpen, onRequestClose, code }) => {
       ]}>
       <div className='flex justify-center mb-4'>
         <CreateLiveCourseDialog
-          code={code}
-          form={form}
-          onRequestClose={onRequestClose}
+          props={{
+            code: code,
+            onRequestClose: handleCloseModal,
+          }}
+          ref={formRef}
         />
       </div>
     </AntdModal>