@weavy/uikit-react 11.0.0

package/src/components/MeetingCard.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import Button from '../ui/Button';
+import Icon from '../ui/Icon';
+import { prefix as wy } from "../utils/styles";
+
+type Props = {
+    meeting: MeetingCardType
+
+}
+const MeetingCard = ({ meeting }: Props) => {
+
+    const handleJoin = () => {
+
+    }
+
+    return (
+        <div className={wy('attachments')}>
+            <a className={wy('attachment')} href={meeting.join_url} target="_blank">
+                <div className={wy('attachment-icon')} title="Zoom meeting"><Icon.UI name="zoom" color="#4a8cff" size={4} /></div>
+                <div className={wy('attachment-content')}>
+                    <div className={wy('attachment-title')}>Zoom meeting</div>
+                    <div className={wy('attachment-meta')}>Meeting ID: {`${meeting.provider_id.substring(0,3)}-${meeting.provider_id.substring(3,6)}-${meeting.provider_id.substring(6)}`}</div>                    
+                    <Button.UI className={wy('button-primary')}>Join meeting</Button.UI>
+                </div>
+            </a>
+        </div>
+
+    )
+}
+
+export default MeetingCard;

package/src/components/Meetings.tsx

@@ -0,0 +1,58 @@
+import React, { useContext, useEffect } from "react";
+import { UserContext } from "../contexts/UserContext";
+import { WeavyContext } from "../contexts/WeavyContext";
+import useMutateMeeting from "../hooks/useMutateMeeting";
+import Button from '../ui/Button';
+import Icon from '../ui/Icon';
+
+type Props = {
+    onMeetingAdded: Function
+}
+
+const Meetings = ({ onMeetingAdded }: Props) => {
+
+    const { options } = useContext(WeavyContext);
+    const { user } = useContext(UserContext);
+
+    const addMeeting = useMutateMeeting();
+    useEffect(() => {
+        window.addEventListener("message", createMeeting);
+
+
+        return () => {
+            window.removeEventListener("message", createMeeting);
+        }
+    }, [])
+
+    const createMeeting = async (e: any) => {
+
+        switch (e.data.name) {
+            case "zoom-signed-in":
+                var meeting = await addMeeting.mutateAsync({ provider: "zoom" });                
+                onMeetingAdded(meeting)
+                break;
+
+            case "teams-signed-in":
+                //console.log("Add Teams meeting");
+                break;
+        }
+
+    }
+
+    const handleZoom = () => {
+        window.open(`${options?.zoomAuthenticationUrl}&state=${user.id}`,
+            "zoomAuthWin",
+            "height=640,width=480");
+    }
+
+    return (
+        <>
+            {options?.zoomAuthenticationUrl &&
+                <Button.UI onClick={handleZoom} title="Add Zoom meeting"><Icon.UI name="zoom" /></Button.UI>
+            }
+        </>
+
+    )
+}
+
+export default Meetings;

package/src/components/Message.tsx

@@ -0,0 +1,90 @@
+import React, { FC } from 'react';
+import dayjs from 'dayjs';
+import { MessageProps } from "../types/Message"
+import Attachment from './Attachment';
+import { ReactionsMenu, ReactionsList } from './Reactions';
+import joypixels from 'emoji-toolkit';
+import { Image, ImageGrid } from "./Image"
+import SeenBy from './SeenBy';
+import Avatar from "./Avatar";
+import MeetingCard from './MeetingCard';
+import usePreview from '../hooks/usePreview';
+import { prefix as wy } from "../utils/styles";
+
+const Message: FC<MessageProps> = ({ id, html, temp, me, avatar, name, created_at, attachments, meeting, parentId, reactions, seenBy }) => {
+
+    const { open, close } = usePreview(attachments);
+
+    var messageClassName = wy("message" + (me ? " message-me" : ""));
+    var images = attachments?.filter((a: AttachmentType) => a.kind === "image" && a.thumbnail_url);
+    var files = attachments?.filter((a: AttachmentType) => a.kind !== "image" || !a.thumbnail_url);
+
+    const date = dayjs.utc(created_at).tz(dayjs.tz.guess());
+
+    const handlePreviewClick = (e: React.MouseEvent<HTMLInputElement>, attachmentId: number) => {
+        e.preventDefault();
+        open(attachmentId);
+    }
+
+    return (
+        <>
+            <div className={messageClassName}>
+                {!me && (
+                    <div className={wy('message-author')}>
+                        {avatar && <Avatar src={avatar} size={32} name={name} />}
+                    </div>
+                )}
+                <div className={wy('message-content')}>
+                    <div className={wy('message-meta')}>
+                        <time dateTime={created_at} title={date.format('LLLL')}>{date.fromNow()}</time>
+                    </div>
+                    <div className={wy('message-content-row')}>
+                        <div className={wy('message-bubble')}>
+                            {temp &&
+                                <div className={wy('message-text')}>{html}</div>
+                            }
+                            {!temp &&
+                                <>
+                                    {images && !!images.length && <ImageGrid>
+                                        {images.map((a: AttachmentType) =>
+                                            <Image onClick={(e) => handlePreviewClick(e, a.id)} key={a.id} src={a.download_url} previewSrc={a.preview_url} width={a.width} height={a.height} />
+                                        )}
+                                    </ImageGrid>}
+
+                                    {html && <div className={wy('message-text')} dangerouslySetInnerHTML={{ __html: joypixels.shortnameToUnicode(html || "") }}></div>}
+
+                                    {meeting &&
+                                        <MeetingCard meeting={meeting} />
+                                    }
+
+                                    {files && !!files.length && <div className={wy('attachments')}>
+                                        {files.map((a: AttachmentType) =>
+                                            <Attachment key={a.id} name={a.name} previewFormat={a.kind} provider={a.provider} url={a.download_url} previewUrl={a.provider ? a.external_url : a.preview_url} mediaType={a.media_type} kind={a.kind} size={a.size} />
+                                        )}
+                                    </div>}
+                                </>
+
+                            }
+                        </div>
+                        <div className={wy('message-buttons')}>
+                            {!temp && <ReactionsMenu id={id} reactions={reactions} />}
+                        </div>
+                    </div>
+
+                    {!temp && (
+                        <div className={wy('reactions')}>
+                            <ReactionsList id={id} parentId={parentId} reactions={reactions} />
+                        </div>
+                    )}
+                    
+                </div>
+
+                
+            </div>
+            <SeenBy id={id} parentId={parentId} seenBy={seenBy} createdAt={created_at} />
+        </>
+    )
+
+}
+
+export default Message;

package/src/components/Messages.tsx

@@ -0,0 +1,271 @@
+import React, { useCallback, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { UserContext } from '../contexts/UserContext';
+import useMessages from '../hooks/useMessages';
+import Button from '../ui/Button';
+import Message from './Message';
+import { createReverseScroller } from "../utils/infiniteScroll";
+import { scrollParentToBottom, isParentAtBottom } from "../utils/scrollToBottom";
+import ConversationForm from './ConversationForm';
+import useEvents from '../hooks/useEvents';
+import useMutateRead from '../hooks/useMutateRead';
+import useMutateMessage from '../hooks/useMutateMessage';
+import { useQueryClient } from 'react-query';
+import { WeavyContext } from '../contexts/WeavyContext';
+import { prefix as wy } from "../utils/styles";
+import Avatar from './Avatar';
+
+type Props = {
+    id: number,
+    members: MembersResult | undefined,
+    displayName?: string,
+    avatarUrl?: string 
+}
+
+const Messages = ({ id, members, displayName, avatarUrl }: Props) => {
+    var reverseScroller:IntersectionObserver | null;
+
+    const { user } = useContext(UserContext);
+
+    const queryClient = useQueryClient();
+    const { client } = useContext(WeavyContext);
+
+    const readMoreRef = useRef<any>();
+    const messagesEndRef = useRef<any>();
+    const [resolveScrollerFetch, setResolveScrollerFetch] = useState<Function | null>()
+   
+    const { dispatch, on, events } = useEvents();
+
+    const { isLoading, isError, data, error, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage } = useMessages(id, {});
+
+
+    const readMessageMutation = useMutateRead();
+    const addMessageMutation = useMutateMessage();
+
+    // scroll to bottom when data changes
+    useLayoutEffect(() => {
+        //if (id && !isLoading && !isLoadingMembers && !isLoadingConversation) {
+        if (id && !isLoading) {
+            //console.log("useLayoutEffect scroller", id)
+            // scroll to bottom when selecting a conversation
+            scrollParentToBottom(messagesEndRef.current);
+
+            // Scroll to bottom again two frames later, because the height is changing
+            requestAnimationFrame(() => requestAnimationFrame(() => scrollParentToBottom(messagesEndRef.current)));
+
+            // register infinite scroll
+
+            reverseScroller?.disconnect();
+
+            reverseScroller = createReverseScroller(readMoreRef.current, () => {
+                if (hasNextPage) {
+                    return fetchNextPage().then(() => {
+                        // Wait for useLayoutEffect before resolving
+                        return new Promise((resolve: Function) => setResolveScrollerFetch(resolve))
+                    })
+                }
+            })
+            console.log("rs scroller", reverseScroller.root);
+        } else {
+            reverseScroller?.disconnect();
+            reverseScroller = null;
+        }
+
+        return () => {
+            reverseScroller?.disconnect();
+            reverseScroller = null;
+        }
+    }, [id, isLoading]);
+
+
+    useLayoutEffect(() => {
+        // Resolve fetchNextPage after layout has been painted
+        if (!isFetchingNextPage && resolveScrollerFetch) {
+            resolveScrollerFetch()
+            setResolveScrollerFetch(null);
+        }
+    }, [data]);
+
+    useEffect(() => {
+
+        if (id) {
+
+            window.addEventListener('focus', handleFocus, false)
+
+            // mark conversation as read
+            readMessageMutation.mutate({ id: id, read: true })
+
+            client.subscribe(`a${id}`, "message-inserted", handleRealtimeMessage);
+            client.subscribe(`a${id}`, "conversation-read", handleRealtimeSeenBy);            
+            client.subscribe(`a${id}`, "reaction-inserted", handleRealtimeReactionInserted);
+            client.subscribe(`a${id}`, "reaction-deleted", handleRealtimeReactionDeleted);
+        }
+
+        return () => {
+            window.removeEventListener('focus', handleFocus, false)
+
+            if (id) {
+
+                // remove additional pages in cache. Only get first page
+                let qd = queryClient.getQueryData(["messages", id]);
+                if (qd) {
+                    queryClient.setQueryData(["messages", id], (data: any) => ({
+                        pages: data?.pages.splice(0, 1),
+                        pageParams: data?.pageParams.splice(0, 1),
+                    }));
+                }
+
+                client.unsubscribe(`a${id}`, "message-inserted", handleRealtimeMessage);
+                client.unsubscribe(`a${id}`, "conversation-read", handleRealtimeSeenBy);                
+                client.unsubscribe(`a${id}`, "reaction-inserted", handleRealtimeReactionInserted);
+                client.unsubscribe(`a${id}`, "reaction-deleted", handleRealtimeReactionDeleted);
+            }
+        }
+    }, [id]);
+
+    const handleRealtimeReactionInserted = useCallback((data: ReactionType) => {                
+        dispatch("reaction-inserted", data);
+    }, [id]);
+
+    const handleRealtimeReactionDeleted = useCallback((data: ReactionType) => {                
+        dispatch("reaction-deleted", data);
+    }, [id]);
+
+    // handle new message from post form
+    const handleNewMessage = (text: string, attachments: [], meetings: []) => {
+        addMessageMutation.mutate({ id: id, text: text, userId: user.id, attachments: attachments, meetings: meetings }, {
+            onSuccess: () => { requestAnimationFrame(() => scrollParentToBottom(messagesEndRef.current, true))}
+        });
+
+        // mark conversation as read
+        setTimeout(() => { readMessageMutation.mutate({ id: id, read: true }) }, 1000);
+
+
+        requestAnimationFrame(() => scrollParentToBottom(readMoreRef.current, true));
+    }
+
+    const handleRealtimeSeenBy = async (data: any) => {
+        let isAtBottom = isParentAtBottom(readMoreRef.current);
+        // how to do this better?                
+        queryClient.invalidateQueries(["members", id])
+
+        if (isAtBottom) {
+            requestAnimationFrame(() => scrollParentToBottom(readMoreRef.current, true));
+        }
+    }
+
+    // real time insert-message handler
+    const handleRealtimeMessage = useCallback((message: MessageType) => {
+        if (message.app_id !== id || message.created_by.id === user.id) return;
+
+        // mark conversation as read
+        readMessageMutation.mutate({ id: id, read: true })
+
+        const previousData = queryClient.getQueryData<any>(['messages', id]);
+
+        if (previousData && previousData.pages) {
+            let isAtBottom = isParentAtBottom(readMoreRef.current);
+
+            const newPagesArray = previousData.pages.map((page: any, i: number) => {
+                // remove temp message                    
+                if (i === 0) {
+                    page.data = [
+                        ...page.data,
+                        message
+                    ]
+
+                }
+                return page;
+
+            }) ?? [];
+
+            queryClient.setQueryData(["messages", id], (data: any) => ({
+                pages: newPagesArray,
+                pageParams: data.pageParams,
+            }));
+
+            if (isAtBottom) {
+                requestAnimationFrame(() => requestAnimationFrame(() => scrollParentToBottom(readMoreRef.current, true)));
+            }
+        }
+
+
+    }, [id]);
+
+    const handleFocus = useCallback(() => {
+        if (!id) return;
+
+        readMessageMutation.mutate({ id: id, read: true })
+    }, [id]);
+
+    let messageHeader = <div className={wy('avatar-header')}>
+        {avatarUrl && displayName && <Avatar src={avatarUrl} name={displayName} id={id} size={128} /> || ''}
+        {displayName && <div className={wy('avatar-display-name')}>{displayName}</div> || ''}
+    </div>;
+
+    let loadMoreButton = <Button.UI onClick={() => fetchNextPage()} disabled={!hasNextPage || isFetchingNextPage} className={wy('message-readmore')}>Load more</Button.UI>;
+
+    let messages = (
+        <>
+            <div className={wy('message-readmore')} ref={readMoreRef}>
+            {isFetchingNextPage
+                        ? 'Loading more...'
+                        : hasNextPage
+                            ? loadMoreButton
+                            : messageHeader}
+                
+            </div>
+            {data && members && data.pages && data.pages.map((group, i) => {
+                // Reverse key since page loading is reversed
+                return <React.Fragment key={data.pages.length - i}>
+                    {
+                        group.data?.map((item: MessageType) => {
+                            
+                            return <Message
+                                key={item.id}
+                                id={item.id}
+                                html={item.html}
+                                temp={item.temp}
+                                me={item.created_by.id === user.id}
+                                avatar={item.created_by.avatar_url}
+                                name={item.created_by.display_name}
+                                created_at={item.created_at}
+                                attachments={item.attachments}
+                                meeting={item.meeting}
+                                parentId={id}
+                                reactions={item.reactions}
+                                //reactions_count={item.reactions_count}
+                                seenBy={members.data.length > 0 ? members.data.filter((member) => {
+                                    const hasRead = member.read_at >= item.created_at;
+                                    const nothingLaterRead = !data.pages.map((p) => p.data).flat().find((message: MessageType) => { return message.id > item.id && member.read_at >= message.created_at });
+                                    return hasRead && nothingLaterRead && member.id !== user.id;
+                                }) : []}
+                            />
+                        })
+                    }
+                </React.Fragment>
+            })}
+            <div ref={messagesEndRef} />
+        </>
+    );
+
+    if (isLoading) {
+        messages = (
+            <div>Loading messages...</div>
+        )
+    }
+
+
+    return (
+        <>
+            <div id="container" className={wy('messages')}>
+                {messages}
+            </div>
+            <div className={wy('message-editor')}>
+                <ConversationForm key={id} conversationId={id} handleInsert={handleNewMessage} />
+            </div>
+        </>
+
+    );
+}
+
+export default Messages;

package/src/components/Messenger.tsx

@@ -0,0 +1,34 @@
+import React, { FC, useContext } from 'react';
+import MessengerProvider from '../contexts/MessengerContext';
+import Conversation from './Conversation';
+import ConversationList from './ConversationList';
+import { Messenger } from '../types/Messenger';
+import { WeavyContext } from '../contexts/WeavyContext';
+import { prefix as wy } from "../utils/styles";
+
+const Messenger: FC<Messenger> = ({ options }) => {
+
+    const { client } = useContext(WeavyContext);
+
+    if (!client) {
+        throw new Error('Weavy Messenger component must be used within an WeavyProvider');
+    }
+    
+    return (
+        <MessengerProvider options={options}>
+            <div className={wy('messenger-provider')}>
+
+                <div className={wy('messenger-sidebar')}>
+                    <ConversationList />
+                </div>
+
+                <div  className={wy('messenger-conversation')}>
+                    <Conversation id={null} />
+                </div>
+            </div>
+                      
+        </MessengerProvider>
+    )
+}
+
+export default Messenger;

package/src/components/NewConversation.tsx

@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import useMutateConversation from '../hooks/useMutateConversation';
+import Icon from '../ui/Icon';
+import Overlay from '../ui/Overlay';
+import Button from '../ui/Button';
+import SearchUsers from './SearchUsers';
+import { prefix as wy } from "../utils/styles";
+
+const NewConversation = () => {
+    const [modalOpen, setModalOpen] = useState(false);
+    const addConversationMutation = useMutateConversation();
+    
+    const handleCreate = async (selected: UserType[]) => {
+        
+        const membersList = selected.map((m) => m.id);
+        await addConversationMutation.mutateAsync({ members: membersList });
+        setModalOpen(false);
+    }
+
+    const handleOpen = () => {
+        setModalOpen(true);
+    }
+
+    const handleClose = () => {
+        setModalOpen(false);
+    }
+
+    return (
+        <>
+
+            <Button.UI onClick={handleOpen}><Icon.UI name="plus" /></Button.UI>
+
+            <Overlay.UI isOpen={modalOpen} className={wy('modal')}>
+                <header className={wy('appbars')}>
+                    <nav className={wy('appbar')}>
+                        <Button.UI onClick={handleClose}><Icon.UI name='close' /></Button.UI>
+                        <div className={wy('appbar-text')}>Create conversation</div>
+                    </nav>
+                </header>
+
+                <SearchUsers handleSubmit={handleCreate} buttonTitle="Create conversation"/>
+            </Overlay.UI>
+        </>
+
+
+
+    )
+}
+
+export default React.memo(NewConversation);

package/src/components/Presence.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { prefix as wy } from "../utils/styles";
+
+type Props = {
+    id: number,
+    status: string
+}
+
+const Presence = ({ id, status }: Props) => {
+    return (
+        <span className={wy(`presence ${status === "active" ? "presence-active" : ""}`)} data-presence-id={id}></span>
+    )
+} 
+
+export default Presence;   

package/src/components/Reactions.tsx

@@ -0,0 +1,95 @@
+import React, { useContext, useEffect, useState } from "react";
+import useMutateReaction from "../hooks/useMutateReaction";
+import Icon from "../ui/Icon";
+import Button from "../ui/Button";
+import { MessengerContext } from "../contexts/MessengerContext";
+import classNames from "classnames";
+
+import { prefix as wy } from "../utils/styles";
+import useReactions from "../hooks/useReactions";
+import useMutateDeleteReaction from "../hooks/useMutateDeleteReaction";
+
+type ReactionMenuProps = {
+    id: number,
+    reactions: ReactableType[]
+}
+
+type ReactionsProps = {
+    id: number,
+    parentId: number | null,
+    reactions: ReactableType[]
+}
+
+export const ReactionsMenu = ({ id, reactions }: ReactionMenuProps) => {
+    const { reactionsList } = useReactions(id, reactions);
+    const reactionMutation = useMutateReaction();
+    const reactionDeleteMutation = useMutateDeleteReaction();
+    const [visible, setVisible] = useState<boolean>(false);
+    const { options } = useContext(MessengerContext);
+    const [reactedEmoji, setReactedEmoji] = useState<string>('');
+
+    const emojis = options?.reactions;
+
+    useEffect(() => {
+        var filtered = reactionsList.find((e) => e.has_reacted);
+        setReactedEmoji(filtered ? filtered.content : '')
+    }, [reactionsList]);
+
+    useEffect(() => {
+        if (visible) {
+            document.addEventListener("click", () => { setVisible(false) });
+        } else {
+            document.removeEventListener("click", () => { setVisible(false) });
+        }
+
+    }, [visible]);
+
+    const toggleReactionMenu = (e: any) => {
+        e.stopPropagation();
+        setVisible(!visible);
+    }
+
+    const handleReaction = async (e: any) => {
+        // check if the reaction already exists for the user
+        const existing = reactionsList.find((r) => r.has_reacted)
+        const emoji = e.target.dataset.emoji;
+
+        if (existing) {
+            // delete existing reaction
+            await reactionDeleteMutation.mutateAsync({ id: id, reaction: emoji });
+        }
+
+        // add if not same reaction as before
+        if (!existing || existing.content !== emoji) {
+            await reactionMutation.mutateAsync({ id: id, reaction: emoji });
+        }
+
+        setVisible(false);
+    }
+
+    return (
+        <div className={wy(classNames("", { "active": visible }))} style={{ position: 'relative' }}>
+            <Button.UI onClick={toggleReactionMenu}><Icon.UI name="emoticon-outline" size={1} /></Button.UI>
+            <div className={wy('reaction-menu dropdown-menu')} style={{ display: visible ? 'block' : 'none', position: 'absolute', top: '-3.25rem' }}>
+                <div className={wy('reaction-picker')}>
+                    {emojis?.map((r: string, i: number) => {
+                        return <Button.UI key={i} onClick={handleReaction} className={wy(classNames("button-icon reaction-button", { "active": reactedEmoji === r }))} data-emoji={r}>{r}</Button.UI> //reactedEmoji
+                    })}
+                </div>
+            </div>
+        </div>
+    )
+
+}
+
+export const ReactionsList = ({ id, reactions }: ReactionsProps) => {
+    const { reactionsList } = useReactions(id, reactions);
+
+    return (
+        <>
+            {reactionsList && reactionsList.map((r: ReactionGroup, i: number) => {
+                return <span key={i} className={wy('reaction')} title={r.count.toString()}>{r.content}</span> //r.has_reacted
+            })}
+        </>
+    )
+}