2 files changed, 43 insertions, 0 deletions
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 (<article aria-busy="true">Загрузка списка сообщений</article>)
+    }
+    return (
+        <>
+            <h1>{echo.name}</h1>
+            <p>Сообщений: {echo.count}</p>
+            {messages.map((message) => (
+                <Message key={message.id} message={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) => (
+            <article key={e.name}>
+                <header>
+                    <Link to={`/e/${e.name}`}>{e.name}</Link>
+                    &nbsp; [{e.count}]
+                </header>
+                {e.description}
+            </article>
+        ));
+};
+
+export default List;