tomi.science

import Head from "next/head"; import { ReactElement, useEffect, useState } from "react"; import { io } from "socket.io-client"; import Marquees, { MarqueeLink } from "../components/Marquees/Marquees"; import * as config from "../config"; import styles from "../styles/Home.module.css"; const socket = io(config.backendUrl); const Home = (): ReactElement => { const [value, setValue] = useState(undefined); const [error, setError] = useState(""); const [papers, setPapers] = useState([]); useEffect(() => { socket.on("connect", () => { console.log("connected:", socket.id); }); socket.on("disconnect", (reason: string) => { const err = `disconnected, reason: ${reason}`; console.error(err); setError(err); }); socket.on("update", (arg: number) => { setValue(arg); }); }); useEffect(() => { async function fetchPapers() { try { const resp = await fetch(`${config.backendUrl}/api/papers`); const data = await resp.json(); setPapers(data); } catch (err) { console.error(err); setError(String(err)); } } fetchPapers(); }, []); const increment = () => { socket.emit("increment"); }; const rotateDeg = value !== undefined ? 10 * value : 0; return (

tomi.science

{error}

); }; export default Home;