@weavy/uikit-react 14.0.3 → 15.0.0

package/src/hooks/useMutateTrashComment.ts

@@ -0,0 +1,37 @@
+import { useContext } from "react";
+import { useMutation, useQueryClient } from "react-query";
+import { WeavyContext } from "../contexts/WeavyContext";
+import { updateCacheItem } from "../utils/cacheUtils";
+
+/// DELETE to trash a Comment
+export default function useMutateTrashComment() {
+
+    const { client } = useContext(WeavyContext);
+    const queryClient = useQueryClient();
+
+    if (!client) {
+        throw new Error('useMutateTrashComment must be used within an WeavyProvider');
+    }
+
+    type MutateProps = {
+        id: number | null,
+        appId: number | null, 
+        parentId: number | null, 
+    }
+
+    const trashPost = async ({ id }: MutateProps) => {
+        const response = await client.post(`/api/comments/${id}/trash`, "POST", "");      
+        return response.json();
+    };
+
+    return useMutation(trashPost, {
+        onSuccess: (data: any, variables: any, context: any) => {
+            updateCacheItem(queryClient, ['comments', variables.parentId], variables.id, (item: MessageType) => {                
+                item.is_trashed = data.is_trashed;
+            });
+        },
+        onMutate: async (variables: any) => {
+         
+        }
+    });
+}

package/src/hooks/useMutateTrashPost.ts

@@ -0,0 +1,36 @@
+import { useContext } from "react";
+import { useMutation, useQueryClient } from "react-query";
+import { WeavyContext } from "../contexts/WeavyContext";
+import { updateCacheItem } from "../utils/cacheUtils";
+
+/// DELETE to trash a Post
+export default function useMutateTrashPost() {
+
+    const { client } = useContext(WeavyContext);
+    const queryClient = useQueryClient();
+
+    if (!client) {
+        throw new Error('useMutateTrashPost must be used within an WeavyProvider');
+    }
+
+    type MutateProps = {
+        id: number | null,
+        appId: number | null,
+    }
+
+    const trashPost = async ({ id }: MutateProps) => {
+        const response = await client.post(`/api/posts/${id}/trash`, "POST", "");
+        return response.json();
+    };
+
+    return useMutation(trashPost, {
+        onSuccess: (data: any, variables: any, context: any) => {
+            updateCacheItem(queryClient, ['posts', variables.appId], variables.id, (item: MessageType) => {
+                item.is_trashed = data.is_trashed;
+            });
+        },
+        onMutate: async (variables: any) => {
+
+        }
+    });
+}

package/src/hooks/useMutateTyping.ts

@@ -13,12 +13,14 @@ export default function useMutateTyping() {
 
 
     type MutateProps = {
-        id: number | null
+        id: number | null, 
+        type: "posts" | "comments" | "messages",
+        location: "apps" | "posts" | "messages" | "files"     
     }
 
-    const mutateTyping = async ({ id }: MutateProps) => {
+    const mutateTyping = async ({ id, type, location }: MutateProps) => {
 
-        const response = await client.post("/api/conversations/" + id + "/typing",
+        const response = await client.post(`/api/${location}/${id}/${type}/typing`,
             "PUT",
             JSON.stringify({}));
 

package/src/hooks/useMutateUnsubscribe.ts

@@ -0,0 +1,36 @@
+import { useContext } from "react";
+import { useMutation, useQueryClient } from "react-query";
+import { WeavyContext } from "../contexts/WeavyContext";
+import { updateCacheItem } from "../utils/cacheUtils";
+
+/// POST to unsubscribe
+export default function useMutateUnsubscribe() {
+
+    const { client } = useContext(WeavyContext);
+    const queryClient = useQueryClient();
+
+    if (!client) {
+        throw new Error('useMutateUnsubscribe must be used within an WeavyProvider');
+    }
+
+    type MutateProps = {
+        id: number | null,
+        appId: number | null, 
+    }
+
+    const unsubscribe = async ({ id }: MutateProps) => {
+        const response = await client.post(`/api/posts/${id}/unsubscribe`, "POST", "");        
+        return response.json();
+    };
+
+    return useMutation(unsubscribe, {
+        onSuccess: (data: any, variables: any, context: any) => {
+            updateCacheItem(queryClient, ['posts', variables.appId], variables.id, (item: MessageType) => {
+                item.is_subscribed = data.is_subscribed;
+            });
+        },
+        onMutate: async (variables: any) => {
+         
+        }
+    });
+}

package/src/hooks/useMutateVote.ts

@@ -0,0 +1,59 @@
+import { useContext } from "react";
+import { useMutation, useQueryClient } from "react-query";
+import { UserContext } from "../contexts/UserContext";
+import { WeavyContext } from "../contexts/WeavyContext";
+import { updateCacheItem } from "../utils/cacheUtils";
+//import usePost from "./usePost";
+
+/// POST to vote on an option
+export default function useMutateVote() {
+    const queryClient = useQueryClient();
+    const { client } = useContext(WeavyContext);
+
+    if (!client) {
+        throw new Error('useMutateVote must be used within an WeavyProvider');
+    }
+    //const { refetch } = usePost(parentId, { enabled: false });
+
+    type MutateProps = {
+        id: number,
+        appId: number,
+        parentId: number
+    }
+
+    const mutateVote = async ({ id }: MutateProps) => {
+        const response = await client.post(`/api/options/${id}/vote`, "POST", "");
+        return response.json();
+    };
+
+    return useMutation(mutateVote, {
+        onSuccess: async (data: any, variables: any, context: any) => {            
+            const response = await client.get("/api/posts/" + variables.parentId);
+            let json = await response.json();            
+            // update cache
+            updateCacheItem(queryClient, ["posts", variables.appId], variables.parentId, (item: MessageType) => {
+                item.options = json.options;
+            });            
+        },
+        onMutate: async (variables: any) => {            
+            updateCacheItem(queryClient, ["posts", variables.appId], variables.parentId, (item: MessageType) => {
+                item.options = item.options?.map((o: PollOptionType) => {
+
+                    if (o.has_voted) {
+                        o.has_voted = false;
+                        let count = o.vote_count || 1;
+                        o.vote_count = count - 1;
+                    } else if (!o.has_voted && o.id === variables.id) {
+                        o.has_voted = true;
+                        let count = o.vote_count || 0;
+                        o.vote_count = count + 1;
+                    }
+
+                    return o;
+                }
+                );
+            });
+        }
+    });
+
+}

package/src/hooks/usePost.ts

@@ -0,0 +1,20 @@
+import { useContext } from "react";
+import { useQuery } from "react-query";
+import { WeavyContext } from "../contexts/WeavyContext";
+
+/// GET a specific post
+export default function usePost(id: number, options: any) {
+    const { client } = useContext(WeavyContext);
+
+    if (!client) {
+        throw new Error('usePost must be used within an WeavyProvider');
+    }
+
+    const getPost = async () => {
+        const response = await client.get("/api/posts/" + id);
+        return response.json();        
+    };
+
+
+    return useQuery<MessageType>(["post", id], getPost, options);
+}

package/src/hooks/usePosts.ts

@@ -0,0 +1,21 @@
+import { useContext } from "react";
+import { useQuery } from "react-query";
+import { WeavyContext } from "../contexts/WeavyContext";
+
+/// GET a specific Posts app
+export default function usePosts(id: string, options: any) {
+    const { client } = useContext(WeavyContext);
+
+    if (!client) {
+        throw new Error('usePosts must be used within an WeavyProvider');
+    }
+
+    const getPosts = async () => {
+        const response = await client.get("/api/apps/" + id);
+        const data = await response.json();
+        return data;
+    };
+
+
+    return useQuery<PostsType>(["posts", id], getPosts, options);
+}

package/src/hooks/usePostsList.ts

@@ -0,0 +1,31 @@
+import { useContext } from "react";
+import { useInfiniteQuery, useQuery } from "react-query";
+import { WeavyContext } from "../contexts/WeavyContext";
+
+/// GET all posts in an app
+export default function usePostsList(id: number | null, options: any) {
+    const PAGE_SIZE = 10;
+    const { client } = useContext(WeavyContext);
+
+    if (!client) {
+        throw new Error('usePostsList must be used within an WeavyProvider');
+    }
+
+    const getPosts = async (opt: any) => {
+        let skip = opt.pageParam || 0;
+        const response = await client.get("/api/apps/" + id + "/posts?orderby=createdat+desc&skip=" + skip + "&top=" + PAGE_SIZE);
+        const data = await response.json();        
+        
+        return data;        
+    };
+    var opts = {
+        ...options, 
+        getNextPageParam: (lastPage:any, pages:any) => { 
+            if (lastPage?.end < lastPage?.count)  {                
+                return pages.length * PAGE_SIZE;
+            }
+        }        
+    };
+        
+    return useInfiniteQuery<MessagesResult>(['posts', id], getPosts, opts)
+}

package/src/hooks/useReactionList.ts

@@ -0,0 +1,21 @@
+import { useContext } from "react";
+import { useQuery } from "react-query";
+import { WeavyContext } from "../contexts/WeavyContext";
+
+/// GET who reacted on an entity
+export default function useReactionList(id: number, type: string, options: any) {
+    const { client } = useContext(WeavyContext);
+
+    if (!client) {
+        throw new Error('useReactionList must be used within an WeavyProvider');
+    }
+
+    const getReactions = async () => {
+        const response = await client.get(`/api/${type}/${id}/reactions`);
+        const data = await response.json();
+        return data;
+    };
+
+
+    return useQuery<ReactionsResult>(["reactions", id, type], getReactions, options);
+}

package/src/hooks/useSearchUsers.ts

@@ -4,7 +4,7 @@ import { WeavyContext } from "../contexts/WeavyContext";
 
 /// GET users by search query
 export default function useSearchUsers(text: string, options: any) {
-    const PAGE_SIZE = 10;
+    const PAGE_SIZE = 25;
     const { client } = useContext(WeavyContext);
 
     if (!client) {
@@ -12,7 +12,7 @@ export default function useSearchUsers(text: string, options: any) {
     }
 
     const getUsers = async () => {
-        const response = await client.get("/api/users?q=" + text + "&skip=0&top=" + PAGE_SIZE);        
+        const response = await client.get(`/api/users/autocomplete?q=${text}&skip=0&top=${PAGE_SIZE}`);        
         const data = await response.json();
         return data;
     };

package/src/hooks/useSessionState.ts

@@ -0,0 +1,23 @@
+import { useState, useEffect } from 'react';
+
+const prefix = "wy-";
+
+function getSessionStorageOrDefault<T>(key: string, defaultValue: T | (() => T)) {
+  const stored = sessionStorage.getItem(prefix + key);
+  if (!stored) {
+    return defaultValue;
+  }
+  return JSON.parse(stored) as T;
+}
+
+export function useSessionState<S>(key: string, defaultValue: S | (() => S)):[S, React.Dispatch<React.SetStateAction<S>>] {
+  const [value, setValue] = useState<S>(
+    getSessionStorageOrDefault<S>(key, defaultValue) as S | (() => S)
+  );
+
+  useEffect(() => {
+    sessionStorage.setItem(prefix + key, JSON.stringify(value));
+  }, [key, value]);
+
+  return [value, setValue];
+}

package/src/hooks/useUnload.ts

@@ -0,0 +1,19 @@
+import { useRef, useEffect } from 'react';
+
+const useUnload = (fn: Function) => {
+  const cb = useRef(fn); // init with fn, so that type checkers won't assume that current might be undefined
+
+  useEffect(() => {
+    cb.current = fn;
+  }, [fn]);
+
+  useEffect(() => {
+    const onUnload = (...args: any[]) => cb.current?.(...args);
+
+    window.addEventListener("beforeunload", onUnload);
+
+    return () => window.removeEventListener("beforeunload", onUnload);
+  }, []);
+};
+
+export default useUnload;

package/src/hooks/useUpdateEffect.ts

@@ -0,0 +1,16 @@
+import { DependencyList, EffectCallback, useEffect } from 'react'
+
+import useIsFirstRender from './useIsFirstRender';
+
+function useUpdateEffect(effect: EffectCallback, deps?: DependencyList) {
+  const isFirst = useIsFirstRender()
+
+  useEffect(() => {
+    if (!isFirst) {
+      return effect()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps)
+}
+
+export default useUpdateEffect

package/src/hooks/useVotes.ts

@@ -0,0 +1,21 @@
+import { useContext } from "react";
+import { useQuery } from "react-query";
+import { WeavyContext } from "../contexts/WeavyContext";
+
+/// GET votes for an option
+export default function useVotes(id: number, options: any) {
+    const { client } = useContext(WeavyContext);
+
+    if (!client) {
+        throw new Error('useVotes must be used within an WeavyProvider');
+    }
+
+    const getVotes = async () => {
+        const response = await client.get(`/api/options/${id}/voters`);
+        const data = await response.json();
+        return data;
+    };
+
+
+    return useQuery<UserType[]>(["votes", id], getVotes, options);
+}

package/src/index.ts

@@ -8,6 +8,8 @@ import ConversationBadge from './components/ConversationBadge';
 import ConversationList from './components/ConversationList';
 import Conversation from './components/Conversation';
 import Chat from './components/Chat';
+import Posts from './components/Posts'
+import Files from './components/Files'
 import Button from './ui/Button';
 import Dropdown from './ui/Dropdown';
 import Icon from './ui/Icon';
@@ -23,8 +25,10 @@ export {
     Messenger,
     ConversationList,
     Conversation,
-    Chat,
+    Chat,    
     ConversationBadge,
+    Posts,
+    Files,
     Button,
     Dropdown,
     Icon,

package/src/scss/theme/_appbar.scss

@@ -81,6 +81,10 @@
     }
   }
 }
+.wy-appbar-text-trashed {
+  text-decoration: line-through;
+}
+
 
 // floating toolbars (mainly for pdf preview, but can be also be used for other things)
 .wy-toolbars-bottom {
@@ -115,10 +119,6 @@
   background-color: var(--wy-component-background-color);
   color: var(--wy-component-color);
   box-shadow: #{colors.$outline-variant} 0px -1px 0px 0px inset;
-
-  span {
-    margin-left: .25rem;
-  }
 }
 
 .wy-toolbar-center {
@@ -131,6 +131,10 @@
   }
 }
 
+.wy-toolbar-text {
+  margin-left: .25rem;
+}
+
 .wy-footerbars {
   padding-bottom: vars.$footerbar-height;
 

package/src/scss/theme/_card.scss

@@ -67,6 +67,8 @@
   position: absolute;
   top: min(.25rem, calc(100% - 2.5rem)); // Account for small heights
   right: .25rem;
+  align-items: center;
+  display: flex;
   
   > .wy-button-icon, > .wy-dropdown > .wy-button-icon {
     background-clip: content-box;

package/src/scss/theme/_comment-editor-cm.scss

@@ -20,6 +20,10 @@
     color: #{colors.$outline};
   }
 
+  .ͼ2 .cm-content {
+    caret-color: #{colors.$on-background};
+  }
+
   .ͼ1.cm-editor {
     @extend %comment-editor-textfield;
 
@@ -47,7 +51,7 @@
     }
   }
 
-  .wy-is-invalid + .cm-editor {
+  .wy-is-invalid + .cm-editor, .wy-is-invalid .cm-editor {
     border-color: colors.$error !important;
   }
   // autocomplete dropdown menu

package/src/scss/theme/_comments.scss

@@ -15,7 +15,6 @@
   @include text.truncate;
 }
 
-
 .wy-comment {
   --wy-component-background-color: #{colors.$surface-3};
   --wy-component-color: #{colors.$on-surface};
@@ -45,15 +44,18 @@
   }
 }
 
-/*.wy-comment-header {
-  //padding-right: .25rem;
-}*/
-
 .wy-comment-body {
-
   flex: 1 0 auto;
   z-index: 1;
-    
+
+  .wy-image-grid, .wy-embed, .wy-content, .wy-list, .wy-poll {
+    // spacing between content
+    margin-bottom: 1rem;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
 }
 
 .wy-comment-content {
@@ -63,4 +65,3 @@
 }
 
 
-

package/src/scss/theme/_conversations.scss

@@ -2,6 +2,10 @@
 @use "base/colors";
 @use "base/text";
 
+.wy-conversations{
+    position:relative;
+}
+
 .wy-conversation {
   display: flex;
   position: relative;

package/src/scss/theme/_files.scss

@@ -6,6 +6,7 @@
 .wy-filename {
   font-size: vars.$font-size-sm;
   @include text.truncate;
+  text-align: center;
 }
 
 .wy-files-dragging {
@@ -24,87 +25,7 @@
     bottom: 0;
     right: 0;
   }
-}
-
-
-
-.wy-upload-progress-item {
-  flex-direction: column;
-  padding: 0.75rem .25rem;
-
-  .wy-upload-progress-item-content {
-    flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    line-height: 1.25rem;
-  }
-
-  .wy-upload-progress-success {
-    display: flex;
-    align-items: center;
-  }
-
-  .wy-upload-progress {
-    display: flex;
-    width: 100%;
-
-    progress {
-      flex: 1;
-      height: 0.5rem;
-      accent-color: colors.$primary;
-    }
-  }
-}
-
-.wy-upload-error {
-  align-items: flex-start;  
-  flex-direction: column;
-  white-space: normal;
-
-  .wy-upload-error-title {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    line-height: 1.25rem;
-  }
-
-  .wy-upload-error-text {
-    color: colors.$error;
-  }
-
-  .wy-upload-error-actions {
-    white-space: nowrap;
-  }
-}
-
-.wy-file-upload-errors {
-  display: flex;
-  flex-direction: column;
-
-  .wy-upload-error-row {
-    display: flex;
-    margin-bottom: 0.5rem;
-    align-items: center;
-    column-gap: 1rem;
-
-    .wy-upload-error-row-title {
-      flex: 1;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-
-    .wy-upload-error-row-conflict {
-      background-color: colors.$error-container;
-      color: colors.$on-error-container;
-    }
-
-    .wy-upload-error-row-error {
-      color: colors.$error;
-    }
-  }
-}
+} 
 
 .wy-table-files {
   thead {

package/src/scss/theme/_icons.scss

@@ -71,7 +71,7 @@
 }
 
 // icons normally inherit the text color of its parent
-.wy-icon:not([class*="wy-icon-"]):not([class*="wy-kind-"]) * {
+.wy-icon:not([class*="wy-icon-"]):not([class*="wy-kind-"]):not([data-icon=progress]) * {
   fill: currentColor;
 }
 
@@ -92,7 +92,6 @@
   }
 }
 
-
 // theme icons
 .wy-icon-primary * {
   fill: colors.$primary;
@@ -147,7 +146,6 @@
   fill: #{colors.$gray};
 }
 
-
 // file type icons
 [class*="wy-kind-"] * {
   fill: colors.$gray;
@@ -196,3 +194,23 @@
 .wy-ext-pdf * {
   fill: colors.$red;
 }
+
+
+// progress icon
+[data-icon=progress] {
+
+  &.wy-icon-primary {
+    color: colors.$primary;
+  }
+
+  :first-child {
+    fill: none;
+    stroke: colors.$surface-variant;
+  }
+
+  :last-child {
+    fill: none;
+    stroke: currentColor;
+  }
+}
+