feat(plugin): add PluginStatus component for managing plugin status display and updates

Author: Ajit Kumar

.vscode/settings.json

@@ -40,6 +40,7 @@
     "gapis",
     "hangingpiece",
     "hideloading",
+    "hilightjs",
     "hintrc",
     "hljs",
     "iconsrc",

client/components/pluginStatus.js

@@ -0,0 +1,78 @@
+import { capitalize, getLoggedInUser, hideLoading, showLoading } from 'lib/helpers';
+import select from './dialogs/select';
+
+/**
+ *
+ * @param {object} props
+ * @param {string} props.status
+ * @param {string} props.id
+ * @param {'default'|'button'} [props.style]
+ * @returns
+ */
+export default async function PluginStatus({ status, id, style = 'default' }) {
+  if (!status) return null;
+  const { isAdmin } = (await getLoggedInUser()) || {};
+
+  if (style === 'button') {
+    return (
+      <button
+        type='button'
+        data-id={id}
+        onclick={isAdmin ? changePluginStatus : undefined}
+        title='Plugin status'
+        className={`status-button ${status}`}
+      >
+        {capitalize(status)}
+      </button>
+    );
+  }
+
+  return (
+    <span data-id={id} onclick={isAdmin ? changePluginStatus : undefined} title='Plugin status' className={`status-indicator ${status}`}>
+      {status}
+    </span>
+  );
+}
+
+/**
+ *
+ * @param {MouseEvent} e
+ * @returns
+ */
+async function changePluginStatus(e) {
+  e.preventDefault();
+  e.stopPropagation();
+  try {
+    const { target } = e;
+    const { id } = target.dataset;
+    const status = await select('Change plugin status', ['approve', 'reject']);
+    if (!status) return;
+
+    let reason;
+    if (status === 'reject') {
+      reason = await prompt('Reason', { type: 'textarea' });
+    }
+    showLoading();
+    const res = await fetch('/api/plugin', {
+      method: 'PATCH',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ status, id, reason }),
+    });
+    const data = await res.json();
+    if (data.error) {
+      alert('Error', data.error);
+      return;
+    }
+
+    const pluginRes = await fetch(`/api/plugin/${id}`);
+    const pluginData = await pluginRes.json();
+    target.textContent = capitalize(pluginData.status);
+    target.className = pluginData.status;
+  } catch (error) {
+    alert('Error', error.message);
+  } finally {
+    hideLoading();
+  }
+}

client/components/plugins/index.js

@@ -2,9 +2,9 @@ import './style.scss';
 import AdSense from 'components/adsense';
 import alert from 'components/dialogs/alert';
 import confirm from 'components/dialogs/confirm';
-import prompt from 'components/dialogs/prompt';
 import select from 'components/dialogs/select';
-import { calcRating, capitalize, getLoggedInUser, hideLoading, showLoading, since } from 'lib/helpers';
+import PluginStatus from 'components/pluginStatus';
+import { calcRating, getLoggedInUser, hideLoading, showLoading, since } from 'lib/helpers';
 import Router from 'lib/Router';
 
 export default function Plugins({ user, orderBy, status, name }) {
@@ -75,11 +75,7 @@ function Plugin({
           <div title='Downloads counter'>
             {downloads.toLocaleString()} <span className='icon download' />
           </div>
-          {Boolean(status) && (
-            <span data-id={id} onclick={isAdmin ? changePluginStatus : undefined} title='Plugin status' className={`status-indicator ${status}`}>
-              {status}
-            </span>
-          )}
+          <PluginStatus status={status} id={id} />
           <div>{calcRating(upVotes, downVotes)}</div>
           {comments > 0 && (
             <div>
@@ -154,49 +150,6 @@ async function deletePlugin(e, id) {
   }
 }
 
-/**
- *
- * @param {MouseEvent} e
- * @returns
- */
-async function changePluginStatus(e) {
-  e.preventDefault();
-  e.stopPropagation();
-  try {
-    const { target } = e;
-    const { id } = target.dataset;
-    const status = await select('Change plugin status', ['approve', 'reject']);
-    if (!status) return;
-
-    let reason;
-    if (status === 'reject') {
-      reason = await prompt('Reason', { type: 'textarea' });
-    }
-    showLoading();
-    const res = await fetch('/api/plugin', {
-      method: 'PATCH',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({ status, id, reason }),
-    });
-    const data = await res.json();
-    if (data.error) {
-      alert('Error', data.error);
-      return;
-    }
-
-    const pluginRes = await fetch(`/api/plugin/${id}`);
-    const pluginData = await pluginRes.json();
-    target.textContent = capitalize(pluginData.status);
-    target.className = pluginData.status;
-  } catch (error) {
-    alert('Error', error.message);
-  } finally {
-    hideLoading();
-  }
-}
-
 function Actions({ user, pluginsUser, id, isAdmin }) {
   const $el = <small className='icon-buttons' />;
   const $delete = <span title='delete plugin' className='link icon delete danger' onclick={(e) => deletePlugin(e, id)} />;

client/pages/plugin/index.js

@@ -7,6 +7,7 @@ import confirm from 'components/dialogs/confirm';
 import prompt from 'components/dialogs/prompt';
 import Input from 'components/input';
 import MonthSelect from 'components/MonthSelect';
+import PluginStatus from 'components/pluginStatus';
 import YearSelect from 'components/YearSelect';
 import hilightjs from 'highlight.js';
 import Ref from 'html-tag-js/ref';
@@ -25,6 +26,7 @@ export default async function Plugin({ id: pluginId, section = 'description' })
     id,
     name,
     price,
+    status,
     author,
     version,
     license,
@@ -97,6 +99,7 @@ export default async function Plugin({ id: pluginId, section = 'description' })
               <span className='icon download' /> Install
             </button>
           )}
+          <PluginStatus status={status} id={id} style='button' />
         </div>
         <div className='info-container'>
           <div className='info'>
@@ -392,8 +395,9 @@ function CommentsContainerAndForm({ plugin, listRef, user, id, userComment }) {
     );
   }
 
-  const { comment, vote, id: commentId } = userComment;
+  const { comment, vote } = userComment;
   const form = Ref();
+  let commentId = userComment.id;
 
   return (
     <div className='comments'>
@@ -428,11 +432,12 @@ function CommentsContainerAndForm({ plugin, listRef, user, id, userComment }) {
 
     let $comment;
 
+    commentId = commentId || res.id;
     if (commentId) {
       userComment = await fetch(`/api/comment/${commentId}`).then((userRes) => userRes.json());
       $comment = tag.get(`#comment_${commentId}`);
     } else {
-      userComment = await getUserComment(id);
+      userComment = await getUserComment(commentId);
     }
 
     if (!userComment?.comment) {

server/apis/comment.js

@@ -126,7 +126,7 @@ router.post('/', async (req, res) => {
 
       if (updates.length) {
         await Comment.update(updates, [Comment.ID, alreadyVoted.id]);
-        res.send({ message: 'Comment updated' });
+        res.send({ message: 'Comment updated', id: alreadyVoted.id, comment, vote });
         if (isVoteChanged) {
           updateVoteInPlugin(vote, pluginId);
         }
@@ -136,7 +136,7 @@ router.post('/', async (req, res) => {
         return;
       }
 
-      res.send({ message: 'Comment unchanged' });
+      res.send({ message: 'Comment unchanged', id: alreadyVoted.id, comment: alreadyVoted.comment, vote: alreadyVoted.vote });
       return;
     }
 
@@ -150,7 +150,7 @@ router.post('/', async (req, res) => {
     if (vote !== Comment.VOTE_NULL) {
       updateVoteInPlugin(vote, pluginId);
     }
-    res.send({ message: 'Comment added', comment: row });
+    res.send({ message: 'Comment added', id: row.id, comment, vote });
     voteMessage = vote !== Comment.VOTE_NULL ? `${loggedInUser.name} voted ${Comment.getVoteString(vote)}` : '';
     commentMessage = comment ? `${loggedInUser.name} commented: ${comment}` : '';
     sendEmail(plugin.author_email, plugin.author, `New review for your Acode plugin - ${plugin.name}.`, getNotificationMessage());