@weavy/uikit-react 14.0.3 → 15.0.0

package/src/components/ConversationList.tsx

@@ -6,49 +6,22 @@ import NewConversation from './NewConversation';
 import Avatar from './Avatar';
 import { UserContext } from '../contexts/UserContext';
 import Button from '../ui/Button';
-import { createScroller } from "../utils/infiniteScroll";
+import Spinner from '../ui/Spinner';
+import useInfinteScroll from '../hooks/useInfiniteScroll';
 
 const ConversationList = () => {
     const { client } = useContext(WeavyContext);
     const { user } = useContext(UserContext);
-    const { data, isLoading, refetch, fetchNextPage, hasNextPage, isFetchingNextPage } = useConversations({});
-    const loadMoreRef = useRef<any>();
-    const [resolveScrollerFetch, setResolveScrollerFetch] = useState<Function | null>()
-    let scroller: IntersectionObserver | null;
 
     if (!client) {
         throw new Error('Weavy ConversationList component must be used within an WeavyProvider');
     }
 
+    const infinteConversations = useConversations({});
+    const { data, isLoading, refetch, fetchNextPage, hasNextPage, isFetchingNextPage } = infinteConversations;
 
-    useLayoutEffect(() => {
-        if(!isLoading){
-            scroller?.disconnect();
+    const loadMoreRef = useInfinteScroll(infinteConversations);
 
-            scroller = createScroller(loadMoreRef.current, () => {
-                if (hasNextPage) {
-                    return fetchNextPage().then(() => {
-                        // Wait for useLayoutEffect before resolving
-                        return new Promise((resolve: Function) => setResolveScrollerFetch(resolve))
-                    })
-                }
-            })
-        }
-
-        return () => {
-            scroller?.disconnect();
-            scroller = null;
-        }
-       
-    }, [isLoading]);
-
-    useLayoutEffect(() => {
-        // Resolve fetchNextPage after layout has been painted
-        if (!isFetchingNextPage && resolveScrollerFetch) {
-            resolveScrollerFetch()
-            setResolveScrollerFetch(null);
-        }
-    }, [data]);
 
     useEffect(() => {
 
@@ -66,12 +39,6 @@ const ConversationList = () => {
     }
 
 
-    if (isLoading) {
-        return (
-            <div>Loading Conversation list...</div>
-        )
-    }
-
     let loadMoreButton = <Button.UI onClick={() => fetchNextPage()} disabled={!hasNextPage || isFetchingNextPage} className="wy-message-readmore">Load more</Button.UI>;
 
     return (
@@ -84,22 +51,26 @@ const ConversationList = () => {
                 </nav>
             </header>
             <div className="wy-conversations">
+                {isLoading &&
+                    <Spinner.UI overlay={true} />
+                }
+
                 {data && data.pages && data.pages.map((group, i) => {
                     return group.data?.map((item) => {
-                        return < ConversationListItem key={item.id} refetchConversations={refetch} item={item} />
+                        return <ConversationListItem key={item.id} refetchConversations={refetch} item={item} userId={user.id} />
                     })
 
                 }
 
                 )}
-                <div className="wy-message-readmore" ref={loadMoreRef}>
+                <div className="wy-pager" ref={loadMoreRef}>
                     {isFetchingNextPage
                         ? 'Loading more...'
                         : hasNextPage
                             ? loadMoreButton
                             : ""}
 
-                </div>                
+                </div>
             </div>
         </>
     )

package/src/components/ConversationListItem.tsx

@@ -13,36 +13,39 @@ import useMutateRemoveMembers from '../hooks/useMutateRemoveMembers';
 import Avatar from './Avatar';
 import { UserContext } from '../contexts/UserContext';
 import classNames from 'classnames';
+import useMutateStarred from '../hooks/useMutateStarred';
+import useMutateLeaveConversation from '../hooks/useMutateLeaveConversation';
 
-const ConversationListItem = ({ item, refetchConversations }: ConversationListItemProps) => {
+const ConversationListItem = ({ item, userId, refetchConversations }: ConversationListItemProps) => {
 
     const { client } = useContext(WeavyContext);
     const { setSelectedConversationId, selectedConversationId } = useContext(MessengerContext);
     const { user } = useContext(UserContext);
     const readMutation = useMutateRead();
     const pinMutation = useMutatePinned();
-    const removeMembers = useMutateRemoveMembers();
+    const starMutation = useMutateStarred();    
+    const leaveConversation = useMutateLeaveConversation();
     const date = dayjs.utc(item.last_message?.created_at).tz(dayjs.tz.guess());
 
-    
-    // extract and keep all emojis
-    const emojiHtml = item.last_message?.html || '';
-    const emojiRegexp = /<img[^>]+wy-emoji.+>/g;
-    const emojiShortcodeRegexp = /title=\"(:[^:\s]+:)\"/;
-    const messageEmojis: { [index: string]: string } = {};
-
-    emojiHtml.match(emojiRegexp)?.forEach((imgEmoji) => {
-        let shortCode = imgEmoji.match(emojiShortcodeRegexp)![1];
-
-        if (shortCode) {
-            messageEmojis[shortCode] = imgEmoji;
-        }
-    });
 
-    // replace text shortcodes with extracted emojis
-    const shortCodeRegexp = /:[^:\s]*(?:::[^:\s]*)*:/gi;
-    const itemSnippet = (item.last_message?.text || '').replace(shortCodeRegexp, (shortCode) => messageEmojis[shortCode]);
+    // extract and keep all emojis
+    // const emojiHtml = item.last_message?.html || '';
+    // const emojiRegexp = /<img[^>]+wy-emoji.+\/>/g;
+    // const emojiShortcodeRegexp = /title=\"(:[^:\s]+:)\"/;
+    // const messageEmojis: { [index: string]: string } = {};
+
+    // emojiHtml.match(emojiRegexp)?.forEach((imgEmoji) => {
+    //     let shortCode = imgEmoji.match(emojiShortcodeRegexp)![1];
+
+    //     if (shortCode) {
+    //         messageEmojis[shortCode] = imgEmoji;
+    //     }
+    // });
     
+    // replace text shortcodes with extracted emojis
+    //const shortCodeRegexp = /:[^:\s]*(?:::[^:\s]*)*:/gi;
+    //const itemSnippet = (item.last_message?.text || '').replace(shortCodeRegexp, (shortCode) => messageEmojis[shortCode]);
+
 
     const ChatRoom = "edb400ac-839b-45a7-b2a8-6a01820d1c44";
 
@@ -53,19 +56,19 @@ const ConversationListItem = ({ item, refetchConversations }: ConversationListIt
         }
     }
 
-    const handleAppUpdated = useCallback((realtimeEvent: RealtimeApp) => {   
+    const handleAppUpdated = useCallback((realtimeEvent: RealtimeApp) => {
         if (realtimeEvent.app.id !== item.id) return;
         refetchConversations();
 
     }, [item.id]);
 
-    const handleMessageCreated = useCallback((realtimeEvent: RealtimeMessage) => {   
+    const handleMessageCreated = useCallback((realtimeEvent: RealtimeMessage) => {
         if (realtimeEvent.message.app_id !== item.id) return;
         refetchConversations();
 
     }, [item.id]);
 
-    const handleMemberAdded = useCallback((realtimeEvent: RealtimeMember) => {   
+    const handleMemberAdded = useCallback((realtimeEvent: RealtimeMember) => {
         if (realtimeEvent.app.id !== item.id) return;
         refetchConversations();
 
@@ -81,9 +84,7 @@ const ConversationListItem = ({ item, refetchConversations }: ConversationListIt
             client?.unsubscribe(`a${item.id}`, "message_created", handleMessageCreated);
             client?.unsubscribe(`a${item.id}`, "member_added", handleMemberAdded);
         }
-    }, [item.id])
-
-    const otherId = item.type !== ChatRoom ? item.member_ids.find((i) => { return i != user.id }) : null;
+    }, [item.id]);
 
     const handleUnread = (e: React.MouseEvent<HTMLAnchorElement>) => {
         e.preventDefault();
@@ -106,17 +107,22 @@ const ConversationListItem = ({ item, refetchConversations }: ConversationListIt
     }
 
     const handleLeaveConversation = () => {
-        removeMembers.mutate({ id: item.id, members: [user.id] });
+        leaveConversation.mutate({ id: item.id, members: [user.id] });
     }
 
-    // const handleStar = (e: React.MouseEvent<HTMLAnchorElement>) => {
-    //     e.preventDefault();
-    //     console.log("Star: ", item.id)
-    // }
+    const handleStar = (e: React.MouseEvent<HTMLAnchorElement>) => {
+        e.preventDefault();
+        starMutation.mutate({ id: item.id, star: true });
+    }
+
+    const handleUnstar = (e: React.MouseEvent<HTMLAnchorElement>) => {
+        e.preventDefault();
+        starMutation.mutate({ id: item.id, star: false });
+    }
 
     return (
-        <div className={classNames('wy-item wy-item-lg wy-item-hover wy-conversation', {"wy-unread": item.is_unread, "wy-active": selectedConversationId === item.id})} key={item.id} onClick={(e) => handleClick(e, item.id)}>
-            <Avatar src={item.avatar_url} id={otherId || -1} presence={item.type !== ChatRoom ? "away" : ""} name={item.display_name} />
+        <div className={classNames('wy-item wy-item-lg wy-item-hover wy-conversation', { "wy-unread": item.is_unread, "wy-active": selectedConversationId === item.id })} key={item.id} onClick={(e) => handleClick(e, item.id)}>
+            <Avatar src={item.avatar_url} id={item.user_id || -1} presence={item.type !== ChatRoom ? "away" : ""} name={item.display_name} />
 
             <div className="wy-item-body">
                 <div className="wy-item-row">
@@ -129,59 +135,104 @@ const ConversationListItem = ({ item, refetchConversations }: ConversationListIt
                     <div className="wy-item-text">
                         <Typing id={item.id} context="listitem">
 
-                            {itemSnippet &&
+                            {/* {itemSnippet &&
                                 <span className="wy-typing-hide" dangerouslySetInnerHTML={{ __html: itemSnippet }}></span>
-                            }
-                            {!itemSnippet &&
-                                <span className="wy-typing-hide">
-                                    {item.last_message?.attachment_ids?.length > 0 &&
-                                        <Icon.UI name="attachment" size={1} />
-                                    }
-                                    {item.last_message?.meeting_id &&
-                                        <Icon.UI name="zoom" size={1} />
-                                    }
-                                </span>
-                            }
+                            } */}
+                            {/* {!itemSnippet && */}
+                            <span className="wy-typing-hide">
+
+                                {item.last_message &&
+                                    <>
+                                        {userId === item.last_message?.created_by.id &&
+                                            <>You: </>
+                                        }
+                                        {(item.member_count || 0) > 2 && userId !== item.last_message?.created_by.id &&
+                                            <>{item.last_message?.created_by.display_name}: </>
+                                        }
+                                    </>
+                                }
+
+                                {item.last_message?.text &&
+                                    <>{item.last_message?.plain}</>
+                                }
+                                {!item.last_message?.text && (item.last_message?.attachment_count || 0) > 0 &&
+                                    <Icon.UI name="attachment" size={1} />
+                                }
+                                {!item.last_message?.text && item.last_message?.meeting_id &&
+                                    <Icon.UI name="zoom" size={1} />
+                                }
+                                {!item.last_message &&
+                                    <>&nbsp;</>
+                                }
+                            </span>
+                            {/* } */}
 
                         </Typing>
                     </div>
-                    
+
 
                 </div>
             </div>
             <div className="wy-item-actions wy-item-actions-bottom">
+                {item.is_starred &&
+                    <Button.UI onClick={handleUnstar}>
+                        <Icon.UI name="star" size={1} className='wy-icon-yellow'/>
+                    </Button.UI>
+
+                }
+
+                <Dropdown.UI directionX='left' icon={item.is_pinned ? "pin": undefined}>
+                    <>
+                        {item.is_unread &&
+                            <Dropdown.Item onClick={handleRead}>
+                                <Icon.UI name="unread"></Icon.UI>
+                                Mark as read
+                            </Dropdown.Item>
+                        }
+                        {!item.is_unread &&
+                            <Dropdown.Item onClick={handleUnread}>
+                                <Icon.UI name="read"></Icon.UI>
+                                Mark as unread
+                            </Dropdown.Item>
+                        }
+                    </>
+                    <>
                         {item.is_pinned &&
-                            <Button.UI onClick={handleUnpin}>
-                                <Icon.UI name="pin" size={1/1.5} />
-                            </Button.UI>
-
+                            <Dropdown.Item onClick={handleUnpin}>
+                                <Icon.UI name="unpin"></Icon.UI>
+                                Unpin
+                            </Dropdown.Item>
                         }
+                        {!item.is_pinned &&
+                            <Dropdown.Item onClick={handlePin}>
+                                <Icon.UI name="pin"></Icon.UI>
+                                Pin
+                            </Dropdown.Item>
+                        }
+                    </>
+                    <>
+                        {item.is_starred &&
+                            <Dropdown.Item onClick={handleUnstar}>
+                                <Icon.UI name="unstar"></Icon.UI>
+                                Unstar
+                            </Dropdown.Item>
+                        }
+                        {!item.is_starred &&
+                            <Dropdown.Item onClick={handleStar}>
+                                <Icon.UI name="star"></Icon.UI>
+                                Star
+                            </Dropdown.Item>
+                        }
+                    </>
+                    {item.type === ChatRoom &&
+                        <Dropdown.Item onClick={handleLeaveConversation}>
+                            <Icon.UI name="account-minus"></Icon.UI>
+                            Leave conversation
+                        </Dropdown.Item>
+                    }                    
+                </Dropdown.UI>
 
-                        <Dropdown.UI directionX='left'>
-                            <>
-                                {item.is_unread &&
-                                    <Dropdown.Item onClick={handleRead}>Mark as read</Dropdown.Item>
-                                }
-                                {!item.is_unread &&
-                                    <Dropdown.Item onClick={handleUnread}>Mark as unread</Dropdown.Item>
-                                }
-                            </>
-                            <>
-                                {item.is_pinned &&
-                                    <Dropdown.Item onClick={handleUnpin}>Unpin</Dropdown.Item>
-                                }
-                                {!item.is_pinned &&
-                                    <Dropdown.Item onClick={handlePin}>Pin</Dropdown.Item>
-                                }
-                            </>
-                            {item.type === ChatRoom &&
-                                <Dropdown.Item onClick={handleLeaveConversation}>Leave conversation</Dropdown.Item>
-                            }
-
-                            {/* <li><Button.UI onClick={handleStar}>Star</Button.UI></li> */}
-                        </Dropdown.UI>
-
-                    </div>
+            </div>
         </div>
     )
 }

package/src/components/Dropzone.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { useDropzone, FileRejection, DropEvent, Accept } from "react-dropzone";
+
+type Props = {
+    onDrop: <T extends File>(acceptedFiles: T[], fileRejections: FileRejection[], event: DropEvent) => void,
+    accept?: Accept,
+    dragClass: string,
+    children?: React.ReactNode
+}
+
+const Dropzone = ({ onDrop, accept, dragClass, children }: Props) => {
+    const { getRootProps, isDragActive } = useDropzone({
+        onDrop,
+        accept,
+        noClick: true,
+        noKeyboard: true
+    });
+
+    return (
+        <div className={isDragActive ? dragClass: ""} {...getRootProps()} >
+            {children}            
+        </div>
+    )
+}
+
+export default Dropzone;