fix: transform classes description HTML

Closes #1

backend/package.json

@@ -15,19 +15,21 @@
     "@grammyjs/auto-retry": "^1.1.1",
     "@grammyjs/parse-mode": "^1.9.0",
     "@prisma/client": "5.11.0",
-    "@telegum/grammy-buttons": "^0.1.2",
-    "@telegum/grammy-messages": "^0.1.2",
+    "@telegum/grammy-buttons": "^0.1.3",
+    "@telegum/grammy-messages": "^0.1.3",
     "@telegum/tgx": "^0.1.0",
     "axios": "^1.6.8",
     "dotenv": "^16.4.5",
     "grammy": "^1.21.1",
     "iso-639-1": "^3.1.2",
+    "jsdom": "^24.0.0",
     "lodash": "^4.17.21",
     "pino": "^8.19.0",
     "pino-pretty": "^10.3.1",
     "zod": "^3.22.4"
   },
   "devDependencies": {
+    "@types/jsdom": "^21.1.6",
     "@types/lodash": "^4.17.0",
     "prisma": "5.11.0"
   }

backend/src/translations/_en.tsx

@@ -1,5 +1,6 @@
 import { TIMEZONE } from '~/constants'
 import type { TrainingDetailed } from '~/services/sport/types'
+import { tgxFromHtml } from '~/utils/tgx-from-html'
 
 export default {
   'Welcome': 'Up and running!',
@@ -51,7 +52,7 @@ export default {
         <i>Accreditted: {accredited ? 'Yes' : 'No'}</i><br/>
         <br/>
         <i>Description:</i><br/>
-        {description}
+        {tgxFromHtml(description)}
       </>
     )
   },

backend/src/utils/tgx-from-html.tsx

@@ -0,0 +1,44 @@
+import type { TgxElement } from '@telegum/tgx'
+import { JSDOM } from 'jsdom'
+
+export function tgxFromHtml(raw: string): TgxElement {
+  const dom = new JSDOM(raw)
+  return tgxFromNode(dom.window.document.documentElement)
+}
+
+function tgxFromNode(node: ChildNode): TgxElement {
+  switch (node.nodeType) {
+    case node.TEXT_NODE:
+      return <>{node.textContent}</>
+    case node.ELEMENT_NODE:
+      switch ((node as Element).tagName) {
+        case 'P':
+          return <>{Array.from(node.childNodes).map(tgxFromNode)}<br/></>
+        case 'A':
+          return <a href={(node as HTMLAnchorElement).href}>{Array.from(node.childNodes).map(tgxFromNode)}</a>
+        case 'B':
+        case 'STRONG':
+          return <b>{Array.from(node.childNodes).map(tgxFromNode)}</b>
+        case 'I':
+          return <i>{Array.from(node.childNodes).map(tgxFromNode)}</i>
+        case 'U':
+          return <u>{Array.from(node.childNodes).map(tgxFromNode)}</u>
+        case 'S':
+        case 'DEL':
+        case 'STRIKE':
+          return <s>{Array.from(node.childNodes).map(tgxFromNode)}</s>
+        case 'BR':
+          return <br/>
+        default:
+          return <>{Array.from(node.childNodes).map(tgxFromNode)}</>
+      }
+  }
+  return <></>
+}
+
+// console.log(
+//   inspect(
+//     tgxFromHtml(`<p>The club trains in the following areas: hiking, historical fencing, folk games and general physical training. For self-development it is desirable to attend at least 2 classes a week.</p>\r\n<p>&nbsp;</p>\r\n<p>We also organize events, such as flying in a hot air tube, origami folding or traditional tea parties.</p>\r\n<p>&nbsp;</p>\r\n<p>Hiking</p>\r\n<p>Monday 19:30 - 21:30 - In front of SC</p>\r\n<p>We are walking along the outskirts of Innopolis on rough terrain.</p>\r\n<p>&nbsp;</p>\r\n<p>Historical Fencing</p>\r\n<p>Tuesday 16:30 - 18:30 - Big hall (RAGE Knights)</p>\r\n<p>Thursday 17:00 - 18:30 - Big hall (RAGE Knights)</p>\r\n<p>We train in the art of swordsmanship with a one-handed sword and shield. This is where you get praise for beating a man with a stick)</p>\r\n<p>&nbsp;</p>\r\n<p>Folk Games</p>\r\n<p>Wednesday 19:30 - 21:30 - Outdoor Basketball court</p>\r\n<p>We are playing in a lot of games, which can play both girls and boys, like Lapta, or hide-and-seek, salki and so on.</p>\r\n<p>&nbsp;</p>\r\n<p>Workout</p>\r\n<p>Friday 21:00 - 22:30 - 232 SC</p>\r\n<p>General physical training. Working with your own weight and sometimes with a partner. Mostly circular training sessions.</p>\r\n<p>&nbsp;</p>\r\n<p>Club Fee</p>\r\n<p>For buying equipment and developing the club we are gathering club fee. 500 rub per month. First month is free.</p>\r\n<p>&nbsp;</p>\r\n<p>Telegram channels</p>\r\n<p><a href=\"https://t.me/dich_trainings\">General</a></p>\r\n<p><a href=\"https://t.me/rage_knights\">RAGE Knights</a></p>`),
+//     { depth: null },
+//   ),
+// )