github.com/quickfeed/quickfeed@v0.0.0-20240507093252-ed8ca812a09c/public/src/components/navbar/StreamStatus.tsx (about)

     1  import React, { useState } from "react"
     2  import { ConnStatus } from "../../Helpers"
     3  import { useActions, useAppState } from "../../overmind"
     4  
     5  
     6  const StreamStatus = () => {
     7      const status = useAppState((state) => state.connectionStatus)
     8      const isLoggedIn = useAppState((state) => state.isLoggedIn)
     9      const reconnect = useActions().startSubmissionStream
    10      const [open, setOpen] = useState<boolean>(false)
    11  
    12      if (!isLoggedIn) {
    13          // Don't show stream status if not logged in
    14          return null
    15      }
    16  
    17      const handleMouseEnter = () => {
    18          setOpen(true)
    19      }
    20  
    21      const handleMouseLeave = () => {
    22          setOpen(false)
    23      }
    24  
    25      const handleOnClick = () => {
    26          // Attempt to reconnect
    27          reconnect()
    28      }
    29  
    30      const streamStarter = open ? <i className="fa fa-repeat fa-stack-1x " onMouseLeave={handleMouseLeave} onClick={handleOnClick} /> : null
    31  
    32      // Show stream status based on connection status
    33      switch (status) {
    34          case ConnStatus.CONNECTED:
    35              return <i className="fa fa-circle text-success" title="Connected" />
    36          case ConnStatus.RECONNECTING:
    37              return (
    38                  <span className="fa-stack fa-lg2">
    39                      <i className="fa fa-circle fa-stack-1x text-warning" title="Attempting to re-establish stream connection" onMouseEnter={handleMouseEnter} />
    40                      {streamStarter}
    41                  </span>
    42              )
    43          default:
    44              return (
    45                  <span className="fa-stack">
    46                      <i className="fa fa-circle fa-stack-1x text-danger" title="No stream connection" onMouseEnter={handleMouseEnter} />
    47                      {streamStarter}
    48                  </span>
    49              )
    50      }
    51  }
    52  
    53  export default StreamStatus