reza fixed a bug on blog

src/redux/actions/blog.js

@@ -6,6 +6,8 @@ const blog = {
       await proxy.get("public/blogList", data, { dispatch }),
   info: (data) => async (dispatch) =>
     await proxy.get("public/blogInfo", data, { dispatch }),
+  active: (data) => async (dispatch) =>
+    await dispatch({ type: "public/active", data }),
 };
 
 export default blog;

src/redux/reducers/blog.js

@@ -35,6 +35,7 @@ const initialState = {
       color: "#E63F15",
     },
   ],
+  active: null,
 };
 export default function blog(state = initialState, action) {
   let { type, data } = action;
@@ -47,6 +48,13 @@ export default function blog(state = initialState, action) {
         hashtags: [...new Set(data.map((object) => object.tag))],
         error: null,
       };
+    case "public/active":
+      return {
+        ...state,
+        active : data,
+        loading: false,
+        error: null,
+      };
     case "public/blogInfo":
       return { ...state, loading: false, error: null, blog: data };
     case "blog/loading":

src/router.js

@@ -131,7 +131,7 @@ function Router({ isDark, isMobile, headerOptions, dialog, menu, setMenu }) {
                     title: false,
                     back: true,
                     menu: false,
-                    bookmark: 'productId',
+                    bookmark: "productId",
                   }}
                 />
               }
@@ -405,7 +405,7 @@ function Router({ isDark, isMobile, headerOptions, dialog, menu, setMenu }) {
                 />
               }
             />
-             <Route
+            <Route
               path="/createAddress"
               exact
               element={
@@ -495,15 +495,16 @@ function Router({ isDark, isMobile, headerOptions, dialog, menu, setMenu }) {
               exact
               element={
                 <Blog
-                // headerOptions={{
-                //   logo: true,
-                //   hamburgerMenu: true,
-                //   qr: true,
-                //   title: false,
-                //   back: false,
-                //   shown: true,
-                //   menu: false,
-                // }}
+                  headerOptions={{
+                    logo: false,
+                    hamburgerMenu: false,
+                    qr: false,
+                    title: false,
+                    back: true,
+                    shown: true,
+                    menu: false,
+                    bookmark : 'contentId'
+                  }}
                 />
               }
             />

src/views/Blog/index.js

@@ -18,16 +18,22 @@ export const Blog = ({
   getInfo,
   blog,
   setHeaderOptions,
+  headerOptions,
   getList,
   blogs,
+  activeBlog,
 }) => {
   useEffect(() => {
-    setHeaderOptions({ shown: true, menu: true, back: true, bookmark: true });
+    setHeaderOptions(headerOptions);
     getInfo({ id: location.getId() });
     if (blogs.length === 0) {
       getList();
     }
   }, []);
+
+  useEffect(() => {
+    getInfo({ id: location.getId() });
+  }, [activeBlog]);
   return (
     <div className="flex flex-col lg:w-11/12 mx-auto lg:py-24 lg:px-0 px-4 lg:pb-0 pb-24">
       <Hashtags />
@@ -161,6 +167,7 @@ const mapStateToProps = (state) => ({
   isMobile: state.publicApi.isMobile,
   blog: state.blog.blog,
   blogs: state.blog.list,
+  activeBlog: state.blog.active,
 });
 
 const mapDispatchToProps = {

src/views/Blogs/index.js

@@ -25,9 +25,7 @@ export const Blogs = ({ isMobile, getList, blogs, setHeaderOptions }) => {
     } else {
       setHeaderOptions({ shown: true });
     }
-    if (blogs.length === 0) {
-      getList();
-    }
+    getList();
   }, []);
   return (
     <div className="flex w-full px-4 lg:px-0 flex-col lg:w-11/12 mx-auto lg:py-24 pb-24 lg:pb-0">

src/views/Blogs/layouts/New.js

@@ -1,14 +1,16 @@
 import React from "react";
 import { connect } from "react-redux";
+import {blog} from '../../../redux/actions';
 import { Link } from "react-router-dom";
 import Avatar from "../../../components/Avatar";
 
-export const New = ({ blog, isMobile }) => {
+export const New = ({ blog, isMobile, setActive }) => {
   return (
     <Link
       to={"/blogs/" + blog?.id}
       className="lg:px-4 flex flex-col"
       style={{ direction: isMobile ? "" : "rtl" }}
+      onClick={() => setActive(blog?.id)}
     >
       <img
         src={`https://dnvn.ir/api/v1/file/${blog?.fileIds}`}
@@ -57,6 +59,8 @@ const mapStateToProps = (state) => ({
   isMobile: state.publicApi.isMobile,
 });
 
-const mapDispatchToProps = {};
+const mapDispatchToProps = {
+  setActive : blog.active
+};
 
 export default connect(mapStateToProps, mapDispatchToProps)(New);

src/views/Home/Portrait/Private/Blogs/index.js

@@ -1,11 +1,14 @@
 import React from "react";
 import { Link } from "react-router-dom";
 import { connect } from "react-redux";
+import { blog } from "../../../../../redux/actions";
 import _ from "lodash";
+
+//assets
 import arrowGreenIcon from "../../../../../assets/icons/dropdown-blue.svg";
 import arrowWhiteIcon from "../../../../../assets/icons/arrow-left-white.svg";
 
-function Blogs({ list, isDark }) {
+function Blogs({ list, isDark, setActive }) {
   return (
     <div className="w-full pr-4">
       <div className="w-full flex flex-col rounded-md py-4 overflow-hidden">
@@ -14,11 +17,7 @@ function Blogs({ list, isDark }) {
             خواندنی‌ها
           </strong>
           {isDark ? (
-            <img
-              src={ arrowWhiteIcon}
-              alt=""
-              className={`transform ml-4 w-7`}
-            />
+            <img src={arrowWhiteIcon} alt="" className={`transform ml-4 w-7`} />
           ) : (
             <img
               src={arrowGreenIcon}
@@ -29,7 +28,7 @@ function Blogs({ list, isDark }) {
         </header>
         <ul className="list-none w-full overflow-x-scroll pt-3 flex flex-row pb-16 no-scrollbar">
           {list.map((blog, index) => (
-            <Blog blog={blog} key={index} />
+            <Blog blog={blog} key={index} setActive={setActive} />
           ))}
         </ul>
       </div>
@@ -37,23 +36,24 @@ function Blogs({ list, isDark }) {
   );
 }
 
-const Blog = ({ blog }) => {
+const Blog = ({ blog, setActive }) => {
   return (
     <li className="flex flex-col ml-3">
       <Link
-        to={"/blogs/" + blog.name}
+        to={"/blogs/" + blog?.id}
         className="flex flex-row justify-center items-end rounded-md"
         style={{
           background: `url(https://dnvn.ir/api/v1/file/${blog?.fileIds})`,
           backgroundPosition: "contain",
           backgroundSize: "100% 100%",
           minWidth: 200,
-          width: 'calc(100vw / 1.6)',
+          width: "calc(100vw / 1.6)",
           maxWidth: 350,
-          minHeight : 160,
-          height : 'calc(100vw / 1.6 * 3 / 4)',
-          maxHeight : 300
+          minHeight: 160,
+          height: "calc(100vw / 1.6 * 3 / 4)",
+          maxHeight: 300,
         }}
+        onClick={() => setActive(blog?.id)}
       >
         <div className="w-11/12 bg-white rounded-md shadow-md flex flex-col transform translate-y-1/2 p-2 dark:bg-gray36">
           <h2 className="text-xs font-semibold text-blue5F dark:text-white leading-5">
@@ -86,4 +86,8 @@ const mapStateToProps = (state) => ({
   isDark: state.publicApi.isDark,
 });
 
-export default connect(mapStateToProps, {})(Blogs);
+const mapDispatchToProps = {
+  setActive: blog.active,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Blogs);