rearrange modules

This commit is contained in:
deflax 2024-04-29 18:49:37 +03:00
parent 1631eeedf0
commit f49b8d5a56
9 changed files with 11 additions and 219 deletions

17
src/rfront/.gitignore vendored
View file

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

View file

@ -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;
}

View file

@ -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;

View file

@ -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();
});

View file

@ -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>
))}
</>
);
}

View file

@ -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>
</>
);
}

View file

@ -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;
}

View file

@ -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 />);

View file

@ -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";