add react web project

web/src/components/TorrentList.js

@@ -0,0 +1,52 @@
+import React, { useEffect, useRef } from 'react'
+import Container from '@material-ui/core/Container'
+import Torrent from './Torrent'
+import List from '@material-ui/core/List'
+import { Typography } from '@material-ui/core'
+import { torrentsHost } from '../utils/Hosts'
+
+export default function TorrentList(props, onChange) {
+    const [torrents, setTorrents] = React.useState([])
+    const [offline, setOffline] = React.useState(true)
+    const timerID = useRef(-1)
+
+    useEffect(() => {
+        timerID.current = setInterval(() => {
+            getTorrentList((torrs) => {
+                if (torrs) setOffline(false)
+                else setOffline(true)
+                setTorrents(torrs)
+            })
+        }, 1000)
+
+        return () => {
+            clearInterval(timerID.current)
+        }
+    }, [])
+
+    return (
+        <React.Fragment>
+            <Container maxWidth="lg">{!offline ? <List>{torrents && torrents.map((torrent) => <Torrent key={torrent.hash} torrent={torrent} />)}</List> : <Typography>Offline</Typography>}</Container>
+        </React.Fragment>
+    )
+}
+
+function getTorrentList(callback) {
+    fetch(torrentsHost(), {
+        method: 'post',
+        body: JSON.stringify({ action: 'list' }),
+        headers: {
+            Accept: 'application/json, text/plain, */*',
+            'Content-Type': 'application/json',
+        },
+    })
+        .then((res) => res.json())
+        .then(
+            (json) => {
+                callback(json)
+            },
+            (error) => {
+                callback(null)
+            }
+        )
+}