fix pinned posts not showing problem

Author: medmin

pages/index.js

@@ -36,13 +36,18 @@ const IndexPage = ({ all, pinned, tags }) => {
  * https://github.com/zeit/next.js/issues/6115
  */
 IndexPage.getInitialProps = async () => {
-    let [respPosts, respTags] = await Promise.all([getPosts(), getMetas("tags")]);
-    let ok = respPosts.status == 200;
-    let all = ok ? [...respPosts.data] : [];
-    let pinned = ok ? respPosts.data.filter((post) => post.sticky) : [];
+    let [respPosts, respStickyPosts, respTags] = await Promise.all([
+        getPosts(),
+        getPosts({ sticky: true }),
+        getMetas("tags"),
+    ]);
+    let all = respPosts.status == 200 ? [...respPosts.data] : [];
+    let pinned = respStickyPosts.status == 200 ? [...respStickyPosts.data] : [];
 
     let tags = {};
-    if (respTags.status == 200) {
+    const tagsOK = respTags.status == 200;
+    // console.log(Object.values(respTags.data));
+    if (tagsOK) {
         for (let tag of respTags.data) {
             tags[tag.id] = tag.slug;
         }

src/apis/posts.js

@@ -11,7 +11,7 @@ const postsUrl = `${BASE_URL}/wp-json/wp/v2/posts`;
  */
 
 async function getPosts(params = {}) {
-    const { keyword, page, per_page, category_id } = params;
+    const { keyword, page, per_page, category_id, sticky } = params;
 
     try {
         let resp = await axios.request({
@@ -22,6 +22,7 @@ async function getPosts(params = {}) {
                 page: page ? page : 1,
                 per_page: per_page ? per_page : 10,
                 categories: category_id ? category_id : "",
+                sticky: sticky ? sticky : false,
             },
         });
         return resp;

src/components/posts/BaseContainer.jsx

@@ -15,8 +15,10 @@ const BaseContainer = (props) => {
         });
     };
 
-    const pinnedPosts = posts.filter((post) => post.sticky);
-    const regularPosts = posts.filter((post) => !post.sticky);
+    // pinned and all, they may contain duplicated posts
+    // i.e., in the most recent 10 posts, one of them may be sticky/pinned posts
+    const pinnedPosts = posts.pinned;
+    const regularPosts = posts.all.filter((post) => !post.sticky);
     const sortedPosts = [...pinnedPosts, ...regularPosts];
 
     return (
@@ -64,7 +66,7 @@ const BaseContainer = (props) => {
 };
 
 BaseContainer.propTypes = {
-    posts: PropTypes.array.isRequired,
+    posts: PropTypes.object.isRequired,
     tags: PropTypes.object.isRequired,
 };
 

src/components/posts/PostsContainer.jsx

@@ -10,14 +10,14 @@ const PostsContainer = ({ isLoading }) => {
     }
 
     const {
-        postState: { all, tags },
+        postState: { all, pinned, tags },
     } = useContext(PostContext);
     // console.log(tags);
     if (all.length === 0) {
         return <NoPostMessage msg="The author hasn't published any posts!" />;
     }
 
-    return <BaseContainer posts={all} tags={tags} />;
+    return <BaseContainer posts={{ all, pinned }} tags={tags} />;
 };
 
 PostsContainer.propTypes = {