rearrange modules

src/rfront/.gitignore

@@ -1,5 +1,3 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
 # dependencies
 /node_modules
 /.pnp
@@ -13,11 +11,18 @@
 
 # misc
 .DS_Store
-.env.local
+.env*
-.env.development.local
+.vscode/
-.env.test.local
+.eslintcache
-.env.production.local
+junit.xml
 
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# app
+data/
+public/index.js
+public/xterm/
+
+

src/rfront/App.css

@@ -1,59 +0,0 @@
-.App {
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-  align-content: space-around;
-  align-items: center;
-  margin: 66px;
-  border-style: solid;
-  border-color: deeppink;
-  margin-top: 20px;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.message {
-  color: deeppink;
-}
-
-.list-message {
-  margin: 5px;
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-}
-

src/rfront/App.js

@@ -1,63 +0,0 @@
-import "./App.css";
-import Messages from "./components/Messages";
-import TextField from "./components/TextField";
-import { useEffect, useState } from "react";
-import { io } from "socket.io-client";
-
-function App() {
-  const [messages, setMessages] = useState([]);
-  const [socketInstance, setSocketInstance] = useState("");
-
-  useEffect(() => {
-    fetch(`${process.env.REACT_APP_BACKEND_SERVICE_URL}/messages`)
-      .then((response) => response.json())
-      .then((responseData) => {
-        setMessages(responseData);
-      });
-  }, []);
-  useEffect(() => {
-    const socket = io(`${process.env.REACT_APP_WEBSOCKET_SERVICE_URL}`, {
-      transports: ["websocket"],
-      cors: {
-        origin: "http://localhost:3000/",
-        withCredentials: true,
-      },
-    });
-    setSocketInstance(socket);
-
-    socket.on("connect", (data) => {
-      console.log("socket - connected users:", data);
-    });
-
-    socket.on("disconnect", (data) => {
-      console.log("socket - disconnect users:", data);
-    });
-
-    socket.on("new_message", (data) => {
-      const updatedMessages = [...messages, data];
-      setMessages(updatedMessages);
-      console.log(data);
-    });
-
-    return function cleanup() {
-      console.log("clean up");
-      socket.disconnect();
-    };
-  }, [messages]);
-  return (
-    <div className="App">
-      {messages.length !== 0 ? (
-        <Messages messages={messages} />
-      ) : (
-        <p>No Messages</p>
-      )}
-      <TextField
-        socket={socketInstance}
-        messages={messages}
-        setMessages={setMessages}
-      />
-    </div>
-  );
-}
-
-export default App;

src/rfront/App.test.js

@@ -1,9 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});
-

src/rfront/components/Messages.jsx

@@ -1,13 +0,0 @@
-export default function Messages({ messages }) {
-  return (
-    <>
-      {messages.map((message) => (
-        <li className="list-message" id={message.id} key={message.id}>
-          <b className="message">Message: {message.text}</b>
-          <b>Date: {message.date}</b>
-        </li>
-      ))}
-    </>
-  );
-}
-

src/rfront/components/TextField.jsx

@@ -1,42 +0,0 @@
-import { useState } from "react";
-
-export default function TextField({ messages, setMessages, socket }) {
-  const [inputValue, setInputValue] = useState("");
-
-  function handleClick() {
-    const data = { text: inputValue };
-    fetch(`${process.env.REACT_APP_BACKEND_SERVICE_URL}/messages`, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(data),
-    })
-      .then((response) => response.json())
-      .then((responseData) => {
-        if (responseData.status === "error") {
-          console.log("error", responseData);
-          return;
-        }
-        const updatedMessages = [...messages, responseData.message];
-        setMessages(updatedMessages);
-        setInputValue("");
-
-        socket.emit("new_message", responseData.message);
-      });
-  }
-  function handleTyping(event) {
-    setInputValue(event.target.value);
-  }
-  return (
-    <>
-      <input
-        type="text"
-        id="message"
-        value={inputValue}
-        onChange={handleTyping}
-      ></input>
-      <button disabled={!inputValue} onClick={handleClick}>
-        Submit
-      </button>
-    </>
-  );
-}

src/rfront/index.css

@@ -1,14 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
-

src/rfront/index.js

@@ -1,7 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import "./index.css";
-import App from "./App";
-
-const root = ReactDOM.createRoot(document.getElementById("root"));
-root.render(<App />);

src/rfront/setupTests.js

@@ -1,6 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import "@testing-library/jest-dom";
-