@weavy/uikit-react 14.0.4 → 15.0.0

package/src/components/SearchUsers.tsx

@@ -6,44 +6,35 @@ import Button from '../ui/Button';
 import Icon from '../ui/Icon';
 
 type SearchUsersProps = {
+    existingMembers?: MemberType[],
     handleSubmit: any,
     buttonTitle: string
 }
 
-const SearchUsers = ({handleSubmit, buttonTitle}: SearchUsersProps) => {
+const SearchUsers = ({ existingMembers, handleSubmit, buttonTitle }: SearchUsersProps) => {
 
     const [text, setText] = useState("");
     const [selected, setSelected] = useState<MemberType[]>([]);
 
-    const { isLoading, isError, data, error, isFetching, refetch } = useSearchUsers(text, {
+    const { data, refetch } = useSearchUsers(text || "*", {
         enabled: false
     });
 
     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;
+    const isChecked = (memberId: number): boolean => {
+        return selected.find((m) => { return m.id === memberId }) != null;
     }
 
-    const handleSelected = (e: any, member: MemberType) => {
-        if (e.target.checked) {
+    const handleSelected = (member: MemberType, checked: boolean) => {
+        if (checked) {
             setSelected([...selected, member]);
         } else {
-            setSelected(selected.filter((u) => { return u.id !== member.id }));
+            setSelected(selected.filter((m) => { return m.id !== member.id }));
         }
-
     }
-
     const clear = () => {
-        setSelected([]);
         setText("");
     }
 
@@ -58,43 +49,92 @@ const SearchUsers = ({handleSubmit, buttonTitle}: SearchUsersProps) => {
             </div>
 
             <div className="wy-pane-group">
-                {data && (!data.data || data.data.length === 0) &&
+                {data && (!data.data || data.data.filter(m => existingMembers?.find(e => e.id === m.id) === undefined).length === 0) &&
                     <div className="wy-table-no-result">Your search did not match any people.</div>
                 }
-                <table className="wy-table wy-table-hover wy-search-result-table">
-                    <tbody>
-                        {data && data.data && data.data.length > 0 && data.data.map((user: MemberType) => {
+                {selected && selected.length > 0 &&
+                    <div className="wy-pane-group">
+                        <label className="wy-input-label">Selected</label>
+                        {selected.map((member: MemberType) => {
+                            return (
+                                <div className='wy-item' key={member.id} >
+                                    <Avatar src={member.avatar_url} size={32} id={member.id} presence={member.presence} name={member.display_name} />
+                                    <div className="wy-item-body">
+                                        {member.display_name}
+                                    </div>
+                                    <Button.UI onClick={() => handleSelected(member, !isChecked(member.id))} title="Remove">
+                                        <Icon.UI name="account-minus" />
+                                    </Button.UI>
+                                </div>
+                            )
+                        })}
+
+
+                        <hr />
+                        {/* <div style={{ display: "flex", columnGap: "1.5rem", flexWrap: "wrap" }}>
+
+                            {selected.map((member: MemberType) => {
+                                return (
+                                    <div style={{ display: "flex", flexDirection: "column" }} title="Click to remove" onClick={() => handleSelected(member, false)}>
+                                        <div style={{alignSelf: 'center'}}>
+                                            <Avatar src={member.avatar_url} size={32} id={member.id} presence={member.presence} name={member.display_name} />
+                                        </div>
+                                        <div className="">{member.display_name}</div>
+                                    </div>
+                                )
+                            })}
+                        </div> */}
+                    </div>
+                }
+
+                <div className="wy-pane-group">
+                    {data && data.data && data.data.filter(m => existingMembers?.find(e => e.id === m.id) === undefined && selected.find(s => s.id === m.id) === undefined).map((member: MemberType) => {
+                        return (
+                            <div className='wy-item' key={member.id} >
+                                <Avatar src={member.avatar_url} size={32} id={member.id} presence={member.presence} name={member.display_name} />
+                                <div className="wy-item-body">
+                                    {member.display_name}
+                                </div>
+                                <Button.UI onClick={() => handleSelected(member, !isChecked(member.id))} title="Add">
+                                    <Icon.UI name="account-plus" />
+                                </Button.UI>
+                            </div>
+                        )
+                    })}
+                </div>
+
+                {/* <table className="wy-table wy-table-hover wy-search-result-table">
+                    <tbody>                       
+                        {data && data.data && data.data.filter(m => existingMembers?.find(e => e.id === m.id) === undefined && selected.find(s => s.id === m.id) === undefined).map((member: MemberType) => {
                             return (
-                                <tr key={user.id} onClick={toggleChecked}>
+                                <tr key={member.id} onClick={() => handleSelected(member, !isChecked(member.id))}>
                                     <td className="wy-table-cell-icon">
-                                        <Avatar src={user.avatar_url} size={24} id={user.id} presence={user.presence} name={user.display_name} />
+                                        <Avatar src={member.avatar_url} size={32} id={member.id} presence={member.presence} name={member.display_name} />
+                                    </td>
+                                    <td className="wy-table-cell-text">{member.display_name}</td>
+                                    <td className="wy-table-cell-icon">
+                                        <input type="checkbox" className="wy-button-check" checked={isChecked(member.id)} onChange={(() => { })} />
+                                        <Button.UI className='wy-button-icon'>
+                                            <Icon.Raw name="checkbox-blank" />
+                                            <Icon.Raw name="checkbox-marked" />
+                                        </Button.UI>                                        
                                     </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>
                             )
                         })}
-                    </tbody> 
-                </table>
+                    </tbody>
+                </table> */}
             </div>
-            {/*<div className="wy-search-group">
-                <h2>Selected people</h2>
-                <ul>
-                    {selected && selected.length > 0 && selected.map((user: UserType) => {
-                        return <li key={user.id}> {user.title} {user.email && ` - ${user.email}`}</li>
-                    })}
-                </ul>
-                </div>*/}
             <div className="wy-footerbars">
                 <div className="wy-footerbar">
                     <div className="wy-pane-group">
                         <div className="wy-buttons">
-                            <button className="wy-button wy-button-primary" type="button" onClick={() => {handleSubmit(selected); clear();}} disabled={selected.length === 0}>{buttonTitle}</button>
+                            <button className="wy-button wy-button-primary" type="button" onClick={() => { handleSubmit(selected); clear(); }} disabled={selected.length === 0}>{buttonTitle}</button>
                         </div>
                     </div>
                 </div>
             </div>
-        </div>
+        </div >
     )
 }
 

package/src/components/Typing.tsx

@@ -102,7 +102,7 @@ const Typing = ({ children, id, context }: Props) => {
     }
 
     const handleTyping = useCallback((realtimeEvent: RealtimeTyping) => {        
-        if (realtimeEvent.conversation.id === id && realtimeEvent.actor.id !== user.id) {            
+        if (realtimeEvent.entity.id === id && realtimeEvent.actor.id !== user.id) {            
             setTypers(realtimeEvent.actor);
         }
     }, [id, context, activeTypers]);

package/src/{components/FileBrowser.tsx → contexts/CloudFilesContext.tsx}

@@ -1,24 +1,28 @@
-import React, { useContext, useEffect, useState, useRef, useCallback } from "react";
-import { WeavyContext } from "../contexts/WeavyContext";
-import Button from '../ui/Button';
-import Spinner from '../ui/Spinner';
-import Icon from '../ui/Icon';
-import useMutateExternalBlobs from '../hooks/useMutateExternalBlobs';
+import React, { createContext, useCallback, useContext, useEffect, useState } from "react";
+import useMutateExternalBlobs from "../hooks/useMutateExternalBlobs";
 import Overlay from '../ui/Overlay';
+import Spinner from '../ui/Spinner';
 import WeavyPostal from "../utils/postal-parent";
 
+export const CloudFilesContext = createContext<CloudFilesContextProps>({
+    open: Function    
+});
+
 type Props = {
-    onFileAdded: Function
+    client: any,
+    options: WeavyContextOptions, // pass client here to avoid circular references from WeavyContext
+    children: React.ReactNode
 }
 
-const FileBrowser = ({ onFileAdded }: Props) => {
+let addFunc = ([]:any) => {};
 
-    const { options } = useContext(WeavyContext);
+const CloudFilesProvider = ({ children, options, client }: Props) => {    
     const [modalOpen, setModalOpen] = useState(false);
     const [visible, setVisible] = useState(false);
     const [frameSrc, setFrameSrc] = useState("");
-    const addExternalBlobs = useMutateExternalBlobs();
+    
     const fileBrowserUrl = options?.filebrowserUrl || "";
+    const addExternalBlobs = useMutateExternalBlobs(client);
 
     const frameRef = useCallback((node: HTMLIFrameElement | null) => {
         if (node !== null && node.contentWindow != null) {
@@ -26,6 +30,8 @@ const FileBrowser = ({ onFileAdded }: Props) => {
         }
     }, []);
 
+    
+
     useEffect(() => {
         var origin = "";
 
@@ -59,18 +65,27 @@ const FileBrowser = ({ onFileAdded }: Props) => {
             WeavyPostal.off("add-external-blobs", handleFiles);
             WeavyPostal.off("request:file-browser-close", handleClose);
         }
-    }, [onFileAdded]);
-
-    const toggleModal = (open: boolean) => {
-        setModalOpen(open);
-    }
+    }, []);
 
     const handleFiles = async (e: Event, message: any) => {
-        var result = await addExternalBlobs.mutateAsync({ blobs: message.blobs });
-        onFileAdded(result);
+        let result:any[] = [];
+        for(let i = 0; i < message.blobs.length; i++){
+            let uploadResult = await addExternalBlobs.mutateAsync({blob: message.blobs[i]});
+            if(uploadResult.errors){
+                console.error(uploadResult.errors)
+            } else{
+                result.push(uploadResult);
+            }                        
+        }                
+        addFunc(result);                
         closeFilebrowser();
     }
 
+    const handleOpen = (callback: ([]:any) => {}) => {        
+        addFunc = callback        
+        setModalOpen(true);
+    }
+
     const handleClose = () => {
         closeFilebrowser();
     }
@@ -86,22 +101,23 @@ const FileBrowser = ({ onFileAdded }: Props) => {
 
     return (
         <>
-            {options?.enableCloudFiles &&
-                <>
-                    <Button.UI onClick={() => toggleModal(true)} title="Add file from cloud"><Icon.UI name="cloud" /></Button.UI>
+            <CloudFilesContext.Provider value={{open: handleOpen}}>
+                {children}
+            </CloudFilesContext.Provider>
 
-                    <Overlay.UI isOpen={modalOpen} className="wy-modal wy-panel wy-loaded">
-                        {!visible &&
-                            <Spinner.UI overlay={true} />
-                        }
+            <Overlay.UI isOpen={modalOpen} className="wy-modal wy-panel wy-loaded">
+                {!visible &&
+                    <Spinner.UI overlay={true} />
+                }
 
-                        <iframe ref={frameRef} onLoad={handleFrameLoad} src={frameSrc} className="wy-panel-frame" id="weavy-filebrowser" name="weavy-filebrowser"></iframe>
+                <iframe ref={frameRef} onLoad={handleFrameLoad} src={frameSrc} className="wy-panel-frame" id="weavy-filebrowser" name="weavy-filebrowser"></iframe>
 
-                    </Overlay.UI>
-                </>
-            }
+            </Overlay.UI>
         </>
+
+
     )
-}
+};
+
+export default CloudFilesProvider;
 
-export default FileBrowser;

package/src/contexts/PreviewContext.tsx

@@ -4,16 +4,19 @@ import Button from '../ui/Button';
 import Icon from '../ui/Icon';
 import Preview from '../components/Preview';
 import { getIcon, getExtension } from "../utils/fileUtilities";
+import classNames from "classnames";
+import openUrl from "../utils/openUrl";
 
 export const PreviewContext = createContext<PreviewContextProps>({
     openPreview: Function,
-    closePreview: Function
+    closePreview: Function,
+    setPreviewFiles: Function
 });
 
 function allowedKeyTarget(e: any) {
     var notInputField = !e.target.matches("input, textarea, select") && !e.target.closest('[contenteditable="true"]');
     return notInputField;
-  }
+}
 
 type Props = {
     client: any,
@@ -22,29 +25,35 @@ type Props = {
 
 const PreviewProvider = ({ client, children }: Props) => {
     const [modalPreviewOpen, setModalPreviewOpen] = useState<boolean>(false);
-    const [attachments, setAttachments] = useState<AttachmentType[]>([]);
-    const [activeAttachment, setActiveAttchment] = useState<AttachmentType>();
-
-    const [currentAttachmentId, setCurrentAttachmentId] = useState<number | null>();
-    const [nextAttachmentId, setNextAttachmentId] = useState<number | null>();
-    const [previousAttachmentId, setPreviousAttachmentId] = useState<number | null>();
-
-    useEffect(() => {
-
-        if (currentAttachmentId) {
-            var itemIndex = attachments.map(function (a: AttachmentType) { return a.id; }).indexOf(currentAttachmentId);
+ 
+    const [files, setFiles] = useState<FileType[]>();
+    const [activeFile, setActiveFile] = useState<FileType>();
+    
+    const [currentFileId, setCurrentFileId] = useState<number>();
+    const [nextFileId, setNextFileId] = useState<number>();
+    const [previousFileId, setPreviousFileId] = useState<number>();
 
-            setPreviousAttachmentId(itemIndex > 0 ? attachments[itemIndex - 1].id : null);
-            setNextAttachmentId(itemIndex + 1 < attachments.length ? attachments[itemIndex + 1].id : null);
-            setActiveAttchment(attachments.find((a: AttachmentType) => a.id === currentAttachmentId));
+    
+    useEffect(() => {          
+        if (currentFileId) {
+            if (files) {
+                let itemIndex = files.map(function (a: FileType) { return a.id; }).indexOf(currentFileId);
+                
+                setPreviousFileId(itemIndex > 0 ? files[itemIndex - 1].id : undefined);
+                setNextFileId(itemIndex + 1 < files.length ? files[itemIndex + 1].id : undefined);
+                setActiveFile(files.find((a: FileType) => a.id === currentFileId));
+            }
         }
 
-    }, [attachments, currentAttachmentId])
+    }, [files, files?.length, currentFileId])
 
-    const openPreview = (attachments: AttachmentType[], id: number) => {
-        setAttachments(attachments);
-        setCurrentAttachmentId(id);
+    const setPreviewFiles = (fileList: FileType[]) => {
+        //console.log("setPreviewFiles", fileList, isValidInfiniteQuery(fileList) ? "infinite files": "files")
+        setFiles(fileList);
+    };
 
+    const openPreview = (id: number) => {
+        setCurrentFileId(id);
         setModalPreviewOpen(true);
     }
 
@@ -53,120 +62,128 @@ const PreviewProvider = ({ client, children }: Props) => {
     }
 
     const handlePrevious = () => {
-        setCurrentAttachmentId(previousAttachmentId);
+        setCurrentFileId(previousFileId);
     }
 
     const handleNext = () => {
-        setCurrentAttachmentId(nextAttachmentId);
+        setCurrentFileId(nextFileId);
     }
 
     const handleDownload = () => {
-        window.open(`${activeAttachment?.download_url}&d=1`, "_top");
+        if (activeFile && activeFile.download_url) {
+           openUrl(activeFile.download_url, "_top", activeFile.name, true)
+        }
     }
 
     const handleExternal = () => {
-        window.open(`${activeAttachment?.external_url}`, "_blank");
+        if (activeFile && activeFile.external_url) {
+            openUrl(activeFile.external_url, "_blank", activeFile.name)
+         }
     }
 
     const handleApplication = () => {
-        // TODO: Change to webdav-url
-        window.open(`${activeAttachment?.application_url}`, "_top");
+        if (activeFile && activeFile.application_url) {
+            openUrl(activeFile.application_url, "_top", activeFile.name)
+         }
     }
 
     // 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);
+        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);
+            document.addEventListener("keyup", handleKey, true);
     
             return () => {
                 // cleanup
-                document.removeEventListener("keyup", handleKey);
+                document.removeEventListener("keyup", handleKey, true);
             }
         }
 
-    }, [activeAttachment])
-    
+    }, [activeFile, modalPreviewOpen])
+
+    let activeIcon: string = getIcon(activeFile?.name || '').icon;
 
-    let activeExt: string = getExtension(activeAttachment?.name || '');
-    let activeIcon: string = getIcon(activeAttachment?.name || '').icon;
+    let previewExt: string = getExtension(activeFile?.name || '');
+    let previewIcon: string = getIcon(activeFile?.name || '').icon;
 
-    let activeSrc = activeAttachment?.preview_url || activeAttachment?.download_url || '';
+    let previewSrc = activeFile?.preview_url || activeFile?.download_url || '';
 
     // Let GIF and SVG display raw content
-    let animatedImage = activeAttachment?.preview_format === "image" && (activeExt === ".gif" || activeExt === ".svg");
+    let animatedImage = activeFile?.preview_format === "image" && (previewExt === ".gif" || previewExt === ".svg");
     if (animatedImage) {
-        activeSrc = activeAttachment?.download_url || '';
+        previewSrc = activeFile?.download_url || '';
     }
 
     return (
         <>
-            <PreviewContext.Provider value={{ openPreview: openPreview, closePreview: closePreview }}>
+            <PreviewContext.Provider value={{ openPreview: openPreview, closePreview: closePreview, setPreviewFiles: setPreviewFiles }}>
                 {children}
             </PreviewContext.Provider>
 
-            <Overlay.UI isOpen={modalPreviewOpen} className="wy-dark">
+            {files && <Overlay.UI isOpen={modalPreviewOpen} className="wy-dark" closeOnEsc={false} onClose={() => setModalPreviewOpen(false)}>
                 <header className="wy-appbars">
                     <nav className="wy-appbar">
                         <Button.UI onClick={closePreview}><Icon.UI name='close' /></Button.UI>
-                        <div className="wy-appbar-text">
-                            {activeAttachment &&
-                                <span>{activeAttachment.name}</span>
+                        <div className={classNames("wy-appbar-text", { "wy-appbar-text-trashed": activeFile?.is_trashed })}>
+                            {activeFile &&
+                                <span>{activeFile.name}</span>
                             }
 
                         </div>
                         <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>
-                            }
+                            {activeFile && <Button.UI onClick={handleDownload}><Icon.UI name='download' /></Button.UI> }
                         </div>
 
                     </nav>
                 </header>
-                <div className="wy-preview wy-scroll-y wy-scroll-x">
-                    {activeAttachment &&
-                        <>
-                            {previousAttachmentId &&
-                                <nav className="wy-nav-prev"><Button.UI onClick={handlePrevious}><Icon.UI name="previous" /></Button.UI></nav>
-                            }
-                            {nextAttachmentId &&
-                                <nav className="wy-nav-next"><Button.UI onClick={handleNext}><Icon.UI name="next" /></Button.UI></nav>
-                            }
-                            <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 className="wy-main">  
+                    <div className="wy-preview">
+                        {activeFile &&
+                            <>
+                                {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={activeFile.external_url}
+                                        format={activeFile.is_trashed ? "none" : activeFile.preview_format}
+                                        name={activeFile.name}
+                                        icon={previewIcon}
+                                        width={activeFile.width}
+                                        height={activeFile.height}
+                                        mediaType={activeFile.media_type}
+                                        provider={activeFile.provider}
+                                    />
+                                </div>
+                            </>
+                        }
+                    </div>
                 </div>
-            </Overlay.UI>
+            </Overlay.UI>}
 
         </>
 

package/src/contexts/WeavyContext.tsx

@@ -1,13 +1,14 @@
 import React, { createContext } from "react";
 import { QueryClient, QueryClientProvider } from "react-query";
 import UserProvider from "./UserContext";
-import dayjs  from 'dayjs';
+import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
 import PreviewProvider from "./PreviewContext";
-import { detectScrollbars, detectScrollbarAdjustments } from '../utils/scrollbarDetection';
+import { detectScrollbars, detectScrollbarAdjustments } from '../utils/scrollbar-detection';
+import CloudFilesProvider from "./CloudFilesContext";
 
 dayjs.extend(relativeTime);
 dayjs.extend(utc);
@@ -29,6 +30,7 @@ type WeavyProviderProperties = {
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
+      //refetchOnWindowFocus: false,
       cacheTime: 1000 * 60 * 60 * 24, // 24 hours
     },
   },
@@ -51,7 +53,7 @@ const WeavyProvider = ({ children, client, options }: WeavyProviderProperties) =
     detectScrollbars().then(() => detectScrollbarAdjustments());
   }
 
-  if(!client){
+  if (!client) {
     queryClient.clear();
   }
 
@@ -61,9 +63,11 @@ const WeavyProvider = ({ children, client, options }: WeavyProviderProperties) =
         <QueryClientProvider client={queryClient}>
           <WeavyContext.Provider value={{ client, options: opts }}>
             <UserProvider client={client}>
-              <PreviewProvider client={client}>
-                {children}
-              </PreviewProvider>              
+              <CloudFilesProvider options={opts} client={client}>
+                <PreviewProvider client={client}>
+                  {children}
+                </PreviewProvider>
+              </CloudFilesProvider>
             </UserProvider>
           </WeavyContext.Provider>
         </QueryClientProvider>

package/src/hooks/useApps.ts

@@ -0,0 +1,23 @@
+import { useContext } from "react";
+import { useQuery } from "react-query";
+import { WeavyContext } from "../contexts/WeavyContext";
+
+/// GET a specific app
+export default function useApp(uid: string, options: any) {
+    const { client } = useContext(WeavyContext);
+
+    if (!client) {
+        throw new Error('useApp must be used within an WeavyProvider');
+    }
+
+    const getApp = async () => {
+        const response = await client.get("/api/apps/" + uid);
+        const data = await response.json();
+        return data;
+    };
+
+
+    return useQuery<AppType>(["apps", uid], getApp, options);
+}
+
+

package/src/hooks/useCloudFiles.ts

@@ -0,0 +1,12 @@
+import React, { useContext } from "react";
+import { CloudFilesContext } from "../contexts/CloudFilesContext";
+
+export default function useCloudFiles(callback: Function) {
+    const { open} = useContext(CloudFilesContext);
+
+    const openCloudFiles = () => {        
+        open(callback);
+    }
+
+    return { openCloudFiles }
+}