@weavy/uikit-react 14.0.3 → 15.0.0

package/src/components/PreviewFiles.tsx

@@ -0,0 +1,336 @@
+import React, { useContext, useEffect, useState } from "react";
+import Overlay from '../ui/Overlay';
+import Button from '../ui/Button';
+import Icon from '../ui/Icon';
+import Preview from './Preview';
+import { getIcon, getExtension } from "../utils/fileUtilities";
+import { InfiniteData, UseInfiniteQueryResult } from "react-query";
+import Dropdown from "../ui/Dropdown";
+import { FileMenu } from "./FileItem";
+import classNames from "classnames";
+import Comments from "./Comments";
+import FileVersions from "./FileVersions";
+import { WeavyContext } from '../contexts/WeavyContext';
+
+function allowedKeyTarget(e: any) {
+    var notInputField = !e.target.matches("input, textarea, select") && !e.target.closest('[contenteditable="true"]');
+    return notInputField;
+}
+
+type Props = {
+    appId: number,
+    infiniteFiles: UseInfiniteQueryResult<FilesResult, unknown>,
+    previewId?: number,
+    onClose?: () => void
+}
+
+const PreviewFiles = ({ appId, infiniteFiles, previewId, onClose }: Props) => {
+    const { client } = useContext(WeavyContext);
+    
+    const [modalPreviewOpen, setModalPreviewOpen] = useState<boolean>(false);
+    const [commentsOpen, setCommentsOpen] = useState<boolean>(false);
+    const [versionsOpen, setVersionsOpen] = useState<boolean>(false);
+    const [sidebarMaximized, setSidebarMaximized] = useState<boolean>(false);
+
+    const [activeFile, setActiveFile] = useState<FileType>();
+    const [versionFile, setVersionFile] = useState<FileType>();
+
+    const [currentFileId, setCurrentFileId] = useState<number>();
+    const [nextFileId, setNextFileId] = useState<number>();
+    const [previousFileId, setPreviousFileId] = useState<number>();
+
+    const { isLoading, data: filesData, dataUpdatedAt, fetchNextPage, hasNextPage, isFetchingNextPage } = infiniteFiles;
+    
+    // sidebar effects
+
+    useEffect(() => {
+        if (!versionsOpen && !commentsOpen) {
+            //restore maximize on close
+            setSidebarMaximized(false);
+        }
+
+        if (!versionsOpen) {
+            setVersionFile(undefined);
+        }
+    }, [versionsOpen, commentsOpen])
+
+    useEffect(() => {
+        setVersionFile(undefined);
+    }, [activeFile])
+
+    const toggleSidebarTab = (tab?: "comments" | "versions", state?: boolean) => {
+        if (tab === "comments") {
+            setVersionsOpen(false);
+            setCommentsOpen(state !== undefined ? state : !commentsOpen);
+        } else if(tab === "versions") {
+            setCommentsOpen(false);
+            setVersionsOpen(state !== undefined ? state : !versionsOpen);
+        } else {
+            setCommentsOpen(false);
+            setVersionsOpen(false);
+        }
+    }
+
+    useEffect(() => {          
+        if (currentFileId) {
+            if (!isLoading) {
+                (async () => {
+                    //console.log("infiniteFIles", infiniteFiles)
+                    if (filesData && filesData.pages.length > 0) {
+                        if (currentFileId >= 1) {
+                            const getIndexFromId = (id:number) => {
+                                let foundIndex = -1;
+                                filesData.pages.some((page: any) => {
+                                    let currentFoundIndex = page.data.findIndex((file: FileType) => file.id === id);
+                                    if (currentFoundIndex !== -1) {
+                                        foundIndex = currentFoundIndex + page.start;
+                                    }
+                                    return currentFoundIndex !== -1;
+                                })
+                                //console.log("found index", id, foundIndex)
+                                return foundIndex;
+                            }
+            
+                            const getFileFromIndex = async (index:number) : Promise<FileType | undefined> => {
+                                if (index > 0 || index <= filesData.pages[0].count) {
+                                    let infiniteFilesData: InfiniteData<FilesResult> | undefined = filesData;
+                                    //console.log("comparing index", index, infiniteFiles.data.pages[infiniteFiles.data.pages.length - 1].end)
+                                    if (index > filesData.pages[filesData.pages.length - 1].end && (hasNextPage || isFetchingNextPage)) {
+                                        //console.log("fetchy fetchy")
+                                        let fetchedInfiniteFiles = await fetchNextPage({ cancelRefetch: false });
+                                        infiniteFilesData = fetchedInfiniteFiles.data;
+                                        console.log("preview nextpage was fetched");
+                                    }
+                                    let foundFile;
+                                    infiniteFilesData?.pages.find((page) => {
+                                        if (index >= page.start && index <= page.end) {
+                                            return foundFile = page.data[index - page.start]; 
+                                        }
+                                    })
+                                    return foundFile;
+                                }
+                            }
+                            let itemIndex = getIndexFromId(currentFileId);
+            
+                            setPreviousFileId((await getFileFromIndex(itemIndex - 1))?.id);
+                            setNextFileId((await getFileFromIndex(itemIndex + 1))?.id);
+                            setActiveFile(await getFileFromIndex(itemIndex));
+                        } else if(currentFileId >= 0 && currentFileId < 1) {
+                            const getFileFromId = (id:number) => {
+                                let foundFile: FileType| undefined;
+                                filesData.pages.some((page: any) => {
+                                    return foundFile = page.data.find((file: FileType) => file.id === id);
+                                })
+                                // When file id has changed
+                                if(!foundFile && activeFile) {
+                                    filesData.pages.some((page: any) => {
+                                        return foundFile = page.data.find((file: FileType) => {
+                                            if (file.name === activeFile.name) {
+                                                if (file.id !== currentFileId) {
+                                                    setCurrentFileId(file.id);
+                                                }
+                                                return true;
+                                            }
+                                        });
+                                    })
+                                }
+
+                                return foundFile;
+                            }
+                            setPreviousFileId(undefined);
+                            setNextFileId(undefined);
+                            setActiveFile(getFileFromId(currentFileId));
+                        }
+                    } else {
+                        setPreviousFileId(undefined);
+                        setNextFileId(undefined);
+                        setActiveFile(undefined);
+                    }
+
+                })();
+            }
+
+        }
+
+    }, [isLoading, filesData, dataUpdatedAt, currentFileId])
+
+    const openPreview = (id: number) => {
+        setCurrentFileId(id);
+        setModalPreviewOpen(true);
+    }
+
+    const closePreview = () => {
+        setModalPreviewOpen(false);
+        if (onClose) {
+            onClose();
+        }
+    }
+
+    useEffect(() => {
+        if (previewId) {
+            openPreview(previewId);
+        }
+    }, [previewId])
+
+
+    const handlePrevious = () => {
+        setCurrentFileId(previousFileId);
+    }
+
+    const handleNext = () => {
+        setCurrentFileId(nextFileId);
+    }
+
+    const handleVersionFile = (file: FileType) => {
+        if (activeFile?.version !== file.version) {
+            setVersionFile(file);
+        } else {
+            setVersionFile(undefined);
+        }
+    }
+    
+    const previewFile = versionFile || activeFile;
+
+    // Keyboard handlers
+    useEffect(() => {
+        if (activeFile) {
+            const handleKey = (e: any) => {
+                if (modalPreviewOpen) {
+                    if (e.which === 27) { // ESC
+                        e.stopImmediatePropagation();
+                        closePreview();
+                    } else if (e.which === 37) { // LEFT
+                        if (allowedKeyTarget(e)) {
+                            e.stopPropagation();
+                            setCurrentFileId(previousFileId);
+                        }
+                    } else if (e.which === 39) { // RIGHT
+                        if (allowedKeyTarget(e)) {
+                            e.stopPropagation();
+                            setCurrentFileId(nextFileId);
+                        }
+                    }
+                }
+            };
+    
+            document.addEventListener("keyup", handleKey);
+    
+            return () => {
+                // cleanup
+                document.removeEventListener("keyup", handleKey);
+            }
+        }
+
+    }, [activeFile, modalPreviewOpen])
+
+    let previewExt: string = getExtension(previewFile?.name || '');
+    let previewIcon: string = getIcon(previewFile?.name || '').icon;
+
+    let previewSrc = previewFile?.preview_url || previewFile?.download_url || '';
+
+    // Let GIF and SVG display raw content
+    let animatedImage = previewFile?.preview_format === "image" && (previewExt === ".gif" || previewExt === ".svg");
+    if (animatedImage) {
+        previewSrc = previewFile?.download_url || '';
+    }
+
+    return (
+        <>
+            {filesData && <Overlay.UI isOpen={modalPreviewOpen} className="wy-dark" closeOnEsc={false} onClose={() => setModalPreviewOpen(false)} style={{overlay: {zIndex: 10000}}}>
+                <header className="wy-appbars">
+                    <nav className="wy-appbar">
+                        <Button.UI onClick={closePreview}><Icon.UI name='close' /></Button.UI>
+                        <div className={classNames("wy-appbar-text", { "wy-appbar-text-trashed": activeFile?.is_trashed })}>
+                            {activeFile &&
+                                <span>{activeFile.name}</span>
+                            }
+
+                        </div>
+                        <div className="wy-appbar-buttons">
+                            {activeFile && <>
+                                {activeFile.id >= 1 &&
+                                    <Button.UI active={commentsOpen} onClick={() => toggleSidebarTab("comments")} title={`Comments`}>
+                                        <Icon.ActiveStack>
+                                            <Icon.UI name="comment-outline" />
+                                            <Icon.UI name="comment" />
+                                        </Icon.ActiveStack>
+                                    </Button.UI>
+                                }
+                                <FileMenu file={activeFile}>
+                                    {activeFile.id >= 1 &&
+                                        <Dropdown.Item active={versionsOpen} onClick={() => toggleSidebarTab("versions")}><Icon.UI name="backup-restore"/> Versions</Dropdown.Item>
+                                    }
+                                </FileMenu>                        
+                            </>}
+                        </div>
+
+                    </nav>
+                </header>
+                
+                <div className="wy-main">
+                    <>
+                        <aside id="tab-comments" className={classNames("wy-sidebar", { "wy-active": commentsOpen, "wy-maximized": sidebarMaximized })} hidden={!commentsOpen}>
+                            <nav className="wy-item">
+                                <div className="wy-item-body">
+                                    <div className="wy-item-title">Comments</div>
+                                </div>
+                                <Button.UI onClick={() => toggleSidebarTab("comments", false)}><Icon.UI name='close' /></Button.UI>
+                                <button onClick={() => setSidebarMaximized(!sidebarMaximized)} className="wy-sidebar-handle" />
+                            </nav>
+                            <div className="wy-pane wy-scroll-y">
+                                {commentsOpen && activeFile && activeFile.id >= 1 && appId && 
+                                    <Comments appId={appId} parentId={activeFile.id} type="files" />
+                                }
+                            </div>
+                        </aside>
+                        <aside id="tab-versions" className={classNames("wy-sidebar", { "wy-active": versionsOpen, "wy-maximized": sidebarMaximized  })} hidden={!versionsOpen}>
+                            <nav className="wy-item">
+                                <div className="wy-item-body">
+                                    <div className="wy-item-title">Versions</div>
+                                </div>
+                                <Button.UI onClick={() => toggleSidebarTab("versions", false)}><Icon.UI name='close' /></Button.UI>
+                                <button onClick={() => setSidebarMaximized(!sidebarMaximized)} className="wy-sidebar-handle" />
+                            </nav>
+                            <div className="wy-pane wy-scroll-y">
+                                <div className="wy-pane-body">
+                                    {versionsOpen && activeFile && <FileVersions key={"files-versions" + appId + activeFile.id} filesKey={["files", appId]} file={activeFile} onVersionSelect={handleVersionFile} />}
+                                </div>
+                            </div>
+                        </aside>
+                    </>
+                    <div className="wy-preview">
+                        {previewFile &&
+                            <>
+                                {previousFileId &&
+                                    <nav className="wy-nav-prev"><Button.UI onClick={handlePrevious}><Icon.UI name="previous" /></Button.UI></nav>
+                                }
+                                {nextFileId &&
+                                    <nav className="wy-nav-next"><Button.UI onClick={handleNext}><Icon.UI name="next" /></Button.UI></nav>
+                                }
+                                <div className="wy-preview-area wy-scroll-y wy-scroll-x">
+                                    <Preview
+                                        client={client}
+                                        src={previewSrc}
+                                        link={previewFile.external_url}
+                                        format={previewFile.is_trashed ? "none" : previewFile.preview_format}
+                                        name={previewFile.name}
+                                        icon={previewIcon}
+                                        width={previewFile.width}
+                                        height={previewFile.height}
+                                        mediaType={previewFile.media_type}
+                                        provider={previewFile.provider}
+                                    />
+                                </div>
+                            </>
+                        }
+                    </div>
+                </div>
+            </Overlay.UI>}
+
+        </>
+
+    )
+};
+
+export default PreviewFiles;
+

package/src/components/Reactions.tsx

@@ -1,76 +1,95 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, { useCallback, 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 useEvents from "../hooks/useEvents";
 
-import useReactions from "../hooks/useReactions";
 import useMutateDeleteReaction from "../hooks/useMutateDeleteReaction";
 import { WeavyContext } from "../contexts/WeavyContext";
+import Sheet from "../ui/Sheet";
+import Avatar from "./Avatar";
+import Spinner from "../ui/Spinner";
+import useReactionList from "../hooks/useReactionList";
+import { UserContext } from "../contexts/UserContext";
+import useMutateReplaceReaction from "../hooks/useMutateReplaceReaction";
+
+import { usePopper } from 'react-popper';
 
 type ReactionMenuProps = {
     id: number,
+    parentId: number | null,
+    type: "messages" | "posts" | "comments",
+    placement?: "top" | "top-start" | "top-end",
     reactions: ReactableType[]
 }
 
 type ReactionsProps = {
     id: number,
+    type: "messages" | "posts" | "comments",
     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);
+export const ReactionsMenu = ({ id, parentId, type, placement = "top", reactions }: ReactionMenuProps) => {
+    const { user } = useContext(UserContext);
     const { options } = useContext(WeavyContext);
+    
+    const [visible, setVisible] = useState<boolean>(false);
     const [reactedEmoji, setReactedEmoji] = useState<string>('');
-
     const emojis = options?.reactions;
+    const react = useMutateReaction();
+    const unreact = useMutateDeleteReaction();
+    const replaceReact = useMutateReplaceReaction();
 
-    useEffect(() => {
-        var filtered = reactionsList.find((e) => e.has_reacted);
-        setReactedEmoji(filtered ? filtered.content : '')
-    }, [reactionsList]);
+    const [referenceElement, setReferenceElement] = useState<HTMLButtonElement|null>(null);
+    const [popperElement, setPopperElement] = useState<HTMLDivElement|null>(null);
+    const { styles, attributes, update } = usePopper(referenceElement, popperElement, { placement: placement });
 
     useEffect(() => {
+        update?.();
+
         if (visible) {
             document.addEventListener("click", () => { setVisible(false) });
         } else {
             document.removeEventListener("click", () => { setVisible(false) });
         }
-
     }, [visible]);
 
+    useEffect(() => {
+        var filtered = reactions?.find((e) => e.created_by_id === user.id);
+        setReactedEmoji(filtered ? filtered.content : '')
+    }, [reactions]);
+
     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;
+        const existing = reactions?.find((r) => r.created_by_id === user.id)
 
-        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 });
+        if (existing && existing.content !== emoji) {
+            // replace
+            await replaceReact.mutateAsync({ parentId: parentId, id: id, type: type, reaction: emoji })
+        } else if (existing) {
+            // remove
+            await unreact.mutateAsync({ parentId: parentId, id: id, type: type, reaction: emoji });
+        } else {
+            // add
+            await react.mutateAsync({ parentId: parentId, id: id, type: type, reaction: emoji });
         }
-
+        
+        
         setVisible(false);
     }
 
     return (
         <div className={classNames({ "wy-active": visible })} style={{ position: 'relative' }}>
-            <Button.UI className="wy-reaction-menu-button" onClick={toggleReactionMenu}><Icon.UI name="emoticon-plus" size={1.25/1.5} /></Button.UI>
-            <div className="wy-reaction-menu wy-dropdown-menu" style={{ display: visible ? 'block' : 'none', position: 'absolute', top: '-3.25rem' }}>
+            <Button.UI ref={setReferenceElement} className="wy-reaction-menu-button" onClick={toggleReactionMenu}><Icon.UI name="emoticon-plus" size={1.25 / 1.5} /></Button.UI>
+            <div ref={setPopperElement} className="wy-reaction-menu wy-dropdown-menu" hidden={!visible} style={styles.popper} {...attributes.popper}>
                 <div className="wy-reaction-picker">
                     {emojis?.map((r: string, i: number) => {
                         return <Button.UI key={i} onClick={handleReaction} className={classNames("wy-button-icon wy-reaction-button", { "wy-active": reactedEmoji === r })} data-emoji={r}>{r}</Button.UI> //reactedEmoji
@@ -79,23 +98,108 @@ export const ReactionsMenu = ({ id, reactions }: ReactionMenuProps) => {
             </div>
         </div>
     )
-
 }
 
-export const ReactionsList = ({ id, reactions }: ReactionsProps) => {
-    const { reactionsList } = useReactions(id, reactions);  
-    
-    let reactionCount = reactionsList.reduce(
-        (previousValue, currentItem) => previousValue + currentItem.count,
-        0,
-    );
+export const ReactionsList = ({ id, type, reactions }: ReactionsProps) => {
+    const { user } = useContext(UserContext);
+    const [reactionsList, setReactionsList] = useState<ReactableType[]>();
+    const [list, setList] = useState<ReactionGroup[]>([]);
+    const [count, setCount] = useState<number>(0)
+    const { data, isLoading, refetch } = useReactionList(id, type, { enabled: false });
+    const { on, off } = useEvents();
+
+    const [isOpen, setIsOpen] = useState(false);
     
+    useEffect(() => {
+        on('reaction_added_' + id, handleRealtimeReactionInserted);
+        on('reaction_deleted_' + id, handleRealtimeReactionDeleted);
+
+        return () => {
+            off('reaction_added_' + id, handleRealtimeReactionInserted);
+            off('reaction_deleted_' + id, handleRealtimeReactionDeleted);
+        }
+    }, [id]);
+
+    useEffect(() => {
+        setReactionsList(reactions);
+    }, [reactions])
+
+    useEffect(() => {
+
+        if (reactionsList) {
+            let group = [...new Map<string, ReactableType>(reactionsList?.map((item: ReactableType) => [item.content, item])).values()];
+
+            let list = group.map((item: ReactableType): ReactionGroup => {
+                return {
+                    content: item.content,
+                    count: reactionsList.filter((r) => r.content === item.content).length,
+                    has_reacted: reactionsList.filter((r) => r.content === item.content && r.created_by_id === user.id).length > 0
+                }
+            });
+
+            let reactionCount = list.reduce(
+                (previousValue, currentItem) => previousValue + currentItem.count,
+                0,
+            );
+            setList(list);
+            setCount(reactionCount);
+
+            if(isOpen){            
+                setTimeout(() => refetch(), 200) ;
+            }
+        }
+
+    }, [reactionsList, id, type]);
+
+    const handleRealtimeReactionInserted = useCallback((reaction: RealtimeReaction) => {
+        if (reaction.entity.id === id && reaction.actor.id !== user.id) {
+            setReactionsList((oldList) => {
+                return [...oldList || [], { content: reaction.reaction, created_by_id: reaction.actor.id }];
+            });
+        }
+    }, [id, reactionsList]);
+
+    const handleRealtimeReactionDeleted = useCallback((reaction: RealtimeReaction) => {
+        if (reaction.entity.id === id && reaction.actor.id !== user.id) {
+            setReactionsList(oldList => oldList?.filter(item => item.created_by_id !== reaction.actor.id));
+        }
+    }, [id, reactionsList]);
+
+
+    const handleOpen = () => {
+        refetch();
+        setIsOpen(true);
+    }
+
+
     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
-            })}
-            {reactionCount > 1 && <span className="wy-reaction-count">{reactionCount}</span>}
+            {count > 0 && <>
+                <Button.UI className="wy-reactions wy-button-icon" onClick={handleOpen}>
+                    {!!list && list.map((r: ReactionGroup, i: number) => {
+                        return <span key={i} className="wy-reaction" title={r.count.toString()}>{r.content}</span>
+                    })}
+                    {count > 1 && <span className="wy-reaction-count">{count}</span>}
+                </Button.UI>
+
+                {<Sheet.UI title="Reactions" isOpen={isOpen} onClose={() => {setIsOpen(false);}}>
+                    {isOpen && <>
+                        {isLoading &&
+                            <Spinner.UI overlay={true}/>
+                        }
+                        {!isLoading && data && data.data?.map((reaction: ReactionType, index: number) => {
+                            return (
+                                <div className="wy-item" key={'r' + index}>
+                                    <Avatar size={32} src={reaction.created_by.avatar_url} name={reaction.created_by.display_name} />
+                                    <div className="wy-item-body">{reaction.created_by.display_name}</div>
+                                    <div>{reaction.content}</div>
+                                </div>
+                            )
+                        })}
+                    </>}
+                </Sheet.UI>}
+            </>}
+
         </>
     )
 }