@social-mail/social-mail-client 1.2.547 → 1.2.549

package/src/public/channel/ChannelView.tsx

@@ -1,15 +1,167 @@
+
+
+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 Action from "@web-atoms/core/dist/view-model/Action";
+import EmojiPopup from "./emoji/EmojiPopup";
 import "../../style/GlobalStyle";
+import "./styles/channelViewStyle";
+import PopupService from "@web-atoms/core/dist/web/services/PopupService";
+import { IEmail, IMailbox } from "../../model/model";
+import AtomRepeater from "@web-atoms/web-controls/dist/basic/AtomRepeater";
+import PostView from "./PostView";
+import CopyIcon from "../../common/controls/buttons/CopyIcon";
+import TagCloud from "./controls/TagCloud";
+import PopularPosts from "./controls/PostList";
+import RecentPosts from "./controls/RecentPosts";
+import BlogHeader from "./controls/BlogHeader";
 import Pack from "@web-atoms/core/dist/Pack";
+import InfiniteRepeater from "../../common/controls/repeater/InfiniteRepeater";
+import Bind from "@web-atoms/core/dist/core/Bind";
+import PostSummary from "./PostSummary";
+import { Base36 } from "../../common/toBase36";
+
+const url = (window as any).pageUrl as URL ?? new URL(location.href);
 
+let {
+    1: channelID =  url.searchParams.get("p0") ,
+    2: type = url.searchParams.get("p1"),
+    3: p2 = url.searchParams.get("p2"),
+}
+    = /^\/channels\/([^\/]+)\/([^\/]+)\/([^\/]+)\//.exec(url?.pathname) ?? {} as any;
 
-const url = new URL(location.href);
-(window as any).pageUrl = url;
-const { default: view } = await (/\/channels\//.test(url.pathname) || url.searchParams.has("detail")
-    ? import("./ChannelMessage")
-    : import("./ChannelMessageList")) as any;
+if (channelID) {
+    channelID = Base36.decode(channelID) as any;
+}
+type ||= "";
+if (p2) {
+    p2 = Base36.decode(p2);
+}
+const emailID = type === "p" ? p2 : void 0;
+
+const commentIcon = "💬";
 
 @Pack
-export default class Empty extends view {
+export default class ChannelMessage extends AtomControl {
 
-}
+    @InjectProperty
+    blogService: BlogService;
+
+
+    private channel: IMailbox;
+    private email: IEmail;
+    private search = "";
+
+    private tagID = type === "t" ? p2 : null;
+    private authorID = type === "a" ? p2 : null;
+
+    private emails: IEmail[] = [];
+
+    constructor(app, e = document.createElement("section")) {
+        super(app, e);
+        this.pushInit();
+    }
+
+    async init() {
+
+        const channel = await this.blogService.getChannel(void 0, channelID, void 0);
+        this.channel = channel;
+
+        if (emailID){
+            this.email = await this.blogService.getEmail({ emailID, channelID});
+            this.email.engagements ??= [];
+            this.emails = [this.email];
+        }
+
+        const search = Bind.twoWaysImmediate(() => this.search);
+
+        this.element.setAttribute("data-blog-list", "blog-list");
+        this.element.setAttribute("data-layout", "flex-center");
+        this.renderer = <section>
+            <BlogHeader
+                search={search}
+                channel={channel}/>
+            <section>
+                { emailID
+                    ? <AtomRepeater
+                        items={this.emails}
+                        event-items-updated={() => this.itemsUpdated()}
+                        itemRenderer={(x) => <PostView email={x} />}
+                        />
+                    : <AtomRepeater
+                        items={this.emails}
+                        event-items-updated={() => this.itemsUpdated()}
+                        data-auto-scroll="false"
+                        { ... InfiniteRepeater.pagedItems((start) =>
+                                (c, e, cancelToken) =>
+                                    this.blogService.getEmails({
+                                        channelID: this.channel.mailboxID,
+                                        authorID: this.authorID,
+                                        tagID: this.tagID,
+                                        start,
+                                        search: this.search,
+                                        cancelToken
+                                    })
+                        )}
+                        itemRenderer={(x) => <PostSummary mailboxEmail={x} />}
+                        /> }
+            </section>
+            <aside>
+                <TagCloud/>
+                <PopularPosts/>
+                <RecentPosts/>
+            </aside>
+            <footer></footer>
+        </section>;
+    }
+
+    itemsUpdated() {
+        (window as any).pageReady = true;
+    }
+
+    @Action({ onEvent: "react-email"})
+    async reactEmail(email, ce: CustomEvent) {
+        const { headerMessageID } = email;
+        const emoji: string = await EmojiPopup.showControl(ce.target as any, { parentElement: ce.target as any});
+        const { channel } = this;
+        const subject = `${emoji}:${Number(email.emailID).toString(36)}:${headerMessageID}`;
+        await PopupService.alert({
+            message: <div data-layout="vertical-flex">
+                To add your emoji to this post, email just the emoji {emoji} with given subject to the channel email address.
+                <div>To: {channel.emailAddress.emailAddress} <CopyIcon text={channel.emailAddress.emailAddress}/> </div>
+                <div>Subject: {subject} <CopyIcon text={subject}/></div>
+                <div>Body: {emoji} <CopyIcon text={emoji}/></div>
+                <br/>
+                <div>If you have email client configured, you can click on following link.</div>
+                <div>
+                    <a href={`mailto:${channel.emailAddress.emailAddress}?subject=${subject}&body=${emoji}&in-reply-to=${headerMessageID}`}>Email Now</a>
+                </div>
+            </div>,
+            title: "Send Email"
+        });
+    }
+
+    @Action({ onEvent: "reply-email"})
+    async replyEmail(email, ce: CustomEvent) {
+        const emoji = commentIcon;
+        const { headerMessageID } = email;
+        const { channel } = this;
+        const subject = `${emoji}:${Number(email.emailID).toString(36)}:${headerMessageID}`;
+        await PopupService.alert({
+            message: <div data-layout="vertical-flex">
+                To send comment to this post, email us your comment with given subject to the channel email address.
+                <div>To: {channel.emailAddress.emailAddress} <CopyIcon text={channel.emailAddress.emailAddress}/></div>
+                <div>Subject: {subject} <CopyIcon text={subject}/></div>
+                <br/>
+                <div>If you have email client configured, you can click on following link.</div>
+                <div>
+                    <a href={`mailto:${channel.emailAddress.emailAddress}?subject=${subject}&in-reply-to=${headerMessageID}`}>Email Now</a>
+                </div>
+            </div>,
+            title: "Send Email"
+        });
+    }
 
+}

package/src/public/channel/PostSummary.tsx

@@ -0,0 +1,46 @@
+import XNode from "@web-atoms/core/dist/core/XNode";
+import { IEmail, IEmailEngagement, IMailboxEmail } from "../../model/model";
+import { DateFormats } from "../../common/date/DateFormats";
+import { UMD } from "@web-atoms/core/dist/core/types";
+import { renderMail } from "../../web/page/mails/service/ConversationService";
+import { UrlService } from "./UrlService";
+
+const commentIcon = "💬";
+
+export default function PostSummary ({
+        mailboxEmail = void 0 as IMailboxEmail,
+        itemPath = void 0 as string
+    }) {
+
+    const { mailboxID, email } = mailboxEmail;
+    const { engagements = [] } = email;
+
+    const isComment = email.parentID !== null;
+
+    return <section
+        data-element="blog-item"
+        data-comment={isComment}
+        data-item-path={itemPath}>
+        <h4 data-element="title">
+            <a href={UrlService.toBlogUrl(mailboxEmail)} text={ isComment ? email.senderName : email.subject}/>
+        </h4>
+        <h6 data-element="date" text={DateFormats.relative.short(email.dateSent)}/>
+        {!isComment && <h5 text={email.senderName}/> }
+        <section
+            data-element="content"
+            data-fade="bottom">
+            { !email.parentID
+                ? <section { ... renderMail({ email })}/>
+                : <section text={email.textBody}/>
+            }
+        </section>
+        <footer>
+            { ... engagements.map((x: IEmailEngagement) =>
+                <span
+                    data-click-event={ x.engagement === commentIcon ? "view-comments" : "none" }
+                    data-element="engagements"
+                    title={`View all ${x.engagement} ${x.count}`}
+                    text={`${x.engagement} ${x.count}`}/>)}
+        </footer>
+    </section>;
+}

package/src/public/channel/UrlService.ts

@@ -1,9 +1,9 @@
 import { AppLocation } from "../../common/TestMode";
-import { IMailboxTag } from "../../model/model";
+import { IMailboxEmail, IMailboxTag } from "../../model/model";
 
 export const UrlService = {
 
-    toBlogUrl (channelID: number, emailID: number, subject: string ) {
+    toBlogUrl ({ mailboxID, emailID, email: { subject } = {} as any }: IMailboxEmail) {
         subject ||= "";
         if(subject.length > 400) {
             subject = subject.substring(0, 400);
@@ -11,21 +11,21 @@ export const UrlService = {
         subject = subject.replace(/[^\p{L}\p{N}]+/ug, "-");
         subject = encodeURIComponent(subject).replace(/\%20/g, "-");
 
-        const cid = BigInt(channelID).toString(36);
+        const cid = BigInt(mailboxID).toString(36);
         const eid = BigInt(emailID).toString(36);
 
         if (AppLocation.isLocalTesting) {
-            return `?detail=true&cid=${cid}&eid=${eid}`;
+            return `?detail=true&p0=${cid}&p1=p&p2=${eid}`;
         }
 
-        return `/channels/${cid}/${eid}/${subject}`;
+        return `/channels/${cid}/p/${eid}/${subject}`;
     },
 
     toTagUrl ({ mailboxID, tagID, tag: { name } = {} as any }: IMailboxTag) {
         const cid = BigInt(mailboxID).toString(36);
         const eid = BigInt(tagID).toString(36);
         if (AppLocation.isLocalTesting) {
-            return `?detail=true&cid=${cid}&eid=${eid}`;
+            return `?detail=true&p0=${cid}&p1=t&p2=${eid}`;
         }
 
         name ||= "";
@@ -36,6 +36,6 @@ export const UrlService = {
         name = encodeURIComponent(name).replace(/\%20/g, "-");
 
 
-        return `/channels/${cid}/${eid}/${name}`;
+        return `/channels/${cid}/t/${eid}/${name}`;
     }
 };

package/src/public/channel/controls/PostList.tsx

@@ -12,6 +12,9 @@ import Bind from "@web-atoms/core/dist/core/Bind";
 import loaderImage from "@social-mail/social-mail-client/content/images/gif/loader.gif";
 import { Sql } from "../../../common/Sql";
 import BlogImageService from "../BlogImageService";
+import { CacheTTL } from "../../../common/cache/CacheTTL";
+
+const cacheVersion = "1a";
 
 
     styled.css `
@@ -79,7 +82,7 @@ export default class PostList extends AtomRepeater {
         this.itemRenderer = (x: IMailboxEmail) => <div>
             <img src={Bind.oneTimeAsync(() => this.blogImageService.getImage(x), loaderImage)}/>
             <a
-                href={UrlService.toBlogUrl(x.mailboxID, x.emailID, x.email.subject)}
+                href={UrlService.toBlogUrl(x)}
                 title={x.email.subject}
                 target="_blank" text={x.email.subject}></a>
         </div>;
@@ -98,7 +101,9 @@ export default class PostList extends AtomRepeater {
         return q
             .orderByDescending((x) => x.engagementCount)
             .toPagedList({
-                size: 5
+                size: 5,
+                cacheVersion,
+                cacheSeconds: CacheTTL.seconds.fifteenMinutes
             });
     }
 }

package/src/public/channel/controls/TagCloud.tsx

@@ -5,6 +5,10 @@ import { IMailbox, IMailboxTag, MailboxTag } from "../../../model/model";
 import XNode from "@web-atoms/core/dist/core/XNode";
 import styled from "@web-atoms/core/dist/style/styled";
 import { UrlService } from "../UrlService";
+import { CacheTTL } from "../../../common/cache/CacheTTL";
+
+const cacheVersion = "1a";
+
 
     styled.css `
         display: flex;
@@ -48,7 +52,9 @@ export default class TagCloud extends AtomRepeater {
             .include((x) => x.tag)
             .orderByDescending((x) => x.count)
             .toPagedList({
-                size: 20
+                size: 20,
+                cacheVersion,
+                cacheSeconds: CacheTTL.seconds.fifteenMinutes
             });
 
         this.itemRenderer = (x: IMailboxTag) => <a href={UrlService.toTagUrl(x)} text={`# ${x.tag.name}`}></a>;

package/src/public/channel/styles/channelViewStyle.ts

@@ -38,6 +38,23 @@ box-sizing: border-box;
         color: canvastext;
     }
 
+    & [data-fade=bottom] {
+        position: relative;
+        max-height: 200px;
+        overflow: hidden;
+        &:after {
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 0;
+            bottom: 0;
+            content: "";
+            margin: 0;
+            pointer-events: none;
+            background: linear-gradient(to top, rgba(255, 255, 255, 1) 1px, rgba(255, 255, 255, 0) 32px);
+        }
+    }
+
     & > h4 {
         grid-row: 1;
         grid-column: 1 / span 2;

package/src/site-editor/editor/WebSitePageEditor.tsx

@@ -182,7 +182,9 @@ export default class WebSitePageEditor extends HtmlPageEditor {
         pending.push(async () => {
             const stylerFile = await this.cloudFileService.children(this.folder.appFileID, "styles/styler.css")
                 .firstOrDefault();
-            const stylerContent = await FetchBuilder.get(stylerFile.downloadUrl).responseAsText();
+            const stylerContent = stylerFile
+                ? await FetchBuilder.get(stylerFile.downloadUrl).responseAsText()
+                : null;
             const newStyle = StylerSet.instance.toString();
             if (stylerContent !== newStyle) {
                 const stylerCSS = await this.createFile("styler.css", newStyle);