feat: update icons and add photo to messages and posts (#126)#150
Merged
Conversation
There was a problem hiding this comment.
Pull request overview
This PR updates the UI iconography to use react-icons and extends posting/messaging features to support attaching images, along with introducing chat message editing (with edited timestamps). It also tightens backend file upload validation/auth and adds DTO/entity fields needed to carry post/message image URLs through the system.
Changes:
- Replaced emoji-based UI affordances with
react-iconsacross navigation, profile, role badges, theme toggle, and notifications. - Added image upload + preview for creating posts (Home + NewPost) and for chat messages; added chat message editing support (frontend + SignalR hub).
- Backend updates for file upload validation/auth, message DTO/entity updates (
PhotoUrl,EditedAt), and post creation logging/DTO update (ImageUrl).
Reviewed changes
Copilot reviewed 27 out of 28 changed files in this pull request and generated 21 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/socialnetwork.client/src/pages/Search.jsx | Trims query before searching and resets paging state on query/type changes. |
| frontend/socialnetwork.client/src/pages/Profile.jsx | Swaps emojis for icons and adjusts some UI strings. |
| frontend/socialnetwork.client/src/pages/Post.jsx | Adds a comment “delete” action in the post detail UI. |
| frontend/socialnetwork.client/src/pages/NewPost.jsx | Adds optional image upload + preview when creating a post. |
| frontend/socialnetwork.client/src/pages/Home.jsx | Adds optional image upload + preview for quick post creation and renders post images. |
| frontend/socialnetwork.client/src/pages/Chat.jsx | Adds photo attachments to messages and message editing UI/state. |
| frontend/socialnetwork.client/src/pages/Chat.css | Styles for message photos and edit controls. |
| frontend/socialnetwork.client/src/index.css | Adds range input styling (duplicated) and dark-theme variants. |
| frontend/socialnetwork.client/src/hooks/useTheme.js | Changes behavior when ThemeContext is missing (now silent fallback). |
| frontend/socialnetwork.client/src/hooks/useChatHub.js | Extends SignalR hook to handle message updates and photo URLs; adds edit invocation. |
| frontend/socialnetwork.client/src/context/ThemeContext.jsx | Makes ThemeContext nullable; adds safer localStorage handling. |
| frontend/socialnetwork.client/src/components/ThemeToggle.jsx | Replaces emoji toggle with react-icons. |
| frontend/socialnetwork.client/src/components/ThemeToggle.css | Updates styling for icon-based theme toggle. |
| frontend/socialnetwork.client/src/components/RoleBadge.jsx | Replaces emoji role indicators with icons. |
| frontend/socialnetwork.client/src/components/NotificationBell.jsx | Replaces bell emoji with react-icons. |
| frontend/socialnetwork.client/src/components/NotificationBell.css | Restyles notification UI (includes new global button rules). |
| frontend/socialnetwork.client/src/components/NavBar.jsx | Adds icons to nav links/search and updates some labels. |
| frontend/socialnetwork.client/src/App.jsx | Reorders providers (BrowserRouter outside ThemeProvider). |
| frontend/socialnetwork.client/package.json | Adds react-icons dependency. |
| frontend/socialnetwork.client/package-lock.json | Locks react-icons dependency. |
| backend/SocialNetwork.Infrastructure/Repos/MessageRepository.cs | Sets EditedAt on update and adds logging/cancellation token usage. |
| backend/SocialNetwork.Domain/Entities/Chats/Message.cs | Adds PhotoUrl to message entity and constructor. |
| backend/SocialNetwork.Application/Service/PostService.cs | Logs ImageUrl when creating posts. |
| backend/SocialNetwork.Application/DTO/Posts/CreatePostDto.cs | Adds optional ImageUrl to post creation DTO. |
| backend/SocialNetwork.Application/DTO/Chats/MessageDto.cs | Adds PhotoUrl and EditedAt to message DTO. |
| backend/SocialNetwork.API/Hubs/ChatHub.cs | Extends SendMessage to include photoUrl; adds EditMessage and emits MessageUpdated. |
| backend/SocialNetwork.API/Controllers/PostController.cs | Adds a post image upload endpoint and injects cloud storage service. |
| backend/SocialNetwork.API/Controllers/FileController.cs | Secures upload/delete, validates mime/size, adds logging, changes response shapes. |
Files not reviewed (1)
- frontend/socialnetwork.client/package-lock.json: Language not supported
Comments suppressed due to low confidence (1)
backend/SocialNetwork.API/Hubs/ChatHub.cs:89
MessageProfilemapsSenderNamefromsrc.Sender.Name. InSendMessage/EditMessage,message.Senderis never loaded/populated, so_mapper.Map<MessageDto>(message)can throw aNullReferenceException. Populate the sender (or map DTO manually) before broadcasting.
var message = new Message
{
Id = Guid.NewGuid(),
SenderId = userId,
ChatId = chatId,
Content = content,
PhotoUrl = photoUrl,
SentAt = DateTime.UtcNow
};
await _messageRepository.CreateAsync(message);
var messageDto = _mapper.Map<MessageDto>(message);
await Clients.Group(chatId.ToString()).SendAsync("ReceiveMessage", messageDto);
}
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
26
to
30
| useEffect(() => { | ||
| if (!query.trim()) { | ||
| const trimmedQuery = query.trim(); | ||
|
|
||
| if (!trimmedQuery) { | ||
| setPosts([]); |
Comment on lines
1
to
4
| import { useEffect, useState } from 'react'; | ||
| import { Link } from 'react-router-dom'; | ||
| import { FiTrash2 } from 'react-icons/fi'; | ||
| import './Home.css'; |
Comment on lines
+113
to
+120
| const token = localStorage.getItem('accessToken'); | ||
| const res = await fetch(`${API_BASE}/api/File/upload`, { | ||
| method: 'POST', | ||
| headers: { | ||
| 'Authorization': `Bearer ${token}` | ||
| }, | ||
| body: formData | ||
| }); |
Comment on lines
+222
to
+226
| <img | ||
| src={imagePreview} | ||
| alt="Попередження" | ||
| style={{ maxWidth: '100%', maxHeight: 300, borderRadius: 4 }} | ||
| /> |
Comment on lines
+125
to
+129
| <img | ||
| src={imagePreview} | ||
| alt="Попередження" | ||
| style={{ maxWidth: '100%', maxHeight: 300, borderRadius: 4 }} | ||
| /> |
Comment on lines
+372
to
375
| <h3>Пості</h3> | ||
| {posts.length === 0 ? ( | ||
| <div className="posts-empty">Пости відсутні.</div> | ||
| <div className="posts-empty">Пості відсутні.</div> | ||
| ) : ( |
Comment on lines
+22
to
36
| public FileController(ICloudStorageService storage, BlobServiceClient blobServiceClient, IConfiguration configuration, ILogger<FileController> logger) | ||
| { | ||
| _storage = storage; | ||
| _blobServiceClient = blobServiceClient; | ||
| _containerName = configuration.GetValue<string>("AzureStorage:ContainerName"); | ||
| _logger = logger; | ||
| } | ||
|
|
||
| [Authorize] | ||
| [HttpPost("upload")] | ||
| public async Task<IActionResult> UploadFile(IFormFile file) | ||
| { | ||
| if (file == null || file.Length == 0) | ||
| return BadRequest("No file uploaded."); | ||
| return BadRequest(new { message = "No file uploaded." }); | ||
|
|
Comment on lines
17
to
26
| public string Content { get; set; } | ||
| public string? PhotoUrl { get; set; } | ||
| public DateTime SentAt { get; set; } | ||
| public DateTime? EditedAt { get; set; } | ||
| public ICollection<MessageReaction> Reactions { get; set; } | ||
|
|
||
| public Message() { } //for EF migrations | ||
|
|
||
| public Message(Guid chatId, Guid senderId, string content) | ||
| public Message(Guid chatId, Guid senderId, string content, string? photoUrl = null) | ||
| { |
Comment on lines
+114
to
+120
| message.Content = newContent; | ||
| await _messageRepository.UpdateAsync(message); | ||
|
|
||
| var messageDto = _mapper.Map<MessageDto>(message); | ||
|
|
||
| await Clients.Group(message.ChatId.ToString()).SendAsync("MessageUpdated", messageDto); | ||
|
|
Comment on lines
+120
to
+124
| try { | ||
| console.log('Editing message:', { messageId, newContent }); | ||
| await conn.invoke('EditMessage', messageId, newContent); | ||
| console.log('Message edited'); | ||
| } catch (e) { |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.