@weavy/uikit-react 12.1.0 → 14.0.0

package/src/hooks/useMutateExternalBlobs.ts

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

package/src/hooks/useMutateMeeting.ts

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

package/src/hooks/useMutateMembers.ts

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

package/src/hooks/useMutateMessage.ts

@@ -22,39 +22,30 @@ export default function useMutateMessage() {
     }
 
     const mutateMessage = async ({ id, text, userId, attachments, meetings }: MutateProps) => {
-        const response = await fetch(client.url + "/api/apps/" + id + "/messages", {
-            method: "POST",
-            body: JSON.stringify({
+
+        const response = await client.post("/api/apps/" + id + "/messages",
+            "POST",
+            JSON.stringify({
                 text: text,
                 blobs: attachments.map((a: FileType) => { return a.id }),
                 meeting_id: meetings.length > 0 ? meetings[0].id : null
-            }),
-            headers: {
-                "content-type": "application/json",
-                "Authorization": "Bearer " + await client.tokenFactory()
-            }
-        });
-
+            }));
         return response.json();
     };
 
     return useMutation(mutateMessage, {
-        onSuccess: (data: any, variables: any, context: any) => {
+        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;
@@ -68,7 +59,7 @@ export default function useMutateMessage() {
             }
 
             // refetch conversations list
-            queryClient.invalidateQueries("conversations");   
+            queryClient.invalidateQueries("conversations");
 
         },
         onMutate: async (variables: any) => {
@@ -100,8 +91,8 @@ export default function useMutateMessage() {
 
                 // update cache
                 queryClient.setQueryData(["messages", variables.id], (data: any) => {
-                    let updatedPages = [lastPage];                    
-                    if (data?.pages.length > 1) {                        
+                    let updatedPages = [lastPage];
+                    if (data?.pages.length > 1) {
                         updatedPages = [lastPage, ...data?.pages.slice(1)];
                     }
                     return {

package/src/hooks/useMutatePinned.ts

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

package/src/hooks/useMutateReaction.ts

@@ -16,20 +16,14 @@ export default function useMutateReaction() {
 
     type MutateProps = {
         id: number | null,
-        reaction: string        
+        reaction: string
     }
 
-    const mutateReaction = async ({id, reaction }: MutateProps) => {
-
-      
-        const response = await fetch(client.url + "/api/messages/" + id + "/reactions/", {
-            method: "POST",
-            body: JSON.stringify({ content: reaction}),
-            headers: {
-                "content-type": "application/json",
-                "Authorization": "Bearer " + await client.tokenFactory()
-            }
-        });
+    const mutateReaction = async ({ id, reaction }: MutateProps) => {
+
+        const response = await client.post("/api/messages/" + id + "/reactions/",
+            "POST",
+            JSON.stringify({ content: reaction }));
 
         return response;
     };

package/src/hooks/useMutateRead.ts

@@ -15,20 +15,13 @@ export default function useMutateRead() {
 
     type MutateProps = {
         id: number | null,
-        read: boolean
+        read: boolean,
+        messageId: number | null
     }
 
-    const mutateRead = async ({ id, read }: MutateProps) => {
-
-        const response = await fetch(client.url + "/api/conversations/" + id + "/read", {
-            method:  !read ? "DELETE": "PUT",
-            body: "",
-            headers: {
-                "content-type": "application/json",
-                "Authorization": "Bearer " + await client.tokenFactory()
-            }
-        });
-
+    const mutateRead = async ({ id, read, messageId }: MutateProps) => {
+        const url = read ? `/api/conversations/${id}/read?messageId=${messageId}`: `/api/conversations/${id}/read`;
+        const response = await client.post(url, !read ? "DELETE": "PUT", "")
         return response.json();
     };
 

package/src/hooks/useMutateRemoveMembers.ts

@@ -16,28 +16,23 @@ export default function useMutateRemoveMembers() {
 
 
     type MutateProps = {
-        id:  number | null, 
+        id: number | null,
         members: number[]
     }
 
     const mutateRemove = async ({ id, members }: MutateProps) => {
 
-        const response = await fetch(client.url + "/api/apps/" + id + "/members/" + members.join(","), {
-            method: "DELETE",        
-            body: JSON.stringify(members),    
-            headers: {
-                "content-type": "application/json",
-                "Authorization": "Bearer " + await client.tokenFactory()
-            }
-        });
+        const response = await client.post("/api/apps/" + id + "/members/" + members.join(","),
+            "DELETE",
+            JSON.stringify(members));
 
         return response;
     };
 
     return useMutation(mutateRemove, {
         onSuccess: () => {
-            queryClient.invalidateQueries("conversations");         
-            setSelectedConversationId(null);   
-        }        
+            queryClient.invalidateQueries("conversations");
+            setSelectedConversationId(null);
+        }
     });
 }

package/src/hooks/useMutateTyping.ts

@@ -6,29 +6,24 @@ import { WeavyContext } from "../contexts/WeavyContext";
 export default function useMutateTyping() {
 
     const { client } = useContext(WeavyContext);
-    
+
     if (!client) {
         throw new Error('useMutateTyping must be used within an WeavyProvider');
     }
 
 
     type MutateProps = {
-        id: number | null        
+        id: number | null
     }
 
     const mutateTyping = async ({ id }: MutateProps) => {
 
-        const response = await fetch(client.url + "/api/conversations/" + id + "/typing", {
-            method: "PUT",
-            body: JSON.stringify({}),
-            headers: {
-                "content-type": "application/json",
-                "Authorization": "Bearer " + await client.tokenFactory()
-            }
-        });
+        const response = await client.post("/api/conversations/" + id + "/typing",
+            "PUT",
+            JSON.stringify({}));
 
         return response;
     };
 
-    return useMutation(mutateTyping, { });
+    return useMutation(mutateTyping, {});
 }

package/src/hooks/usePresence.ts

@@ -10,11 +10,10 @@ export default function usePresence() {
     }
 
     useEffect(() => {
-        client.subscribe("online", "online", handlePresenceChange)
+        client.subscribe(null, "online", handlePresenceChange)
     }, []);
 
-    const handlePresenceChange = (data: any) => {        
-        
+    const handlePresenceChange = (data: any) => {                
         if (Array.isArray(data)) {
             document.querySelectorAll(".wy-presence").forEach(function (item) {
                 item.classList.remove("wy-presence-active");

package/src/hooks/useReactions.ts

@@ -9,7 +9,7 @@ export default function useReactions(id: number, reactions: ReactableType[]) {
 
     const groupReactions = useCallback((data: ReactableType[]) => {
         var group = [...new Map<string, ReactableType>(data.map((item: ReactableType) => [item.content, item])).values()];
-        
+
         return group.map((item: ReactableType): ReactionGroup => {
             return {
                 content: item.content,
@@ -19,17 +19,17 @@ export default function useReactions(id: number, reactions: ReactableType[]) {
         });
     }, [reactionsList]);
 
-    const handleRealtimeReactionInserted = useCallback((reaction: ReactionType) => {
-        if (reaction.parent.id === id) {
+    const handleRealtimeReactionInserted = useCallback((reaction: RealtimeReaction) => {        
+        if (reaction.entity.id === id) {            
             setReactionsList((oldList) => {
-                return [...oldList || [], { content: reaction.content, created_by_id: reaction.created_by.id }];
+                return [...oldList || [], { content: reaction.reaction, created_by_id: reaction.actor.id }];
             });
         }
     }, [id, reactionsList]);
 
-    const handleRealtimeReactionDeleted = useCallback((reaction: ReactionType) => {
-        if (reaction.parent.id === id) {
-            setReactionsList(oldList => oldList.filter(item => item.created_by_id !== reaction.created_by.id));
+    const handleRealtimeReactionDeleted = useCallback((reaction: RealtimeReaction) => {        
+        if (reaction.entity.id === id) {
+            setReactionsList(oldList => oldList.filter(item => item.created_by_id !== reaction.actor.id));
         }
     }, [id, reactionsList]);
 
@@ -38,13 +38,12 @@ export default function useReactions(id: number, reactions: ReactableType[]) {
     }, [reactions]);
 
     useEffect(() => {
-
-        on('reaction-inserted', handleRealtimeReactionInserted);
-        on('reaction-deleted', handleRealtimeReactionDeleted);
+        on('reaction_added_' + id, handleRealtimeReactionInserted);
+        on('reaction_deleted_' + id, handleRealtimeReactionDeleted);
 
         return () => {
-            off('reaction-inserted', handleRealtimeReactionInserted);
-            off('reaction-deleted', handleRealtimeReactionDeleted);
+            off('reaction_added_' + id, handleRealtimeReactionInserted);
+            off('reaction_deleted_' + id, handleRealtimeReactionDeleted);
         }
     }, [id]);
 

package/src/hooks/useSearchUsers.ts

@@ -12,12 +12,7 @@ export default function useSearchUsers(text: string, options: any) {
     }
 
     const getUsers = async () => {
-        const response = await fetch(client.url + "/api/users?q=" + text + "&skip=0&top=" + PAGE_SIZE, {
-            headers: {
-                "content-type": "application/json",
-                "Authorization": "Bearer " + await client.tokenFactory()
-            }
-        });
+        const response = await client.get("/api/users?q=" + text + "&skip=0&top=" + PAGE_SIZE);        
         const data = await response.json();
         return data;
     };

package/src/hooks/useUser.ts

@@ -1,12 +1,8 @@
-//import { useContext } from "react";
 import { useQuery } from "react-query";
 import WeavyClient from "../client/WeavyClient";
-//import { WeavyContext } from "../contexts/WeavyContext";
 
 /// GET current user
-export default function useUser(client: WeavyClient) {
-    //const { client } = useContext(WeavyContext);
-
+export default function useUser(client: WeavyClient) {    
     if (!client) {
         throw new Error('useUser must be used within an WeavyProvider');
     }
@@ -14,17 +10,10 @@ export default function useUser(client: WeavyClient) {
     const getUser = async () => {
 
         try {
-            const response = await fetch(client.url + "/api/user", {
-                headers: {
-                    "content-type": "application/json",
-                    "Authorization": "Bearer " + await client.tokenFactory()
-                }
-            });
-    
+            const response = await client.get("/api/user");            
             if(response.ok){
                 return await response.json();            
-            }
-    
+            }    
             console.error("Could not load Weavy user data...")
             return null;
         } catch(err: any){

package/src/scss/theme/_alert.scss

@@ -1,73 +1,71 @@
-@use "config" as *;
+@use "sass:map";
+@use "base/vars";
+@use "base/colors";
 
-// Global alerts
+.wy-alerts {
+  position: fixed;
+  left: 0;
+  top: 4rem;
+  right: 0;
+  pointer-events: none;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: vars.$zindex-fixed;
+  gap: 1rem;
+}
 
-.wy-alert-message {
-    padding: .25rem .5rem;
-    background-color: $client-alert-background;
-    text-align: center;
-    width: $client-panel-width;
-    color: $client-alert-color;
-    border-radius: .1875rem;
-    margin: 0 auto;
-    margin-top: 1rem;
-    font-family: $font-family-base;
-    position: relative;
-    z-index: 10;
-    box-shadow: $md-shadow-8dp;
-    max-width: calc(100% - 3rem);
-    pointer-events: none;
-    user-select: none;
+.wy-alert {
+  background: colors.$surface-1;
+  color: colors.$on-surface;
+  margin: 0 0 1rem;
+  //max-width: calc(100% - 3rem);
+  gap: .5rem;
+  display: flex;
+  flex-direction:row;
+  flex-wrap: wrap;
+  align-items: baseline;
+  cursor: pointer;
+  border-radius: vars.$border-radius;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 1rem;
+  padding: .5rem 1rem;
+  user-select: none;
+  //box-shadow: vars.$shadow-level2;
+  position: relative;
+  overflow: hidden;
+  height: auto;
+  gap: .5rem;
 
-    a {
-        color: darken($client-alert-color, 10%);
-        text-decoration: $link-decoration;
-        font-weight: $alert-link-font-weight;
-        pointer-events: auto;
+  &.wy-fade {
+    transition: all vars.$transition;
+    
+    &:not(.wy-show) {
+      opacity: 0;
+      height: 0;
+      padding-top: 0;
+      padding-bottom: 0;
+      margin-top: 0;
+      margin-bottom: 0;
     }
+  }
 
-    &.wy-fade {
-        transition: all $md-animation-duration $md-animation-curve-default;
-        opacity: 0;
-        height: 0;
-        padding-top: 0;
-        padding-bottom: 0;
-        margin-top: 0;
+  .wy-text {
+    line-height: 1.5;
+    padding: .5rem;
+  }
 
-        &.wy-in {
-            transition: opacity $md-animation-duration $md-animation-curve-default;
-            opacity: 1;
-            height: auto;
-            padding-top: .5rem;
-            padding-bottom: .5rem;
-            margin-top: 1rem;
-        }
-    }
+  .wy-button {
+    margin-left: auto;
+    pointer-events: auto;
+  }
+}
 
-    .wy-button {
-        cursor: pointer;
-        display: inline-flex;
-        flex-shrink: 0;
-        flex-grow: 0;
 
-        > * {
-            display: inline-flex;
-        }
 
-        font-weight: 400;
-        text-align: center;
-        white-space: nowrap;
-        vertical-align: middle;
-        user-select: none;
-        border: 1px solid transparent;
-        padding: .3125rem .75rem;
-        font-size: 1rem;
-        line-height: 1.5;
-        border-radius: .1875rem;
-        color: $white;
-        background-color: $primary;
-        border-color: $primary;
-        box-shadow: $btn-box-shadow;
-        margin-top: .5rem;
-    }
+.wy-alert-primary {
+  background: colors.$primary-container;
+  color: colors.$on-primary-container;
 }