import React, {useEffect, useState} from 'react';
import './App.css';
import logo from "./via-logo.svg"
import {Row} from "antd"
import socket from "./util/socket";
import NextShot from "./components/NextShot";
import ShotsTaken from "./components/ShotsTaken";
import Feed from "./components/Feed";


const App = () => {

    useEffect(() => {
        socket.on('connected', () => {
            console.log('connected :)')
        });

        return () => {
            socket.off("SENDING_NEW_TIME");
            socket.off("connection");
        }
    });

    return (
        <>
            <section className="content">
                <Row>
                    <NextShot/>
                    <Feed/>
                    <ShotsTaken/>
                </Row>
            </section>
            <footer>
                <img src={logo} className="via-logo" alt="logo"/>
            </footer>
        </>
    );
};

export default App;