Improve code

datlechin · Jun 12, 2024 · 4c1fe17 · 4c1fe17
1 parent 52d313a
commit 4c1fe17
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 21 deletions.
diff --git a/js/src/forum/components/DiscussionOverview.tsx b/js/src/forum/components/DiscussionOverview.tsx
@@ -3,6 +3,7 @@ import type Mithril from 'mithril';
 import Discussion from 'flarum/common/models/Discussion';
 import shortTime from '../helpers/shortTime';
 import Link from 'flarum/common/components/Link';
+import Tooltip from 'flarum/common/components/Tooltip';
 import avatar from 'flarum/common/helpers/avatar';
 
 export default class DiscussionOverview<Attrs> extends Component {
@@ -13,9 +14,15 @@ export default class DiscussionOverview<Attrs> extends Component {
   }
   view() {
     const discussion = this.discussion;
-    const posts = Object.keys(discussion.store.data.posts).map((key) => discussion.store.data.posts[key]);
+
+    if (!discussion) {
+      return null;
+    }
+
+    const posts = discussion?.posts();
+    const participantCount = discussion?.attribute('participantCount');
+    const lastPost = posts ? posts[posts.length - 1] : null;
     const users = Object.keys(discussion.store.data.users).map((key) => discussion.store.data.users[key]);
-    const lastPost = posts[posts.length - 1];
 
     return (
       <>
@@ -25,8 +32,8 @@ export default class DiscussionOverview<Attrs> extends Component {
             <div className="time">{shortTime(discussion?.createdAt())}</div>
           </li>
           <li className="last-reply">
+            <h4>{app.translator.trans('datlechin-discussion-overview.forum.last_reply')}</h4>
             <Link href={app.route.post(lastPost)}>
-              <h4>{app.translator.trans('datlechin-discussion-overview.forum.last_reply')}</h4>
               <div className="time">
                 {avatar(lastPost.user())}
                 {shortTime(discussion?.lastPostedAt())}
@@ -44,7 +51,7 @@ export default class DiscussionOverview<Attrs> extends Component {
             </li>
           ) : null}
           <li className="users">
-            <span className="number">{users.length}</span>
+            <span className="number">{participantCount}</span>
             <h4>{app.translator.trans('datlechin-discussion-overview.forum.users')}</h4>
           </li>
           <li className="likes">
@@ -54,7 +61,9 @@ export default class DiscussionOverview<Attrs> extends Component {
           <li className="avatars">
             <div className="user-list">
               {users.map((user) => (
-                <Link href={app.route.user(user)}>{avatar(user)}</Link>
+                <Tooltip text={user?.attribute('username')}>
+                  <Link href={app.route.user(user)}>{avatar(user)}</Link>
+                </Tooltip>
               ))}
             </div>
           </li>

diff --git a/js/src/forum/index.tsx b/js/src/forum/index.tsx
@@ -6,12 +6,16 @@ import DiscussionOverview from './components/DiscussionOverview';
 app.initializers.add('datlechin/flarum-discussion-overview', () => {
   extend(PostStream.prototype, 'oncreate', function () {
     const postStream: HTMLElement | null = document.querySelector('.CommentPost div');
-    if (!postStream) return;
+
+    if (!postStream) {
+      return;
+    }
 
     const discussion = this.discussion;
 
     const div = document.createElement('div');
     div.className = 'DiscussionOverview';
+
     m.mount(postStream.appendChild(div), {
       view: function () {
         return m(DiscussionOverview, { discussion });

diff --git a/js/tsconfig.json b/js/tsconfig.json
@@ -1,24 +1,15 @@
 {
-  // Use Flarum's tsconfig as a starting point
   "extends": "flarum-tsconfig",
-  // This will match all .ts, .tsx, .d.ts, .js, .jsx files in your `src` folder
-  // and also tells your Typescript server to read core's global typings for
-  // access to `dayjs` and `$` in the global namespace.
   "include": [
       "src/**/*",
       "../vendor/*/*/js/dist-typings/@types/**/*",
-// <CUSTOM-1>
-// </CUSTOM-1>
       "@types/**/*"
 ],
   "compilerOptions": {
-    // This will output typings to `dist-typings`
     "declarationDir": "./dist-typings",
     "baseUrl": ".",
     "paths": {
       "flarum/*": ["../vendor/flarum/core/js/dist-typings/*"],
-// <CUSTOM-2>
-// </CUSTOM-2>
     }
   }
 }
diff --git a/less/forum.less b/less/forum.less
@@ -1,19 +1,30 @@
 .DiscussionOverview {
-  margin: 20px 0;
+  margin-top: 40px;
   background-color: @control-bg;
   border-radius: @border-radius;
   &-list {
     display: flex;
     list-style: none;
     flex-wrap: wrap;
     align-items: center;
-    padding: 0;
+    padding: 6px 0;
+    justify-content: space-between;
+
+    @media @tablet-up {
+      justify-content: flex-start;
+    }
 
     li {
-      padding: 7px 10px;
-      text-align: center;
+      padding: 0 10px;
+      display: flex;
+      gap: 4px;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: center;
 
       .time {
+        display: flex;
+        align-items: center;
         font-size: 15px;
         color: @muted-color;
       }
@@ -25,7 +36,7 @@
       h4 {
         font-weight: normal;
         color: @muted-color;
-        margin: 1px 0 2px 0;
+        margin: 0;
       }
 
       .number {
@@ -47,7 +58,7 @@
 
     .last-reply {
       .Avatar {
-        --size: 24px;
+        --size: 20px;
         margin-right: 4px;
       }
     }