@weavy/uikit-react 12.1.0 → 14.0.0

package/src/components/SearchUsers.tsx

@@ -22,6 +22,13 @@ const SearchUsers = ({handleSubmit, buttonTitle}: SearchUsersProps) => {
     const throttledCb = useDebounce(() => refetch(), 250);
     useEffect(throttledCb, [text])
 
+    const toggleChecked = (e: any) => {
+        let checkbox = e.currentTarget.querySelector("input[type=checkbox]");
+        if (checkbox !== e.target && !e.target.matches("label, input[type=checkbox]")) {
+            checkbox?.click();
+        }
+    };
+
     const isChecked = (id: number): boolean => {
         return selected.find((u) => { return u.id === id }) != null;
     }
@@ -42,25 +49,28 @@ const SearchUsers = ({handleSubmit, buttonTitle}: SearchUsersProps) => {
 
     return (
         <div className="wy-search wy-scroll-y">
-            <div className="wy-search-form wy-pane-group">
-                <Button.UI><Icon.UI name="magnify" /></Button.UI>
-                <input className="wy-search-input" value={text} onChange={(e) => setText(e.target.value)} name="text" placeholder='Search...' />
+            <div className="wy-pane-group">
+                <div className="wy-search-form wy-input-group">
+                    <input className="wy-search-input wy-input wy-input-filled" value={text} onChange={(e) => setText(e.target.value)} name="text" placeholder='Search...' />
+                    <Button.UI type="reset" onClick={() => clear()}><Icon.UI name="close-circle" /></Button.UI>
+                    <Button.UI><Icon.UI name="magnify" /></Button.UI>
+                </div>
             </div>
 
             <div className="wy-pane-group">
-                {data && data.data.length === 0 &&
-                    <div className="wy-search-no-result">Your search did not match any people.</div>
+                {data && (!data.data || data.data.length === 0) &&
+                    <div className="wy-table-no-result">Your search did not match any people.</div>
                 }
-                <table className="wy-search-result-table">
+                <table className="wy-table wy-table-hover wy-search-result-table">
                     <tbody>
-                        {data && data.data.length > 0 && data.data.map((user: MemberType) => {
+                        {data && data.data && data.data.length > 0 && data.data.map((user: MemberType) => {
                             return (
-                                <tr key={user.id} className="wy-search-result-table-checkbox">
-                                    <td className="wy-search-result-table-icon">
+                                <tr key={user.id} onClick={toggleChecked}>
+                                    <td className="wy-table-cell-icon">
                                         <Avatar src={user.avatar_url} size={24} id={user.id} presence={user.presence} name={user.display_name} />
                                     </td>
-                                    <td><label htmlFor={'chk' + user.id}>{user.display_name}</label></td>
-                                    <td className="wy-search-result-table-icon"><input type="checkbox" id={'chk' + user.id} checked={isChecked(user.id)} onChange={(e) => handleSelected(e, user)} /></td>
+                                    <td className="wy-table-cell-text"><label htmlFor={'chk' + user.id}>{user.display_name}</label></td>
+                                    <td className="wy-table-cell-icon"><input type="checkbox" id={'chk' + user.id} checked={isChecked(user.id)} onChange={(e) => handleSelected(e, user)} /></td>
                                 </tr>
                             )
                         })}

package/src/components/SeenBy.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import Avatar from "./Avatar";
-import dayjs  from 'dayjs';
+import dayjs from 'dayjs';
 
 type Props = {
     id: number,
@@ -10,14 +10,20 @@ type Props = {
 }
 
 const SeenBy = ({ seenBy }: Props) => {
-   
+
     return (
-        <div className="wy-readby-status">
-            {seenBy && seenBy.length > 0 && seenBy.map((member: MemberType) => {
-                const date = dayjs.utc(member.read_at).tz(dayjs.tz.guess());
-                return (<Avatar name={`Seen by ${member.name} at ${date.format('LLLL')}`} src={member.avatar_url} size={16} key={member.id}/>)})
+        <>
+            {seenBy && seenBy.length > 0 &&
+                <div className="wy-readby-status">
+                    {seenBy.map((member: MemberType) => {
+                        const date = dayjs.utc(member.marked_at).tz(dayjs.tz.guess());                        
+                        return (<Avatar name={`Seen by ${member.display_name} at ${date.format('LLLL')}`} src={member.avatar_url} size={16} key={member.id} />)
+                    })
+                    }
+                </div>
             }
-        </div>
+        </>
+
     )
 }
 

package/src/components/Typing.tsx

@@ -27,11 +27,11 @@ const Typing = ({ children, id, context }: Props) => {
         setActiveTypers([]);
         
         client?.subscribe(`a${id}`, "typing", handleTyping);        
-        client?.subscribe(`a${id}`, "message-inserted", handleStopTyping);
+        client?.subscribe(`a${id}`, "message_created", handleStopTyping);
 
         return () => {
             client?.unsubscribe(`a${id}`, "typing", handleTyping);            
-            client?.unsubscribe(`a${id}`, "message-inserted", handleStopTyping);
+            client?.unsubscribe(`a${id}`, "message_created", handleStopTyping);
         }
     }, [id])
 
@@ -87,29 +87,28 @@ const Typing = ({ children, id, context }: Props) => {
         }
     }
 
-    const setTypers = (data: any) => {
+    const setTypers = (actor: MemberTypingType) => {
         
         // remove existing typing events by this user (can only type in one conversation at a time)
         activeTypers.forEach(function (item: any, index: number) {
-            if (item.member.id === data.member.id) {
+            if (item.member.id === actor.id) {
                 setActiveTypers(activeTypers.splice(index, 1));
             }
         });
 
         // track time when we received this event
-        data.member.time = Date.now();
-        setActiveTypers([...activeTypers, data.member]);
+        actor.time = Date.now();
+        setActiveTypers([...activeTypers, actor]);
     }
 
-    const handleTyping = useCallback((data: any) => {               
-        if (data.conversation.id === id && data.member.id !== user.id) {            
-            setTypers(data);
+    const handleTyping = useCallback((realtimeEvent: RealtimeTyping) => {        
+        if (realtimeEvent.conversation.id === id && realtimeEvent.actor.id !== user.id) {            
+            setTypers(realtimeEvent.actor);
         }
-
     }, [id, context, activeTypers]);
 
-    const handleStopTyping = useCallback((data: any) => {        
-        if (data.app_id === id) {
+    const handleStopTyping = useCallback((realtimeEvent: RealtimeMessage) => {        
+        if (realtimeEvent.message.app_id === id) {
             setActiveTypers([]);
         }
     }, [id, context, activeTypers]);

package/src/contexts/PreviewContext.tsx

@@ -2,17 +2,25 @@ import React, { createContext, useEffect, useState } from "react";
 import Overlay from '../ui/Overlay';
 import Button from '../ui/Button';
 import Icon from '../ui/Icon';
+import Preview from '../components/Preview';
+import { getIcon, getExtension } from "../utils/fileUtilities";
 
 export const PreviewContext = createContext<PreviewContextProps>({
     openPreview: Function,
     closePreview: Function
 });
 
+function allowedKeyTarget(e: any) {
+    var notInputField = !e.target.matches("input, textarea, select") && !e.target.closest('[contenteditable="true"]');
+    return notInputField;
+  }
+
 type Props = {
+    client: any,
     children: React.ReactNode
 }
 
-const PreviewProvider = ({ children }: Props) => {
+const PreviewProvider = ({ client, children }: Props) => {
     const [modalPreviewOpen, setModalPreviewOpen] = useState<boolean>(false);
     const [attachments, setAttachments] = useState<AttachmentType[]>([]);
     const [activeAttachment, setActiveAttchment] = useState<AttachmentType>();
@@ -53,51 +61,117 @@ const PreviewProvider = ({ children }: Props) => {
     }
 
     const handleDownload = () => {
-        window.open(`${activeAttachment?.download_url}&d=1`, "_blank");
+        window.open(`${activeAttachment?.download_url}&d=1`, "_top");
+    }
+
+    const handleExternal = () => {
+        window.open(`${activeAttachment?.external_url}`, "_blank");
+    }
+
+    const handleApplication = () => {
+        // TODO: Change to webdav-url
+        window.open(`${activeAttachment?.application_url}`, "_top");
+    }
+
+    // Keyboard handlers
+    useEffect(() => {
+        if (activeAttachment) {
+            const handleKey = (e: any) => {                
+                if (e.which === 27) { // ESC
+                    e.stopImmediatePropagation();
+                    closePreview()
+                } else if (e.which === 37) { // LEFT
+                    if (allowedKeyTarget(e)) {
+                        setCurrentAttachmentId(previousAttachmentId);
+                    }
+                } else if (e.which === 39) { // RIGHT
+                    if (allowedKeyTarget(e)) {
+                        setCurrentAttachmentId(nextAttachmentId);
+                    }
+                }
+            };
+    
+            document.addEventListener("keyup", handleKey);
+    
+            return () => {
+                // cleanup
+                document.removeEventListener("keyup", handleKey);
+            }
+        }
+
+    }, [activeAttachment])
+    
+
+    let activeExt: string = getExtension(activeAttachment?.name || '');
+    let activeIcon: string = getIcon(activeAttachment?.name || '').icon;
+
+    let activeSrc = activeAttachment?.preview_url || activeAttachment?.download_url || '';
+
+    // Let GIF and SVG display raw content
+    let animatedImage = activeAttachment?.preview_format === "image" && (activeExt === ".gif" || activeExt === ".svg");
+    if (animatedImage) {
+        activeSrc = activeAttachment?.download_url || '';
     }
 
     return (
         <>
-
             <PreviewContext.Provider value={{ openPreview: openPreview, closePreview: closePreview }}>
                 {children}
             </PreviewContext.Provider>
 
-            <Overlay.UI isOpen={modalPreviewOpen} className={'wy-dark'}>
-                <header className={'wy-appbars'}>
-                    <nav className={'wy-appbar'}>
+            <Overlay.UI isOpen={modalPreviewOpen} className="wy-dark">
+                <header className="wy-appbars">
+                    <nav className="wy-appbar">
                         <Button.UI onClick={closePreview}><Icon.UI name='close' /></Button.UI>
-                        <div className={'wy-appbar-text'}>
+                        <div className="wy-appbar-text">
                             {activeAttachment &&
                                 <span>{activeAttachment.name}</span>
                             }
 
                         </div>
-                        <Button.UI onClick={handleDownload}><Icon.UI name='download' /></Button.UI>
+                        <div className="wy-appbar-buttons">
+                            {activeAttachment?.application_url ?
+                                <Button.UI onClick={handleApplication} title={`Open in app`}><Icon.UI name={activeIcon} /></Button.UI>
+                            :
+                                activeAttachment?.external_url ?
+                                    <Button.UI onClick={handleExternal} title={`Open in ${activeAttachment.provider}`}><Icon.UI name={activeIcon} /></Button.UI>
+                                :
+                                    <Button.UI onClick={handleDownload}><Icon.UI name='download' /></Button.UI>
+                            }
+                        </div>
+
                     </nav>
                 </header>
-                <div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%" }}>
-
+                <div className="wy-preview wy-scroll-y wy-scroll-x">
                     {activeAttachment &&
                         <>
                             {previousAttachmentId &&
-                                <Button.UI onClick={handlePrevious} style={{ position: "absolute", top: "50%", left: "0" }}><Icon.UI name="previous" /></Button.UI>
+                                <nav className="wy-nav-prev"><Button.UI onClick={handlePrevious}><Icon.UI name="previous" /></Button.UI></nav>
                             }
                             {nextAttachmentId &&
-                                <Button.UI onClick={handleNext} style={{ position: "absolute", top: "50%", right: "0", }}><Icon.UI name="next" /></Button.UI>
+                                <nav className="wy-nav-next"><Button.UI onClick={handleNext}><Icon.UI name="next" /></Button.UI></nav>
                             }
-
-                            <img style={{ maxWidth: "100%" }} src={activeAttachment.preview_url} />
+                            <Preview
+                                client={client}
+                                src={activeSrc}
+                                link={activeAttachment.external_url}
+                                format={activeAttachment.preview_format}
+                                name={activeAttachment.name}
+                                icon={activeIcon}
+                                width={activeAttachment.width}
+                                height={activeAttachment.height}
+                                mediaType={activeAttachment.media_type}
+                                provider={activeAttachment.provider}
+                            />
                         </>
                     }
-
                 </div>
             </Overlay.UI>
 
         </>
 
-
     )
 };
 
 export default PreviewProvider;
+

package/src/contexts/UserContext.tsx

@@ -2,7 +2,7 @@ import React, { createContext} from "react";
 import useUser from "../hooks/useUser";
 
 export const UserContext = createContext<UserContextProps>({
-    user: { id: -1, username: "anonymous", name: "Anonymous", email: "", title: "", presence: "", avatar_url: "" }    
+    user: { id: -1, uid: "", username: "anonymous", name: "Anonymous", email: "", display_name: "", presence: "", avatar_url: "" }    
 });
 
 type Props = {

package/src/contexts/WeavyContext.tsx

@@ -7,8 +7,7 @@ import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
 import PreviewProvider from "./PreviewContext";
-import WeavyClient from "../client/WeavyClient";
-import detectScrollbars from '../utils/scrollbarDetection';
+import { detectScrollbars, detectScrollbarAdjustments } from '../utils/scrollbarDetection';
 
 dayjs.extend(relativeTime);
 dayjs.extend(utc);
@@ -21,7 +20,7 @@ export const WeavyContext = createContext<WeavyContextProps>({
   options: {}
 });
 
-type Props = {
+type WeavyProviderProperties = {
   children: React.ReactNode,
   client: WeavyClient,
   options?: WeavyContextOptions
@@ -35,21 +34,25 @@ const queryClient = new QueryClient({
   },
 })
 
-const WeavyProvider = ({ children, client, options }: Props) => {
+const WeavyProvider = ({ children, client, options }: WeavyProviderProperties) => {
 
   let defaultOptions: WeavyContextOptions = {
     zoomAuthenticationUrl: undefined,
     teamsAuthenticationUrl: undefined,
     enableCloudFiles: true,
     enableScrollbarDetection: true,
-    filebrowserUrl: "https://filebrowser.weavycloud.com/index10.html",
+    filebrowserUrl: "https://filebrowser.weavy.io/v14/",
     reactions: ['😍', '😎', '😉', '😜', '👍']
   };
 
   let opts = { ...defaultOptions, ...options }
 
   if (opts.enableScrollbarDetection) {
-    detectScrollbars();
+    detectScrollbars().then(() => detectScrollbarAdjustments());
+  }
+
+  if(!client){
+    queryClient.clear();
   }
 
   return (
@@ -58,7 +61,7 @@ const WeavyProvider = ({ children, client, options }: Props) => {
         <QueryClientProvider client={queryClient}>
           <WeavyContext.Provider value={{ client, options: opts }}>
             <UserProvider client={client}>
-              <PreviewProvider>
+              <PreviewProvider client={client}>
                 {children}
               </PreviewProvider>              
             </UserProvider>

package/src/hooks/useBadge.ts

@@ -12,12 +12,8 @@ export default function useBadge() {
 
     const getBadge = async () => {
 
-        const response = await fetch(client.url + "/api/conversations/badge", {
-            headers: {
-                "content-type": "application/json",
-                "Authorization": "Bearer " + await client.tokenFactory()
-            }
-        });
+        const response = await client.get("/api/conversations/badge")
+        
         if(response.ok){
             const data = await response.json();                        
             return data;

package/src/hooks/useChat.ts

@@ -11,20 +11,9 @@ export default function useChat(id: string, options: any) {
     }
 
     const getConversation = async () => {
-
-        const response = await fetch(client.url + "/api/apps/idf/" + id, {
-            headers: {
-                "content-type": "application/json",
-                "Authorization": "Bearer " + await client.tokenFactory()
-            }
-        });
-        if(response.ok){
-            const data = await response.json();                        
-            return data;
-        }
-
-        return null;
-        
+        const response = await client.get("/api/apps/" + id);
+        const data = await response.json();
+        return data;
     };
 
 

package/src/hooks/useConversation.ts

@@ -11,13 +11,7 @@ export default function useConversation(id: number | null, options: any) {
     }
 
     const getConversation = async () => {
-
-        const response = await fetch(client.url + "/api/conversations/" + id, {
-            headers: {
-                "content-type": "application/json",
-                "Authorization": "Bearer " + await client.tokenFactory()
-            }
-        });
+        const response = await client.get("/api/conversations/" + id);
         const data = await response.json();                        
         return data;
     };

package/src/hooks/useConversations.ts

@@ -1,27 +1,31 @@
 import { useContext } from "react";
-import { useQuery } from "react-query";
+import { useInfiniteQuery } from "react-query";
 import { WeavyContext } from "../contexts/WeavyContext";
 
 /// GET all conversations
-export default function useConversations() {
+export default function useConversations(options: any) {
     const { client } = useContext(WeavyContext);
+    const PAGE_SIZE = 25;
 
     if (!client) {
         throw new Error('useConversations must be used within an WeavyProvider');
     }
 
-    const getConversations = async () => {
-
-        const response = await fetch(client.url + "/api/conversations?contextual=false", {
-            headers: {
-                "content-type": "application/json",
-                "Authorization": "Bearer " + await client.tokenFactory()
-            }
-        });
+    const getConversations = async (opt: any) => {
+        let skip = opt.pageParam || 0;
+        const response = await client.get("/api/conversations?contextual=false&skip=" + skip + "&top=" + PAGE_SIZE);
         const data = await response.json();                        
         return data;
     };
 
+    var opts = {
+        ...options, 
+        getNextPageParam: (lastPage:any, pages:any) => { 
+            if (lastPage?.end < lastPage?.count)  {                
+                return pages.length * PAGE_SIZE;
+            }
+        }      
+    };
 
-    return useQuery<ConversationsResult>("conversations", getConversations);
+    return useInfiniteQuery<ConversationsResult>("conversations", getConversations, opts);
 }

package/src/hooks/useFileUploader.ts

@@ -17,13 +17,11 @@ export default function useFileUploader(callback: Function) {
             const formData = new FormData();
             formData.append('blob', request.file);
 
-            var response = await fetch(client.url + "/api/blobs", {
-                method: 'POST',
-                body: formData,
-                headers: {
-                    "Authorization": "Bearer " + await client.tokenFactory()
-                }
-            });
+
+            const response = await client.post("/api/blobs",
+                "POST",
+                formData,
+                "");
 
             var uploaded = await response.json();
             callback(uploaded);
@@ -32,7 +30,7 @@ export default function useFileUploader(callback: Function) {
             onError: (e: any) => {
 
             },
-            onSuccess: (data: any, variables: any) => {                
+            onSuccess: (data: any, variables: any) => {
             },
         }
     );

package/src/hooks/useMembers.ts

@@ -11,13 +11,7 @@ export default function useMembers(id: number | null, options: any) {
     }
 
     const getConversationMembers = async () => {
-
-        const response = await fetch(client.url + "/api/apps/" + id + "/members", {
-            headers: {
-                "content-type": "application/json",
-                "Authorization": "Bearer " + await client.tokenFactory()
-            }
-        });
+        const response = await client.get("/api/apps/" + id + "/members");
         const data = await response.json();                
         return data;
     };

package/src/hooks/useMessages.ts

@@ -13,13 +13,7 @@ export default function useMessages(id: number | null, options: any) {
 
     const getMessages = async (opt: any) => {
         let skip = opt.pageParam || 0;
-
-        const response = await fetch(client.url + "/api/apps/" + id + "/messages?orderby=createdat+desc&skip=" + skip + "&top=" + PAGE_SIZE, {
-            headers: {
-                "content-type": "application/json",
-                "Authorization": "Bearer " + await client.tokenFactory()
-            }
-        });
+        const response = await client.get("/api/apps/" + id + "/messages?orderby=createdat+desc&skip=" + skip + "&top=" + PAGE_SIZE);
         let result = await response.json();
         result.data = result.data?.reverse() || [];
         return result;

package/src/hooks/useMutateChat.ts

@@ -21,17 +21,12 @@ export default function useMutateChat() {
     // create new conversation
     const mutateChat = async ({ identifier, members }: MutateProps) => {
 
-        const response = await fetch(client.url + "/api/apps/", {
-            method: "POST",
-            body: JSON.stringify({ 
+        const response = await client.post("/api/apps/",
+            "POST",
+            JSON.stringify({
                 identifier: identifier,
-                members: members 
-            }),
-            headers: {
-                "content-type": "application/json",
-                "Authorization": "Bearer " + await client.tokenFactory()
-            }
-        });
+                members: members
+            }));
 
         return response.json();
     };
@@ -39,6 +34,6 @@ export default function useMutateChat() {
     return useMutation(mutateChat, {
         onSuccess: () => {
             //queryClient.invalidateQueries("conversations");            
-        }        
+        }
     });
 }

package/src/hooks/useMutateConversation.ts

@@ -20,21 +20,18 @@ export default function useMutateConversation() {
     // create new conversation
     const mutateConversation = async ({ members }: MutateProps) => {
 
-        const response = await fetch(client.url + "/api/conversations/", {
-            method: "POST",
-            body: JSON.stringify({ members: members }),
-            headers: {
-                "content-type": "application/json",
-                "Authorization": "Bearer " + await client.tokenFactory()
-            }
-        });
+        const response = await client.post("/api/conversations/",
+            "POST",
+            JSON.stringify({
+                members: members
+            }));
 
         return response.json();
     };
 
     return useMutation(mutateConversation, {
         onSuccess: () => {
-            queryClient.invalidateQueries("conversations");            
-        }        
+            queryClient.invalidateQueries("conversations");
+        }
     });
 }

package/src/hooks/useMutateConversationName.ts

@@ -14,28 +14,26 @@ export default function useMutateConversationName() {
 
 
     type MutateProps = {
-        id: number | null, 
+        id: number | null,
         name: string
     }
 
     const mutateConversationName = async ({ id, name }: MutateProps) => {
 
-        const response = await fetch(client.url + "/api/apps/" + id, {
-            method: "PATCH",
-            body: JSON.stringify({ name: name }),
-            headers: {
-                "content-type": "application/json",
-                "Authorization": "Bearer " + await client.tokenFactory()
-            }
-        });
+        const response = await client.post("/api/apps/" + id,
+            "PATCH",
+            JSON.stringify({
+                type: 'ChatRoom',
+                name: name
+            }));
 
         return response.json();
     };
 
     return useMutation(mutateConversationName, {
         onSuccess: (data: any, variables: any, context: any) => {
-            queryClient.invalidateQueries("conversations");            
-            queryClient.invalidateQueries(["conversation", variables.id]);     
-        }        
+            queryClient.invalidateQueries("conversations");
+            queryClient.invalidateQueries(["conversation", variables.id]);
+        }
     });
 }

package/src/hooks/useMutateDeleteReaction.ts

@@ -22,14 +22,9 @@ export default function useMutateDeleteReaction() {
     const mutateDeleteReaction = async ({ id, reaction }: MutateProps) => {
 
         // remove the existing reaction
-        const response = await fetch(client.url + "/api/messages/" + id + "/reactions/", {
-            method: "DELETE",
-            headers: {
-                "content-type": "application/json",
-                "Authorization": "Bearer " + await client.tokenFactory()
-            }
-        });
-
+        const response = await client.post("/api/messages/" + id + "/reactions/",
+        "DELETE",
+        "");
 
         return response;
     };