sorted news by date

src/components/Newspaper/Newspaper.scss

@@ -56,7 +56,7 @@
 
   &-content {
     padding: 20px;
-    min-height: 160px;
+    min-height: 180px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;

src/pages/NewsDetail/index.tsx

@@ -36,7 +36,9 @@ const NewsDetail = () => {
     <>
       {newsDetail ? (
         <div
-          dangerouslySetInnerHTML={{ __html: purifyHTML(newsDetail?.content) }}
+          dangerouslySetInnerHTML={{
+            __html: purifyHTML(newsDetail.newspaperContent.content),
+          }}
         ></div>
       ) : (
         <div></div>

src/pages/home/HomePage.scss

@@ -35,4 +35,10 @@
   &-list {
     margin-top: 40px;
   }
+
+  &-load {
+    button {
+      width: 32%;
+    }
+  }
 }

src/pages/home/homePageSlice.ts

@@ -17,7 +17,13 @@ const home = createSlice({
   reducers: {},
   extraReducers: (builder) => {
     builder.addCase(getNews.fulfilled, (state, action: PayloadAction<any>) => {
-      state.newsData = action.payload.data;
+      const { data } = action.payload;
+      const sortedDataByDate = data.sort((a: INewspaper, b: INewspaper) => {
+        return (
+          new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+        );
+      });
+      state.newsData = sortedDataByDate;
     });
   },
 });

src/pages/home/index.tsx

@@ -5,6 +5,7 @@ import WrapperContainer from "components/WrapperContainer";
 import React, { useEffect } from "react";
 import Newspaper from "../../components/Newspaper";
 import { getNews } from "./homePageSlice";
+import { Button } from "@mui/material";
 
 const HomePage = () => {
   const dispatch = useAppDispatch();
@@ -39,6 +40,12 @@ const HomePage = () => {
             </div>
           ))}
         </div>
+
+        <div className="homePage-load d-flex justify-content-center">
+          <Button variant="outlined" color="primary">
+            Xem Thêm
+          </Button>
+        </div>
       </WrapperContainer>
     </main>
   );

src/pages/interface.ts

@@ -7,7 +7,12 @@ export interface INewspaper {
   description: string;
   image: string;
   createdAt: string;
-  content: string;
   categorylink: string;
   categorylinkNavigation: ICategory;
+  newspaperContent: INewspaperContent;
+}
+
+export interface INewspaperContent {
+  id: string;
+  content: string;
 }