Merge pull request #22 from Acode-Foundation/feat-supported_editor

feat: enhance plugin management with editor support updates

Author: deadlyjack

client/components/plugins/ace-logo.png

@@ -7,47 +7,58 @@ 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 }) {
+export default async function Plugins({ user, orderBy, status, name, editor }) {
   const el = <div className='plugins' data-msg='loading...' />;
 
-  (async () => {
-    try {
-      showLoading();
-      let url = '/api/plugin';
-
-      if (user) {
-        url += `?user=${user}`;
-      } else if (status !== undefined) {
-        url += `?status=${status}`;
-      } else if (name) {
-        url += `?name=${name}`;
-      } else if (orderBy) {
-        url += `?orderBy=${orderBy}`;
-      }
+  try {
+    showLoading();
+    const params = new URLSearchParams();
+
+    if (user) {
+      params.set('user', user);
+    }
+
+    if (status !== undefined) {
+      params.set('status', status);
+    }
+
+    if (name) {
+      params.set('name', name);
+    }
+
+    if (editor) {
+      params.set('supported_editor', editor);
+    }
 
-      const res = await fetch(url);
-      const { isAdmin, id: userId } = (await getLoggedInUser()) || {};
-      const plugins = await res.json();
-      const adsPosition = [2, 15, 28];
-
-      el.setAttribute('data-msg', 'No plugins found. :(');
-      for (let i = 0; i < plugins.length; i++) {
-        const plugin = plugins[i];
-        if (adsPosition.includes(i) || (i > 33 && Math.random() < 0.1)) {
-          el.append(<AdSense className='plugin' style={{ position: 'relative' }} />);
-        }
-        el.append(<Plugin {...plugin} isAdmin={isAdmin} userId={userId} />);
+    if (orderBy) {
+      params.set('orderBy', orderBy);
+    }
+
+    const query = params.toString();
+    const url = `/api/plugin${query ? `?${query}` : ''}`;
+
+    const res = await fetch(url);
+    const { isAdmin, id: userId } = (await getLoggedInUser()) || {};
+    const plugins = await res.json();
+    const adsPosition = [2, 15, 28];
+
+    el.setAttribute('data-msg', 'No plugins found. :(');
+    for (let i = 0; i < plugins.length; i++) {
+      const plugin = plugins[i];
+      if (adsPosition.includes(i) || (i > 33 && Math.random() < 0.1)) {
+        el.append(<AdSense className='plugin' style={{ position: 'relative' }} />);
       }
-    } catch (error) {
-      el.append(
-        <div className='error'>
-          <h2>{error.error}</h2>
-        </div>,
-      );
-    } finally {
-      hideLoading();
+      el.append(<Plugin {...plugin} isAdmin={isAdmin} userId={userId} />);
     }
-  })();
+  } catch (error) {
+    el.append(
+      <div className='error'>
+        <h2>{error.error}</h2>
+      </div>,
+    );
+  } finally {
+    hideLoading();
+  }
 
   return el;
 }
@@ -62,12 +73,14 @@ function Plugin({
   downloads,
   votes_up: upVotes,
   user_id: pluginUser,
-  package_updated_at: updatedAt,
   votes_down: downVotes,
   comment_count: comments,
+  supported_editor: editorType,
+  package_updated_at: updatedAt,
 }) {
   return (
     <a href={`/plugin/${id}`} className='plugin'>
+      <span className={`badge editor-type ${editorType}`} />
       <div className='plugin-icon' style={{ backgroundImage: `url(/plugin-icon/${id})` }} />
       <div className='plugin-info'>
         <h2 style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{name}</h2>

client/components/plugins/cm-logo.svg

@@ -12,6 +12,7 @@
   }
 
   .plugin {
+    position: relative;
     width: calc(33% - 30px);
     min-width: 250px;
     margin: 10px 0 0 10px;
@@ -22,6 +23,60 @@
     border-radius: 4px;
     text-decoration: none;
 
+    .badge {
+      position: absolute;
+      top: 10px;
+      left: 10px;
+      display: inline-block;
+      height: 20px;
+      width: 20px;
+      padding: 2px 6px;
+      border-radius: 3px;
+      font-size: 12px;
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: 100%;
+
+      &.editor-type {
+        &.ace {
+          background-image: url(./ace-logo.png);
+        }
+
+        &.cm {
+          background-image: url(./cm-logo.svg);
+        }
+
+        &.all {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 40px;
+
+          &::before,
+          &::after {
+            display: inline-block;
+            height: 20px;
+            width: 20px;
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: 100%;
+          }
+
+          &::before {
+            content: '';
+            background-image: url(./ace-logo.png);
+            margin-right: 2px;
+          }
+
+          &::after {
+            content: '';
+            background-image: url(./cm-logo.svg);
+            margin-left: 2px;
+          }
+        }
+      }
+    }
+
     h2 {
       margin-bottom: 5px;
     }

client/components/plugins/index.js

@@ -63,6 +63,7 @@ window.onload = async () => {
   Router.add('/plugin/:id/:section?', (params) => loadModule('plugin', params));
   Router.add('/user/:userId?', (params) => loadModule('user', params));
   Router.add('/earnings', (_params, query) => loadModule('earnings', query));
+  Router.add('/update-plugin-editor/:id', (params) => loadModule('updatePluginEditor', params));
   Router.add('/:filename(index.html?)?', () => loadModule('home'));
 
   Router.add('*', () => {

client/components/plugins/style.scss

@@ -39,8 +39,15 @@ export default async function Plugin({ id: pluginId, section = 'description' })
     comment_count: commentCount,
     package_updated_at: updatedAt,
     author_verified: authorVerified,
+    supported_editor: supportedEditor,
   } = plugin;
 
+  const getEditorDisplayName = (editor) => {
+    if (editor === 'cm') return 'CodeMirror';
+    if (editor === 'ace') return 'Ace';
+    return 'Both Editors';
+  };
+
   const user = await getLoggedInUser();
   const userComment = await getUserComment(pluginId);
   const sectionDescription = Ref();
@@ -140,6 +147,11 @@ export default async function Plugin({ id: pluginId, section = 'description' })
                 <span>{license}</span>
               </div>
             )}
+            {supportedEditor && (
+              <div className='chip editor-badge' data-editor={supportedEditor}>
+                <span>{getEditorDisplayName(supportedEditor)}</span>
+              </div>
+            )}
             {votesUp + votesDown > 0 && (
               <div className='chip' onclick={() => changeSection('comments')}>
                 <img src='/thumbs-up.gif' alt='thumbs up' />
@@ -469,7 +481,6 @@ function CommentsContainerAndForm({ plugin, listRef, user, id, userComment }) {
     try {
       const deleted = await deleteComment(commentId);
       if (!deleted) return;
-      alert('SUCCESS', 'Comment deleted successfully');
       commentId = null;
       form.el.reset();
       for (const input of form.getAll('input[name=vote]')) {

client/main.js

@@ -9,6 +9,28 @@
     color: #39f;
   }
 
+  .editor-badge {
+    font-weight: 600;
+
+    &[data-editor='cm'] {
+      background: rgba(16, 185, 129, 0.2) !important;
+      border: 1px solid #10b981;
+      color: #10b981;
+    }
+
+    &[data-editor='ace'] {
+      background: rgba(239, 68, 68, 0.2) !important;
+      border: 1px solid #ef4444;
+      color: #ef4444;
+    }
+
+    &[data-editor='all'] {
+      background: rgba(59, 130, 246, 0.2) !important;
+      border: 1px solid #3b82f6;
+      color: #3b82f6;
+    }
+  }
+
   .plugin-head {
     height: fit-content;
     border-bottom: solid 1px rgba(234, 234, 234, 0.486);