@social-mail/social-mail-client 1.2.689 → 1.2.690

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@social-mail/social-mail-client",
-  "version": "1.2.689",
+  "version": "1.2.690",
   "description": "",
   "main": "index.js",
   "scripts": {

package/src/public/channel/ChannelView.tsx

@@ -24,13 +24,15 @@ import { WebComponents } from "../../site-editor/editor/webComponentsPath";
 import BlogImageService from "./BlogImageService";
 import ChannelCalendarView from "./ChannelCalendarView";
 import { Mailto } from "../../common/Mailto";
+import CalendarLink from "./controls/CalendarLink";
+import UpcomingEvents from "./controls/UpcomingEvents";
 
 const { channel, emailID, tag, author, calendar } = UrlService.getParameters();
 
 const commentIcon = "💬";
 
 @Pack
-class ChannelMessage extends AtomControl {
+export default class ChannelMessage extends AtomControl {
 
     @InjectProperty
     blogService: BlogService;
@@ -73,38 +75,15 @@ class ChannelMessage extends AtomControl {
         this.element.setAttribute("data-blog-list", "blog-list");
         this.element.setAttribute("data-layout", "flex-center");
         this.renderer = <section>
-            <BlogHeader
+            { !calendar && !emailID && <BlogHeader
                 search={search}
-                channel={this.channel}/>
+                channel={this.channel}/>}
             <section>
-                { emailID
-                    ? <AtomRepeater
-                        data-items-updated-event="items-updated"
-                        event-items-updated={() => this.itemsUpdated()}
-                        itemRenderer={(x) => <PostView channel={this.channel} email={x} />}
-                        items={this.emails}
-                        />
-                    : <AtomRepeater
-                        data-items-updated-event="items-updated"
-                        event-items-updated={() => this.itemsUpdated()}
-                        data-auto-scroll="false"
-                        itemRenderer={(x) => <PostSummary blogService={this.blogImageService} channel={this.channel} mailboxEmail={x} />}
-                        items={this.emails}
-                        { ... InfiniteRepeater.pagedItems((start) =>
-                                (c, e, cancelToken) =>
-                                    this.blogService.getEmails({
-                                        channelID: this.channel.mailboxID,
-                                        author: this.author,
-                                        tag: this.tag,
-                                        start,
-                                        search: this.search,
-                                        cancelToken
-                                    })
-                        )}
-                        /> }
+                { this.renderBody() }
             </section>
             <aside>
                 <TagCloud/>
+                <UpcomingEvents channel={this.channel}/>
                 <PopularPosts/>
                 <RecentPosts/>
             </aside>
@@ -112,6 +91,35 @@ class ChannelMessage extends AtomControl {
         </section>;
     }
 
+    private renderBody() {
+
+        if (calendar) {
+            return <ChannelCalendarView/>;
+        }
+
+        return emailID
+            ? <AtomRepeater
+                data-items-updated-event="items-updated"
+                event-items-updated={() => this.itemsUpdated()}
+                itemRenderer={(x) => <PostView channel={this.channel} email={x} />}
+                items={this.emails} />
+            : <AtomRepeater
+                data-items-updated-event="items-updated"
+                event-items-updated={() => this.itemsUpdated()}
+                data-auto-scroll="false"
+                itemRenderer={(x) => <PostSummary blogService={this.blogImageService} channel={this.channel} mailboxEmail={x} />}
+                items={this.emails}
+                {...InfiniteRepeater.pagedItems((start) => (c, e, cancelToken) => this.blogService.getEmails({
+                    channelID: this.channel.mailboxID,
+                    author: this.author,
+                    tag: this.tag,
+                    start,
+                    search: this.search,
+                    cancelToken
+                })
+                )} />;
+    }
+
     itemsUpdated() {
         (window as any).pageReady = true;
     }
@@ -175,11 +183,3 @@ class ChannelMessage extends AtomControl {
     }
 
 }
-
-let view = ChannelMessage as any;
-
-if (calendar) {
-    view = ChannelCalendarView;
-}
-
-export default view;

package/src/public/channel/UrlService.ts

@@ -1,10 +1,20 @@
 import { Slugger } from "../../common/Slugger";
 import { AppLocation } from "../../common/TestMode";
 import { Base36 } from "../../common/toBase36";
-import { IMailboxEmail, IMailboxTag } from "../../model/model";
+import { IMailbox, IMailboxEmail, IMailboxTag } from "../../model/model";
 
 export const UrlService = {
 
+    toCalendarUrl ({ emailAddress: { emailAddress }}: IMailbox) {
+        const cid = "@" + emailAddress.split("@")[0];
+
+        if (AppLocation.isLocalTesting) {
+            return `?detail=${cid}/calendar/`;
+        }
+
+        return `/${cid}/calendar/`;
+    },
+
     toBlogUrl ({ emailID, email: { subject }, mailbox: { emailAddress: { emailAddress } } }:  Partial<IMailboxEmail>) {
 
         const cid = "@" + emailAddress.split("@")[0];

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

@@ -0,0 +1,9 @@
+import XNode from "@web-atoms/core/dist/core/XNode";
+import { IMailbox } from "../../../model/model";
+import { UrlService } from "../UrlService";
+
+export default function CalendarLink({ channel = void 0 as IMailbox}) {
+    return <div>
+        <a href={UrlService.toCalendarUrl(channel)}>Events</a>
+    </div>;
+}

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

@@ -81,8 +81,8 @@ export default class PostList extends AtomRepeater {
     async init() {
 
 
-        this.setHeader();
         this.headerRenderer = (text) => <header text={text}/>;
+        this.setHeader();
         this.itemRenderer = (x: IMailboxEmail) => <div>
             <img src={Bind.oneTimeAsync(() => this.blogImageService.getImage(x), loaderImage)}/>
             <a

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

@@ -0,0 +1,30 @@
+import Query from "@web-atoms/entity/dist/services/Query";
+import { IMailboxEmail } from "../../../model/model";
+import PostList from "./PostList";
+import XNode from "@web-atoms/core/dist/core/XNode";
+import { UrlService } from "../UrlService";
+import DateTime from "@web-atoms/date-time/dist/DateTime";
+
+export default class UpcomingEvents extends PostList {
+
+    channel = null;
+
+    protected setHeader(): void {
+        this.header = "Events";
+
+        this.headerRenderer = (text) => <header>
+            <a href={UrlService.toCalendarUrl(this.channel)}>Events</a>
+        </header>;
+    }
+
+    protected query(q: Query<IMailboxEmail>) {
+        const { now } = DateTime;
+        return q
+            .where({ now }, (p) => (x) => x.email.mailboxContactEvents.some((a) => a.startDate > p.now ))
+            .orderByDescending((x) => x.datePublished)
+        .toPagedList({
+            size: 5
+        });
+
+    }
+}