@weavy/uikit-react 11.0.1 → 11.1.0

package/dist/esm/types/client/WeavyClient.d.ts

@@ -1,5 +1,5 @@
 export default class WeavyClient {
-    uri: string;
+    url: string;
     tokenFactory: () => string | Promise<string>;
     connection: import("@microsoft/signalr").HubConnection;
     groups: string[];

package/dist/esm/types/hooks/useUser.d.ts

@@ -1 +1,2 @@
-export default function useUser(client: any): import("react-query").UseQueryResult<UserType, unknown>;
+import WeavyClient from "../client/WeavyClient";
+export default function useUser(client: WeavyClient): import("react-query").UseQueryResult<UserType, unknown>;

package/dist/esm/types/types/types.d.ts

@@ -1,10 +1,16 @@
 /// <reference types="react" />
+interface WeavyClient {
+    url: string;
+    tokenFactory: (() => string | Promise<string>);
+    subscribe: Function;
+    unsubscribe: Function;
+}
 declare type WeavyClientOptions = {
-    uri: string;
+    url: string;
     tokenFactory: (() => string | Promise<string>);
 };
 declare type WeavyContextProps = {
-    client: any;
+    client: WeavyClient | null;
     options?: WeavyContextOptions;
 };
 declare type WeavyContextOptions = {

package/dist/index.d.ts

@@ -4,7 +4,7 @@ import React, { FC } from 'react';
 import { Styles } from 'react-modal';
 
 declare class WeavyClient {
-    uri: string;
+    url: string;
     tokenFactory: () => string | Promise<string>;
     connection: _microsoft_signalr.HubConnection;
     groups: string[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weavy/uikit-react",
-  "version": "11.0.1",
+  "version": "11.1.0",
   "author": "Weavy",
   "description": "React UI-kit for Weavy",
   "homepage": "https://github.com/weavy/weavy-uikit-react",

package/src/client/WeavyClient.ts

@@ -1,7 +1,7 @@
 import { HubConnectionBuilder, LogLevel } from '@microsoft/signalr';
 
 export default class WeavyClient {
-    uri;
+    url;
     tokenFactory;
     connection;
     groups: string[];
@@ -14,14 +14,14 @@ export default class WeavyClient {
     EVENT_RECONNECTED = "reconnected";
 
     constructor(options: WeavyClientOptions) {
-        this.uri = options.uri;
+        this.url = options.url;
         this.tokenFactory = options.tokenFactory
         this.groups = [];
         this.connectionEvents = [];
          
         this.connection = new HubConnectionBuilder()
             .configureLogging(LogLevel.None)
-            .withUrl(this.uri + "/hubs/rtm", {
+            .withUrl(this.url + "/hubs/rtm", {
                 accessTokenFactory: this.tokenFactory
             })
             .withAutomaticReconnect()

package/src/components/Conversation.tsx

@@ -157,7 +157,7 @@ const Conversation = ({ id, showBackButton }: ConversationProps) => {
                 <div className={wy('avatar-header')}>
                     <Avatar src={user.avatar_url} name={user.title} presence={user.presence} id={user.id} size={256} />
                     <h2>Welcome {user.name}!</h2>
-                    Select a conversation to get started
+                    Create or select a conversation to get started
                 </div>
             }
             {selectedConversationId && dataMembers &&

package/src/components/ConversationListItem.tsx

@@ -40,10 +40,10 @@ const ConversationListItem = ({ item, refetchConversations }: ConversationListIt
     }, [item.id])
 
     useEffect(() => {
-        client.subscribe(`a${item.id}`, "app-updated", handleAppUpdated);
+        client?.subscribe(`a${item.id}`, "app-updated", handleAppUpdated);
 
         return () => {
-            client.unsubscribe(`a${item.id}`, "app-updated", handleAppUpdated);
+            client?.unsubscribe(`a${item.id}`, "app-updated", handleAppUpdated);
         }
     }, [item.id])
 

package/src/components/Messages.tsx

@@ -94,30 +94,31 @@ const Messages = ({ id, members, displayName, avatarUrl }: Props) => {
             // mark conversation as read
             readMessageMutation.mutate({ id: id, read: true })
 
-            client.subscribe(`a${id}`, "message-inserted", handleRealtimeMessage);
-            client.subscribe(`a${id}`, "conversation-read", handleRealtimeSeenBy);            
-            client.subscribe(`a${id}`, "reaction-inserted", handleRealtimeReactionInserted);
-            client.subscribe(`a${id}`, "reaction-deleted", handleRealtimeReactionDeleted);
+            client?.subscribe(`a${id}`, "message-inserted", handleRealtimeMessage);
+            client?.subscribe(`a${id}`, "conversation-read", handleRealtimeSeenBy);            
+            client?.subscribe(`a${id}`, "reaction-inserted", handleRealtimeReactionInserted);
+            client?.subscribe(`a${id}`, "reaction-deleted", handleRealtimeReactionDeleted);
         }
 
         return () => {
             window.removeEventListener('focus', handleFocus, false)
 
             if (id) {
-
                 // remove additional pages in cache. Only get first page
                 let qd = queryClient.getQueryData(["messages", id]);
+                
                 if (qd) {
+                    
                     queryClient.setQueryData(["messages", id], (data: any) => ({
-                        pages: data?.pages.splice(0, 1),
-                        pageParams: data?.pageParams.splice(0, 1),
-                    }));
+                        pages: data?.pages.slice(0,1),
+                        pageParams: [undefined]                        
+                    }));                    
                 }
 
-                client.unsubscribe(`a${id}`, "message-inserted", handleRealtimeMessage);
-                client.unsubscribe(`a${id}`, "conversation-read", handleRealtimeSeenBy);                
-                client.unsubscribe(`a${id}`, "reaction-inserted", handleRealtimeReactionInserted);
-                client.unsubscribe(`a${id}`, "reaction-deleted", handleRealtimeReactionDeleted);
+                client?.unsubscribe(`a${id}`, "message-inserted", handleRealtimeMessage);
+                client?.unsubscribe(`a${id}`, "conversation-read", handleRealtimeSeenBy);                
+                client?.unsubscribe(`a${id}`, "reaction-inserted", handleRealtimeReactionInserted);
+                client?.unsubscribe(`a${id}`, "reaction-deleted", handleRealtimeReactionDeleted);
             }
         }
     }, [id]);

package/src/components/SearchUsers.tsx

@@ -60,8 +60,8 @@ const SearchUsers = ({handleSubmit, buttonTitle}: SearchUsersProps) => {
                                     <td className={wy('search-result-table-icon')}>
                                         <Avatar src={user.avatar_url} size={24} id={user.id} presence={user.presence} name={user.display_name} />
                                     </td>
-                                    <td>{user.display_name}</td>
-                                    <td className={wy('search-result-table-icon')}><input type="checkbox" checked={isChecked(user.id)} onChange={(e) => handleSelected(e, user)} /></td>
+                                    <td><label htmlFor={'chk' + user.id}>{user.display_name}</label></td>
+                                    <td className={wy('search-result-table-icon')}><input type="checkbox" id={'chk' + user.id} checked={isChecked(user.id)} onChange={(e) => handleSelected(e, user)} /></td>
                                 </tr>
                             )
                         })}

package/src/components/Typing.tsx

@@ -26,12 +26,12 @@ const Typing = ({ children, id, context }: Props) => {
     useEffect(() => {
         setActiveTypers([]);
         
-        client.subscribe(`a${id}`, "typing", handleTyping);        
-        client.subscribe(`a${id}`, "message-inserted", handleStopTyping);
+        client?.subscribe(`a${id}`, "typing", handleTyping);        
+        client?.subscribe(`a${id}`, "message-inserted", handleStopTyping);
 
         return () => {
-            client.unsubscribe(`a${id}`, "typing", handleTyping);            
-            client.unsubscribe(`a${id}`, "message-inserted", handleStopTyping);
+            client?.unsubscribe(`a${id}`, "typing", handleTyping);            
+            client?.unsubscribe(`a${id}`, "message-inserted", handleStopTyping);
         }
     }, [id])
 

package/src/hooks/useBadge.ts

@@ -12,7 +12,7 @@ export default function useBadge() {
 
     const getBadge = async () => {
 
-        const response = await fetch(client.uri + "/api/conversations/badge", {
+        const response = await fetch(client.url + "/api/conversations/badge", {
             headers: {
                 "content-type": "application/json",
                 "Authorization": "Bearer " + await client.tokenFactory()

package/src/hooks/useChat.ts

@@ -12,7 +12,7 @@ export default function useChat(id: string, options: any) {
 
     const getConversation = async () => {
 
-        const response = await fetch(client.uri + "/api/apps/idf/" + id, {
+        const response = await fetch(client.url + "/api/apps/idf/" + id, {
             headers: {
                 "content-type": "application/json",
                 "Authorization": "Bearer " + await client.tokenFactory()

package/src/hooks/useConversation.ts

@@ -13,7 +13,7 @@ export default function useConversation(id: number | null, options: any) {
 
     const getConversation = async () => {
 
-        const response = await fetch(client.uri + "/api/conversations/" + id, {
+        const response = await fetch(client.url + "/api/conversations/" + id, {
             headers: {
                 "content-type": "application/json",
                 "Authorization": "Bearer " + await client.tokenFactory()

package/src/hooks/useConversations.ts

@@ -12,7 +12,7 @@ export default function useConversations() {
 
     const getConversations = async () => {
 
-        const response = await fetch(client.uri + "/api/conversations?contextual=false", {
+        const response = await fetch(client.url + "/api/conversations?contextual=false", {
             headers: {
                 "content-type": "application/json",
                 "Authorization": "Bearer " + await client.tokenFactory()

package/src/hooks/useFileUploader.ts

@@ -7,13 +7,17 @@ export default function useFileUploader(callback: Function) {
 
     const { client } = useContext(WeavyContext);
 
+    if (!client) {
+        throw new Error('useFileUploader must be used within an WeavyProvider');
+    }
+
     return useMutation(
         async ({ request }: any) => {
 
             const formData = new FormData();
             formData.append('blob', request.file);
 
-            var response = await fetch(client.uri + "/api/blobs", {
+            var response = await fetch(client.url + "/api/blobs", {
                 method: 'POST',
                 body: formData,
                 headers: {

package/src/hooks/useMembers.ts

@@ -12,7 +12,7 @@ export default function useMembers(id: number | null, options: any) {
 
     const getConversationMembers = async () => {
 
-        const response = await fetch(client.uri + "/api/apps/" + id + "/members", {
+        const response = await fetch(client.url + "/api/apps/" + id + "/members", {
             headers: {
                 "content-type": "application/json",
                 "Authorization": "Bearer " + await client.tokenFactory()

package/src/hooks/useMessages.ts

@@ -14,7 +14,7 @@ export default function useMessages(id: number | null, options: any) {
     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, {
+        const response = await fetch(client.url + "/api/apps/" + id + "/messages?orderby=createdat+desc&skip=" + skip + "&top=" + PAGE_SIZE, {
             headers: {
                 "content-type": "application/json",
                 "Authorization": "Bearer " + await client.tokenFactory()

package/src/hooks/useMutateChat.ts

@@ -21,7 +21,7 @@ export default function useMutateChat() {
     // create new conversation
     const mutateChat = async ({ identifier, members }: MutateProps) => {
 
-        const response = await fetch(client.uri + "/api/apps/", {
+        const response = await fetch(client.url + "/api/apps/", {
             method: "POST",
             body: JSON.stringify({ 
                 identifier: identifier,

package/src/hooks/useMutateConversation.ts

@@ -20,7 +20,7 @@ export default function useMutateConversation() {
     // create new conversation
     const mutateConversation = async ({ members }: MutateProps) => {
 
-        const response = await fetch(client.uri + "/api/conversations/", {
+        const response = await fetch(client.url + "/api/conversations/", {
             method: "POST",
             body: JSON.stringify({ members: members }),
             headers: {

package/src/hooks/useMutateConversationName.ts

@@ -20,7 +20,7 @@ export default function useMutateConversationName() {
 
     const mutateConversationName = async ({ id, name }: MutateProps) => {
 
-        const response = await fetch(client.uri + "/api/apps/" + id, {
+        const response = await fetch(client.url + "/api/apps/" + id, {
             method: "PATCH",
             body: JSON.stringify({ name: name }),
             headers: {

package/src/hooks/useMutateDeleteReaction.ts

@@ -22,7 +22,7 @@ export default function useMutateDeleteReaction() {
     const mutateDeleteReaction = async ({ id, reaction }: MutateProps) => {
 
         // remove the existing reaction
-        const response = await fetch(client.uri + "/api/messages/" + id + "/reactions/", {
+        const response = await fetch(client.url + "/api/messages/" + id + "/reactions/", {
             method: "DELETE",
             headers: {
                 "content-type": "application/json",

package/src/hooks/useMutateExternalBlobs.ts

@@ -19,7 +19,7 @@ export default function useMutateExternalBlobs() {
 
     const mutateExternalBlobs = async ({ blobs }: MutateProps) => {
 
-        const response = await fetch(client.uri + "/api/blobs/external", {
+        const response = await fetch(client.url + "/api/blobs/external", {
             method: "POST",
             body: JSON.stringify(blobs),
             headers: {

package/src/hooks/useMutateMeeting.ts

@@ -19,7 +19,7 @@ export default function useMutateMeeting() {
 
     const mutateMeeting = async ({ provider }: MutateProps) => {
 
-        const response = await fetch(client.uri + "/api/meetings", {
+        const response = await fetch(client.url + "/api/meetings", {
             method: "POST",
             body: JSON.stringify({provider: provider}),
             headers: {

package/src/hooks/useMutateMembers.ts

@@ -21,7 +21,7 @@ export default function useMutateMembers() {
     // add members to conversation
     const mutateMembers = async ({ id, members }: MutateProps) => {
 
-        const response = await fetch(client.uri + "/api/apps/" + id + "/members/", {
+        const response = await fetch(client.url + "/api/apps/" + id + "/members/", {
             method: "POST",
             body: JSON.stringify(members),
             headers: {

package/src/hooks/useMutateMessage.ts

@@ -22,7 +22,7 @@ export default function useMutateMessage() {
     }
 
     const mutateMessage = async ({ id, text, userId, attachments, meetings }: MutateProps) => {
-        const response = await fetch(client.uri + "/api/apps/" + id + "/messages", {
+        const response = await fetch(client.url + "/api/apps/" + id + "/messages", {
             method: "POST",
             body: JSON.stringify({
                 text: text,
@@ -86,6 +86,7 @@ export default function useMutateMessage() {
                 let pageMessages = [...data, {
                     id: tempId,
                     text: variables.text,
+                    html: variables.text,
                     display_name: "",
                     temp: true,
                     parent_id: null,

package/src/hooks/useMutatePinned.ts

@@ -20,7 +20,7 @@ export default function useMutatePinned() {
 
     const mutatePinned = async ({ id, pin }: MutateProps) => {
 
-        const response = await fetch(client.uri + "/api/conversations/" + id + "/pin", {
+        const response = await fetch(client.url + "/api/conversations/" + id + "/pin", {
             method:  + !pin ? "DELETE": "PUT",
             body: "",
             headers: {

package/src/hooks/useMutateReaction.ts

@@ -22,7 +22,7 @@ export default function useMutateReaction() {
     const mutateReaction = async ({id, reaction }: MutateProps) => {
 
       
-        const response = await fetch(client.uri + "/api/messages/" + id + "/reactions/", {
+        const response = await fetch(client.url + "/api/messages/" + id + "/reactions/", {
             method: "POST",
             body: JSON.stringify({ content: reaction}),
             headers: {

package/src/hooks/useMutateRead.ts

@@ -20,7 +20,7 @@ export default function useMutateRead() {
 
     const mutateRead = async ({ id, read }: MutateProps) => {
 
-        const response = await fetch(client.uri + "/api/conversations/" + id + "/read", {
+        const response = await fetch(client.url + "/api/conversations/" + id + "/read", {
             method:  !read ? "DELETE": "PUT",
             body: "",
             headers: {

package/src/hooks/useMutateRemoveMembers.ts

@@ -22,7 +22,7 @@ export default function useMutateRemoveMembers() {
 
     const mutateRemove = async ({ id, members }: MutateProps) => {
 
-        const response = await fetch(client.uri + "/api/apps/" + id + "/members/" + members.join(","), {
+        const response = await fetch(client.url + "/api/apps/" + id + "/members/" + members.join(","), {
             method: "DELETE",        
             body: JSON.stringify(members),    
             headers: {

package/src/hooks/useMutateTyping.ts

@@ -18,7 +18,7 @@ export default function useMutateTyping() {
 
     const mutateTyping = async ({ id }: MutateProps) => {
 
-        const response = await fetch(client.uri + "/api/conversations/" + id + "/typing", {
+        const response = await fetch(client.url + "/api/conversations/" + id + "/typing", {
             method: "PUT",
             body: JSON.stringify({}),
             headers: {

package/src/hooks/usePresence.ts

@@ -6,6 +6,10 @@ export default function usePresence() {
 
     const {client} = useContext(WeavyContext);
     
+    if (!client) {
+        throw new Error('usePresence must be used within an WeavyProvider');
+    }
+
     useEffect(() => {
         client.subscribe("online", "online", handlePresenceChange)
     }, []);

package/src/hooks/useSearchUsers.ts

@@ -12,7 +12,7 @@ export default function useSearchUsers(text: string, options: any) {
     }
 
     const getUsers = async () => {
-        const response = await fetch(client.uri + "/api/users?q=" + text + "&skip=0&top=" + PAGE_SIZE, {
+        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()

package/src/hooks/useUser.ts

@@ -1,9 +1,10 @@
 //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: any) {
+export default function useUser(client: WeavyClient) {
     //const { client } = useContext(WeavyContext);
 
     if (!client) {
@@ -13,7 +14,7 @@ export default function useUser(client: any) {
     const getUser = async () => {
 
         try {
-            const response = await fetch(client.uri + "/api/user", {
+            const response = await fetch(client.url + "/api/user", {
                 headers: {
                     "content-type": "application/json",
                     "Authorization": "Bearer " + await client.tokenFactory()
@@ -27,7 +28,7 @@ export default function useUser(client: any) {
             console.error("Could not load Weavy user data...")
             return null;
         } catch(err: any){
-            console.error(`Could not connect to the Weavy backend. Please make sure ${client.uri} is up and running!`)
+            console.error(`Could not connect to the Weavy backend. Please make sure ${client.url} is up and running!`)
         }
         
         

package/src/types/types.ts

@@ -1,10 +1,17 @@
+interface WeavyClient {
+    url: string,
+    tokenFactory: (() => string | Promise<string>),
+    subscribe: Function,
+    unsubscribe: Function,
+}
+
 type WeavyClientOptions = {
-    uri: string,
+    url: string,
     tokenFactory: (() => string | Promise<string>)
 }
 
 type WeavyContextProps = {
-    client: any,
+    client: WeavyClient | null,
     options?: WeavyContextOptions  
 };