@weavy/uikit-react 14.0.3 → 15.0.0

package/src/hooks/useCommentList.ts

@@ -0,0 +1,30 @@
+import { useContext } from "react";
+import { useInfiniteQuery, useQuery } from "react-query";
+import { WeavyContext } from "../contexts/WeavyContext";
+
+/// GET all comment for a parent
+export default function useCommentList(parentId: number | null, type: "posts" | "files" | "apps", options: any) {
+    const PAGE_SIZE = 10;
+    const { client } = useContext(WeavyContext);
+
+    if (!client) {
+        throw new Error('useCommentList must be used within an WeavyProvider');
+    }
+
+    const getPosts = async (opt: any) => {
+        let skip = opt.pageParam || 0;        
+        const response = await client.get(`/api/${type}/${parentId}/comments?orderby=createdat+asc&skip=${skip}&top=${PAGE_SIZE}`);
+
+        return await response.json();        
+    };
+    var opts = {
+        ...options, 
+        getNextPageParam: (lastPage:any, pages:any) => { 
+            if (lastPage?.end < lastPage?.count)  {                
+                return pages.length * PAGE_SIZE;
+            }
+        }        
+    };
+        
+    return useInfiniteQuery<MessagesResult>(["comments", parentId], getPosts, opts)
+}

package/src/hooks/useEmbeds.ts

@@ -0,0 +1,126 @@
+import { useContext, useState } from "react";
+import { useQuery } from "react-query";
+import { WeavyContext } from "../contexts/WeavyContext";
+
+interface IIndexable {
+    url: string[],
+    [key: string]: string[]
+}
+
+/// handle embeds
+export default function useEmbeds(callback: Function) {
+    const { client } = useContext(WeavyContext);
+    const regexp = /(((https?|ftp):\/\/|(www|ftp)\.)[\w]+(.[\w]+)([\w\-\.,@?^=%&:\/~\+#]*[\w\-\@?^=%&\/~\+#]))/gmi;
+
+
+    const [latest, setLatest] = useState<string[]>([])
+    const [embeds, setEmbeds] = useState<string[]>([])
+    const [failed, setFailed] = useState<string[]>([])
+    const [rejected, setRejected] = useState<string[]>([])
+    const [candidates, setCandidates] = useState<{ [string: string]: number }>({})
+
+    if (!client) {
+        throw new Error('useEmbeds must be used within an WeavyProvider');
+    }
+
+    const arrayEquals = (a: string[], b: string[]) =>
+        a.length === b.length &&
+        a.every((v, i) => v === b[i]);
+
+    const fetchEmbed = async (url: string) => {
+        const data = new FormData();
+        data.append("url", url);
+
+        try {
+
+            const response = await client.post("/api/embeds",
+                "POST",
+                JSON.stringify({ url: url }));
+
+            if (!response.ok) {
+                throw new Error();
+            }
+
+            var json = await response.json();
+
+            setEmbeds((prev) => [...prev, url]);
+            setCandidates((prev) => {
+                delete prev[url];
+                return prev;
+            });            
+            callback(json);
+        } catch (error) {
+            // error, add to failed so that we don't fetch again
+            setFailed((prev) => [...prev, url]);
+            setCandidates((prev) => {
+                delete prev[url];
+                return prev;
+            });
+
+        }
+    }
+
+    const initEmbeds = (urls: string[]) =>{
+        setEmbeds(urls);
+    }
+   
+    const clearEmbeds = () => {
+        setLatest([]);
+        setEmbeds([]);
+        setFailed([]);
+        setRejected([]);
+        setCandidates({});
+    }
+
+    const getEmbeds = async (content: string) => {
+
+        let matches = content.match(regexp);
+
+        if (matches !== null) {
+            matches = matches.map(url => {
+                if (url.startsWith("//")) {
+                    return "http:" + url;
+                } else if (!url.startsWith("http://") && !url.startsWith("https://")) {
+                    return "http://" + url;
+                } else {
+                    return url;
+                }
+            });
+        }
+
+        if (matches === null || matches.length === 0) { // no matches     
+            //console.log(latest, embeds, failed, candidates, rejected)
+        } else if (matches.length !== latest.length || !arrayEquals(matches, latest)) { // matches has changed{
+            // keep matches for comparing next time the doc is updated
+            setLatest(matches);
+
+            matches.forEach((match: string) => {                
+                // add match if not already an embed, not failed or rejected before and not already a candidate 
+                if (!embeds.includes(match) && !failed.includes(match) && !rejected.includes(match) && typeof (candidates[match]) === "undefined") {
+                    setCandidates((prev) => {
+                        prev[match] = setTimeout(() => { fetchEmbed(match); }, 500);
+                        return prev;
+                    });
+                }
+            });
+
+            // remove from rejected
+            setRejected((prev) => prev.filter(rejected => latest.includes(rejected)))
+
+            // remove candidates
+            for (let candidate in candidates) {
+                if (!latest.includes(candidate)) {
+                    clearTimeout(candidates[candidate]);
+                    //delete candidates[candidate];
+                    setCandidates((prev) => {
+                        delete prev[candidate];
+                        return prev;
+                    });
+                }
+            }
+        }
+    };
+
+
+    return { getEmbeds, initEmbeds, clearEmbeds };
+}

package/src/hooks/useEvents.ts

@@ -36,7 +36,9 @@ export default function useEvents() {
     }
 
     const off = (event: string, cb: Function) => {
-        callbacks[event] = callbacks[event].filter((i: any) => i !== cb);
+        if (callbacks[event]) {
+            callbacks[event] = callbacks[event].filter((i: any) => i !== cb);
+        }
     }
 
     return { dispatch, on, off, events };

package/src/hooks/useFileList.ts

@@ -0,0 +1,84 @@
+import { useContext, useEffect } from "react";
+import { Mutation, QueryFunctionContext, QueryKey, useInfiniteQuery, UseInfiniteQueryOptions, useQuery, useQueryClient } from "react-query";
+import { WeavyContext } from "../contexts/WeavyContext";
+import { addToQueryData, findAnyExistingItem, updateQueryData } from "../utils/cacheUtils";
+import { FileMutation } from "./useMutateFile";
+
+/// GET all posts in an app
+export default function useFileList(appId: number | null, options: any = {}) {
+    const PAGE_SIZE = 25;
+    const { client } = useContext(WeavyContext);
+
+    if (!client) {
+        throw new Error('useFileList must be used within an WeavyProvider');
+    }
+    
+    const queryClient = useQueryClient();
+
+    const filesKey = ['files', appId];
+
+    useEffect(() =>  {
+        // Refetch data when meta changes
+        queryClient.removeQueries({
+            queryKey: filesKey,
+            exact: true,
+            predicate: (query) => {
+                let mismatch = JSON.stringify(query.meta) !== JSON.stringify(options.meta);
+                if (mismatch) {
+                    //console.log("file query mismatch, removing query")
+                }
+                return mismatch;
+            }
+          })
+    }, [options]);
+
+    const updateDataWithMutations = (data: any) => {
+        const mutatingFiles = queryClient.getMutationCache()
+        .findAll({mutationKey: filesKey, predicate: (mutation: Mutation) => !!(<unknown>mutation as FileMutation).state.context?.file})
+        .map((mutation: Mutation) => (<unknown>mutation as FileMutation).state.context!.file);
+        
+        const meta = queryClient.getQueryCache().find<FilesResult>(filesKey)?.meta;
+        const order = meta?.order as FileOrder;
+        
+        mutatingFiles.forEach((file) => {
+            //if (meta?.trashed === file.is_trashed) {
+                if (file.id < 1 && file.status !== "ok" && file.status !== "error") {
+                    let existingFile = findAnyExistingItem<FileType>(data, "name", file.name, true);
+                    if (existingFile) {
+                        file.id = existingFile.id;
+                    }
+                    data = addToQueryData(data, file, order);
+                } else {
+                    data = updateQueryData(data, file.id, (cacheFile: FileType) => { Object.assign(cacheFile, file)});
+                }
+            //}
+        });
+        return data;
+    };
+
+    const getFiles = async (opt: QueryFunctionContext) => {
+        let skip = opt.pageParam || 0;
+        let order: FileOrder | undefined = opt.meta && opt.meta.order as FileOrder;
+        let trashed: boolean = !!opt.meta?.trashed;
+        let orderParam = order ? order.by + (order.descending ? "+desc" : "") : "";
+        let url = "/api/apps/" + appId + "/files?skip=" + skip + "&top=" + PAGE_SIZE + "&orderby=" + orderParam;
+        if (trashed) {
+            url += "&trashed=null";
+        }
+
+        const response = await client.get(url);
+        return await response.json();        
+    };
+    var opts: Omit<UseInfiniteQueryOptions<FilesResult, unknown, FilesResult, FilesResult, QueryKey>, "queryKey" | "queryFn"> | undefined = {
+        ...options, 
+        getNextPageParam: (lastPage:any, pages:any) => { 
+            if (lastPage?.end < lastPage?.count)  {                
+                return pages.length * PAGE_SIZE;
+            }
+        },
+        
+        select: updateDataWithMutations
+    };
+        
+    return useInfiniteQuery<FilesResult>(['files', appId], getFiles, opts)
+}

package/src/hooks/useFileUploader.ts

@@ -2,6 +2,43 @@ import { useContext } from "react";
 import { useMutation } from "react-query";
 import { WeavyContext } from "../contexts/WeavyContext";
 
+export type UploadFileProps = {        
+    file: File,
+    onProgress?: (variables: UploadProgressProps) => void
+}
+
+export type UploadProgressProps = { 
+    progress: number 
+}
+
+export function useUploadFile() {
+    const { client } = useContext(WeavyContext);
+    
+    if (!client) {
+        throw new Error('useMutateFile must be used within an WeavyProvider');
+    }
+
+    return async (file: File, onProgress?: (variables: UploadProgressProps) => void) => {
+        const formData = new FormData();
+        formData.append('blob', file);
+
+        const response = await client.upload("/api/blobs", "POST", formData, "", 
+            (progress) => {        
+                if (onProgress) {
+                    onProgress({ progress: progress})
+                }
+            });
+
+        if (!response.ok) {
+            throw <ServerErrorResponse> await response.json();
+        }
+        const blob: BlobType = await response.json();
+        return blob;            
+    };
+}
+
+
+
 /// POST to upload a a file
 export default function useFileUploader(callback: Function) {
 
@@ -23,7 +60,7 @@ export default function useFileUploader(callback: Function) {
                 formData,
                 "");
 
-            var uploaded = await response.json();
+            var uploaded = await response.json();            
             callback(uploaded);
         },
         {

package/src/hooks/useFileVersions.ts

@@ -0,0 +1,20 @@
+import { useContext } from "react";
+import { QueryKey, useQuery } from "react-query";
+import { WeavyContext } from "../contexts/WeavyContext";
+
+/// GET versions of a file
+export default function useFileVersions(filesKey: QueryKey, fileId: number, options: any) {
+    const { client } = useContext(WeavyContext);
+
+    if (!client) {
+        throw new Error('useReactionList must be used within an WeavyProvider');
+    }
+
+    const getVersions = async () => {
+        const response = await client.get(`/api/files/${fileId}/versions`);
+        const data = await response.json();
+        return data;
+    };
+
+    return useQuery<FileType[]>([...filesKey, fileId, "versions"], getVersions, options);
+}

package/src/hooks/useInfiniteScroll.ts

@@ -0,0 +1,45 @@
+import { useState, useLayoutEffect, useRef } from "react";
+import { UseInfiniteQueryResult } from "react-query/types/react/types";
+import { createScroller, createReverseScroller } from "../utils/infinite-scroll";
+
+export default function useInfinteScroll(infiniteQuery: UseInfiniteQueryResult, deps: React.DependencyList = [], reverse: boolean = false) {
+    const loadMoreRef = useRef<any>();
+    const [resolveScrollerFetch, setResolveScrollerFetch] = useState<Function | undefined>()
+    
+    useLayoutEffect(() => {
+        if(!infiniteQuery.isLoading){
+            var scroller: IntersectionObserver | undefined;
+
+            requestAnimationFrame(() => {
+                scroller = createScroller(loadMoreRef.current, () => {
+                    if (infiniteQuery.hasNextPage || infiniteQuery.isFetching) {
+                        //console.log("infinite scroll fetch"); 
+
+                        return infiniteQuery.fetchNextPage({ cancelRefetch: false }).then(() => {
+                            // Wait for effects and trigger render before resolving
+                            if (reverse) {
+                                return new Promise((resolve: Function) => { setResolveScrollerFetch(() => {
+                                    //console.log("infinite scroll fetch resolved"); 
+                                    resolve()
+                                })})
+                            }
+                        })
+                    }
+                }, reverse)
+            })
+
+            return () => {
+                //console.log("infinite scroll disconnect");
+                scroller?.disconnect();
+            }
+        }
+        
+       
+    }, [infiniteQuery.isLoading, infiniteQuery.dataUpdatedAt, ...deps]);
+
+    return loadMoreRef;
+}
+
+export function useReverseInfiniteScroll(infiniteQuery: UseInfiniteQueryResult, deps: React.DependencyList = []) { 
+    return useInfinteScroll(infiniteQuery, deps, true);
+}

package/src/hooks/useIsFirstRender.ts

@@ -0,0 +1,15 @@
+import { useRef } from 'react'
+
+function useIsFirstRender(): boolean {
+  const isFirst = useRef(true)
+
+  if (isFirst.current) {
+    isFirst.current = false
+
+    return true
+  }
+
+  return isFirst.current
+}
+
+export default useIsFirstRender

package/src/hooks/useMembers.ts

@@ -10,12 +10,12 @@ export default function useMembers(id: number | null, options: any) {
         throw new Error('useMembers must be used within an WeavyProvider');
     }
 
-    const getConversationMembers = async () => {
-        const response = await client.get("/api/apps/" + id + "/members");
+    const getMembers = async () => {
+        const response = await client.get(`/api/apps/${id}/members?top=1000`);
         const data = await response.json();                
         return data;
     };
 
 
-    return useQuery<MembersResult>(["members", id], getConversationMembers, options);
+    return useQuery<MembersResult>(["members", id], getMembers, options);
 }

package/src/hooks/useMutateApps.ts

@@ -0,0 +1,48 @@
+import { useContext } from "react";
+import { QueryKey, useMutation, useQueryClient } from "react-query";
+import { WeavyContext } from "../contexts/WeavyContext";
+
+export function useMutateAppsSubscribe(appKey: QueryKey) {
+
+    const { client } = useContext(WeavyContext);
+    const queryClient = useQueryClient();
+
+    if (!client) {
+        throw new Error('useMutateAppsSubscribe must be used within an WeavyProvider');
+    }
+
+    type MutateProps = {
+        appId: number,
+        subscribe: boolean
+    }
+
+    const subscribeMutation = useMutation(async ({ appId, subscribe }: MutateProps) => {
+        if (appId >= 1) {
+            const response = await client.post(`/api/apps/${appId}/${subscribe ? "subscribe": "unsubscribe"}`, "POST", "");
+            if (!response.ok) {
+                throw await response.json();
+            }
+            return response.json();
+        } else {
+            throw new Error(`Could not subscribe to app ${appId}.`);
+        }
+    },{
+        onMutate: async (variables: MutateProps) => {
+            var previousSubscribe: boolean | undefined;
+            queryClient.setQueryData(appKey, (filesApp: any) => {
+                previousSubscribe = filesApp.is_subscribed; 
+                return Object.assign(filesApp, { is_subscribed: variables.subscribe })
+            })
+            return { previousSubscribe: previousSubscribe, subscribe: variables.subscribe }
+        },
+        onSuccess: (data: AppType, variables: MutateProps, context: any) => {
+            queryClient.setQueryData(appKey, (app: any) => Object.assign(app, data), { updatedAt: Date.now() })
+            queryClient.invalidateQueries({ queryKey: appKey, exact: true });
+        },
+        onError(error: any, variables: MutateProps, context: any) {
+            queryClient.setQueryData(appKey, (app: any) => Object.assign(app, { is_subscribed: context.previousSubscribe }))
+        },
+    });
+
+    return subscribeMutation;
+}

package/src/hooks/useMutateComment.ts

@@ -0,0 +1,60 @@
+import { useContext } from "react";
+import { useMutation, useQueryClient } from "react-query";
+import { WeavyContext } from "../contexts/WeavyContext";
+import { addCacheItem } from "../utils/cacheUtils";
+
+/// POST to add a new comment to a parent entity
+export default function useMutateComment() {
+
+    const { client } = useContext(WeavyContext);
+    const queryClient = useQueryClient();
+
+    if (!client) {
+        throw new Error('useMutateComment must be used within an WeavyProvider');
+    }
+
+
+    type MutateProps = {        
+        parentId: number | null,
+        type: "posts" | "files" | "apps",
+        text: string,        
+        blobs: BlobType[],
+        meeting: number | null,
+        embed: number | null
+    }
+
+    const mutateComment = async ({ parentId, type, text, blobs, meeting, embed }: MutateProps) => {
+
+        const response = await client.post(`/api/${type}/${parentId}/comments`,
+            "POST",
+            JSON.stringify({
+                text: text,
+                blobs: blobs.map((b: BlobType) => { return b.id }),
+                meeting_id: meeting,
+                embed_id: embed
+            }));
+        return response.json();
+    };
+
+    return useMutation(mutateComment, {
+        onSuccess: (data: MessageType, variables: any, context: any) => {
+            addCacheItem(queryClient, ['comments', variables.parentId], data, context.tempId);           
+        },
+        onMutate: async (variables: any) => {
+            await queryClient.cancelQueries(['comments', variables.parentId]);
+            
+            const tempId = Math.random();
+            const tempData = {
+                id: tempId,
+                text: variables.text,                                        
+                temp: true,
+                created_by: {display_name: variables.userName },
+                created_at: new Date().toUTCString()                    
+            };
+
+            addCacheItem(queryClient, ['comments', variables.parentId], tempData);           
+            
+            return { tempId }
+        }
+    });
+}

package/src/hooks/useMutateConversationName.ts

@@ -15,7 +15,7 @@ export default function useMutateConversationName() {
 
     type MutateProps = {
         id: number | null,
-        name: string
+        name: string | null
     }
 
     const mutateConversationName = async ({ id, name }: MutateProps) => {

package/src/hooks/useMutateDeleteReaction.ts

@@ -1,13 +1,15 @@
 import { useContext } from "react";
-import { useMutation } from "react-query";
+import { useMutation, useQueryClient } from "react-query";
 import { UserContext } from "../contexts/UserContext";
 import { WeavyContext } from "../contexts/WeavyContext";
+import { updateCacheItem } from "../utils/cacheUtils";
 
 /// DELETE to remove a reaction from a message
 export default function useMutateDeleteReaction() {
 
     const { client } = useContext(WeavyContext);
     const { user } = useContext(UserContext);
+    const queryClient = useQueryClient();
 
     if (!client) {
         throw new Error('useMutateDeleteReaction must be used within an WeavyProvider');
@@ -16,18 +18,29 @@ export default function useMutateDeleteReaction() {
 
     type MutateProps = {
         id: number | null,
+        parentId: number | null,
+        type: "messages" | "posts" | "comments",
         reaction: string
     }
 
-    const mutateDeleteReaction = async ({ id, reaction }: MutateProps) => {
+    const mutateDeleteReaction = async ({ id, type }: MutateProps) => {
 
         // remove the existing reaction
-        const response = await client.post("/api/messages/" + id + "/reactions/",
+        const response = await client.post(`/api/${type}/${id}/reactions`,
         "DELETE",
         "");
 
         return response;
     };
 
-    return useMutation(mutateDeleteReaction);
+    return useMutation(mutateDeleteReaction, {
+        onSuccess: (data: any, variables: any, context: any) => {
+            
+        },
+        onMutate: async (variables: any) => {
+            updateCacheItem(queryClient, [variables.type, variables.parentId], variables.id, (item: MessageType) => {
+                item.reactions = [...item.reactions.filter((r: ReactableType) => r.created_by_id !== user.id )];
+            });
+        }
+    });    
 }

package/src/hooks/useMutateEditComment.ts

@@ -0,0 +1,63 @@
+import { useContext } from "react";
+import { useMutation, useQueryClient } from "react-query";
+import { WeavyContext } from "../contexts/WeavyContext";
+
+/// PATCH to update a Comment
+export default function useMutateEditPost() {
+
+    const { client } = useContext(WeavyContext);
+    const queryClient = useQueryClient();
+
+    if (!client) {
+        throw new Error('useMutateEditComment must be used within an WeavyProvider');
+    }
+
+    type MutateProps = {
+        id: number | null,
+        appId: number | null,
+        parentId: number | null,
+        text: string,
+        blobs: BlobType[],
+        attachments: FileType[],
+        meeting: number | null,
+        embed: number | null
+    }
+
+    const mutatePost = async ({ id, text, blobs, attachments, meeting, embed }: MutateProps) => {
+
+        const response = await client.post("/api/comments/" + id,
+            "PATCH",
+            JSON.stringify({
+                text: text,
+                blobs: blobs.map((b: BlobType) => { return b.id }),
+                attachments: attachments.map((a: FileType) => { return a.id }),
+                meeting_id: meeting,
+                embed_id: embed
+            }));
+        return response.json();
+    };
+
+    return useMutation(mutatePost, {
+        onSuccess: (data: MessageType, variables: any, context: any) => {
+
+            const previousData = queryClient.getQueryData<any>(['comments', variables.parentId]);
+            
+            if (previousData && previousData.pages) {
+                // update cache
+                const newPagesArray = previousData.pages.map((page: any, i: number) => {
+                    // update comment
+                    page.data = [...page.data.map((message: MessageType) => message.id === variables.id ? data : message)]                    
+                    return page;
+                }) ?? [];
+
+                queryClient.setQueryData(["comments", variables.parentId], (data: any) => ({
+                    pages: newPagesArray,
+                    pageParams: data.pageParams,
+                }));
+            }
+        },
+        onMutate: async (variables: any) => {
+         
+        }
+    });
+}