@weavy/uikit-react 14.0.4 → 15.0.1

package/src/hooks/useMutateFileVersion.ts

@@ -0,0 +1,85 @@
+import { useContext } from "react";
+import { MutationKey, useMutation, useQueryClient } from "react-query";
+import { WeavyContext } from "../contexts/WeavyContext";
+import { removeCacheItem, updateCacheItem } from "../utils/cacheUtils";
+
+export function useMutateFileVersionRestore(filesKey: MutationKey) {
+
+    const { client } = useContext(WeavyContext);
+    const queryClient = useQueryClient();
+
+    if (!client) {
+        throw new Error('useMutateFileVersion must be used within an WeavyProvider');
+    }
+
+    type MutateProps = {
+        versionFile: FileType
+    }
+
+    const restoreMutation = useMutation(async ({ versionFile }: MutateProps) => {
+        if (versionFile.id >= 1 && versionFile.version) {
+            const response = await client.post(`/api/files/${versionFile.id}/versions/${versionFile.version}/restore`, "POST", "");
+            return response.json();
+        } else {
+            throw new Error(`Could not restore ${versionFile.name} to version ${versionFile.version}.`);
+        }
+    },{
+        onMutate: async (variables: MutateProps) => {
+            var previousFile:FileType | undefined;
+            updateCacheItem(queryClient, filesKey, variables.versionFile.id, (existingFile: FileType) => {previousFile = existingFile; return Object.assign(existingFile, variables.versionFile, { status: "pending" })});
+            updateCacheItem(queryClient, [...filesKey, variables.versionFile.id, "versions"], variables.versionFile.id, (existingFile: FileType) => {previousFile = existingFile; return Object.assign(existingFile, { status: "pending" })});
+            return {versionFile: variables.versionFile, previousFile: previousFile }
+        },
+        onSuccess: (data: MessageType, variables: MutateProps, context: any) => {
+            updateCacheItem(queryClient, filesKey, variables.versionFile.id, (existingFile: FileType) => Object.assign(existingFile, data, { status: "ok" }));
+            queryClient.removeQueries([...filesKey, variables.versionFile.id, "versions"]);
+        },
+        onError(error: any, variables: MutateProps, context: any) {
+            updateCacheItem(queryClient, filesKey, variables.versionFile.id, (existingFile: FileType) => Object.assign(existingFile, context.previousFile, { status: "error" }));
+            updateCacheItem(queryClient, [...filesKey, variables.versionFile.id, "versions"], variables.versionFile.id, (existingFile: FileType) => Object.assign(existingFile, { status: "error" }));
+        },
+    });
+
+    return restoreMutation;
+}
+
+export function useMutateFileVersionDelete(filesKey: MutationKey) {
+
+    const { client } = useContext(WeavyContext);
+    const queryClient = useQueryClient();
+
+    if (!client) {
+        throw new Error('useMutateFileVersionRemove must be used within an WeavyProvider');
+    }
+
+    type MutateProps = {
+        versionFile: FileType
+    }
+
+    const deleteMutation = useMutation(async ({ versionFile }: MutateProps) => {
+        if (versionFile.id >= 1 && versionFile.version) {
+            const response = await client.post(`/api/files/${versionFile.id}/versions/${versionFile.version}`, "DELETE", "");
+            if (!response.ok) {
+                throw <ServerErrorResponse> await response.json();
+            }
+        } else {
+            throw <ServerErrorResponse> { status: 400, title: `Could not remove ${versionFile.name} version ${versionFile.version}.`};
+        }
+    },{
+        onMutate: async (variables: MutateProps) => {
+            const versionPredicate = (item: any) => item.id === variables.versionFile.id && item.version === variables.versionFile.version;
+            updateCacheItem(queryClient, [...filesKey, variables.versionFile.id, "versions"], versionPredicate, (existingFile: FileType) => Object.assign(existingFile, { status: "pending" }));
+        },
+        onSuccess: (data: any, variables: MutateProps, context: any) => {
+            const versionPredicate = (item: any) => item.id === variables.versionFile.id && item.version === variables.versionFile.version;
+            removeCacheItem(queryClient, [...filesKey, variables.versionFile.id, "versions"], versionPredicate);
+        },
+        onError(error: any, variables: MutateProps, context: any) {
+            // Show in error list instead?
+            const versionPredicate = (item: any) => item.id === variables.versionFile.id && item.version === variables.versionFile.version;
+            updateCacheItem(queryClient, [...filesKey, variables.versionFile.id, "versions"], versionPredicate, (existingFile: FileType) => Object.assign(existingFile, { status: undefined }));
+        },
+    });
+
+    return deleteMutation;
+}

package/src/hooks/useMutateFiles.ts

@@ -0,0 +1,23 @@
+import { useContext } from "react";
+import { WeavyContext } from "../contexts/WeavyContext";
+import { CreateFileProps } from "./useMutateFile";
+
+export const useMutateFilesCreate = (appId: number) => {
+    const { client } = useContext(WeavyContext);
+    
+    if (!client) {
+        throw new Error('useMutateFile must be used within an WeavyProvider');
+    }
+
+    return async ({ blob, replace = false }: CreateFileProps) => {
+        const response = await client.post("/api/apps/" + appId + "/files",
+            "POST",
+            JSON.stringify({ blob_id: blob.id, replace: replace }));
+
+        if (!response.ok) {
+            throw <ServerErrorResponse> await response.json();
+        }
+        
+        return <FileType> await response.json();
+    }
+}

package/src/hooks/useMutateLeaveConversation.ts

@@ -0,0 +1,38 @@
+import { useContext } from "react";
+import { useMutation, useQueryClient } from "react-query";
+import { MessengerContext } from "../contexts/MessengerContext";
+import { WeavyContext } from "../contexts/WeavyContext";
+
+/// DELETE leave conversation
+export default function useMutateLeaveConversation() {
+
+    const { client } = useContext(WeavyContext);
+    const { setSelectedConversationId } = useContext(MessengerContext);
+    const queryClient = useQueryClient();
+
+    if (!client) {
+        throw new Error('useMutateLeaveConversation must be used within an WeavyProvider');
+    }
+
+
+    type MutateProps = {
+        id: number | null,
+        members: number[]
+    }
+
+    const mutateLeave = async ({ id, members }: MutateProps) => {
+
+        const response = await client.post("/api/apps/" + id + "/members/" + members.join(","),
+            "DELETE",
+            JSON.stringify(members));
+
+        return response;
+    };
+
+    return useMutation(mutateLeave, {
+        onSuccess: () => {
+            queryClient.invalidateQueries("conversations");
+            setSelectedConversationId(null);
+        }
+    });
+}

package/src/hooks/useMutateMessage.ts

@@ -1,6 +1,7 @@
 import { useContext } from "react";
 import { useMutation, useQueryClient } from "react-query";
 import { WeavyContext } from "../contexts/WeavyContext";
+import { addCacheItem } from "../utils/cacheUtils";
 
 /// PSOT to add a new message to an app
 export default function useMutateMessage() {
@@ -12,23 +13,21 @@ export default function useMutateMessage() {
         throw new Error('useMutateMessage must be used within an WeavyProvider');
     }
 
-
     type MutateProps = {
         id: number | null,
         text: string,
         userId: number,
-        attachments: [],
-        meetings: MeetingType[]
+        blobs: BlobType[],
+        meeting: number | null,
     }
 
-    const mutateMessage = async ({ id, text, userId, attachments, meetings }: MutateProps) => {
-
+    const mutateMessage = async ({ id, text, blobs, meeting }: MutateProps) => {
         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
+                blobs: blobs.map((b: BlobType) => { return b.id }),
+                meeting_id: meeting,
             }));
         return response.json();
     };
@@ -36,27 +35,7 @@ export default function useMutateMessage() {
     return useMutation(mutateMessage, {
         onSuccess: (data: MessageType, variables: any, context: any) => {
 
-            const previousData = queryClient.getQueryData<any>(['messages', variables.id]);
-            if (previousData && previousData.pages) {
-                // update cache
-                const newPagesArray = previousData.pages.map((page: any, i: number) => {
-                    // remove temp message                    
-                    if (i === 0) {
-                        page.data = [
-                            ...page.data.filter((message: MessageType) => message.id !== context.tempId),
-                            data
-                        ]
-                    }
-
-                    return page;
-
-                }) ?? [];
-
-                queryClient.setQueryData(["messages", variables.id], (data: any) => ({
-                    pages: newPagesArray,
-                    pageParams: data.pageParams,
-                }));
-            }
+            addCacheItem(queryClient, ['messages', variables.id], data, context.tempId);
 
             // refetch conversations list
             queryClient.invalidateQueries("conversations");
@@ -65,42 +44,24 @@ export default function useMutateMessage() {
         onMutate: async (variables: any) => {
             await queryClient.cancelQueries(['messages', variables.id]);
 
-            const previousData = queryClient.getQueryData<any>(['messages', variables.id]);
             const tempId = Math.random();
-
-            if (previousData && previousData.pages.length > 0) {
-
-                var lastPage = previousData.pages[0]; // in reverse order
-
-                // add temp message 
-                var data = lastPage.data || [];
-                let pageMessages = [...data, {
-                    id: tempId,
-                    text: variables.text,
-                    html: variables.text,
-                    display_name: "",
-                    temp: true,
-                    parent_id: null,
-                    created_by: { id: variables.userId },
-                    created_at: new Date().toUTCString(),
-                    attachments: [],
-                    reactions: [],
-                    reactions_count: 0
-                }];
-                lastPage.data = pageMessages;
-
-                // update cache
-                queryClient.setQueryData(["messages", variables.id], (data: any) => {
-                    let updatedPages = [lastPage];
-                    if (data?.pages.length > 1) {
-                        updatedPages = [lastPage, ...data?.pages.slice(1)];
-                    }
-                    return {
-                        pages: updatedPages,
-                        pageParams: data?.pageParams,
-                    }
-                });
+            const tempData: MessageType = {
+                id: tempId,
+                app_id: -1,
+                attachment_ids: [],
+                is_subscribed: true,
+                is_trashed: false,                
+                text: variables.text,
+                html: variables.text,                
+                plain: variables.text,                
+                temp: true,  
+                created_by_id: variables.userId,              
+                created_by: { id: variables.userId, avatar_url: "", display_name: "", presence: "", name: "" },
+                created_at: new Date().toUTCString(),
+                attachments: [],
+                reactions: []                                
             }
+            addCacheItem(queryClient, ['messages', variables.id], tempData);
 
             return { tempId }
         }

package/src/hooks/useMutatePost.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";
+
+/// PSOT to add a new post to a Posts app
+export default function useMutatePost() {
+
+    const { client } = useContext(WeavyContext);
+    const queryClient = useQueryClient();
+
+    if (!client) {
+        throw new Error('useMutatePost must be used within an WeavyProvider');
+    }
+
+
+    type MutateProps = {        
+        appId: number | null,
+        text: string,        
+        blobs: BlobType[],
+        meeting: number | null,
+        embed: number | null,
+        options: PollOptionType[]
+    }
+
+    const mutatePost = async ({ appId, text, blobs, meeting, embed, options }: MutateProps) => {
+        
+        const response = await client.post("/api/apps/" + appId + "/posts",
+            "POST",
+            JSON.stringify({
+                text: text,
+                blobs: blobs.map((b: BlobType) => { return b.id }),
+                meeting_id: meeting,
+                embed_id: embed,
+                options: options.filter((o: PollOptionType) => o.text.trim() !== "" ).map((o: PollOptionType) => { return {text: o.text}; })
+            }));
+        return response.json();
+    };
+
+    return useMutation(mutatePost, {
+        onSuccess: (data: MessageType, variables: any, context: any) => {            
+            addCacheItem(queryClient, ['posts', variables.appId], data, context.tempId, { descending: true });
+        },
+        onMutate: async (variables: any) => {
+            await queryClient.cancelQueries(['posts', variables.appId]);
+            
+            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, ['posts', variables.appId], tempData, undefined, { descending: true });
+            
+            return { tempId }
+        }
+    });
+}

package/src/hooks/useMutateReaction.ts

@@ -1,32 +1,47 @@
 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";
 
 /// POST to add a reaction to a message
 export default function useMutateReaction() {
 
     const { client } = useContext(WeavyContext);
     const { user } = useContext(UserContext);
+    const queryClient = useQueryClient();
 
     if (!client) {
         throw new Error('useMutateReaction must be used within an WeavyProvider');
     }
 
-
     type MutateProps = {
+        parentId: number | null,
         id: number | null,
+        type: "messages" | "posts" | "comments",
         reaction: string
     }
 
-    const mutateReaction = async ({ id, reaction }: MutateProps) => {
-
-        const response = await client.post("/api/messages/" + id + "/reactions/",
+    const mutateReaction = async ({ id, type, reaction }: MutateProps) => {
+        
+        const response = await client.post(`/api/${type}/${id}/reactions`,
             "POST",
             JSON.stringify({ content: reaction }));
 
         return response;
     };
 
-    return useMutation(mutateReaction);
+    return useMutation(mutateReaction, {
+        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 || [];                
+                item.reactions = [...item.reactions, { content: variables.reaction, created_by_id: user.id }];
+            });
+        }
+    });
+
+
 }

package/src/hooks/useMutateRead.ts

@@ -1,6 +1,7 @@
 import { useContext } from "react";
 import { useMutation, useQueryClient } from "react-query";
 import { WeavyContext } from "../contexts/WeavyContext";
+import { updateCacheItem } from "../utils/cacheUtils";
 
 /// PUT or DELETE to update read state on a conversation
 export default function useMutateRead() {
@@ -14,13 +15,13 @@ export default function useMutateRead() {
 
 
     type MutateProps = {
-        id: number | null,
+        id: number | null,        
         read: boolean,
         messageId: number | null
     }
 
     const mutateRead = async ({ id, read, messageId }: MutateProps) => {
-        const url = read ? `/api/conversations/${id}/read?messageId=${messageId}`: `/api/conversations/${id}/read`;
+        const url = read ? `/api/conversations/${id}/mark?messageId=${messageId}`: `/api/conversations/${id}/mark`;
         const response = await client.post(url, !read ? "DELETE": "PUT", "")
         return response.json();
     };
@@ -28,6 +29,11 @@ export default function useMutateRead() {
     return useMutation(mutateRead, {
         onSuccess: () => {
             queryClient.invalidateQueries("conversations");
+        },
+        onMutate: async (variables: any) => {            
+            updateCacheItem(queryClient, 'conversations', variables.id, (item: ConversationType) => {                
+                item.is_unread = !variables.read;
+            });
         }
     });
 }

package/src/hooks/useMutateRemoveMembers.ts

@@ -7,9 +7,7 @@ import { WeavyContext } from "../contexts/WeavyContext";
 export default function useMutateRemoveMembers() {
 
     const { client } = useContext(WeavyContext);
-    const { setSelectedConversationId } = useContext(MessengerContext);
-    const queryClient = useQueryClient();
-
+    
     if (!client) {
         throw new Error('useMutateRemoveMembers must be used within an WeavyProvider');
     }
@@ -29,10 +27,5 @@ export default function useMutateRemoveMembers() {
         return response;
     };
 
-    return useMutation(mutateRemove, {
-        onSuccess: () => {
-            queryClient.invalidateQueries("conversations");
-            setSelectedConversationId(null);
-        }
-    });
+    return useMutation(mutateRemove);
 }

package/src/hooks/useMutateReplaceReaction.ts

@@ -0,0 +1,59 @@
+import { useContext } from "react";
+import { useMutation, useQueryClient } from "react-query";
+import { UserContext } from "../contexts/UserContext";
+import { WeavyContext } from "../contexts/WeavyContext";
+import { updateCacheItem } from "../utils/cacheUtils";
+
+/// Replaces a reaction from on message
+export default function useMutateReplaceReaction() {
+
+    const { client } = useContext(WeavyContext);
+    const { user } = useContext(UserContext);
+    const queryClient = useQueryClient();
+
+    if (!client) {
+        throw new Error('useMutateReplaceReaction must be used within an WeavyProvider');
+    }
+
+
+    type MutateProps = {
+        id: number | null,
+        parentId: number | null,
+        type: "messages" | "posts" | "comments",
+        reaction: string
+    }
+
+    const mutateReplaceReaction = async ({ id, type, reaction }: MutateProps) => {
+
+        // remove the existing reaction
+        await client.post(`/api/${type}/${id}/reactions`,
+        "DELETE",
+        "");
+
+        // add the new reaction
+        const response = await client.post(`/api/${type}/${id}/reactions`,
+            "POST",
+            JSON.stringify({ content: reaction }));
+
+        return response;
+    };
+
+    return useMutation(mutateReplaceReaction, {
+        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.map((r: ReactableType) => {
+                    if(r.created_by_id !== user.id){
+                        return r;
+                    }
+                    // replace reaction
+                    r.content = variables.reaction;
+                    return r;
+                     
+                });
+            });
+        }
+    });    
+}

package/src/hooks/useMutateRestoreComment.ts

@@ -0,0 +1,37 @@
+import { useContext } from "react";
+import { useMutation, useQueryClient } from "react-query";
+import { WeavyContext } from "../contexts/WeavyContext";
+import { updateCacheItem } from "../utils/cacheUtils";
+
+/// POST to restore a Comment
+export default function useMutateRestoreComment() {
+
+    const { client } = useContext(WeavyContext);
+    const queryClient = useQueryClient();
+
+    if (!client) {
+        throw new Error('useMutateRestoreComment must be used within an WeavyProvider');
+    }
+
+    type MutateProps = {
+        id: number | null,
+        appId: number | null, 
+        parentId: number | null, 
+    }
+
+    const restoreComment = async ({ id }: MutateProps) => {
+        const response = await client.post(`/api/comments/${id}/restore`, "POST", "");        
+        return response.json();
+    };
+
+    return useMutation(restoreComment, {
+        onSuccess: (data: any, variables: any, context: any) => {
+            updateCacheItem(queryClient, ['comments', variables.parentId], variables.id, (item: MessageType) => {
+                item.is_trashed = data.is_trashed;
+            });
+        },
+        onMutate: async (variables: any) => {
+         
+        }
+    });
+}

package/src/hooks/useMutateRestorePost.ts

@@ -0,0 +1,36 @@
+import { useContext } from "react";
+import { useMutation, useQueryClient } from "react-query";
+import { WeavyContext } from "../contexts/WeavyContext";
+import { updateCacheItem } from "../utils/cacheUtils";
+
+/// POST to update a Post
+export default function useMutateRestorePost() {
+
+    const { client } = useContext(WeavyContext);
+    const queryClient = useQueryClient();
+
+    if (!client) {
+        throw new Error('useMutateRestorePost must be used within an WeavyProvider');
+    }
+
+    type MutateProps = {
+        id: number | null,
+        appId: number | null, 
+    }
+
+    const restorePost = async ({ id }: MutateProps) => {
+        const response =  await client.post(`/api/posts/${id}/restore`, "POST", "");        
+        return response.json();  
+    };
+
+    return useMutation(restorePost, {
+        onSuccess: (data: any, variables: any, context: any) => {
+            updateCacheItem(queryClient, ['posts', variables.appId], variables.id, (item: MessageType) => {
+                item.is_trashed = data.is_trashed;
+            });
+        },
+        onMutate: async (variables: any) => {
+         
+        }
+    });
+}

package/src/hooks/useMutateStarred.ts

@@ -0,0 +1,35 @@
+import { useContext } from "react";
+import { useMutation, useQueryClient } from "react-query";
+import { WeavyContext } from "../contexts/WeavyContext";
+
+/// PUT or DELETE to update starred state on a conversation
+export default function useMutateStarred() {
+
+    const { client } = useContext(WeavyContext);
+    const queryClient = useQueryClient();
+
+    if (!client) {
+        throw new Error('useMutateStarred must be used within an WeavyProvider');
+    }
+
+
+    type MutateProps = {
+        id: number | null,
+        star: boolean
+    }
+
+    const mutateStarred = async ({ id, star }: MutateProps) => {
+
+        const response = await client.post("/api/apps/" + id + "/stars",
+            !star ? "DELETE" : "POST",
+            "");
+
+        return response;
+    };
+
+    return useMutation(mutateStarred, {
+        onSuccess: () => {
+            queryClient.invalidateQueries("conversations");
+        }
+    });
+}

package/src/hooks/useMutateSubscribe.ts

@@ -0,0 +1,36 @@
+import { useContext } from "react";
+import { useMutation, useQueryClient } from "react-query";
+import { WeavyContext } from "../contexts/WeavyContext";
+import { updateCacheItem } from "../utils/cacheUtils";
+
+/// POST to subscribe
+export default function useMutateSubscribe() {
+
+    const { client } = useContext(WeavyContext);
+    const queryClient = useQueryClient();
+
+    if (!client) {
+        throw new Error('useMutateSubscribe must be used within an WeavyProvider');
+    }
+
+    type MutateProps = {
+        id: number | null,
+        appId: number | null, 
+    }
+
+    const subscribe = async ({ id }: MutateProps) => {
+        const response = await client.post(`/api/posts/${id}/subscribe`, "POST", "");        
+        return response.json();
+    };
+
+    return useMutation(subscribe, {
+        onSuccess: (data: any, variables: any, context: any) => {
+            updateCacheItem(queryClient, ['posts', variables.appId], variables.id, (item: MessageType) => {
+                item.is_subscribed = data.is_subscribed;
+            });
+        },
+        onMutate: async (variables: any) => {
+         
+        }
+    });
+}