feat: add responsive for homepage

package-lock.json

@@ -33,6 +33,7 @@
         "react-scripts": "5.0.1",
         "sass": "^1.55.0",
         "typescript": "^4.8.4",
+        "usehooks-ts": "^2.9.1",
         "web-vitals": "^2.1.4"
       },
       "devDependencies": {
@@ -16559,6 +16560,19 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/usehooks-ts": {
+      "version": "2.9.1",
+      "resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-2.9.1.tgz",
+      "integrity": "sha512-2FAuSIGHlY+apM9FVlj8/oNhd+1y+Uwv5QNkMQz1oSfdHk4PXo1qoCw9I5M7j0vpH8CSWFJwXbVPeYDjLCx9PA==",
+      "engines": {
+        "node": ">=16.15.0",
+        "npm": ">=8"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0  || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0  || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",

package.json

@@ -28,6 +28,7 @@
     "react-scripts": "5.0.1",
     "sass": "^1.55.0",
     "typescript": "^4.8.4",
+    "usehooks-ts": "^2.9.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/components/Newspaper/Newspaper.scss

@@ -8,16 +8,21 @@
   display: flex;
   flex-direction: column;
 
+  @include mobile {
+    margin-bottom: 40px;
+  }
+
   &-first {
     flex-direction: row;
 
     .newspaper-img {
       order: 2;
       width: 50%;
-      height: 288px;
+      min-height: 288px;
 
       img {
         border: 0;
+        display: block;
       }
     }
 
@@ -25,6 +30,10 @@
       padding: 40px;
       width: 50%;
 
+      @include tablet {
+        padding: 20px;
+      }
+
       p {
         margin-bottom: 20px;
       }
@@ -33,6 +42,7 @@
         line-height: 22px;
         font-size: 14px;
         color: $neutral-900;
+        display: block;
       }
     }
   }
@@ -61,11 +71,35 @@
     flex-direction: column;
     justify-content: space-between;
 
+    @include mobile {
+      padding: 16px;
+    }
+
     p {
       font-size: 20px;
       color: $neutral-700;
       font-weight: 700;
       line-height: 25px;
+
+      @include desktop {
+        font-size: 18px;
+      }
+
+      @include mobile {
+        font-size: 16px;
+      }
+    }
+
+    &__desc {
+      display: none;
+
+      &.firstNews {
+        display: block;
+      }
+
+      @include for-mobile-down {
+        display: block;
+      }
     }
 
     &__footer {

src/components/Newspaper/index.tsx

@@ -3,6 +3,7 @@ import moment from "moment";
 import { INewspaper } from "pages/interface";
 import React from "react";
 import { useNavigate } from "react-router-dom";
+import { useWindowSize } from "usehooks-ts";
 
 type Props = {
   data: INewspaper;
@@ -19,12 +20,15 @@ const Newspaper = (props: Props) => {
   const { data, firstNews = false } = props;
   const { image, title, createdAt, categorylinkNavigation, description, id } =
     data;
+  const { width } = useWindowSize();
   const { label } = categorylinkNavigation;
   const navigate = useNavigate();
 
+  const firstNewsCases = firstNews && width >= 768;
+
   return (
     <div
-      className={`newspaper ${firstNews ? "newspaper-first" : ""}`}
+      className={`newspaper ${firstNewsCases ? "newspaper-first" : ""}`}
       onClick={() => navigate(`${PageUrl.NEWS_ROOT}/${id}`)}
     >
       <div className="newspaper-img">
@@ -34,9 +38,13 @@ const Newspaper = (props: Props) => {
       <div className="newspaper-content">
         <div className="">
           <p>{title}</p>
-          {firstNews && (
-            <div className="newspaper-content__desc">{description}</div>
-          )}
+          <div
+            className={`newspaper-content__desc mb-2 ${
+              firstNews ? "firstNews" : ""
+            }`}
+          >
+            {description}
+          </div>
         </div>
 
         <div className="newspaper-content__footer">
@@ -47,9 +55,7 @@ const Newspaper = (props: Props) => {
           </div>
 
           <div className="newspaper-time">
-            <span>
-              {moment(createdAt, "DD/MM/YYYY hh:mm").format("DD/MM/YYYY")}
-            </span>
+            <span>{moment(new Date(createdAt)).format("DD/MM/YYYY")}</span>
           </div>
         </div>
       </div>

src/components/Sidenav/index.tsx

@@ -10,6 +10,7 @@ import {
   Typography,
 } from "@mui/material";
 import { ICategory } from "components/interface";
+import { useNavigate } from "react-router-dom";
 
 type Props = {
   handleDrawerToggle: () => void;
@@ -19,6 +20,7 @@ type Props = {
 
 const drawerWidth = 240;
 const Sidenav = (props: Props) => {
+  const navigate = useNavigate();
   const { navItems, handleDrawerToggle, mobileOpen } = props;
 
   return (
@@ -44,7 +46,11 @@ const Sidenav = (props: Props) => {
           <Divider />
           <List>
             {navItems.map((item) => (
-              <ListItem key={item.link} disablePadding>
+              <ListItem
+                key={item.link}
+                disablePadding
+                onClick={() => navigate(item.link)}
+              >
                 <ListItemButton sx={{ textAlign: "center" }}>
                   <ListItemText primary={item.label} />
                 </ListItemButton>

src/pages/NewsDetail/index.tsx

 import { handleLoading } from "app/globalSlice";
 import { useAppDispatch, useAppSelector } from "app/hooks";
 import { newsDetailSelector } from "app/selectors";
+import WrapperContainer from "components/WrapperContainer";
 import React, { useEffect } from "react";
 import { useParams } from "react-router-dom";
 import { purifyHTML } from "utils/helpers/purifyHTML";
@@ -33,12 +34,14 @@ const NewsDetail = () => {
   return (
     <>
       {newsDetail ? (
+        <WrapperContainer className="news-detail py-4">
           <div
-          className="news-detail container py-4"
+            className=""
             dangerouslySetInnerHTML={{
               __html: purifyHTML(newsDetail.content),
             }}
           ></div>
+        </WrapperContainer>
       ) : (
         <div></div>
       )}

src/pages/home/HomePage.scss

@@ -7,6 +7,7 @@
     position: relative;
     z-index: 2;
     text-align: center;
+    margin-bottom: 40px;
 
     h1 {
       font-size: 48px;
@@ -30,10 +31,15 @@
       background-color: $info-700;
       z-index: 1;
     }
-  }
 
-  &-list {
-    margin-top: 40px;
+    @include mobile {
+      margin-bottom: 20px;
+
+      h1 {
+        font-size: 36px;
+        padding: 0 16px;
+      }
+    }
   }
 
   &-load {

src/pages/home/homePageSlice.ts

@@ -25,11 +25,6 @@ const home = createSlice({
   extraReducers: (builder) => {
     builder.addCase(getNews.fulfilled, (state, action: PayloadAction<any>) => {
       const { collection } = action.payload.data;
-      // const sortedDataByDate = data.sort((a: INewspaper, b: INewspaper) => {
-      //   return (
-      //     new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
-      //   );
-      // });
       state.newsData = [...state.newsData, ...collection];
     });
   },

src/pages/home/index.tsx

@@ -63,7 +63,10 @@ const HomePage = () => {
         </div>
         <div className="homePage-list row">
           {newsData.map((newspaper, idx) => (
-            <div className={`col-${idx === 0 ? 12 : 4}`} key={newspaper.id}>
+            <div
+              className={`${idx === 0 ? "col-12" : "col-lg-4 col-sm-6 col-12"}`}
+              key={newspaper.id}
+            >
               <Newspaper data={newspaper} firstNews={idx === 0} />
             </div>
           ))}

src/styles/_global.scss

-@import url("https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700&family=Roboto:wght@400;500;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap");
 
 html {
   -webkit-box-sizing: border-box;
@@ -21,7 +21,7 @@ h4,
 h5,
 h6,
 p {
-  font-family: "Merriweather", serif !important;
+  font-family: "Open Sans", sans-serif !important;
 }
 
 div,
@@ -30,3 +30,8 @@ small,
 label {
   font-family: "Roboto", "helvetica", sans-serif !important;
 }
+
+img {
+  max-width: 100%;
+  display: block;
+}