@weavy/uikit-react 14.0.3 → 15.0.0

package/src/components/PostView.tsx

@@ -0,0 +1,194 @@
+import React, { useContext, useState } from 'react';
+import dayjs from 'dayjs';
+import Dropdown from '../ui/Dropdown';
+import Icon from '../ui/Icon';
+import { ReactionsList, ReactionsMenu } from './Reactions';
+import Comments from './Comments';
+import Image, { ImageGrid } from './Image';
+import { PreviewContext } from "../contexts/PreviewContext";
+import Attachment from './Attachment';
+import Avatar from './Avatar';
+import Embed from './Embed';
+import { UserContext } from '../contexts/UserContext';
+import useMutateTrashPost from '../hooks/useMutateTrashPost';
+import CommentCount from './CommentCount';
+import useMutateSubscribe from '../hooks/useMutateSubscribe';
+import useMutateUnsubscribe from '../hooks/useMutateUnsubscribe';
+import Poll from './Poll';
+import MeetingCard from './MeetingCard';
+
+type Props = {
+    appId: number,
+    id: number,
+    text: string,
+    html: string,
+    created_at: string,
+    modified_at?: string,
+    created_by: MemberType,
+    trashed_at?: string,
+    attachments: FileType[],
+    reactions: ReactableType[],
+    embed: EmbedType | undefined,
+    comment_count?: number,
+    is_subscribed: boolean,
+    options?: PollOptionType[],
+    meeting?: MeetingType,
+    onEdit: (e: any) => void
+}
+
+const PostView = ({ appId, id, html, created_at, modified_at, created_by, attachments, reactions, embed, comment_count, is_subscribed, options, meeting, onEdit }: Props) => {
+    const { user } = useContext(UserContext);
+    const [loadComments, setLoadComments] = useState<boolean>(false);
+    const [showComments, setShowComments] = useState<boolean>(false);
+    const { openPreview, setPreviewFiles } = useContext(PreviewContext);
+    const date = dayjs.utc(created_at).tz(dayjs.tz.guess());
+    const trashPost = useMutateTrashPost();
+    const subscribe = useMutateSubscribe();
+    const unsubscribe = useMutateUnsubscribe();
+
+    let images = attachments?.filter((a: FileType) => a.kind === "image" && a.thumbnail_url);
+    let files = attachments?.filter((a: FileType) => a.kind !== "image" || !a.thumbnail_url);
+
+    const handleCommentsClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+        e.preventDefault();
+        setShowComments((previous) => !previous)
+        setLoadComments(true);
+    }
+
+    const handlePreviewClick = (e: React.MouseEvent<HTMLInputElement>, attachmentId: number) => {
+        e.preventDefault();
+        setPreviewFiles(attachments);
+        openPreview(attachmentId);
+    }
+
+    const handleTrash = () => {
+        trashPost.mutate({ id: id, appId: appId });
+    }
+
+    const handleSubscription = () => {
+        if (is_subscribed) {
+            unsubscribe.mutate({ id: id, appId: appId });
+        } else {
+            subscribe.mutate({ id: id, appId: appId });
+        }
+
+    }
+
+    return (
+        <div>
+            <div className='wy-item wy-item-lg'>
+                <Avatar src={created_by.avatar_url} size={48} name={created_by.display_name} />
+                <div className='wy-item-body'>
+                    <div className='wy-item-row'>
+                        <div className='wy-item-title'>{created_by.display_name}</div>
+                    </div>
+                    <div className='wy-item-row'>
+                        <div className='wy-item-text'>
+                            <time dateTime={created_at} title={date.format('LLLL')}>{date.fromNow()}</time>
+                            {modified_at &&
+                                <time dateTime={modified_at}> · edited</time>
+                            }
+                        </div>
+                    </div>
+                </div>
+
+                <div className='wy-item-actions wy-item-actions-top'>
+                    <Dropdown.UI directionX='left'>
+
+                        {/* subscribe / unsubscribe */}
+                        <Dropdown.Item onClick={handleSubscription}>
+                            {is_subscribed &&
+                                <>
+                                    <Icon.UI name="bell-off"></Icon.UI> Unsubscribe
+                                </>
+                            }
+                            {!is_subscribed &&
+                                <>
+                                    <Icon.UI name="bell"></Icon.UI> Subscribe
+                                </>
+                            }
+
+                        </Dropdown.Item>
+
+                        {/* edit action */}
+                        {user.id === created_by.id &&
+                            <Dropdown.Item onClick={onEdit}>
+                                <Icon.UI name="pencil"></Icon.UI> Edit
+                            </Dropdown.Item>
+                        }
+
+                        {/* trash action */}
+                        {user.id === created_by.id &&
+                            <Dropdown.Item onClick={handleTrash}>
+                                <Icon.UI name="trashcan"></Icon.UI> Trash
+                            </Dropdown.Item>
+                        }
+                    </Dropdown.UI>
+                </div>
+
+            </div>
+
+            {/* image grid */}
+            {images && !!images.length && <ImageGrid>
+                {images.map((a: FileType) =>
+                    <React.Fragment key={a.id} >
+                        {a.download_url &&
+                            <Image onClick={(e) => handlePreviewClick(e, a.id)} src={a.download_url} previewSrc={a.preview_url} width={a.width} height={a.height} />
+                        }
+                    </React.Fragment>
+                )}
+            </ImageGrid>}
+
+            {/* embeds */}
+            {embed &&
+                <Embed embed={embed} />
+            }
+
+            <div className='wy-post-body'>
+                <div className='wy-content' dangerouslySetInnerHTML={{ __html: html }}>
+                    {/* markdown */}
+
+                </div>
+
+                {/* poll */}
+                {options && options.length > 0 &&
+                    <Poll appId={appId} parentId={id} options={options} />
+                }
+
+                {/* files */}
+                {files && !!files.length && <div className="wy-list wy-list-bordered">
+                    {files.map((a: FileType) =>
+                        <Attachment key={a.id} onClick={(e) => handlePreviewClick(e, a.id)} name={a.name} previewFormat={a.kind} provider={a.provider} url={a.download_url} previewUrl={a.provider ? a.external_url : a.preview_url} mediaType={a.media_type} kind={a.kind} size={a.size} />
+                    )}
+                </div>}
+
+                {/* meeting */}
+                {meeting &&
+                    <MeetingCard meeting={meeting}/>
+                }
+            </div>
+
+            <div className='wy-post-footer'>
+                <div className='wy-reactions-line'>
+                    {/* reactions */}
+                    <ReactionsList id={id} type="posts" parentId={appId} reactions={reactions} />
+                    <ReactionsMenu id={id} type="posts" parentId={appId} reactions={reactions} />
+                </div>
+
+                {/* comment count */}
+                <a href="#" className='wy-meta' onClick={(e) => handleCommentsClick(e)}>
+                    <CommentCount id={id} count={comment_count || 0} />
+                </a>
+            </div>
+
+            {/* comments */}
+            {loadComments &&
+                <div {...(showComments ? {} : { "hidden": true })}>
+                    <Comments appId={appId} parentId={id} type="posts" />
+                </div>
+            }
+        </div>
+    )
+}
+
+export default PostView;

package/src/components/Posts.tsx

@@ -0,0 +1,59 @@
+import React, { useState, useContext, useEffect, useCallback } from 'react';
+import { WeavyContext } from '../contexts/WeavyContext';
+import { PostsProps } from '../types/Posts';
+import usePosts from '../hooks/usePosts';
+import classNames from 'classnames';
+import Editor from './Editor';
+import PostList from './PostList';
+import useMutatePost from '../hooks/useMutatePost';
+
+const Posts = ({ uid, className }: PostsProps) => {
+
+    const { client } = useContext(WeavyContext);
+    const [appId, setAppId] = useState<number | null>(null);    
+    const addPostMutation = useMutatePost();
+    if (!client) {
+        throw new Error('Weavy Posts component must be used within an WeavyProvider');
+    }
+
+    // init app
+    const { isLoading, data } = usePosts(uid, {});
+
+    useEffect(() => {
+        if (data) {
+            setAppId(data.id);
+        } else {
+            setAppId(null);
+        }
+    }, [data]);
+
+    const handleCreate = async (text: string, blobs: BlobType[], attachments: FileType[], meetingId: number | null, embed: number | null, options: PollOptionType[]) => {
+        
+        await addPostMutation.mutateAsync({ appId: appId, text: text, blobs: blobs, meeting: meetingId, embed: embed, options: options }, {
+            onSuccess: (data: MessageType) => {
+                
+            }
+        });
+    } 
+
+    return (
+        <div className={classNames("wy-posts", className)}>
+            
+            {!isLoading && !data &&
+                <div>No posts app with the contextual id <strong>{uid}</strong> was found.</div>
+            }
+            {appId && data &&
+                <div className='wy-post'>
+                    <Editor editorType='posts' editorLocation='apps' appId={appId} placeholder={'Create a post'} buttonText='Post' onSubmit={handleCreate} showAttachments={true} showCloudFiles={true} showEmbeds={true} showPolls={true} useDraft={true}/>
+                </div>
+            }        
+            
+            {appId &&
+                <PostList appId={appId} />
+            }
+        
+        </div>
+    )
+}
+
+export default Posts;

package/src/components/Preview.tsx

@@ -85,7 +85,7 @@ function mediaLoaded(event: any) {
     var src = event.target;
     if (src.tagName === 'VIDEO' || src.tagName === 'AUDIO') {
         if (src.classList.contains("wy-loading")) {
-            console.log("loaded")
+            //console.log("loaded")
             src.classList.add("wy-loaded");
         }
     }
@@ -158,17 +158,15 @@ export const PreviewMedia = ({ format, src, name, mediaType }: MediaProps) => {
         <>
             <video ref={mediaRef} className="wy-content-video" controls crossOrigin="use-credentials" autoPlay>
                 <source src={src} type={mediaType} />
-                <PreviewIcon src={src} name={name} icon="file-video" download />
+                <PreviewIcon src={src} icon="file-video" />
             </video>
             <Spinner.UI />
         </>
-    :
+        :
         <>
-            <PreviewIcon src={src} name={name} icon="file-music" download>
-                <audio ref={mediaRef} className="wy-content-audio" controls crossOrigin="use-credentials" autoPlay>
-                    <source src={src} type={mediaType} />
-                </audio>
-            </PreviewIcon>
+            <audio ref={mediaRef} className="wy-content-audio" controls crossOrigin="use-credentials" autoPlay>
+                <source src={src} type={mediaType} />
+            </audio>
         </>
     );
 }
@@ -235,14 +233,14 @@ export const PreviewEmbed = ({ src, name, icon, provider }: EmbedProps) => {
     useEffect(() => {
         if (embedElement) {
             let embedFallbackTimeout = setTimeout(function () {
-                console.log("fallback");
+                //console.log("fallback");
                 embedElement.classList.add("wy-fallback");
               }, 2500)
 
             let embedLoaded = (event: any) => {
                 var obj = event.target;
                 if (obj.tagName === 'OBJECT' && obj.classList.contains("wy-loading") && !obj.classList.contains("wy-loaded")) {
-                  console.log("loaded");
+                  //console.log("loaded");
                   obj.classList.add("wy-loaded");
                   clearTimeout(embedFallbackTimeout);
                 }
@@ -266,7 +264,7 @@ export const PreviewEmbed = ({ src, name, icon, provider }: EmbedProps) => {
 
             <Spinner.UI />
 
-            <PreviewIcon src={src} name={name} icon={icon} provider={provider} className="wy-content-iframe-fallback" />
+            <PreviewIcon src={src} icon={icon} provider={provider} className="wy-content-iframe-fallback" />
         </>
     );
 }
@@ -275,13 +273,11 @@ type IconProps = {
     children?: React.ReactNode,
     src: string,
     icon: string,
-    name: string,
     provider?: string,
-    download?: boolean,
     className?: string
 }
 
-export const PreviewIcon = ({ children, src, icon, name, provider, download = false, className }: IconProps) => {
+export const PreviewIcon = ({ children, src, icon, provider, className }: IconProps) => {
     return (
         <div className={classNames("wy-content-icon", className)}>
             <div className="wy-content-icon">
@@ -291,12 +287,9 @@ export const PreviewIcon = ({ children, src, icon, name, provider, download = fa
                 {provider ?
                     <>
                         <span>No preview available. </span> 
-                        <a href={src} target="_blank" title={name}>{`Open in ${provider}?`}</a>
-                    </>
-                    : download ?
-                        <a href={src} target="_top" download>{name}</a>
-                        :
-                        <a href={src} target="_blank">{name} <Icon.UI name="open-in-new" size={1} /></a>
+                        <a href={src} target="_blank">{`Open in ${provider}?`}</a>
+                    </>                    
+                    : <span>No preview available :(</span> 
                 }
             </div>
             {children}
@@ -334,7 +327,7 @@ export const Preview = ({ client, src, link, format, name, icon, width, height,
                 <PreviewText key={src} src={src} />
             }
             {format === "code" &&
-                <PreviewText key={src} src={src} html code />
+                <PreviewText key={src} src={src} html={!/^(?:blob:|data:)/.test(src)} code />
             }
             {format === "html" &&
                 <PreviewText key={src} src={src} html />
@@ -344,9 +337,9 @@ export const Preview = ({ client, src, link, format, name, icon, width, height,
             }
             {format === "none" && (
                 link ?
-                    <PreviewIcon src={src} name={name} icon={icon} provider={provider} />
+                    <PreviewIcon src={link} icon={icon} provider={provider} />
                 :
-                    <PreviewIcon src={src} name={name} icon={icon} download />
+                    <PreviewIcon src={src} icon={icon} />
             )}
         </>
     )