@weavy/uikit-react 11.0.0

package/src/hooks/useFileUploader.ts

@@ -0,0 +1,35 @@
+import { useContext } from "react";
+import { useMutation } from "react-query";
+import { WeavyContext } from "../contexts/WeavyContext";
+
+/// POST to upload a a file
+export default function useFileUploader(callback: Function) {
+
+    const { client } = useContext(WeavyContext);
+
+    return useMutation(
+        async ({ request }: any) => {
+
+            const formData = new FormData();
+            formData.append('blob', request.file);
+
+            var response = await fetch(client.uri + "/api/blobs", {
+                method: 'POST',
+                body: formData,
+                headers: {
+                    "Authorization": "Bearer " + await client.tokenFactory()
+                }
+            });
+
+            var uploaded = await response.json();
+            callback(uploaded);
+        },
+        {
+            onError: (e: any) => {
+
+            },
+            onSuccess: (data: any, variables: any) => {                
+            },
+        }
+    );
+}

package/src/hooks/useMembers.ts

@@ -0,0 +1,27 @@
+import { useContext } from "react";
+import { useQuery } from "react-query";
+import { WeavyContext } from "../contexts/WeavyContext";
+
+/// GET all members in an app
+export default function useMembers(id: number | null, options: any) {
+    const { client } = useContext(WeavyContext);
+
+    if (!client) {
+        throw new Error('useMembers must be used within an WeavyProvider');
+    }
+
+    const getConversationMembers = async () => {
+
+        const response = await fetch(client.uri + "/api/apps/" + id + "/members", {
+            headers: {
+                "content-type": "application/json",
+                "Authorization": "Bearer " + await client.tokenFactory()
+            }
+        });
+        const data = await response.json();                
+        return data;
+    };
+
+
+    return useQuery<MembersResult>(["members", id], getConversationMembers, options);
+}

package/src/hooks/useMessages.ts

@@ -0,0 +1,42 @@
+import { useContext } from "react";
+import { useInfiniteQuery, useQuery } from "react-query";
+import { WeavyContext } from "../contexts/WeavyContext";
+
+/// GET all messages in an app
+export default function useMessages(id: number | null, options: any) {
+    const PAGE_SIZE = 25;
+    const { client } = useContext(WeavyContext);
+
+    if (!client) {
+        throw new Error('useMessages must be used within an WeavyProvider');
+    }
+
+    const getMessages = async (opt: any) => {
+        let skip = opt.pageParam || 0;
+
+        const response = await fetch(client.uri + "/api/apps/" + id + "/messages?orderby=createdat+desc&skip=" + skip + "&top=" + PAGE_SIZE, {
+            headers: {
+                "content-type": "application/json",
+                "Authorization": "Bearer " + await client.tokenFactory()
+            }
+        });
+        let result = await response.json();
+        result.data = result.data?.reverse() || [];
+        return result;
+    };
+    var opts = {
+        ...options, 
+        getNextPageParam: (lastPage:any, pages:any) => { 
+            if (lastPage?.end < lastPage?.count)  {                
+                return pages.length * PAGE_SIZE;
+            }
+        },
+        select: (data: any) => ({
+            // reverse scroll
+            pages: [...data.pages].reverse(),
+            pageParams: [...data.pageParams].reverse(),
+          }),
+    };
+        
+    return useInfiniteQuery<MessagesResult>(['messages', id], getMessages, opts)
+}

package/src/hooks/useMessenger.ts

@@ -0,0 +1,51 @@
+// import { useContext, useEffect, useState } from "react";
+// import { WeavyContext } from "../contexts/WeavyContext";
+
+
+// export const useMessenger = (id: number) => {
+//     //const { client, state, dispatch } = useContext<WeavyContextProps>(WeavyContext);
+//     const [loading, setLoading] = useState<boolean>(true);
+
+//     // if (!client) {
+//     //     throw new Error('useMessenger must be used within an WeavyProvider');
+//     // }
+
+
+//     useEffect(() => {
+//         let mocked = [
+//             { id: 11, title: "Chat 1", text: "Quisque cursus, metus vitae pharetra" },
+//             { id: 22, title: "Chat 2", text: "Quisque cursus, metus vitae pharetra" }
+//         ];
+
+//         setTimeout(() => {
+//             init(mocked);
+//             setLoading(false);
+//         }, 2000);
+
+
+//     }, [])
+
+//     const init = (data: Conversation[]) => {
+//         //dispatch({ app: "messenger", type: "init", payload: data })
+//     }
+
+//     const insert = ({ title, text }: InsertConversationProps) => {
+
+//         //dispatch({ app: "messenger", type: "insert", payload: { id: Math.random(), title, text } })
+//     }
+
+//     const select = (id: number) => {
+//         //dispatch({ app: "messenger", type: "select", payload: id })
+//     }
+
+
+//     return {
+//         //data: state.messenger.conversations,
+//         //selected: state.messenger.selected,
+//         loading,
+//         init,
+//         select,
+//         insert
+//     };
+
+// }

package/src/hooks/useMutateChat.ts

@@ -0,0 +1,44 @@
+import { useContext } from "react";
+import { useMutation, useQueryClient } from "react-query";
+import { WeavyContext } from "../contexts/WeavyContext";
+
+/// POST to create a new conversation
+export default function useMutateChat() {
+
+    const { client } = useContext(WeavyContext);
+    const queryClient = useQueryClient();
+
+    if (!client) {
+        throw new Error('useMutateChat must be used within an WeavyProvider');
+    }
+
+
+    type MutateProps = {
+        identifier: string,
+        members: number[]
+    }
+
+    // create new conversation
+    const mutateChat = async ({ identifier, members }: MutateProps) => {
+
+        const response = await fetch(client.uri + "/api/apps/", {
+            method: "POST",
+            body: JSON.stringify({ 
+                identifier: identifier,
+                members: members 
+            }),
+            headers: {
+                "content-type": "application/json",
+                "Authorization": "Bearer " + await client.tokenFactory()
+            }
+        });
+
+        return response.json();
+    };
+
+    return useMutation(mutateChat, {
+        onSuccess: () => {
+            //queryClient.invalidateQueries("conversations");            
+        }        
+    });
+}

package/src/hooks/useMutateConversation.ts

@@ -0,0 +1,40 @@
+import { useContext } from "react";
+import { useMutation, useQueryClient } from "react-query";
+import { WeavyContext } from "../contexts/WeavyContext";
+
+/// POST to create a new conversation
+export default function useMutateConversation() {
+
+    const { client } = useContext(WeavyContext);
+    const queryClient = useQueryClient();
+
+    if (!client) {
+        throw new Error('useMutateConversation must be used within an WeavyProvider');
+    }
+
+
+    type MutateProps = {
+        members: number[]
+    }
+
+    // create new conversation
+    const mutateConversation = async ({ members }: MutateProps) => {
+
+        const response = await fetch(client.uri + "/api/conversations/", {
+            method: "POST",
+            body: JSON.stringify({ members: members }),
+            headers: {
+                "content-type": "application/json",
+                "Authorization": "Bearer " + await client.tokenFactory()
+            }
+        });
+
+        return response.json();
+    };
+
+    return useMutation(mutateConversation, {
+        onSuccess: () => {
+            queryClient.invalidateQueries("conversations");            
+        }        
+    });
+}

package/src/hooks/useMutateConversationName.ts

@@ -0,0 +1,41 @@
+import { useContext } from "react";
+import { useMutation, useQueryClient } from "react-query";
+import { WeavyContext } from "../contexts/WeavyContext";
+
+/// PUT to update an app name
+export default function useMutateConversationName() {
+
+    const { client } = useContext(WeavyContext);
+    const queryClient = useQueryClient();
+
+    if (!client) {
+        throw new Error('useMutateConversationName must be used within an WeavyProvider');
+    }
+
+
+    type MutateProps = {
+        id: number | null, 
+        name: string
+    }
+
+    const mutateConversationName = async ({ id, name }: MutateProps) => {
+
+        const response = await fetch(client.uri + "/api/apps/" + id, {
+            method: "PATCH",
+            body: JSON.stringify({ name: name }),
+            headers: {
+                "content-type": "application/json",
+                "Authorization": "Bearer " + await client.tokenFactory()
+            }
+        });
+
+        return response.json();
+    };
+
+    return useMutation(mutateConversationName, {
+        onSuccess: (data: any, variables: any, context: any) => {
+            queryClient.invalidateQueries("conversations");            
+            queryClient.invalidateQueries(["conversation", variables.id]);     
+        }        
+    });
+}

package/src/hooks/useMutateDeleteReaction.ts

@@ -0,0 +1,38 @@
+import { useContext } from "react";
+import { useMutation } from "react-query";
+import { UserContext } from "../contexts/UserContext";
+import { WeavyContext } from "../contexts/WeavyContext";
+
+/// DELETE to remove a reaction from a message
+export default function useMutateDeleteReaction() {
+
+    const { client } = useContext(WeavyContext);
+    const { user } = useContext(UserContext);
+
+    if (!client) {
+        throw new Error('useMutateDeleteReaction must be used within an WeavyProvider');
+    }
+
+
+    type MutateProps = {
+        id: number | null,
+        reaction: string
+    }
+
+    const mutateDeleteReaction = async ({ id, reaction }: MutateProps) => {
+
+        // remove the existing reaction
+        const response = await fetch(client.uri + "/api/messages/" + id + "/reactions/", {
+            method: "DELETE",
+            headers: {
+                "content-type": "application/json",
+                "Authorization": "Bearer " + await client.tokenFactory()
+            }
+        });
+
+
+        return response;
+    };
+
+    return useMutation(mutateDeleteReaction);
+}

package/src/hooks/useMutateExternalBlobs.ts

@@ -0,0 +1,39 @@
+import { useContext } from "react";
+import { useMutation, useQueryClient } from "react-query";
+import { WeavyContext } from "../contexts/WeavyContext";
+
+/// POST to upload an external blob
+export default function useMutateExternalBlobs() {
+
+    const { client } = useContext(WeavyContext);
+    const queryClient = useQueryClient();
+
+    if (!client) {
+        throw new Error('useMutateExternalBlobs must be used within an WeavyProvider');
+    }
+
+
+    type MutateProps = {
+        blobs: []         
+    }
+
+    const mutateExternalBlobs = async ({ blobs }: MutateProps) => {
+
+        const response = await fetch(client.uri + "/api/blobs/external", {
+            method: "POST",
+            body: JSON.stringify(blobs),
+            headers: {
+                "content-type": "application/json",
+                "Authorization": "Bearer " + await client.tokenFactory()
+            }
+        });
+
+        return response.json();
+    };
+
+    return useMutation(mutateExternalBlobs, {
+        onSuccess: (variables: any) => {
+            
+        }        
+    });
+}

package/src/hooks/useMutateMeeting.ts

@@ -0,0 +1,39 @@
+import { useContext } from "react";
+import { useMutation, useQueryClient } from "react-query";
+import { WeavyContext } from "../contexts/WeavyContext";
+
+/// POST to create a new meeting
+export default function useMutateMeeting() {
+
+    const { client } = useContext(WeavyContext);
+    const queryClient = useQueryClient();
+
+    if (!client) {
+        throw new Error('useMutateMeeting must be used within an WeavyProvider');
+    }
+
+
+    type MutateProps = {
+        provider: string         
+    }
+
+    const mutateMeeting = async ({ provider }: MutateProps) => {
+
+        const response = await fetch(client.uri + "/api/meetings", {
+            method: "POST",
+            body: JSON.stringify({provider: provider}),
+            headers: {
+                "content-type": "application/json",
+                "Authorization": "Bearer " + await client.tokenFactory()
+            }
+        });
+
+        return response.json();
+    };
+
+    return useMutation(mutateMeeting, {
+        onSuccess: (variables: any) => {
+            
+        }        
+    });
+}

package/src/hooks/useMutateMembers.ts

@@ -0,0 +1,43 @@
+import { useContext } from "react";
+import { useMutation, useQueryClient } from "react-query";
+import { WeavyContext } from "../contexts/WeavyContext";
+
+/// PUT to update members in an app
+export default function useMutateMembers() {
+
+    const { client } = useContext(WeavyContext);
+    const queryClient = useQueryClient();
+
+    if (!client) {
+        throw new Error('useMutateMembers must be used within an WeavyProvider');
+    }
+
+
+    type MutateProps = {
+        id: number | null, 
+        members: number[]
+    }
+
+    // add members to conversation
+    const mutateMembers = async ({ id, members }: MutateProps) => {
+
+        const response = await fetch(client.uri + "/api/apps/" + id + "/members/", {
+            method: "POST",
+            body: JSON.stringify(members),
+            headers: {
+                "content-type": "application/json",
+                "Authorization": "Bearer " + await client.tokenFactory()
+            }
+        });
+
+        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]);     
+        }        
+    });
+}

package/src/hooks/useMutateMessage.ts

@@ -0,0 +1,116 @@
+import { useContext } from "react";
+import { useMutation, useQueryClient } from "react-query";
+import { WeavyContext } from "../contexts/WeavyContext";
+
+/// PSOT to add a new message to an app
+export default function useMutateMessage() {
+
+    const { client } = useContext(WeavyContext);
+    const queryClient = useQueryClient();
+
+    if (!client) {
+        throw new Error('useMutateMessage must be used within an WeavyProvider');
+    }
+
+
+    type MutateProps = {
+        id: number | null,
+        text: string,
+        userId: number,
+        attachments: [],
+        meetings: MeetingType[]
+    }
+
+    const mutateMessage = async ({ id, text, userId, attachments, meetings }: MutateProps) => {
+        const response = await fetch(client.uri + "/api/apps/" + id + "/messages", {
+            method: "POST",
+            body: 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();
+    };
+
+    return useMutation(mutateMessage, {
+        onSuccess: (data: any, 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,
+                }));
+            }
+
+            // refetch conversations list
+            queryClient.invalidateQueries("conversations");   
+
+        },
+        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,
+                    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,
+                    }
+                });
+            }
+
+            return { tempId }
+        }
+    });
+}

package/src/hooks/useMutatePinned.ts

@@ -0,0 +1,40 @@
+import { useContext } from "react";
+import { useMutation, useQueryClient } from "react-query";
+import { WeavyContext } from "../contexts/WeavyContext";
+
+/// PUT or DELETE to update pinned state on a conversation
+export default function useMutatePinned() {
+
+    const { client } = useContext(WeavyContext);
+    const queryClient = useQueryClient();
+
+    if (!client) {
+        throw new Error('useMutatePinned must be used within an WeavyProvider');
+    }
+
+
+    type MutateProps = {
+        id: number | null,
+        pin: boolean
+    }
+
+    const mutatePinned = async ({ id, pin }: MutateProps) => {
+
+        const response = await fetch(client.uri + "/api/conversations/" + id + "/pin", {
+            method:  + !pin ? "DELETE": "PUT",
+            body: "",
+            headers: {
+                "content-type": "application/json",
+                "Authorization": "Bearer " + await client.tokenFactory()
+            }
+        });
+
+        return response.json();
+    };
+
+    return useMutation(mutatePinned, {
+        onSuccess: () => {
+            queryClient.invalidateQueries("conversations");
+        }
+    });
+}

package/src/hooks/useMutateReaction.ts

@@ -0,0 +1,38 @@
+import { useContext } from "react";
+import { useMutation } from "react-query";
+import { UserContext } from "../contexts/UserContext";
+import { WeavyContext } from "../contexts/WeavyContext";
+
+/// POST to add a reaction to a message
+export default function useMutateReaction() {
+
+    const { client } = useContext(WeavyContext);
+    const { user } = useContext(UserContext);
+
+    if (!client) {
+        throw new Error('useMutateReaction must be used within an WeavyProvider');
+    }
+
+
+    type MutateProps = {
+        id: number | null,
+        reaction: string        
+    }
+
+    const mutateReaction = async ({id, reaction }: MutateProps) => {
+
+      
+        const response = await fetch(client.uri + "/api/messages/" + id + "/reactions/", {
+            method: "POST",
+            body: JSON.stringify({ content: reaction}),
+            headers: {
+                "content-type": "application/json",
+                "Authorization": "Bearer " + await client.tokenFactory()
+            }
+        });
+
+        return response;
+    };
+
+    return useMutation(mutateReaction);
+}

package/src/hooks/useMutateRead.ts

@@ -0,0 +1,40 @@
+import { useContext } from "react";
+import { useMutation, useQueryClient } from "react-query";
+import { WeavyContext } from "../contexts/WeavyContext";
+
+/// PUT or DELETE to update read state on a conversation
+export default function useMutateRead() {
+
+    const { client } = useContext(WeavyContext);
+    const queryClient = useQueryClient();
+
+    if (!client) {
+        throw new Error('useMutateUnread must be used within an WeavyProvider');
+    }
+
+
+    type MutateProps = {
+        id: number | null,
+        read: boolean
+    }
+
+    const mutateRead = async ({ id, read }: MutateProps) => {
+
+        const response = await fetch(client.uri + "/api/conversations/" + id + "/read", {
+            method:  !read ? "DELETE": "PUT",
+            body: "",
+            headers: {
+                "content-type": "application/json",
+                "Authorization": "Bearer " + await client.tokenFactory()
+            }
+        });
+
+        return response.json();
+    };
+
+    return useMutation(mutateRead, {
+        onSuccess: () => {
+            queryClient.invalidateQueries("conversations");
+        }
+    });
+}