@weavy/uikit-react 11.0.0

package/src/components/SearchUsers.tsx

@@ -0,0 +1,90 @@
+import React, { useEffect, useState } from "react"
+import useDebounce from "../hooks/useDebounce";
+import useSearchUsers from "../hooks/useSearchUsers";
+import Avatar from './Avatar';
+import Button from '../ui/Button';
+import Icon from '../ui/Icon';
+import { prefix as wy } from "../utils/styles";
+
+type SearchUsersProps = {
+    handleSubmit: any,
+    buttonTitle: string
+}
+
+const SearchUsers = ({handleSubmit, buttonTitle}: SearchUsersProps) => {
+
+    const [text, setText] = useState("");
+    const [selected, setSelected] = useState<MemberType[]>([]);
+
+    const { isLoading, isError, data, error, isFetching, refetch } = useSearchUsers(text, {
+        enabled: false
+    });
+
+    const throttledCb = useDebounce(() => refetch(), 250);
+    useEffect(throttledCb, [text])
+
+    const isChecked = (id: number): boolean => {
+        return selected.find((u) => { return u.id === id }) != null;
+    }
+
+    const handleSelected = (e: any, member: MemberType) => {
+        if (e.target.checked) {
+            setSelected([...selected, member]);
+        } else {
+            setSelected(selected.filter((u) => { return u.id !== member.id }));
+        }
+
+    }
+
+    const clear = () => {
+        setSelected([]);
+        setText("");
+    }
+
+    return (
+        <div className={wy('search scroll-y')}>
+            <div className={wy('search-form pane-group')}>
+                <Button.UI><Icon.UI name="magnify" /></Button.UI>
+                <input className={wy('search-input')} value={text} onChange={(e) => setText(e.target.value)} name="text" placeholder='Search...' />
+            </div>
+
+            <div className={wy('pane-group')}>
+                {data && data.data.length === 0 &&
+                    <div className={wy('search-no-result')}>Your search did not match any people.</div>
+                }
+                <table className={wy('search-result-table')}>
+                    <tbody>
+                        {data && data.data.length > 0 && data.data.map((user: MemberType) => {
+                            return (
+                                <tr key={user.id} className={wy('search-result-table-checkbox')}>
+                                    <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>
+                                </tr>
+                            )
+                        })}
+                    </tbody>
+                </table>
+            </div>
+            {/*<div className={wy('search-group')}>
+                <h2>Selected people</h2>
+                <ul>
+                    {selected && selected.length > 0 && selected.map((user: UserType) => {
+                        return <li key={user.id}> {user.title} {user.email && ` - ${user.email}`}</li>
+                    })}
+                </ul>
+                </div>*/}
+            <div className={wy('footerbars')}>
+                <div className={wy('footerbar')}>
+                    <div className={wy('pane-group')}>
+                        <button className={wy('button-primary')} type="button" onClick={() => {handleSubmit(selected); clear();}} disabled={selected.length === 0}>{buttonTitle}</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default SearchUsers;

package/src/components/SeenBy.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import Avatar from "./Avatar";
+import dayjs  from 'dayjs';
+import { prefix as wy } from "../utils/styles";
+
+type Props = {
+    id: number,
+    parentId: number | null,
+    seenBy: MemberType[],
+    createdAt: string
+}
+
+const SeenBy = ({ seenBy }: Props) => {
+   
+    return (
+        <div className={wy('readby-status')}>
+            {seenBy && seenBy.length > 0 && seenBy.map((member: MemberType) => {
+                const date = dayjs.utc(member.read_at).tz(dayjs.tz.guess());
+                return (<Avatar name={`Seen by ${member.name} at ${date.format('LLLL')}`} src={member.avatar_url} size={16} key={member.id}/>)})
+            }
+        </div>
+    )
+}
+
+export default SeenBy;
+

package/src/components/Typing.tsx

@@ -0,0 +1,131 @@
+import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { UserContext } from '../contexts/UserContext';
+import { WeavyContext } from '../contexts/WeavyContext';
+
+type Props = {
+    id: number,
+    context: string // use context to create handlers to make them unique. This makes the useRealTime hook NOT to unsubscribe to the eventhandlers.
+    children: any
+}
+
+const Typing = ({ children, id, context }: Props) => {
+    const [activeTypers, setActiveTypers] = useState<any>([]);
+    const [text, setText] = useState<string>("");
+    const typingTimeout = useRef<any>(null);
+    const { client } = useContext(WeavyContext);
+    const { user } = useContext(UserContext);
+
+    useEffect(() => {
+        updateTyping();
+
+        return () => {
+            clearTimeout(typingTimeout.current);
+        };
+    }, [activeTypers, id, context]);
+
+    useEffect(() => {
+        setActiveTypers([]);
+        
+        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);
+        }
+    }, [id])
+
+    const updateTyping = () => {
+
+        let typers = activeTypers;
+        if (typingTimeout.current) {
+            clearTimeout(typingTimeout.current);
+            typingTimeout.current = null;
+        }
+
+        // discard typing events older than 5 seconds
+        let now = Date.now();
+        typers.forEach(function (item: any, index: number) {
+            if (now - item.time > 5 * 1000) {
+                typers.splice(index, 1);
+            }
+        });
+
+        if (typers.length) {
+            // use age of typing event to animate ellipsis...
+            let dots = (Math.round((now - Math.max.apply(null, typers.map(function (x: any) { return x.time; }))) / 1000) % 3) + 1;
+
+            let ellipsis = (".").repeat(dots); //+ (".").repeat(3 - dots);
+
+            // merge names of people typing
+            let names = typers.map((item: any) => item.display_name).sort();
+
+            let typingText = "";
+            for (let i = 0; i < names.length; i++) {
+                if (i > 0) {
+                    if (i === (names.length - 1)) {
+                        typingText += " " + "and" + " ";
+                    } else {
+                        typingText += ", ";
+                    }
+                }
+                typingText += names[i];
+            }
+            if (names.length === 1) {
+                typingText += " " + "is typing";
+            } else {
+                typingText += " " + "are typing";
+            }
+
+            // update gui
+            setText(typingText + ellipsis);
+
+            // schedule another call to updateTyping in 1 second
+            typingTimeout.current = setTimeout(updateTyping, 1000);
+        } else {
+            setText("");
+        }
+    }
+
+    const setTypers = (data: any) => {
+        
+        // remove existing typing events by this user (can only type in one conversation at a time)
+        activeTypers.forEach(function (item: any, index: number) {
+            if (item.member.id === data.member.id) {
+                setActiveTypers(activeTypers.splice(index, 1));
+            }
+        });
+
+        // track time when we received this event
+        data.member.time = Date.now();
+        setActiveTypers([...activeTypers, data.member]);
+    }
+
+    const handleTyping = useCallback((data: any) => {               
+        if (data.conversation.id === id && data.member.id !== user.id) {            
+            setTypers(data);
+        }
+
+    }, [id, context, activeTypers]);
+
+    const handleStopTyping = useCallback((data: any) => {        
+        if (data.app_id === id) {
+            setActiveTypers([]);
+        }
+    }, [id, context, activeTypers]);
+    
+    return (
+        <>
+            {text !== "" &&
+                <>{text}</>
+            }
+            {text === "" &&
+                <>{children}</>
+            } 
+        </>
+
+
+    )
+}
+
+export default React.memo(Typing);

package/src/contexts/MessengerContext.tsx

@@ -0,0 +1,44 @@
+import React, { createContext, useState } from "react";
+import usePresence from "../hooks/usePresence";
+
+export const MessengerContext = createContext<MessengerContextProps>({
+    selectedConversationId: null,
+    setSelectedConversationId: (id: any) => { },
+    options: {}
+});
+
+type Props = {
+    children: React.ReactNode,
+    options?: MessengerContextOptions
+}
+
+const MessengerProvider = ({ children, options }: Props) => {
+
+    let defaultOptions: MessengerContextOptions = {
+        reactions: ['😍', '😎', '😉', '😜', '👍']
+    };
+
+    let opts = { ...defaultOptions, ...options };
+
+    const [selectedConversationId, setSelectedConversation] = useState(null);
+
+    // hook up to presence updates
+    usePresence();
+
+    const setSelectedConversationId = (id: any) => {
+        setSelectedConversation(id);
+    }
+
+    return (
+        <>
+            <MessengerContext.Provider value={{ options: opts, selectedConversationId, setSelectedConversationId }}>
+                {children}
+            </MessengerContext.Provider>
+        </>
+
+
+    )
+};
+
+export default MessengerProvider;
+

package/src/contexts/PreviewContext.tsx

@@ -0,0 +1,105 @@
+import React, { createContext, useEffect, useState } from "react";
+import Overlay from '../ui/Overlay';
+import Button from '../ui/Button';
+import Icon from '../ui/Icon';
+import { prefix as wy } from "../utils/styles";
+
+export const PreviewContext = createContext<PreviewContextProps>({
+    openPreview: Function,
+    closePreview: Function
+});
+
+type Props = {
+    children: React.ReactNode
+}
+
+const PreviewProvider = ({ children }: Props) => {
+    const [modalPreviewOpen, setModalPreviewOpen] = useState<boolean>(false);
+    const [attachments, setAttachments] = useState<AttachmentType[]>([]);
+    const [activeAttachment, setActiveAttchment] = useState<AttachmentType>();
+
+    const [currentAttachmentId, setCurrentAttachmentId] = useState<number | null>();
+    const [nextAttachmentId, setNextAttachmentId] = useState<number | null>();
+    const [previousAttachmentId, setPreviousAttachmentId] = useState<number | null>();
+
+    useEffect(() => {
+
+        if (currentAttachmentId) {
+            var itemIndex = attachments.map(function (a: AttachmentType) { return a.id; }).indexOf(currentAttachmentId);
+
+            setPreviousAttachmentId(itemIndex > 0 ? attachments[itemIndex - 1].id : null);
+            setNextAttachmentId(itemIndex + 1 < attachments.length ? attachments[itemIndex + 1].id : null);
+            setActiveAttchment(attachments.find((a: AttachmentType) => a.id === currentAttachmentId));
+        }
+
+    }, [attachments, currentAttachmentId])
+
+    const openPreview = (attachments: AttachmentType[], id: number) => {
+        setAttachments(attachments);
+        setCurrentAttachmentId(id);
+
+        setModalPreviewOpen(true);
+    }
+
+    const closePreview = () => {
+        setModalPreviewOpen(false);
+    }
+
+    const handlePrevious = () => {
+        setCurrentAttachmentId(previousAttachmentId);
+    }
+
+    const handleNext = () => {
+        setCurrentAttachmentId(nextAttachmentId);
+    }
+
+    const handleDownload = () => {
+        window.open(`${activeAttachment?.download_url}&d=1`, "_blank");
+    }
+
+    return (
+        <>
+
+            <PreviewContext.Provider value={{ openPreview: openPreview, closePreview: closePreview }}>
+                {children}
+            </PreviewContext.Provider>
+
+            <Overlay.UI isOpen={modalPreviewOpen} className={wy('dark')}>
+                <header className={wy('appbars')}>
+                    <nav className={wy('appbar')}>
+                        <Button.UI onClick={closePreview}><Icon.UI name='close' /></Button.UI>
+                        <div className={wy('appbar-text')}>
+                            {activeAttachment &&
+                                <span>{activeAttachment.name}</span>
+                            }
+
+                        </div>
+                        <Button.UI onClick={handleDownload}><Icon.UI name='download' /></Button.UI>
+                    </nav>
+                </header>
+                <div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%" }}>
+
+                    {activeAttachment &&
+                        <>
+                            {previousAttachmentId &&
+                                <Button.UI onClick={handlePrevious} style={{ position: "absolute", top: "50%", left: "0" }}><Icon.UI name="previous" /></Button.UI>
+                            }
+                            {nextAttachmentId &&
+                                <Button.UI onClick={handleNext} style={{ position: "absolute", top: "50%", right: "0", }}><Icon.UI name="next" /></Button.UI>
+                            }
+
+                            <img style={{ maxWidth: "100%" }} src={activeAttachment.preview_url} />
+                        </>
+                    }
+
+                </div>
+            </Overlay.UI>
+
+        </>
+
+
+    )
+};
+
+export default PreviewProvider;
+

package/src/contexts/UserContext.tsx

@@ -0,0 +1,31 @@
+import React, { createContext} from "react";
+import useUser from "../hooks/useUser";
+
+export const UserContext = createContext<UserContextProps>({
+    user: { id: -1, username: "anonymous", name: "Anonymous", email: "", title: "", presence: "", avatar_url: "" }    
+});
+
+type Props = {
+    client: any, // pass client here to avoid circular references from WeavyContext
+    children: React.ReactNode    
+}
+
+const UserProvider = ({ children, client }: Props) => {
+
+    const { isLoading, data } = useUser(client);
+        
+    return (
+        <>
+            {!isLoading && data &&
+                <UserContext.Provider value={{ user: data }}>
+                    {children}
+                </UserContext.Provider>
+            }
+        </>
+
+
+    )
+};
+
+export default UserProvider;
+

package/src/contexts/WeavyContext.tsx

@@ -0,0 +1,66 @@
+import React, { createContext } from "react";
+import { QueryClient, QueryClientProvider } from "react-query";
+import UserProvider from "./UserContext";
+import dayjs  from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
+import localizedFormat from 'dayjs/plugin/localizedFormat';
+import PreviewProvider from "./PreviewContext";
+import WeavyClient from "../client/WeavyClient";
+
+dayjs.extend(relativeTime);
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(localizedFormat);
+
+
+export const WeavyContext = createContext<WeavyContextProps>({
+  client: null,
+  options: {}
+});
+
+type Props = {
+  children: React.ReactNode,
+  client: WeavyClient,
+  options?: WeavyContextOptions
+}
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      cacheTime: 1000 * 60 * 60 * 24, // 24 hours
+    },
+  },
+})
+
+const WeavyProvider = ({ children, client, options }: Props) => {
+
+  let defaultOptions: WeavyContextOptions = {
+    zoomAuthenticationUrl: undefined,
+    teamsAuthenticationUrl: undefined,
+    enableCloudFiles: true,
+    filebrowserUrl: "https://filebrowser.weavycloud.com/index10.html"
+  };
+
+  let opts = { ...defaultOptions, ...options }
+
+  return (
+    <>
+      {client &&
+        <QueryClientProvider client={queryClient}>
+          <WeavyContext.Provider value={{ client, options: opts }}>
+            <UserProvider client={client}>
+              <PreviewProvider>
+                {children}
+              </PreviewProvider>              
+            </UserProvider>
+          </WeavyContext.Provider>
+        </QueryClientProvider>
+      }
+    </>
+  )
+};
+
+export default WeavyProvider;
+

package/src/hooks/useBadge.ts

@@ -0,0 +1,32 @@
+import { useContext } from "react";
+import { useQuery } from "react-query";
+import { WeavyContext } from "../contexts/WeavyContext";
+
+/// GET the conversation badge
+export default function useBadge() {
+    const { client } = useContext(WeavyContext);
+
+    if (!client) {
+        throw new Error('useBadge must be used within an WeavyProvider');
+    }
+
+    const getBadge = async () => {
+
+        const response = await fetch(client.uri + "/api/conversations/badge", {
+            headers: {
+                "content-type": "application/json",
+                "Authorization": "Bearer " + await client.tokenFactory()
+            }
+        });
+        if(response.ok){
+            const data = await response.json();                        
+            return data;
+        }
+
+        return null;
+        
+    };
+
+
+    return useQuery<BadgeType>("badge", getBadge);
+}

package/src/hooks/useChat.ts

@@ -0,0 +1,32 @@
+import { useContext } from "react";
+import { useQuery } from "react-query";
+import { WeavyContext } from "../contexts/WeavyContext";
+
+/// GET a specific conversation
+export default function useChat(id: string, options: any) {
+    const { client } = useContext(WeavyContext);
+
+    if (!client) {
+        throw new Error('useChat must be used within an WeavyProvider');
+    }
+
+    const getConversation = async () => {
+
+        const response = await fetch(client.uri + "/api/apps/idf/" + id, {
+            headers: {
+                "content-type": "application/json",
+                "Authorization": "Bearer " + await client.tokenFactory()
+            }
+        });
+        if(response.ok){
+            const data = await response.json();                        
+            return data;
+        }
+
+        return null;
+        
+    };
+
+
+    return useQuery<ConversationType>(["chat", id], getConversation, options);
+}

package/src/hooks/useConversation.ts

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

package/src/hooks/useConversations.ts

@@ -0,0 +1,27 @@
+import { useContext } from "react";
+import { useQuery } from "react-query";
+import { WeavyContext } from "../contexts/WeavyContext";
+
+/// GET all conversations
+export default function useConversations() {
+    const { client } = useContext(WeavyContext);
+
+    if (!client) {
+        throw new Error('useConversations must be used within an WeavyProvider');
+    }
+
+    const getConversations = async () => {
+
+        const response = await fetch(client.uri + "/api/conversations?contextual=false", {
+            headers: {
+                "content-type": "application/json",
+                "Authorization": "Bearer " + await client.tokenFactory()
+            }
+        });
+        const data = await response.json();                        
+        return data;
+    };
+
+
+    return useQuery<ConversationsResult>("conversations", getConversations);
+}

package/src/hooks/useDebounce.ts

@@ -0,0 +1,22 @@
+import debounce from "lodash.debounce";
+import { useCallback, useEffect, useRef } from "react";
+
+export default function useDebounce(cb: any, delay: number) {
+  
+  const inputsRef = useRef({cb, delay}); // mutable ref like with useThrottle
+  useEffect(() => { inputsRef.current = { cb, delay }; }); //also track cur. delay
+  return useCallback(
+    debounce((...args) => {
+        // Debounce is an async callback. Cancel it, if in the meanwhile
+        // (1) component has been unmounted (see isMounted in snippet)
+        // (2) delay has changed
+        if (inputsRef.current.delay === delay)
+          inputsRef.current.cb(...args);
+      }, delay, {
+        leading: false,
+        trailing: true
+      }
+    ),
+    [delay, debounce]
+  );
+}

package/src/hooks/useEvents.ts

@@ -0,0 +1,43 @@
+import { useCallback, useState } from "react";
+
+const events: object[] = [];
+const callbacks: any = {};
+
+function useForceUpdate() {
+   const [, setState] = useState({});
+   return useCallback(() => setState({}), []);
+}
+
+export default function useEvents() {
+
+    const forceUpdate = useForceUpdate();
+    const runCallbacks = (callbackList: Function[], data: any) => {
+       if (callbackList) {
+          callbackList.forEach(cb => cb(data));
+          forceUpdate();
+       }
+     
+    }
+
+    const dispatch = (event: string, data: any) => {
+        events.push({ event, data, created: Date.now() });
+        runCallbacks(callbacks[event], data);
+    }
+
+    const on = (event: string, cb: Function) => {
+        if (callbacks[event]) {
+           callbacks[event].push(cb);
+        } else {
+          callbacks[event] = [cb];
+        }
+        
+        // Return a cleanup function to unbind event
+        return () => callbacks[event] = callbacks[event].filter((i: any) => i !== cb);
+    }
+
+    const off = (event: string, cb: Function) => {
+        callbacks[event] = callbacks[event].filter((i: any) => i !== cb);
+    }
+
+    return { dispatch, on, off, events };
+}