@social-mail/social-mail-client 1.2.64 → 1.2.65

package/src/public/channel/ChannelMessage.tsx

@@ -1,10 +1,16 @@
 import InjectProperty from "@web-atoms/core/dist/core/InjectProperty";
 import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
 import BlogService from "./BlogService";
+import XNode from "@web-atoms/core/dist/core/XNode";
+import { DateFormats } from "../../common/date/DateFormats";
+import { renderMail } from "../../web/page/mails/service/ConversationService";
 
 const url = (window as any).pageUrl as URL;
 
-const {1: channelID = 1, 2: emailID = 1 } = /^\/channels\/(\d+)\/(\d+)\//.exec(url.pathname) ?? {} as any;
+let {1: channelID = 1, 2: emailID = 82 } = /^\/channels\/([^\/]+)\/([^\/]+)\//.exec(url.pathname) ?? {} as any;
+
+channelID = parseInt(channelID, 36);
+emailID = parseInt(emailID, 36);
 
 export default class ChannelMessage extends AtomControl {
 
@@ -13,6 +19,18 @@ export default class ChannelMessage extends AtomControl {
 
     async init() {
         const { items: [ email ]} = await this.blogService.getEmails({ channelID,  start: 0, size: 1, cancelToken: null});
+
+        this.renderer = <section data-element="blog-item">
+            <h4 data-element="title">
+                <label text={email.subject}/>
+            </h4>
+            <h6 data-element="date" text={DateFormats.relative.short(email.dateSent)}/>
+            <h6 text={email.senderName}/>
+            <section
+                data-element="content">
+                <section { ... renderMail({ email })}/>
+            </section>
+        </section>;
     }
 
 }

package/src/public/channel/ChannelMessageList.tsx

@@ -10,6 +10,7 @@ import { IMailbox, IEmail } from "../../model/model";
 import { renderMail } from "../../web/page/mails/service/ConversationService";
 import BlogService from "./BlogService";
 import { channelViewStyle } from "./channelViewStyle";
+import { UrlService } from "./UrlService";
 
 export default class ChannelView extends AtomControl {
 
@@ -68,7 +69,7 @@ export default class ChannelView extends AtomControl {
                     itemRenderer={(email: IEmail) => {
                         return <section data-element="blog-item">
                             <h4 data-element="title">
-                                <a href={`/channels/${this.channel.mailboxID}/${email.emailID}/${email.subject?.trim() ?? ""}`} text={email.subject}></a>
+                                <a href={UrlService.toBlogUrl(channelID, email.emailID, email.subject)} text={email.subject}></a>
                             </h4>
                             <h6 data-element="date" text={DateFormats.relative.short(email.dateSent)}/>
                             <h6 text={email.senderName}/>

package/src/public/channel/UrlService.ts

@@ -0,0 +1,12 @@
+export const UrlService = {
+
+    toBlogUrl: (channelID: number, emailID: number, subject: string ) => {
+        subject ||= "";
+        if(subject.length > 400) {
+            subject = subject.substring(0, 400);
+        }
+        subject = subject.replace(/[^\p{L}\p{N}]+/ug, "-");
+        subject = encodeURIComponent(subject).replace(/\%20/g, "-");
+        return `/channels/${Number(channelID).toString(36)}/${Number(emailID).toString(36)}/${subject}`;
+    }
+};