@weavy/uikit-react 14.0.4 → 15.0.0

package/src/components/Messages.tsx

@@ -2,16 +2,18 @@ import React, { useCallback, useContext, useEffect, useLayoutEffect, useRef, use
 import { UserContext } from '../contexts/UserContext';
 import useMessages from '../hooks/useMessages';
 import Button from '../ui/Button';
+import Spinner from '../ui/Spinner';
 import Message from './Message';
-import { createReverseScroller } from "../utils/infiniteScroll";
-import { scrollParentToBottom, isParentAtBottom } from "../utils/scrollToBottom";
-import ConversationForm from './ConversationForm';
+import { scrollParentToBottom, isParentAtBottom } from "../utils/scroll-position";
+import { useReverseInfiniteScroll } from '../hooks/useInfiniteScroll';
+
 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 Avatar from './Avatar';
+import Editor from './Editor';
 
 type Props = {
     id: number,
@@ -23,25 +25,22 @@ type Props = {
 }
 
 const Messages = ({ id, members, displayName, avatarUrl, lastMessageId, chatRoom }: Props) => {
-    var reverseScroller: IntersectionObserver | null;
+    const [, onNextRender] = useState<any>();
 
     const { user } = useContext(UserContext);
 
     const queryClient = useQueryClient();
-    const { client } = useContext(WeavyContext);
-
-    const readMoreRef = useRef<any>();
+    const { client } = useContext(WeavyContext);    
     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 infiniteMessages = useMessages(id, {});
+    const { isLoading, isError, data, error, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage } = infiniteMessages;
+    
     const readMessageMutation = useMutateRead();
     const addMessageMutation = useMutateMessage();
-
+    
     // scroll to bottom when data changes
     useLayoutEffect(() => {
         //if (id && !isLoading && !isLoadingMembers && !isLoadingConversation) {
@@ -50,40 +49,11 @@ const Messages = ({ id, members, displayName, avatarUrl, lastMessageId, chatRoom
             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))
-                    })
-                }
-            })
-
-        } else {
-            reverseScroller?.disconnect();
-            reverseScroller = null;
-        }
-
-        return () => {
-            reverseScroller?.disconnect();
-            reverseScroller = null;
+            onNextRender(() => requestAnimationFrame(() => scrollParentToBottom(messagesEndRef.current)));
         }
     }, [id, isLoading]);
 
-
-    useLayoutEffect(() => {
-        // Resolve fetchNextPage after layout has been painted
-        if (!isFetchingNextPage && resolveScrollerFetch) {
-            resolveScrollerFetch()
-            setResolveScrollerFetch(null);
-        }
-    }, [data]);
+    const readMoreRef = useReverseInfiniteScroll(infiniteMessages, [id]);
 
     useEffect(() => {
         // mark conversation as read
@@ -98,6 +68,8 @@ const Messages = ({ id, members, displayName, avatarUrl, lastMessageId, chatRoom
             client?.subscribe(`a${id}`, "conversation_marked", handleRealtimeSeenBy);
             client?.subscribe(`a${id}`, "reaction_added", handleRealtimeReactionInserted);
             client?.subscribe(`a${id}`, "reaction_removed", handleRealtimeReactionDeleted);
+
+           
         }
 
         return () => {
@@ -132,19 +104,21 @@ const Messages = ({ id, members, displayName, avatarUrl, lastMessageId, chatRoom
     const handleRealtimeReactionDeleted = useCallback((realtimeEvent: RealtimeReaction) => {
         dispatch("reaction_deleted_" + realtimeEvent.entity.id, realtimeEvent);
     }, [id]);
+  
+    const handleCreate = async (text: string, blobs: BlobType[], attachments: FileType[], meeting: number | null, embed: number | null, options: PollOptionType[]) => {
+        if (id) {
+            
+            await addMessageMutation.mutateAsync({ id: id, text: text, blobs: blobs, meeting: meeting, userId: user.id }, {
+                onSuccess: (data: MessageType) => {
+                    // mark conversation as read
+                    readMessageMutation.mutate({ id: id, read: true, messageId: data.id }, {
+                        onSettled: () => onNextRender(() => requestAnimationFrame(() => requestAnimationFrame(() => scrollParentToBottom(messagesEndRef.current, true))))
+                    });
+                    
+                }
+            });
+        }
 
-    // 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: (data: MessageType) => {
-                // mark conversation as read
-                readMessageMutation.mutate({ id: id, read: true, messageId: data.id });
-
-                requestAnimationFrame(() => scrollParentToBottom(messagesEndRef.current, true))
-            }
-        });
-
-        requestAnimationFrame(() => scrollParentToBottom(readMoreRef.current, true));
     }
 
     const handleRealtimeSeenBy = async (data: any) => {
@@ -153,7 +127,7 @@ const Messages = ({ id, members, displayName, avatarUrl, lastMessageId, chatRoom
         queryClient.invalidateQueries(["members", id]);
 
         if (isAtBottom) {
-            requestAnimationFrame(() => scrollParentToBottom(readMoreRef.current, true));
+            onNextRender(() => requestAnimationFrame(() => scrollParentToBottom(readMoreRef.current, true)));
         }
     }
 
@@ -191,7 +165,7 @@ const Messages = ({ id, members, displayName, avatarUrl, lastMessageId, chatRoom
             }));
 
             if (isAtBottom) {
-                requestAnimationFrame(() => requestAnimationFrame(() => scrollParentToBottom(readMoreRef.current, true)));
+                onNextRender(() => requestAnimationFrame(() => scrollParentToBottom(readMoreRef.current, true)));
             }
         }
 
@@ -207,7 +181,7 @@ const Messages = ({ id, members, displayName, avatarUrl, lastMessageId, chatRoom
 
     let messages = (
         <>
-            <div className="wy-message-readmore" ref={readMoreRef}>
+            <div className="wy-pager" ref={readMoreRef}>
                 {isFetchingNextPage
                     ? 'Loading more...'
                     : hasNextPage
@@ -251,18 +225,18 @@ const Messages = ({ id, members, displayName, avatarUrl, lastMessageId, chatRoom
 
     if (isLoading) {
         messages = (
-            <div>Loading messages...</div>
+            <Spinner.UI overlay={true}/>
         )
     }
 
 
     return (
         <>
-            <div id="container" className="wy-messages">
+            <div id="container" className="wy-messages" >
                 {messages}
             </div>
-            <div className="wy-footerbar wy-footerbar-sticky wy-message-editor wy-message-editor-bottom">
-                <ConversationForm key={id} conversationId={id} handleInsert={handleNewMessage} />
+            <div className="wy-footerbar wy-footerbar-sticky">
+                <Editor key={id} appId={id} placeholder="Type a message" buttonText="" editorType="messages" editorLocation='apps' onSubmit={handleCreate} showAttachments={true} showCloudFiles={true} showMeetings={true} showTyping={true} useDraft={true}/>                
             </div>
         </>
 

package/src/components/NewConversation.tsx

@@ -1,18 +1,20 @@
-import React, { useState } from 'react';
+import React, { useState, useContext } 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 { MessengerContext } from '../contexts/MessengerContext';
 
 const NewConversation = () => {
     const [modalOpen, setModalOpen] = useState(false);
     const addConversationMutation = useMutateConversation();
-    
-    const handleCreate = async (selected: UserType[]) => {
-        
+    const { setSelectedConversationId } = useContext(MessengerContext);
+    const handleCreate = async (selected: MemberType[]) => {
         const membersList = selected.map((m) => m.id);
-        await addConversationMutation.mutateAsync({ members: membersList });
+        const conversation = await addConversationMutation.mutateAsync({ members: membersList });
+        
+        setSelectedConversationId(conversation.id);
         setModalOpen(false);
     }
 
@@ -32,7 +34,7 @@ const NewConversation = () => {
                 <header className="wy-appbars" data-adjust-scrollbar-top>
                     <nav className="wy-appbar">
                         <Button.UI onClick={handleClose}><Icon.UI name='close' /></Button.UI>
-                        <div className="wy-appbar-text">Create conversation</div>
+                        <div className="wy-appbar-text">New message</div>
                     </nav>
                 </header>
 

package/src/components/PdfViewer.tsx

@@ -252,8 +252,8 @@ const PdfViewer = ({ src, pdfCMapsUrl, pdfWorkerUrl }: Props) => {
                 <nav className="wy-toolbar wy-toolbar-center">
                     <div className="wy-toolbar-buttons">
                         <input type="text" className="wy-input" ref={pageNumberRef} onChange={updatePage} onClick={select} data-pdf-target="pageNumber"/>
-                        <span>/</span>
-                        <span ref={totalPagesRef}>1</span>
+                        <span className="wy-toolbar-text">/</span>
+                        <span className="wy-toolbar-text" ref={totalPagesRef}>1</span>
                     </div>
                     <div className="wy-toolbar-buttons">
                         <button className="wy-button wy-button-icon btn-zoom-out" onClick={zoomOut} title="Zoom out"><Icon.UI name="minus" /></button>

package/src/components/Poll.tsx

@@ -0,0 +1,45 @@
+import React, { useState, useEffect } from 'react';
+import useMutateVote from '../hooks/useMutateVote';
+import PollOption from './PollOption';
+
+type Props = {
+    appId: number,
+    parentId: number,
+    options: PollOptionType[]
+}
+
+const Poll = ({ appId, parentId, options }: Props) => {
+
+    const [pollOptions, setPollOptions] = useState<PollOptionType[]>(options)
+    const [totalVotes, setTotalVotes] = useState<number>(0);
+    const vote = useMutateVote();
+    
+    useEffect(() => {
+        let total = pollOptions.reduce((prev, curr) => prev + (curr.vote_count || 0), 0);
+        setTotalVotes(total);
+    }, [pollOptions]);
+
+    useEffect(() => {
+        setPollOptions(options);
+    }, [options]);
+
+
+    const handleVote = async (optionId: number) => {
+        if (optionId) {
+            await vote.mutateAsync({ id: optionId, appId: appId, parentId: parentId });            
+        }
+    }
+
+    return (
+        <div className='wy-poll'>
+            {pollOptions.map((o: PollOptionType) => {
+                let ratio = totalVotes > 0 ? Math.round((((o.vote_count || 0) / totalVotes) * 100)) : 0;
+                return (
+                    <PollOption key={'option' + o.id} id={o.id || -1} text={o.text} has_voted={o.has_voted} ratio={ratio} onVote={handleVote} />
+                )
+            })}
+        </div>
+    )
+}
+
+export default Poll;

package/src/components/PollOption.tsx

@@ -0,0 +1,65 @@
+import React, { useState } from 'react';
+import useVotes from '../hooks/useVotes';
+import Icon from '../ui/Icon';
+import Sheet from '../ui/Sheet';
+import Avatar from './Avatar';
+import Spinner from '../ui/Spinner';
+
+type Props = {
+    id: number,
+    text: string,
+    has_voted: boolean | undefined
+    ratio: number,
+    onVote: (id: number) => Promise<void>
+}
+
+const PollOption = ({ id, text, has_voted, ratio, onVote }: Props) => {
+
+    const [isOpen, setIsOpen] = useState<boolean>(false);
+    const { data, isLoading, refetch } = useVotes(id, { enabled: false });
+
+    const openSheet = (e: React.MouseEvent<HTMLAnchorElement>) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsOpen(true);
+        refetch();
+    }
+
+    return (
+        <>
+            <div className='wy-item wy-poll-option' onClick={() => onVote(id)}>
+                <div className='wy-progress' style={{ width: ratio + '%' }}></div>
+
+                {has_voted &&
+                    <Icon.UI name="check-circle" />
+                }
+                {!has_voted &&
+                    <Icon.UI name="circle-outline" />
+                }
+
+                <div className='wy-item-body'>{text}</div>
+
+                {ratio > 0 &&
+                    <a className='wy-facepile' onClick={openSheet}> {ratio + '%'} </a>
+                }
+
+            </div>
+
+            <Sheet.UI title={text} isOpen={isOpen} onClose={() => setIsOpen(false)}>
+                {isLoading &&
+                    <Spinner.UI />
+                }
+                {!isLoading && data && data.map((user: UserType, index: number) => {
+                    return (
+                        <div className="wy-item" key={'vote' + index}>
+                            <Avatar size={32} src={user.avatar_url} name={user.display_name} />
+                            <div className="wy-item-body">{user.display_name}</div>
+                        </div>
+                    )
+                })}
+            </Sheet.UI>
+        </>
+    )
+}
+
+export default PollOption;

package/src/components/Post.tsx

@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+import PostView from './PostView';
+import PostEdit from './PostEdit';
+import PostTrashed from './PostTrashed';
+
+type Props = {
+    appId: number,
+    id: number,
+    text: string,
+    html: string,
+    created_at: string,
+    modified_at?: string,
+    created_by: MemberType,
+    trashed_at?: string,
+    attachments: FileType[],
+    reactions: ReactableType[],
+    embed: EmbedType | undefined
+    comment_count?: number,
+    is_subscribed: boolean,
+    is_trashed: boolean,
+    options?: PollOptionType[],
+    meeting?: MeetingType
+}
+
+
+const Post = ({ ...props }: Props) => {
+    const [edit, setEdit] = useState<boolean>(false);
+
+    return (
+        <div className='wy-post'>
+            {props.is_trashed && 
+                <PostTrashed {...props} />                
+            }
+            {!props.is_trashed && edit &&
+                <PostEdit {...props} onClose={() => setEdit(prev => !prev)} />
+            }
+
+            {!props.is_trashed && !edit &&
+                <PostView {...props} onEdit={() => setEdit(prev => !prev)} />
+            }
+        </div>
+    )
+}
+
+export default Post;

package/src/components/PostEdit.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import Icon from '../ui/Icon';
+import Button from '../ui/Button';
+import Editor from './Editor';
+import useMutateEditPost from '../hooks/useMutateEditPost';
+
+type Props = {
+    appId: number,
+    id: number,
+    text: string,
+    html: string,
+    created_at: string,
+    created_by: MemberType,
+    attachments: FileType[],
+    reactions: ReactableType[],
+    embed: EmbedType | undefined,
+    meeting?: MeetingType | undefined,
+    options?: PollOptionType[],
+    onClose: (e?:any) => void
+}
+
+const PostEdit = ({ appId, id, text, embed, attachments, options, meeting, onClose }: Props) => {
+    const editPostMutation = useMutateEditPost();
+
+    const handleUpdate = async (text: string, blobs: BlobType[], attachments: FileType[], meeting: number | null, embed: number | null, options: PollOptionType[]) => {
+        await editPostMutation.mutateAsync({ id: id, appId: appId, text: text, blobs: blobs, attachments: attachments, meeting: meeting, embed: embed, options: options });
+        onClose();
+    }
+
+    return (
+        <>
+            <nav className='wy-item'>
+                <div className='wy-item-body'>
+                    <div className='wy-item-title'>Edit post</div>
+                </div>
+
+                <a className='wy-button wy-button-icon'>
+                    <Button.UI onClick={onClose}>
+                        <Icon.UI name="close" />
+                    </Button.UI>
+                    
+                </a>
+            </nav>
+            <Editor editorType='posts' editorLocation='apps' id={id} appId={appId} placeholder={'Update the post'} text={text} embed={embed} meeting={meeting} attachments={attachments} options={options} buttonText='Update' onSubmit={handleUpdate} showAttachments={true} showCloudFiles={true} showEmbeds={true} showPolls={true} />
+        </>
+    )
+}
+
+export default PostEdit;

package/src/components/PostList.tsx

@@ -0,0 +1,95 @@
+import React, { useEffect, useCallback, useContext } from 'react';
+import { WeavyContext } from '../contexts/WeavyContext';
+import useEvents from '../hooks/useEvents';
+import usePostsList from '../hooks/usePostsList';
+import Post from './Post';
+import Button from '../ui/Button';
+import Spinner from '../ui/Spinner';
+import PostPlaceHolder from './PostPlaceholder';
+import useInfiniteScroll from '../hooks/useInfiniteScroll';
+
+type Props = {
+    appId: number
+}
+
+const PostList = ({ appId }: Props) => {
+
+    const { client } = useContext(WeavyContext);
+    const { dispatch } = useEvents();
+
+    const infintePostsList = usePostsList(appId, {})
+    const { isLoading, data, fetchNextPage, hasNextPage, isFetchingNextPage, dataUpdatedAt } = infintePostsList;
+
+    const loadMoreRef = useInfiniteScroll(infintePostsList)
+
+    useEffect(() => {
+        if (appId) {
+            client?.subscribe(`a${appId}`, "reaction_added", handleRealtimeReactionInserted);
+            client?.subscribe(`a${appId}`, "reaction_removed", handleRealtimeReactionDeleted);
+            // client?.subscribe(`a${appId}`, "comment_created", handleRealtimeComment);
+        }
+    }, [appId]);
+
+    // const handleRealtimeComment = useCallback((realtimeEvent: RealtimeMessage) => {
+    //     console.log("COMMENT CREATED!", realtimeEvent)
+    // }, [appId])
+
+    const handleRealtimeReactionInserted = useCallback((realtimeEvent: RealtimeReaction) => {
+        dispatch("reaction_added_" + realtimeEvent.entity.id, realtimeEvent);
+    }, [appId]);
+
+    const handleRealtimeReactionDeleted = useCallback((realtimeEvent: RealtimeReaction) => {
+        dispatch("reaction_deleted_" + realtimeEvent.entity.id, realtimeEvent);
+    }, [appId]);
+
+    let loadMoreButton = <Button.UI onClick={() => fetchNextPage()} disabled={!hasNextPage || isFetchingNextPage} className="wy-message-readmore">{dataUpdatedAt} Load more</Button.UI>;
+
+    if (isLoading) {
+        return <div className='wy-buttons'><Spinner.UI /></div>
+    }
+
+    return (
+        <div>
+            {data && data.pages && data.pages.map((group, i) => {
+                return <React.Fragment key={data.pages.length - i}>
+                    {
+                        group.data?.map((post: MessageType) => {
+                            return post.temp ?
+                                <PostPlaceHolder key={'post' + post.id} text={post.text} created_at={post.created_at} created_by={post.created_by} /> :
+                                <Post
+                                    key={'post' + post.id}
+                                    appId={appId}
+                                    id={post.id}
+                                    text={post.text}
+                                    html={post.html}
+                                    created_at={post.created_at}
+                                    modified_at={post.modified_at}
+                                    created_by={post.created_by}
+                                    trashed_at={post.trashed_at}
+                                    attachments={post.attachments}
+                                    reactions={post.reactions}
+                                    embed={post.embed}
+                                    comment_count={post.comment_count}
+                                    is_subscribed={post.is_subscribed}
+                                    is_trashed={post.is_trashed}
+                                    options={post.options}
+                                    meeting={post.meeting}
+                                />
+                        })
+                    }
+                </React.Fragment>
+            })}
+            <div className="wy-message-readmore" ref={loadMoreRef}>
+                    {isFetchingNextPage
+                        ? 'Loading more...'
+                        : hasNextPage
+                            ? loadMoreButton
+                            : ""}
+            </div>
+        </div>
+
+
+    )
+}
+
+export default PostList;

package/src/components/PostPlaceholder.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import Avatar from './Avatar';
+
+type Props = {    
+    text: string,    
+    created_at: string,
+    created_by: MemberType    
+}
+
+
+const PostPlaceHolder = ({ ...props }: Props) => {
+
+    return (
+        <div className='wy-post'>
+            <div className='wy-item wy-item-lg'>                
+                <img alt="" className="wy-avatar wy-placeholder" height={48} width={48} src={props.created_by.avatar_url} />            
+                
+                <div className='wy-item-body'>
+                    <div className='wy-item-title'><span className='wy-placeholder'>Placeholder name</span></div>
+                    <div className='wy-item-text'><time className='wy-placeholder' dateTime='2022-12-31 00:00:00'>2022-12-31 00:00:00</time></div>
+                </div>
+            </div>
+            <div className='wy-post-body'>
+                <div className='wy-content'>
+                    <span className='wy-placeholder'>Lorem</span> <span className='wy-placeholder'>ipsum</span> <span className='wy-placeholder'>dolor</span> <span className='wy-placeholder'>sit</span> <span className='wy-placeholder'>amet.</span>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default PostPlaceHolder;

package/src/components/PostTrashed.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import useMutateRestorePost from "../hooks/useMutateRestorePost";
+import Button from '../ui/Button';
+
+type Props = {
+    appId: number,
+    id: number,
+    text: string,
+    html: string,
+    created_at: string,
+    created_by: MemberType,
+    attachments: FileType[],
+    reactions: ReactableType[],
+    embed: EmbedType | undefined    
+}
+
+
+const PostTrashed = ({id, appId}: Props) => {
+
+    const restorePost = useMutateRestorePost();
+
+    const handleRestore = () => {
+        restorePost.mutate({ id: id, appId: appId});
+    }
+
+    return (
+        <div className="wy-item wy-item-lg">
+            <div className="wy-item-body">Post was trashed.</div>
+            <Button.UI onClick={handleRestore} className='wy-button-variant'>Undo</Button.UI>
+            
+        </div>
+    )
+}
+
+export default PostTrashed;