fix sidebar pinned posts

Author: medmin

pages/category/[cid].js

@@ -5,14 +5,14 @@ import { getPosts } from "src/apis/posts";
 import { getMetas } from "src/apis/metas";
 
 /** hide_empty == true, so, a category mush have at least one post */
-const CategoryPage = ({ posts, tags }) => {
+const CategoryPage = ({ allPosts, pinnedPosts, tags }) => {
     return (
         <div className="tile is-parent is-flex-widescreen">
             <div className="tile is-3">
-                <SideBar />
+                <SideBar posts={{ pinned: pinnedPosts }} page="category" />
             </div>
             <div className="tile is-9">
-                <BaseContainer posts={posts} tags={tags} />
+                <BaseContainer posts={[...allPosts, ...pinnedPosts]} tags={tags} />
             </div>
         </div>
     );
@@ -24,14 +24,14 @@ CategoryPage.getInitialProps = async ({ req }) => {
 
     const [respPosts, respStickyPosts, respTags] = await Promise.all([
         getPosts({ category_id, sticky: false }),
-        getPosts({ category_id, sticky: true }),
+        getPosts({ category_id, sticky: true }), // sticky posts in this category
         getMetas("tags"),
     ]);
     const allPosts = respPosts.status === 200 ? [...respPosts.data] : [];
     const pinnedPosts = respStickyPosts.status === 200 ? [...respStickyPosts.data] : [];
     const tags = respTags.status === 200 ? Object.fromEntries(respTags.data.map((tag) => [tag.id, tag.slug])) : {};
 
-    return { posts: [...allPosts, ...pinnedPosts], tags };
+    return { allPosts, pinnedPosts, tags };
 };
 
 export default CategoryPage;

pages/index.js

@@ -20,7 +20,7 @@ const IndexPage = ({ all, pinned, tags }) => {
     return (
         <div className="tile is-parent is-flex-widescreen is-x-paddingless-desktop">
             <div className="tile is-3">
-                <SideBar />
+                <SideBar page="index" posts={{ pinned }} />
             </div>
             <div className="tile is-9">
                 <PostsContainer isLoading={isLoading} />

pages/search.js

@@ -1,12 +1,13 @@
 import React from "react";
 import SideBar from "src/components/common/SideBar";
 import SearchContainer from "src/components/posts/SearchContainer";
+import { getPosts } from "src/apis/posts";
 
-const SearchResultPage = () => {
+const SearchResultPage = ({ pinnedPosts }) => {
     return (
         <div className="tile is-parent is-flex-widescreen">
             <div className="tile is-3">
-                <SideBar />
+                <SideBar posts={{ pinned: pinnedPosts }} page="search" />
             </div>
             <div className="tile is-9">
                 <SearchContainer />
@@ -15,4 +16,10 @@ const SearchResultPage = () => {
     );
 };
 
+SearchResultPage.getInitialProps = async () => {
+    const respStickyPosts = await getPosts({ sticky: true });
+    const pinnedPosts = respStickyPosts.status === 200 ? [...respStickyPosts.data] : [];
+    return { pinnedPosts };
+};
+
 export default SearchResultPage;

src/components/common/SideBar.jsx

@@ -1,11 +1,10 @@
-import React, { useEffect, useState, useContext } from "react";
-import PostContext from "src/contexts/PostContext";
+import React, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
 import { getMetas } from "src/apis/metas";
 import { useRouter } from "next/router";
 
-const SideBar = () => {
+const SideBar = ({ page, posts: { pinned } }) => {
     const router = useRouter();
-    const { postState } = useContext(PostContext);
 
     const [categories, setCategories] = useState([]);
     const initCategories = async () => {
@@ -48,8 +47,8 @@ const SideBar = () => {
             </ul>
             <p className="menu-label is-hidden-mobile">Pinned Posts</p>
             <ul className="menu-list is-hidden-mobile">
-                {postState.pinned.length ? (
-                    postState.pinned.map((post) => {
+                {pinned.length ? (
+                    pinned.map((post) => {
                         return (
                             <li key={post.id} onClick={() => handlePostOnClick(post)}>
                                 <a>{post.title.rendered}</a>
@@ -58,12 +57,17 @@ const SideBar = () => {
                     })
                 ) : (
                     <li>
-                        <a>No Pinned Posts Yet</a>
+                        <a>No pinned posts{page === "category" ? " in this category" : ""}</a>
                     </li>
                 )}
             </ul>
         </aside>
     );
 };
 
+SideBar.propTypes = {
+    page: PropTypes.string.isRequired,
+    posts: PropTypes.object.isRequired,
+};
+
 export default SideBar;