@weavy/uikit-react 11.1.0 → 13.0.0

package/src/contexts/PreviewContext.tsx

@@ -2,18 +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 { prefix as wy } from "../utils/styles";
+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>();
@@ -54,50 +61,115 @@ 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>
 
         </>
 
-
     )
 };
 

package/src/contexts/WeavyContext.tsx

@@ -7,7 +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';
 
 dayjs.extend(relativeTime);
 dayjs.extend(utc);
@@ -20,7 +20,7 @@ export const WeavyContext = createContext<WeavyContextProps>({
   options: {}
 });
 
-type Props = {
+type WeavyProviderProperties = {
   children: React.ReactNode,
   client: WeavyClient,
   options?: WeavyContextOptions
@@ -34,24 +34,34 @@ 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,
-    filebrowserUrl: "https://filebrowser.weavycloud.com/index10.html"
+    enableScrollbarDetection: true,
+    filebrowserUrl: "https://filebrowser.weavycloud.com/index10.html",
+    reactions: ['😍', '😎', '😉', '😜', '👍']
   };
 
   let opts = { ...defaultOptions, ...options }
 
+  if (opts.enableScrollbarDetection) {
+    detectScrollbars();
+  }
+
+  if(!client){
+    queryClient.clear();
+  }
+
   return (
     <>
       {client &&
         <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

@@ -1,5 +1,4 @@
 import { useContext } from "react";
-
 import { useQuery } from "react-query";
 import { WeavyContext } from "../contexts/WeavyContext";
 
@@ -12,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

@@ -11,13 +11,7 @@ export default function useConversations() {
     }
 
     const getConversations = async () => {
-
-        const response = await fetch(client.url + "/api/conversations?contextual=false", {
-            headers: {
-                "content-type": "application/json",
-                "Authorization": "Bearer " + await client.tokenFactory()
-            }
-        });
+        const response = await client.get("/api/conversations?contextual=false");
         const data = await response.json();                        
         return data;
     };

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;
     };

package/src/hooks/useMutateExternalBlobs.ts

@@ -14,26 +14,21 @@ export default function useMutateExternalBlobs() {
 
 
     type MutateProps = {
-        blobs: []         
+        blobs: []
     }
 
     const mutateExternalBlobs = async ({ blobs }: MutateProps) => {
 
-        const response = await fetch(client.url + "/api/blobs/external", {
-            method: "POST",
-            body: JSON.stringify(blobs),
-            headers: {
-                "content-type": "application/json",
-                "Authorization": "Bearer " + await client.tokenFactory()
-            }
-        });
+        const response = await client.post("/api/blobs/external",
+            "POST",
+            JSON.stringify(blobs));
 
         return response.json();
     };
 
     return useMutation(mutateExternalBlobs, {
         onSuccess: (variables: any) => {
-            
-        }        
+
+        }
     });
 }

package/src/hooks/useMutateMeeting.ts

@@ -14,26 +14,21 @@ export default function useMutateMeeting() {
 
 
     type MutateProps = {
-        provider: string         
+        provider: string
     }
 
     const mutateMeeting = async ({ provider }: MutateProps) => {
 
-        const response = await fetch(client.url + "/api/meetings", {
-            method: "POST",
-            body: JSON.stringify({provider: provider}),
-            headers: {
-                "content-type": "application/json",
-                "Authorization": "Bearer " + await client.tokenFactory()
-            }
-        });
+        const response = await client.post("/api/meetings",
+            "POST",
+            JSON.stringify({ provider: provider }));
 
         return response.json();
     };
 
     return useMutation(mutateMeeting, {
         onSuccess: (variables: any) => {
-            
-        }        
+
+        }
     });
 }

package/src/hooks/useMutateMembers.ts

@@ -14,30 +14,25 @@ export default function useMutateMembers() {
 
 
     type MutateProps = {
-        id: number | null, 
+        id: number | null,
         members: number[]
     }
 
     // add members to conversation
     const mutateMembers = async ({ id, members }: MutateProps) => {
 
-        const response = await fetch(client.url + "/api/apps/" + id + "/members/", {
-            method: "POST",
-            body: JSON.stringify(members),
-            headers: {
-                "content-type": "application/json",
-                "Authorization": "Bearer " + await client.tokenFactory()
-            }
-        });
+        const response = await client.post("/api/apps/" + id + "/members/",
+            "POST",
+            JSON.stringify(members));
 
         return response;
     };
 
     return useMutation(mutateMembers, {
         onSuccess: (data: any, variables: any, context: any) => {
-            queryClient.invalidateQueries("conversations");                       
-            queryClient.invalidateQueries(["conversation", variables.id]);     
-            queryClient.invalidateQueries(["members", variables.id]);     
-        }        
+            queryClient.invalidateQueries("conversations");
+            queryClient.invalidateQueries(["conversation", variables.id]);
+            queryClient.invalidateQueries(["members", variables.id]);
+        }
     });
 }

package/src/hooks/useMutateMessage.ts

@@ -22,19 +22,14 @@ export default function useMutateMessage() {
     }
 
     const mutateMessage = async ({ id, text, userId, attachments, meetings }: MutateProps) => {
-        const response = await fetch(client.url + "/api/apps/" + id + "/messages", {
-            method: "POST",
-            body: JSON.stringify({
+
+        const response = await client.post("/api/apps/" + id + "/messages",
+            "POST",
+            JSON.stringify({
                 text: text,
                 blobs: attachments.map((a: FileType) => { return a.id }),
                 meeting_id: meetings.length > 0 ? meetings[0].id : null
-            }),
-            headers: {
-                "content-type": "application/json",
-                "Authorization": "Bearer " + await client.tokenFactory()
-            }
-        });
-
+            }));
         return response.json();
     };
 
@@ -46,7 +41,7 @@ export default function useMutateMessage() {
                 // update cache
                 const newPagesArray = previousData.pages.map((page: any, i: number) => {
 
-                    
+
 
                     // remove temp message                    
                     if (i === 0) {
@@ -54,7 +49,7 @@ export default function useMutateMessage() {
                             ...page.data.filter((message: MessageType) => message.id !== context.tempId),
                             data
                         ]
-                       
+
                     }
 
                     return page;
@@ -68,7 +63,7 @@ export default function useMutateMessage() {
             }
 
             // refetch conversations list
-            queryClient.invalidateQueries("conversations");   
+            queryClient.invalidateQueries("conversations");
 
         },
         onMutate: async (variables: any) => {
@@ -100,8 +95,8 @@ export default function useMutateMessage() {
 
                 // update cache
                 queryClient.setQueryData(["messages", variables.id], (data: any) => {
-                    let updatedPages = [lastPage];                    
-                    if (data?.pages.length > 1) {                        
+                    let updatedPages = [lastPage];
+                    if (data?.pages.length > 1) {
                         updatedPages = [lastPage, ...data?.pages.slice(1)];
                     }
                     return {

package/src/hooks/useMutatePinned.ts

@@ -20,14 +20,9 @@ export default function useMutatePinned() {
 
     const mutatePinned = async ({ id, pin }: MutateProps) => {
 
-        const response = await fetch(client.url + "/api/conversations/" + id + "/pin", {
-            method:  + !pin ? "DELETE": "PUT",
-            body: "",
-            headers: {
-                "content-type": "application/json",
-                "Authorization": "Bearer " + await client.tokenFactory()
-            }
-        });
+        const response = await client.post("/api/conversations/" + id + "/pin",
+            !pin ? "DELETE" : "PUT",
+            "");
 
         return response.json();
     };