Sort order updated

CodeMaverick2 · Aug 14, 2024 · 7106e54 · 7106e54
1 parent 4ef593b
commit 7106e54
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 7 deletions.
diff --git a/src/components/CommentList/CommentList.js b/src/components/CommentList/CommentList.js
@@ -1,18 +1,23 @@
 import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import Comment from '../Comment/Comment';
-import { sortByDate } from '../../redux/commentsSlice';
+import { toggleSortOrder } from '../../redux/commentsSlice';
 import './CommentList.css';
 
 const CommentList = () => {
   const comments = useSelector((state) => state.comments.comments);
+  const sortOrder = useSelector((state) => state.comments.sortOrder);
   const dispatch = useDispatch();
 
+  const handleSortToggle = () => {
+    dispatch(toggleSortOrder());
+  };
+
   return (
     <div className="comment-list-container">
       <div className="sort-button-container">
-        <button onClick={() => dispatch(sortByDate())} className="sort-by-date-button">
-          Sort By: Date and time &darr;
+        <button onClick={handleSortToggle} className="sort-by-date-button">
+          Sort By Date {sortOrder === 'ascending' ? '▲' : '▼'}
         </button>
       </div>
       <div className="comment-list">

diff --git a/src/redux/commentsSlice.js b/src/redux/commentsSlice.js
@@ -2,6 +2,7 @@ import { createSlice } from '@reduxjs/toolkit';
 
 const initialState = {
   comments: JSON.parse(localStorage.getItem('comments')) || [],
+  sortOrder: 'ascending' 
 };
 
 export const commentsSlice = createSlice({
@@ -52,17 +53,42 @@ export const commentsSlice = createSlice({
       localStorage.setItem('comments', JSON.stringify(state.comments));
     },
     sortByDate: (state) => {
-      state.comments.sort((a, b) => new Date(b.date) - new Date(a.date));
+      state.comments.sort((a, b) => {
+        const dateA = new Date(a.date);
+        const dateB = new Date(b.date);
+        return state.sortOrder === 'ascending' ? dateA - dateB : dateB - dateA;
+      });
       state.comments.forEach(comment => {
         if (comment.replies) {
-          comment.replies.sort((a, b) => new Date(b.date) - new Date(a.date));
+          comment.replies.sort((a, b) => {
+            const dateA = new Date(a.date);
+            const dateB = new Date(b.date);
+            return state.sortOrder === 'ascending' ? dateA - dateB : dateB - dateA;
+          });
         }
       });
-
       localStorage.setItem('comments', JSON.stringify(state.comments));
     },
+    toggleSortOrder: (state) => {
+      state.sortOrder = state.sortOrder === 'ascending' ? 'descending' : 'ascending';
+      state.comments.sort((a, b) => {
+        const dateA = new Date(a.date);
+        const dateB = new Date(b.date);
+        return state.sortOrder === 'ascending' ? dateA - dateB : dateB - dateA;
+      });
+      state.comments.forEach(comment => {
+        if (comment.replies) {
+          comment.replies.sort((a, b) => {
+            const dateA = new Date(a.date);
+            const dateB = new Date(b.date);
+            return state.sortOrder === 'ascending' ? dateA - dateB : dateB - dateA;
+          });
+        }
+      });
+      localStorage.setItem('comments', JSON.stringify(state.comments));
+    }
   },
 });
 
-export const { addComment, editComment, deleteComment, addReply,editReply, deleteReply, sortByDate } = commentsSlice.actions;
+export const { addComment, editComment, deleteComment, addReply, editReply, deleteReply, sortByDate, toggleSortOrder } = commentsSlice.actions;
 export default commentsSlice.reducer;