From fd4e0c3112d69061d495dfcf79f6ef62e3c6d5e6 Mon Sep 17 00:00:00 2001 From: Alexander Neonxp Kiryukhin Date: Tue, 29 Oct 2024 01:21:05 +0300 Subject: Начальный веб клиент MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/src/components/message.js | 20 ++++++++++++++++++ web/src/index.css | 6 ++++++ web/src/index.html | 13 ++++++++++++ web/src/index.js | 49 +++++++++++++++++++++++++++++++++++++++++++ web/src/pages/echo.js | 22 +++++++++++++++++++ web/src/pages/list.js | 21 +++++++++++++++++++ web/src/root.js | 10 +++++++++ 7 files changed, 141 insertions(+) create mode 100644 web/src/components/message.js create mode 100644 web/src/index.css create mode 100644 web/src/index.html create mode 100644 web/src/index.js create mode 100644 web/src/pages/echo.js create mode 100644 web/src/pages/list.js create mode 100644 web/src/root.js (limited to 'web/src') diff --git a/web/src/components/message.js b/web/src/components/message.js new file mode 100644 index 0000000..92c15be --- /dev/null +++ b/web/src/components/message.js @@ -0,0 +1,20 @@ +import React from "react"; +import Markdown from "react-markdown"; +import remarkBreaks from "remark-breaks"; + +const Message = ({message}) => { + return ( +
+
+ {message.subject} + {(new Date(message.date)).toLocaleDateString()} +
+ {message.message} + 
+                {JSON.stringify(message, null, 4)}
+
+
+ ); +} + +export default Message; \ No newline at end of file diff --git a/web/src/index.css b/web/src/index.css new file mode 100644 index 0000000..66b008c --- /dev/null +++ b/web/src/index.css @@ -0,0 +1,6 @@ +@import url("@picocss/pico"); + +.msg-header { + display: flex; + justify-content: space-between; +} \ No newline at end of file diff --git a/web/src/index.html b/web/src/index.html new file mode 100644 index 0000000..8d59bf1 --- /dev/null +++ b/web/src/index.html @@ -0,0 +1,13 @@ + + + + + + IDEC Client + + + +
Для этого приложения необходим JavaScript
+ + + diff --git a/web/src/index.js b/web/src/index.js new file mode 100644 index 0000000..a43ed75 --- /dev/null +++ b/web/src/index.js @@ -0,0 +1,49 @@ +import React from "react"; +import { createRoot } from "react-dom/client"; +import { createHashRouter, RouterProvider } from "react-router-dom"; +import Root from "./root"; +import List from "./pages/list"; +import Echo from "./pages/echo"; + +const router = createHashRouter([ + { + path: "/", + element: , + // loader: rootLoader, + children: [ + { + path: "", + element: , + loader: () => { + return fetch("/api/list").then((x) => x.json()); + }, + }, + { + path: "e/:echoID", + element: , + loader: async ({ params }) => { + const echoData = await fetch( + `/api/e?e=${params.echoID}&limit=10` + ).then((x) => x.json()); + let echo = []; + if (echoData[params.echoID]) { + echo = echoData[params.echoID]; + } + const messages = await fetch( + `/api/m?e=${params.echoID}` + ).then((x) => x.json()); + + return { echo, messages: messages.reverse() }; + }, + }, + ], + }, +]); + +const root = createRoot(document.getElementById("app")); +root.render( + Загрузка} + /> +); diff --git a/web/src/pages/echo.js b/web/src/pages/echo.js new file mode 100644 index 0000000..6ba7e67 --- /dev/null +++ b/web/src/pages/echo.js @@ -0,0 +1,22 @@ +import React from "react"; +import { useLoaderData, useParams } from "react-router"; +import Message from "../components/message"; + +const Echo = () => { + const {echo, messages} = useLoaderData(); + const params = useParams(); + if (!echo) { + return (
Загрузка списка сообщений
) + } + return ( + <> +

{echo.name}

+

Сообщений: {echo.count}

+ {messages.map((message) => ( + + ))} + + ); +}; + +export default Echo; diff --git a/web/src/pages/list.js b/web/src/pages/list.js new file mode 100644 index 0000000..a806622 --- /dev/null +++ b/web/src/pages/list.js @@ -0,0 +1,21 @@ +import React from "react"; +import { useLoaderData } from "react-router"; +import { Link } from "react-router-dom"; + +const List = () => { + const list = useLoaderData(); + + return list + .sort((e1, e2) => e2.count - e1.count) + .map((e) => ( +
+
+ {e.name} +   [{e.count}] +
+ {e.description} +
+ )); +}; + +export default List; diff --git a/web/src/root.js b/web/src/root.js new file mode 100644 index 0000000..ce1104b --- /dev/null +++ b/web/src/root.js @@ -0,0 +1,10 @@ +import React from "react"; +import { Outlet } from "react-router"; + +const Root = () => ( +
+ +
+) + +export default Root; \ No newline at end of file -- cgit v1.2.3