add icon to post list to signal whether a post has some attached images

app/controllers/posts_controller.rb

@@ -32,6 +32,11 @@ class PostsController < ApplicationController
 
     # apply post status filter if present
     posts = posts.where(post_status_id: params[:post_status_ids].map { |id| id == "0" ? nil : id }) if params[:post_status_ids].present?
+
+    # check if posts have attachments
+    posts = posts.map do |post|
+      post.attributes.merge(has_attachments: post.attachments.attached?)
+    end
     
     render json: posts
   end

app/javascript/components/Board/PostList.tsx

@@ -63,6 +63,7 @@ const PostList = ({
               showLikeButtons={showLikeButtons}
               liked={post.liked}
               commentsCount={post.commentsCount}
+              hasAttachments={post.hasAttachments}
 
               isLoggedIn={isLoggedIn}
               authenticityToken={authenticityToken}

app/javascript/components/Board/PostListItem.tsx

@@ -6,6 +6,7 @@ import CommentsNumber from '../common/CommentsNumber';
 import PostStatusLabel from '../common/PostStatusLabel';
 
 import IPostStatus from '../../interfaces/IPostStatus';
+import { ImageIcon } from '../common/Icons';
 
 interface Props {
   id: number;
@@ -18,6 +19,7 @@ interface Props {
   showLikeButtons: boolean;
   liked: number;
   commentsCount: number;
+  hasAttachments: boolean;
 
   isLoggedIn: boolean;
   authenticityToken: string;
@@ -34,6 +36,7 @@ const PostListItem = ({
   showLikeButtons,
   liked,
   commentsCount,
+  hasAttachments,
 
   isLoggedIn,
   authenticityToken,
@@ -58,7 +61,10 @@ const PostListItem = ({
 
       <div className="postDetails">
         <CommentsNumber number={commentsCount} />
-        { postStatus ? <PostStatusLabel {...postStatus} /> : null }
+        
+        { postStatus && <PostStatusLabel {...postStatus} /> }
+
+        { hasAttachments && <span style={{marginLeft: '4px'}}><ImageIcon /></span> }
       </div>
     </div>
   </div>

app/javascript/components/common/Icons.tsx

@@ -19,7 +19,7 @@ import {
   MdAdd,
   MdAttachFile,
 } from 'react-icons/md';
-import { FaUserNinja, FaMarkdown } from "react-icons/fa";
+import { FaUserNinja, FaMarkdown, FaRegImage } from "react-icons/fa";
 import { FaDroplet } from "react-icons/fa6";
 
 export const EditIcon = () => <FiEdit />;
@@ -109,4 +109,6 @@ export const MarkdownIcon = ({size = 24, style = {}}) => (
   </>
 );
 
-export const AttachIcon = ({size = 24}) => <MdAttachFile size={size} />;
+export const AttachIcon = ({size = 24}) => <MdAttachFile size={size} />;
+
+export const ImageIcon = ({size = 24}) => <FaRegImage size={size} />;

app/javascript/interfaces/IPost.ts

@@ -16,6 +16,7 @@ interface IPost {
   slug?: string;
   description?: string;
   attachmentUrls?: string[];
+  hasAttachments?: boolean;
   approvalStatus: PostApprovalStatus;
   boardId: number;
   postStatusId?: number;
@@ -37,6 +38,8 @@ export const postJSON2JS = (postJSON: IPostJSON): IPost => ({
   title: postJSON.title,
   slug: postJSON.slug,
   description: postJSON.description,
+  attachmentUrls: postJSON.attachment_urls,
+  hasAttachments: postJSON.has_attachments,
   approvalStatus: postJSON.approval_status,
   boardId: postJSON.board_id,
   postStatusId: postJSON.post_status_id,

app/javascript/interfaces/json/IPost.ts

@@ -6,6 +6,7 @@ interface IPostJSON {
   slug?: string;
   description?: string;
   attachment_urls?: string[];
+  has_attachments?: boolean;
   approval_status: PostApprovalStatus;
   board_id: number;
   post_status_id?: number;

app/javascript/reducers/postReducer.ts

@@ -16,6 +16,7 @@ const initialState: IPost = {
   slug: null,
   description: null,
   attachmentUrls: [],
+  hasAttachments: false,
   approvalStatus: POST_APPROVAL_STATUS_APPROVED,
   boardId: 0,
   postStatusId: null,
@@ -44,6 +45,7 @@ const postReducer = (
         slug: action.post.slug,
         description: action.post.description,
         attachmentUrls: action.post.attachment_urls,
+        hasAttachments: action.post.has_attachments,
         approvalStatus: action.post.approval_status,
         boardId: action.post.board_id,
         postStatusId: action.post.post_status_id,