fix: timer

web/src/pages/Project/PreviewProject/PreviewSection.jsx

@@ -10,64 +10,60 @@ import util from "../../component/Util"
 import StudentApi from "../../../api/StudentApi";
 import TaskCard from "./component/TaskCard";
 
-function PreviewSection(obj) {
-  let url = new URLSearchParams(obj.location.search)
-  const backUrl = url.get('back')
-
-  const sid = obj.match.params.sid
-  const pid = obj.match.params.pid
-  const [section, setSection] = useState({resource: {}})
-  const [tasks, setTasks] = useState([])
-  const [learning, setLearning] = useState(false)
-  const [editable, setEditable] = useState(false)
-  const [showCount, setShowCount] = useState(false)
-
-  const [minute, setMinute] = useState(0)
-  const [second, setSecond] = useState(0)
-  const [timer, setTimer] = useState(null)
-  let s = 0
-  let m = 0
-
-  useEffect(() => {
-    getSectionDetail()
-    getTasks()
-  }, [])
-  useEffect(() => {
-    if (learning) {
-      window.onbeforeunload = leave
+class PreviewSection extends React.Component {
+  constructor(props) {
+    super(props);
+    let url = new URLSearchParams(this.props.location.search)
+    const backUrl = url.get('back')
+    this.state = {
+      backUrl: backUrl,
+      sid: this.props.match.params.sid,
+      pid: this.props.match.params.pid,
+      section: {resource: {}},
+      tasks: [],
+      learning: false,
+      editable: false,
+      showCount: false,
+      timer: null,
+      minute: 0,
+      second: 0,
     }
-  }, [learning])
-  const leave = () => {
-    if (timer != null) {
-      clearTimeout(timer)
+  }
+  componentDidMount() {
+    this.getSectionDetail()
+    this.getTasks()
+  }
+  componentWillUnmount() {
+    if (this.state.timer != null) {
+      clearTimeout(this.state.timer)
     }
     let data = {
-      learnMinute: m,
-      learnSecond: s
+      learnMinute: this.state.minute,
+      learnSecond: this.state.second
     }
-    StudentApi.updateLearnSection(pid, sid, data)
+    StudentApi.updateLearnSection(this.state.pid, this.state.sid, data)
       .then(res => {
       })
       .catch(e => {
         console.log(e)
       })
-    window.removeEventListener("onbeforeunload", leave)
   }
 
-  const getSectionDetail = () => {
-    SectionApi.getSectionDetail(sid, pid)
+  getSectionDetail = () => {
+    SectionApi.getSectionDetail(this.state.sid, this.state.pid)
       .then(res => {
-        setSection(res.data.section)
+        this.setState({
+          section: res.data.section
+        })
       })
       .catch(e => {
         console.log(e)
       })
   }
-  const getTasks = () => {
-    TaskApi.getSectionTasks(sid, pid)
+  getTasks = () => {
+    TaskApi.getSectionTasks(this.state.sid, this.state.pid)
       .then(res => {
         if (res.data.tasks === null) {
-          setTasks([])
         } else {
           let t = res.data.tasks
           for (let i = 0; i < t.length; i++) {
@@ -93,118 +89,133 @@ function PreviewSection(obj) {
               }
             }
           }
-          setTasks(t)
+          this.setState({
+            tasks: t
+          })
         }
-        setLearning(res.data.learning)
-        setEditable(res.data.editable)
-        setShowCount(res.data.showCount)
+        this.setState({
+          learning: res.data.learning,
+          editable: res.data.editable,
+          showCount: res.data.showCount
+        })
 
-        if (res.data.learning) {
-          getTimer()
+        if (res.data.learning && this.state.timer === null) {
+          this.setTimer()
         }
       })
       .catch(e => {
         console.log(e)
       })
   }
-  const getTimer = () => {
-    StudentApi.getLearnSection(pid, sid)
+  setTimer = () => {
+    StudentApi.getLearnSection(this.state.pid, this.state.sid)
       .then(res => {
         if (res.data.code === 200) {
-          setSecond(res.data.data.learnSecond)
-          setMinute(res.data.data.learnMinute)
-          s = res.data.data.learnSecond
-          m = res.data.data.learnMinute
+          let m = res.data.data.learnMinute
+          let s = res.data.data.learnSecond
+          this.setState({
+            minute: m,
+            second: s
+          })
+          if (this.state.timer !== null) {
+            clearTimeout(this.state.timer)
+          }
+          this.state.timer = setTimeout(this.count, 1000)
         }
       })
       .catch(e => {
         console.log(e)
       })
-
-    setTimeout(count, 1000)
   }
-  const count = () => {
-    if (s === 30) {
-      s = 0
-      m++
-      setMinute(m)
+  count = () => {
+    if (this.state.second >= 60) {
+      this.setState({
+        second: 0,
+        minute: ++this.state.minute
+      })
     } else {
-      s++
+      this.setState({
+        second: ++this.state.second
+      })
     }
-    setSecond(s)
-    setTimeout(count, 1000)
+    this.state.timer = setTimeout(this.count, 1000)
   }
-  const back = e => {
-    if (backUrl === undefined || backUrl === null) {
-      window.location.href = `/project/${pid}/section/${sid}/edit`
+  back = e => {
+    if (this.state.backUrl === undefined || this.state.backUrl === null) {
+      this.props.history.push(`/project/${this.state.pid}/section/${this.state.sid}/edit`)
     } else {
-      window.location.href = backUrl
+      this.props.history.push(this.state.backUrl)
     }
   }
-  const setTaskItem = (item, index) => {
-    tasks[index] = item
-    setTasks([...tasks])
+  setTaskItem = (item, index) => {
+    this.state.tasks[index] = item
+    this.setState({
+      tasks: [...this.state.tasks]
+    })
   }
 
-  return (
-    <DocumentTitle title="Project">
-      <div style={{backgroundColor: '#f2f4f5', minHeight: '100vh'}}>
-        <BackTop/>
-        <PageHeader
-          className="site-page-header"
-          onBack={back}
-          title="返回"
-          subTitle="我的项目"
-        />
-        <div style={{padding: '20px', margin: 'auto'}}>
-          <Card>
-            <h2 style={{fontWeight: 'bold'}}>
-              {util.FormatSectionName(section.sectionName, section.chapterNumber, section.sectionNumber)}
-            </h2>
-            {learning ?
-              <span style={{float: 'right'}}>{minute}&nbsp;:&nbsp;{second}</span>
-              : null}
-          </Card>
-          <Card className="resource-card">
-            <div dangerouslySetInnerHTML={{__html: section.resource.content}}/>
-          </Card>
-          <Card className="resource-card">
-            <p className="card-title">文件资源</p>
-            <p>{section.resource.fileTitle}</p>
-            <p>{section.resource.fileIntroduce}</p>
-          </Card>
-          {tasks.map((item, index) => (
-            <Card className="resource-card" key={index.toString()}>
-              <p className="card-title">学生任务
-                {item.submitted ?
-                  <span className="submit-status" style={{color: 'green'}}>
-                  权重占比&nbsp;{item.taskWeight}&nbsp;%&nbsp;&nbsp;已提交&nbsp;&nbsp;{util.FilterTime(item.submit.createAt)}
-                </span>
-                  :
-                  <span className="submit-status" style={{color: 'gray'}}>
-                  权重占比&nbsp;{item.taskWeight}&nbsp;%&nbsp;&nbsp;未提交
-                </span>
-                }
-              </p>
-
-              <TaskCard
-                pid={pid}
-                item={item}
-                index={index}
-                learning={learning}
-                editable={editable}
-                showCount={showCount}
-                setTaskItem={setTaskItem}
-                getTasks={getTasks}
-              />
+  render() {
+    const {section, tasks, learning, pid, editable, showCount, minute, second} = this.state
+    return (
+      <DocumentTitle title="Project">
+        <div style={{backgroundColor: '#f2f4f5', minHeight: '100vh'}}>
+          <BackTop/>
+          <PageHeader
+            className="site-page-header"
+            onBack={this.back}
+            title="返回"
+            subTitle="我的项目"
+          />
+          <div style={{padding: '20px', margin: 'auto'}}>
+            <Card>
+              <h2 style={{fontWeight: 'bold'}}>
+                {util.FormatSectionName(section.sectionName, section.chapterNumber, section.sectionNumber)}
+              </h2>
+              {learning ?
+                <span style={{float: 'right'}}>{minute}&nbsp;:&nbsp;{second}</span>
+                : null}
             </Card>
-          ))
-          }
+            <Card className="resource-card">
+              <div dangerouslySetInnerHTML={{__html: section.resource.content}}/>
+            </Card>
+            <Card className="resource-card">
+              <p className="card-title">文件资源</p>
+              <p>{section.resource.fileTitle}</p>
+              <p>{section.resource.fileIntroduce}</p>
+            </Card>
+            {tasks.map((item, index) => (
+              <Card className="resource-card" key={index.toString()}>
+                <p className="card-title">学生任务
+                  {item.submitted ?
+                    <span className="submit-status" style={{color: 'green'}}>
+                    权重占比&nbsp;{item.taskWeight}&nbsp;%&nbsp;&nbsp;已提交&nbsp;&nbsp;{util.FilterTime(item.submit.createAt)}
+                  </span>
+                    :
+                    <span className="submit-status" style={{color: 'gray'}}>
+                    权重占比&nbsp;{item.taskWeight}&nbsp;%&nbsp;&nbsp;未提交
+                  </span>
+                  }
+                </p>
+
+                <TaskCard
+                  pid={pid}
+                  item={item}
+                  index={index}
+                  learning={learning}
+                  editable={editable}
+                  showCount={showCount}
+                  setTaskItem={this.setTaskItem}
+                  getTasks={this.getTasks}
+                />
+              </Card>
+            ))
+            }
+          </div>
+          <br/>
         </div>
-        <br/>
-      </div>
-    </DocumentTitle>
-  )
+      </DocumentTitle>
+    )
+  }
 }
 
 export default PreviewSection