erf herjkkl ef

gistfile1.txt

gdfgfd

markus_kodesnutt.jsx

import React, { useState, useEffect } from "react";
import "./App.css";

import socket from "./utils/socket";

const renderConnectionsInfo = (connected) => {
  if (connected) {
    return (
      <div>
        <p>Connected: true</p>
        <p>Slaves: </p>
      </div>
    );
  }

  return (
    <div>
      <p>Connected: false</p>
    </div>
  );
};

const pingServerForGreeting = () => {
  console.log("requesting greeting...");
  socket.emit("request_greeting");
};

const logConnectedToServer = () => {
  let date = new Date();
  console.log(
    `${date.getHours()}:${date.getMinutes()}: connected to server"`
  );
}

function App() {
  let [count, setCount] = useState(0);
  let [connected, setConnected] = useState(false);


  useEffect(() => {
      //display correct connection status when don't recieve "connect"
      //event upon connecting to server
      setInterval(() => {
        console.log("in timeout");
        if (connected !== socket.connected) {
          console.log("socket.connected:" + socket.connected);
          console.log("connected: " + connected);
          setConnected(socket.connected);
        }
      }, 2500);

    socket.on("connect", () => {
      logConnectedToServer();
      setConnected(socket.connected);
    });

    socket.on("message", (data) => {
      console.log(`message from server:\n${data.message}`);
    });

    return () => {
      socket.removeAllListeners();
    };
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        <p>Master client</p>
        <button
          onClick={() => {
            setCount(count + 1);
          }}
        >
          update
        </button>
        <p>count: {count}</p>
        {renderConnectionsInfo(connected)}
      </header>
      <div>
        <button onClick={pingServerForGreeting}>
          {" "}
          Ping server for greeting{" "}
        </button>
      </div>
    </div>
  );
}

export default App;