extract PostVotes into its own component

ServiceStack · Aug 10, 2023 · a8ba7f3 · a8ba7f3
1 parent 4740ab6
commit a8ba7f3
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 14 deletions.
diff --git a/CreatorKit.ServiceModel/Posts.cs b/CreatorKit.ServiceModel/Posts.cs
@@ -87,7 +87,7 @@ public class CreateThreadLike : ICreateDb<ThreadLike>, IReturnVoid
 [Tag(Tag.Posts)]
 [ValidateIsAuthenticated]
 [AutoFilter(QueryTerm.Ensure, nameof(Comment.AppUserId), Eval = "userAuthIntId()")]
-public class DeleteThreadLike : IDeleteDb<ThreadLike>, IReturnVoid
+public class DeleteThreadLike : IDeleteDb<ThreadLike>, IReturn<EmptyResponse>
 {
     public int ThreadId { get; set; }
 }

diff --git a/CreatorKit/wwwroot/css/app.css b/CreatorKit/wwwroot/css/app.css
@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.3.1 | MIT License | https://tailwindcss.com
+! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -191,6 +191,10 @@ select,
 textarea {
   font-family: inherit;
   /* 1 */
+  font-feature-settings: inherit;
+  /* 1 */
+  font-variation-settings: inherit;
+  /* 1 */
   font-size: 100%;
   /* 1 */
   font-weight: inherit;
@@ -341,6 +345,14 @@ menu {
   padding: 0;
 }
 
+/*
+Reset default styling for dialogs.
+*/
+
+dialog {
+  padding: 0;
+}
+
 /*
 Prevent resizing textareas horizontally by default.
 */
@@ -436,6 +448,9 @@ video {
   --tw-pan-y:  ;
   --tw-pinch-zoom:  ;
   --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
   --tw-ordinal:  ;
   --tw-slashed-zero:  ;
   --tw-numeric-figure:  ;
@@ -483,6 +498,9 @@ video {
   --tw-pan-y:  ;
   --tw-pinch-zoom:  ;
   --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
   --tw-ordinal:  ;
   --tw-slashed-zero:  ;
   --tw-numeric-figure:  ;
@@ -2003,9 +2021,7 @@ select{
 
 .from-white {
   --tw-gradient-from: #fff var(--tw-gradient-from-position);
-  --tw-gradient-from-position:  ;
-  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-from-position);
-  --tw-gradient-to-position:  ;
+  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 

diff --git a/CreatorKit/wwwroot/mjs/components/post.mjs b/CreatorKit/wwwroot/mjs/components/post.mjs
@@ -444,18 +444,79 @@ const Thread = {
 }
 Thread.components['Thread'] = Thread
 
+export const PostVotesEmbed = {
+    template:`
+      <div @click="toggleLike" class="cursor-pointer flex items-center select-none">
+        <svg v-if="!store.userData?.liked" class="text-gray-700 w-8 h-8" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><title>Recommend Post</title><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6.633 10.5c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 0 1 2.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 0 0 .322-1.672V3a.75.75 0 0 1 .75-.75A2.25 2.25 0 0 1 16.5 4.5c0 1.152-.26 2.243-.723 3.218c-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715c.045.422.068.85.068 1.285a11.95 11.95 0 0 1-2.649 7.521c-.388.482-.987.729-1.605.729H13.48a4.53 4.53 0 0 1-1.423-.23l-3.114-1.04a4.501 4.501 0 0 0-1.423-.23H5.904M14.25 9h2.25M5.904 18.75c.083.205.173.405.27.602c.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 0 1-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 10.203 4.167 9.75 5 9.75h1.053c.472 0 .745.556.5.96a8.958 8.958 0 0 0-1.302 4.665a8.97 8.97 0 0 0 .654 3.375Z"/></svg>
+        <svg v-else class="text-gray-700 w-8 h-8" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><title>Unrecommend</title><path fill="currentColor" d="M7.493 18.75c-.425 0-.82-.236-.975-.632A7.48 7.48 0 0 1 6 15.375a7.47 7.47 0 0 1 1.602-4.634c.151-.192.373-.309.6-.397c.473-.183.89-.514 1.212-.924a9.042 9.042 0 0 1 2.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 0 0 .322-1.672V3a.75.75 0 0 1 .75-.75a2.25 2.25 0 0 1 2.25 2.25c0 1.152-.26 2.243-.723 3.218c-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715c.045.422.068.85.068 1.285a11.95 11.95 0 0 1-2.649 7.521c-.388.482-.987.729-1.605.729H14.23a4.53 4.53 0 0 1-1.423-.23l-3.114-1.04a4.501 4.501 0 0 0-1.423-.23h-.777Zm-5.162-7.773a11.969 11.969 0 0 0-.831 4.398a12 12 0 0 0 .52 3.507c.26.85 1.084 1.368 1.973 1.368H4.9c.445 0 .72-.498.523-.898a8.963 8.963 0 0 1-.924-3.977c0-1.708.476-3.305 1.302-4.666c.245-.403-.028-.959-.5-.959H4.25c-.832 0-1.612.453-1.918 1.227Z"/></svg>
+        <span class="ml-2">{{ store.thread?.likesCount || ''}}</span>
+      </div>
+    `,
+    emits:['showDialog'],
+    setup(props, { emit }) {
+        const store = inject('store')
+        const client = useClient()
+        const instance = getCurrentInstance()
+        const { user } = useAuth()
+
+        async function toggleLike() {
+            if (!user.value) {
+                emit('showDialog', 'SignInDialog')
+                return
+            }
+
+            const threadId = store.thread?.id
+            if (!threadId || !store.userData) return
+
+            const liked = store.userData.liked
+
+            store.userData.liked = !liked
+            store.thread.likesCount += liked ? -1 : 1
+
+            const request = !liked
+                ? new CreateThreadLike({ threadId })
+                : new DeleteThreadLike({ threadId })
+            const api = await client.apiVoid(request)
+            if (!api.succeeded) {
+                store.userData.liked = liked
+                store.thread.likesCount += liked ? 1 : -1
+            }
+            instance?.proxy.$forceUpdate()
+        }
+        function refresh() {
+            instance?.proxy.$forceUpdate()
+        }
+
+        watch(() => user.value, refresh)
+
+        return { store, toggleLike }
+    }
+}
+export const PostVotes = {
+    components: { PostVotesEmbed, ThreadDialogs },
+    template:`<div>
+      <PostVotesEmbed @showDialog="showDialog" />
+      <ThreadDialogs :show="show" :comment-id="showTarget?.id" @done="show=''" @showDialog="show=$event" />
+    </div>`,
+    setup() {
+        let show = ref('')
+        let showTarget = ref(null)
+        function showDialog(dialog,comment) {
+            show.value = dialog
+            showTarget.value = comment
+        }
+        return { show, showTarget, showDialog }
+    }
+}
+
 export const PostComments = {
-    components: { ThreadDialogs, Thread, Comment, InputComment, NewReport },
+    components: { ThreadDialogs, Thread, Comment, InputComment, NewReport, PostVotesEmbed },
     template: /*html*/`
     <div class="mt-24 mx-auto flex flex-col w-full max-w-3xl transition-opacity">
-        <div v-if="!hide.includes('threadLikes')" class="mb-12 flex">
-            <div @click="toggleLike" class="cursor-pointer flex items-center select-none">
-                <svg v-if="!store.userData?.liked" class="text-gray-700 w-8 h-8" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><title>Recommend Post</title><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6.633 10.5c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 0 1 2.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 0 0 .322-1.672V3a.75.75 0 0 1 .75-.75A2.25 2.25 0 0 1 16.5 4.5c0 1.152-.26 2.243-.723 3.218c-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715c.045.422.068.85.068 1.285a11.95 11.95 0 0 1-2.649 7.521c-.388.482-.987.729-1.605.729H13.48a4.53 4.53 0 0 1-1.423-.23l-3.114-1.04a4.501 4.501 0 0 0-1.423-.23H5.904M14.25 9h2.25M5.904 18.75c.083.205.173.405.27.602c.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 0 1-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 10.203 4.167 9.75 5 9.75h1.053c.472 0 .745.556.5.96a8.958 8.958 0 0 0-1.302 4.665a8.97 8.97 0 0 0 .654 3.375Z"/></svg>
-                <svg v-else class="text-gray-700 w-8 h-8" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><title>Unrecommend</title><path fill="currentColor" d="M7.493 18.75c-.425 0-.82-.236-.975-.632A7.48 7.48 0 0 1 6 15.375a7.47 7.47 0 0 1 1.602-4.634c.151-.192.373-.309.6-.397c.473-.183.89-.514 1.212-.924a9.042 9.042 0 0 1 2.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 0 0 .322-1.672V3a.75.75 0 0 1 .75-.75a2.25 2.25 0 0 1 2.25 2.25c0 1.152-.26 2.243-.723 3.218c-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715c.045.422.068.85.068 1.285a11.95 11.95 0 0 1-2.649 7.521c-.388.482-.987.729-1.605.729H14.23a4.53 4.53 0 0 1-1.423-.23l-3.114-1.04a4.501 4.501 0 0 0-1.423-.23h-.777Zm-5.162-7.773a11.969 11.969 0 0 0-.831 4.398a12 12 0 0 0 .52 3.507c.26.85 1.084 1.368 1.973 1.368H4.9c.445 0 .72-.498.523-.898a8.963 8.963 0 0 1-.924-3.977c0-1.708.476-3.305 1.302-4.666c.245-.403-.028-.959-.5-.959H4.25c-.832 0-1.612.453-1.918 1.227Z"/></svg>
-                <span class="ml-2">{{ store.thread?.likesCount || ''}}</span>
-            </div>
+        <div class="mb-12 flex">
+          <PostVotesEmbed v-if="!hide.includes('threadLikes')" @showDialog="showDialog" />
         </div>
-        
+      
         <div v-if="user" class="flex justify-center w-full">
             <InputComment :thread-id="threadId" @updated="refresh" />
         </div>
@@ -627,7 +688,7 @@ const Relative = (function () {
 })();
 
 
-const components = { PostComments }
+const components = { PostComments, PostVotes }
 
 export function post(selector, args) {
     const mountOptions = {