@weavy/uikit-react 11.0.0

package/src/hooks/useMutateRemoveMembers.ts

@@ -0,0 +1,43 @@
+import { useContext } from "react";
+import { useMutation, useQueryClient } from "react-query";
+import { MessengerContext } from "../contexts/MessengerContext";
+import { WeavyContext } from "../contexts/WeavyContext";
+
+/// DELETE to remove members from an app
+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');
+    }
+
+
+    type MutateProps = {
+        id:  number | null, 
+        members: number[]
+    }
+
+    const mutateRemove = async ({ id, members }: MutateProps) => {
+
+        const response = await fetch(client.uri + "/api/apps/" + id + "/members/" + members.join(","), {
+            method: "DELETE",        
+            body: JSON.stringify(members),    
+            headers: {
+                "content-type": "application/json",
+                "Authorization": "Bearer " + await client.tokenFactory()
+            }
+        });
+
+        return response;
+    };
+
+    return useMutation(mutateRemove, {
+        onSuccess: () => {
+            queryClient.invalidateQueries("conversations");         
+            setSelectedConversationId(null);   
+        }        
+    });
+}

package/src/hooks/useMutateTyping.ts

@@ -0,0 +1,34 @@
+import { useContext } from "react";
+import { useMutation } from "react-query";
+import { WeavyContext } from "../contexts/WeavyContext";
+
+/// PUT to add typing to a conversation
+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        
+    }
+
+    const mutateTyping = async ({ id }: MutateProps) => {
+
+        const response = await fetch(client.uri + "/api/conversations/" + id + "/typing", {
+            method: "PUT",
+            body: JSON.stringify({}),
+            headers: {
+                "content-type": "application/json",
+                "Authorization": "Bearer " + await client.tokenFactory()
+            }
+        });
+
+        return response;
+    };
+
+    return useMutation(mutateTyping, { });
+}

package/src/hooks/usePresence.ts

@@ -0,0 +1,32 @@
+import { useContext, useEffect } from "react";
+import { WeavyContext } from "../contexts/WeavyContext";
+import { prefix as wy } from "../utils/styles";
+
+export default function usePresence() {
+
+    const {client} = useContext(WeavyContext);
+    
+    useEffect(() => {
+        client.subscribe("online", "online", handlePresenceChange)
+    }, []);
+
+    const handlePresenceChange = (data: any) => {        
+        
+        if (Array.isArray(data)) {
+            document.querySelectorAll(wy(".presence")).forEach(function (item) {
+                item.classList.remove(wy("presence-active"));
+            });
+
+            data.forEach(function (id) {
+                document.querySelectorAll("[data-presence-id='" + id + "']").forEach(function (item) {
+                    item.classList.add(wy("presence-active"));
+                });
+            });
+        } else {
+            document.querySelectorAll("[data-presence-id='" + data + "']").forEach(function (item) {
+                item.classList.add(wy("presence-active"));
+            });
+        }
+    }
+
+}

package/src/hooks/usePreview.ts

@@ -0,0 +1,21 @@
+import { useContext, useEffect } from "react";
+import { PreviewContext } from "../contexts/PreviewContext";
+
+
+export default function usePreview(attachments: AttachmentType[]) {
+
+    const { openPreview, closePreview } = useContext(PreviewContext);
+
+    const open = (attachmentId: number) => {        
+        openPreview(attachments, attachmentId);
+    }
+
+    const close = () => {
+        closePreview()
+    }
+
+    return {
+        open,
+        close
+    }
+}

package/src/hooks/useReactions.ts

@@ -0,0 +1,53 @@
+import { useCallback, useContext, useEffect, useLayoutEffect, useState } from "react";
+import { UserContext } from "../contexts/UserContext";
+import useEvents from "./useEvents";
+
+
+export default function useReactions(id: number, reactions: ReactableType[]) {
+    const { on, off } = useEvents();
+    const { user } = useContext(UserContext);
+    const [reactionsList, setReactionsList] = useState<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,
+                count: data.filter((r) => r.content === item.content).length,
+                has_reacted: data.filter((r) => r.content === item.content && r.created_by_id === user.id).length > 0
+            }
+        });
+    }, [reactionsList]);
+
+    const handleRealtimeReactionInserted = useCallback((reaction: ReactionType) => {
+        if (reaction.parent.id === id) {
+            setReactionsList((oldList) => {
+                return [...oldList || [], { content: reaction.content, created_by_id: reaction.created_by.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));
+        }
+    }, [id, reactionsList]);
+
+    useLayoutEffect(() => {
+        setReactionsList(reactions || []);
+    }, [reactions]);
+
+    useEffect(() => {
+
+        on('reaction-inserted', handleRealtimeReactionInserted);
+        on('reaction-deleted', handleRealtimeReactionDeleted);
+
+        return () => {
+            off('reaction-inserted', handleRealtimeReactionInserted);
+            off('reaction-deleted', handleRealtimeReactionDeleted);
+        }
+    }, [id]);
+
+    return { reactionsList: groupReactions(reactionsList) };
+}

package/src/hooks/useSearchUsers.ts

@@ -0,0 +1,26 @@
+import { useContext } from "react";
+import { useInfiniteQuery, useQuery } from "react-query";
+import { WeavyContext } from "../contexts/WeavyContext";
+
+/// GET users by search query
+export default function useSearchUsers(text: string, options: any) {
+    const PAGE_SIZE = 10;
+    const { client } = useContext(WeavyContext);
+
+    if (!client) {
+        throw new Error('useSearchUsers must be used within an WeavyProvider');
+    }
+
+    const getUsers = async () => {
+        const response = await fetch(client.uri + "/api/users?q=" + text + "&skip=0&top=" + PAGE_SIZE, {
+            headers: {
+                "content-type": "application/json",
+                "Authorization": "Bearer " + await client.tokenFactory()
+            }
+        });
+        const data = await response.json();
+        return data;
+    };
+
+    return useQuery<MembersResult>('users', getUsers, options)
+}

package/src/hooks/useThrottle.ts

@@ -0,0 +1,13 @@
+import throttle from "lodash.throttle"
+import { useCallback, useEffect, useRef } from "react";
+
+export default function useThrottle(cb: any, delay: number) {
+  const options = { leading: true, trailing: false }; // add custom lodash options
+  const cbRef = useRef(cb);
+  // use mutable ref to make useCallback/throttle not depend on `cb` dep
+  useEffect(() => { cbRef.current = cb; });
+  return useCallback(
+    throttle((...args) => cbRef.current(...args), delay, options),
+    [delay]
+  );
+}

package/src/hooks/useUser.ts

@@ -0,0 +1,38 @@
+//import { useContext } from "react";
+import { useQuery } from "react-query";
+//import { WeavyContext } from "../contexts/WeavyContext";
+
+/// GET current user
+export default function useUser(client: any) {
+    //const { client } = useContext(WeavyContext);
+
+    if (!client) {
+        throw new Error('useUser must be used within an WeavyProvider');
+    }
+
+    const getUser = async () => {
+
+        try {
+            const response = await fetch(client.uri + "/api/user", {
+                headers: {
+                    "content-type": "application/json",
+                    "Authorization": "Bearer " + await client.tokenFactory()
+                }
+            });
+    
+            if(response.ok){
+                return await response.json();            
+            }
+    
+            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!`)
+        }
+        
+        
+    };
+
+
+    return useQuery<UserType>("user", getUser);
+}

package/src/index.ts

@@ -0,0 +1,33 @@
+import WeavyClient from './client/WeavyClient';
+import WeavyProvider from './contexts/WeavyContext';
+import  { WeavyContext } from './contexts/WeavyContext';
+import MessengerProvider from './contexts/MessengerContext';
+import  { MessengerContext } from './contexts/MessengerContext';
+import Messenger from './components/Messenger';
+import ConversationBadge from './components/ConversationBadge';
+import ConversationList from './components/ConversationList';
+import Conversation from './components/Conversation';
+import Chat from './components/Chat';
+import Button from './ui/Button';
+import Dropdown from './ui/Dropdown';
+import Icon from './ui/Icon';
+import Overlay from './ui/Overlay';
+// import { useMessenger } from './hooks/useMessenger';
+
+export {
+    WeavyClient,
+    WeavyContext,
+    WeavyProvider,
+    MessengerProvider,
+    MessengerContext,
+    Messenger,
+    ConversationList,
+    Conversation,
+    Chat,
+    ConversationBadge,
+    Button,
+    Dropdown,
+    Icon,
+    Overlay
+    //useMessenger
+}

package/src/types/Chat.ts

@@ -0,0 +1,3 @@
+export interface ChatProps {
+  id: string 
+}

package/src/types/Conversation.ts

@@ -0,0 +1,4 @@
+export interface ConversationProps {
+  id?: number | null,  
+  showBackButton?: boolean
+}

package/src/types/ConversationListItem.ts

@@ -0,0 +1,4 @@
+export interface ConversationListItemProps {
+    item: ConversationType,
+    refetchConversations: Function
+}

package/src/types/Message.ts

@@ -0,0 +1,16 @@
+export interface MessageProps {
+    id: number,
+    html: string,
+    temp?: boolean | false,
+    me: boolean,
+    avatar?: string,
+    name: string,
+    created_at: string,
+    attachments: AttachmentType[],
+    meeting: MeetingCardType,
+    parentId: number | null,
+    reactions: ReactableType[],
+    reactions_count?: number,
+    seenBy: MemberType[]
+}
+

package/src/types/Messenger.ts

@@ -0,0 +1,3 @@
+export interface Messenger {
+    options?: MessengerContextOptions
+}

package/src/types/emoji-toolkit.d.ts

@@ -0,0 +1 @@
+declare module 'emoji-toolkit';

package/src/types/types.ts

@@ -0,0 +1,175 @@
+type WeavyClientOptions = {
+    uri: string,
+    tokenFactory: (() => string | Promise<string>)
+}
+
+type WeavyContextProps = {
+    client: any,
+    options?: WeavyContextOptions  
+};
+
+type WeavyContextOptions = {
+    zoomAuthenticationUrl?: string,
+    teamsAuthenticationUrl?: string,
+    enableCloudFiles?: boolean,
+    filebrowserUrl?: string
+}
+
+type MessengerContextProps = {    
+    options?: MessengerContextOptions,    
+    selectedConversationId: null | number,
+    setSelectedConversationId: Function    
+};
+
+type UserContextProps = {        
+    user: UserType    
+};
+
+
+type MessengerContextOptions = {
+    reactions?: string[]
+}
+
+type PreviewContextProps = {
+    openPreview: Function,
+    closePreview: Function
+}
+
+
+type ProviderProps = {
+    children: React.ReactNode,
+    client: any
+};
+
+type InsertConversationProps = {
+    title: string,
+    text: string
+}
+
+type ConversationsResult = {
+    data: ConversationType[],
+    start: number,
+    end: number,
+    count: number
+}
+
+
+type MembersResult = {
+    data: MemberType[],
+    start: number,
+    end: number,
+    count: number
+}
+
+type MessagesResult = {
+    data: MessageType[],
+    start: number,
+    end: number,
+    count: number
+}
+
+type ConversationType = {
+    id: number,
+    display_name: string,    
+    last_message: MessageType,
+    is_unread : boolean,
+    is_pinned: boolean,    
+    type: string,
+    member_ids: number[],
+    avatar_url: string
+}
+
+type MemberType = {
+    id: number,
+    name: string,
+    display_name: string,
+    avatar_url: string,    
+    delivered_at: string,
+    read_at: string,
+    presence: string
+}
+
+type MessageType = {
+    id: number,
+    html: string,    
+    text: string,    
+    app_id: number,        
+    temp?: boolean,
+    created_at: string,
+    created_by: MemberType,    
+    attachments: AttachmentType[],
+    attachment_ids: number[],
+    meeting: MeetingCardType,
+    meeting_id?: number,
+    reactions: ReactableType[],    
+}
+ 
+type UserType = {
+    id: number,
+    username: string, 
+    email: string,
+    name: string,
+    title: string,
+    avatar_url: string,
+    presence: string
+}
+
+type FileType = {
+    id: number,
+    name: string
+}
+
+type AttachmentType = {
+    id: number,
+    name: string,    
+    kind: string,
+    media_type: string,
+    width: number,
+    height: number,
+    size: number,
+    provider: string,
+    download_url: string,
+    preview_url: string,
+    thumbnail_url: string,
+    external_url: string
+}
+
+type ReactionType = {    
+    id: number,
+    parent: MessageType, 
+    content: string,    
+    created_by: MemberType,    
+    count?: number
+}
+
+type ReactableType = {    
+    content: string,    
+    created_by_id: number    
+}
+
+type ReactionGroup = {
+    content: string,
+    count: number,
+    has_reacted: boolean
+}
+
+type MeetingType = {
+    id: number,
+    provider: string
+}
+
+type MeetingCardType = {
+    id: number,
+    provider: string,
+    provider_id: string,
+    uuid: string,
+    join_url: string,
+    recording_url: string,
+    ended_at: string
+}
+
+type BadgeType = {
+    private: number,
+    rooms: number,
+    chat: number
+}

package/src/ui/Button.tsx

@@ -0,0 +1,32 @@
+import React, { Children } from "react";
+import Icon from "./Icon";
+import classNames from "classnames";
+import { prefix as wy } from "../utils/styles";
+
+type Props = {
+    active?: boolean,
+    type?: "button" | "submit" | "reset",
+    onClick?: (e: any) => void,
+    className?: string,
+    children: React.ReactNode,
+    props?: React.ButtonHTMLAttributes<HTMLButtonElement>
+}
+
+const Button: any = ({ active = false, type = "button", onClick, className = "", children, ...props }: Props) => {
+    let singleChild: any = Children.count(children) === 1 && Children.toArray(children).pop();
+
+    let buttonClassNames = classNames(
+        wy('button'), 
+        className,
+        {
+            [wy('active')]: active,
+            [wy('button-icon')]: singleChild?.type === Icon.UI
+        }
+    );
+
+    return <button type={type} className={buttonClassNames} onClick={onClick} { ...props }>{children}</button>
+}
+
+// Export as replacable UI component
+const UIButton = { UI: Button };
+export default UIButton;

package/src/ui/Dropdown.tsx

@@ -0,0 +1,58 @@
+import React, { useEffect, useState } from "react";
+import classNames from 'classnames';
+import Icon from "./Icon";
+import Button from "./Button";
+import { prefix as wy } from "../utils/styles";
+
+type DropdownProps = {
+    directionX?: "left" | "right";
+    directionY?: "up" | "down";
+    children: React.ReactNode,
+    className?: string,
+    props?: React.HTMLAttributes<HTMLSpanElement>
+}
+
+const Dropdown = ({ directionX = "right", directionY = "down", children, className = "", ...props }: DropdownProps) => {
+    const [visible, setVisible] = useState<boolean>(false);
+
+    useEffect(() => {
+        if (visible) {
+            document.addEventListener("click", () => { setVisible(false) });
+        } else {
+            document.removeEventListener("click", () => { setVisible(false) });
+        }
+
+    }, [visible]);
+
+    const handleMenuClick = (e: any) => {
+        e.stopPropagation();
+        setVisible(!visible);
+    }
+
+    return (
+        <span className={classNames(wy("dropdown"), { [wy("dropup")]: directionY === "up" }, className)} {...props}>
+            <Button.UI onClick={(e: any) => handleMenuClick(e)} className={wy(classNames({ "active": visible }))}>
+                <Icon.UI name="dots-vertical" />
+            </Button.UI>
+
+            <div className={wy(classNames("dropdown-menu", { "dropdown-menu-end": directionX === "left" }))} hidden={!visible}>
+                {children}
+            </div>
+        </span>
+
+    )
+
+}
+type ItemProps = {
+    children: React.ReactNode,
+    className?: string,
+    onClick?: (e: any) => void,
+    props?: React.HTMLAttributes<HTMLDivElement>
+}
+const DropdownItem = ({ children, className = "", onClick, ...props }: ItemProps) => {
+    return <div className={classNames(wy("dropdown-item"), className)} onClick={onClick} {...props}>{children}</div>
+}
+
+// Export as replacable UI component
+const UIDropdown = { UI: Dropdown, Item: DropdownItem };
+export default UIDropdown;