/posts/page/x page

Prototypr · Jan 31, 2024 · 51a091a · 51a091a
1 parent 46220c8
commit 51a091a
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 54 deletions.
diff --git a/components/v4/section/PostsSectionHero.js b/components/v4/section/PostsSectionHero.js
@@ -5,25 +5,26 @@ import PostsGroup3Cards from "../layout/PostsGroup3Cards";
 import RSSTitle from "../text/RSSTitle";
 import SectionDivider from "./SectionDivider";
 // import {RssSimple} from 'phosphor-react'
-const PostsSectionHero = ({user, heroCardPost, viewablePosts, jobsSidebar,title }) => {
+const PostsSectionHero = ({user, heroCardPost, viewablePosts, jobsSidebar,title, showRecent }) => {
   return (
     <Container maxWidth="max-w-[1320px]">
-      <div className="w-full shadow-md h-full grid grid-cols-12 flex justify-center bg-white rounded-3xl p-6 lg:p-6">
-        <div className={`w-full max-w-full flex flex-col gap-2 col-span-12 `}>
-          <PostsGridHero title={title} largePost={heroCardPost} smallPosts={viewablePosts} />
+      {showRecent && 
+      <>
+        <div className="w-full shadow-md h-full grid grid-cols-12 flex justify-center bg-white rounded-3xl p-6 lg:p-6">
+            <div className={`w-full max-w-full flex flex-col gap-2 col-span-12 `}>
+            <PostsGridHero title={title} largePost={heroCardPost} smallPosts={viewablePosts} />
+            </div>
         </div>
-        {/* <SidebarDiscover
-          paddingTop="hidden ml-4 pl-6 lg:block pt-12"
-          content={jobsSidebar}
-        /> */}
-      </div>
-      <SectionDivider py="py-4" transparentLine={true}/>
+        <SectionDivider py="py-4" transparentLine={true}/>
+      </>
+
+      }
       <div className="w-full shadow-md h-full grid grid-cols-12 flex justify-center bg-white rounded-3xl p-6 lg:p-6">
         <div className={`w-full max-w-full flex flex-col gap-2 col-span-12 `}>
          <div className="flex justify-between">
             <RSSTitle title={'All posts'}/>
             </div>
-            <PostsGroup3Cards posts={viewablePosts?.slice(2,viewablePosts?.length)}/>
+            <PostsGroup3Cards posts={!showRecent?viewablePosts:viewablePosts?.slice(2,viewablePosts?.length)}/>
         </div>
         {/* <SidebarDiscover
           paddingTop="hidden ml-4 pl-6 lg:block pt-12"

diff --git a/pages/posts/index.js b/pages/posts/index.js
@@ -2,10 +2,10 @@ import dynamic from "next/dynamic";
 
 import { useRouter } from "next/router";
 import Container from "@/components/container";
-const MoreStories = dynamic(() => import("@/components/more-stories"));
+// const MoreStories = dynamic(() => import("@/components/more-stories"));
 const NewPagination = dynamic(() => import("@/components/pagination"));
 import Layout from "@/components/new-index/layoutForIndex";
-const EditorPick2 = dynamic(() => import("@/components/new-index/EditorPick2"));
+// const EditorPick2 = dynamic(() => import("@/components/new-index/EditorPick2"));
 import { useIntl } from "react-intl";
 import useUser from "@/lib/iron-session/useUser";
 
@@ -66,7 +66,8 @@ export default function PostsPage({ allPosts = [], preview, pagination = {} }) {
             viewablePosts={morePosts}
           />
 
-            : allPosts.length > 0 &&   <PostsSectionHero
+            : allPosts.length > 0 &&   
+            <PostsSectionHero
             user={user}
             heroCardPost={heroPost}
             viewablePosts={morePosts}

diff --git a/pages/posts/page/[pageNo].js b/pages/posts/page/[pageNo].js
@@ -2,88 +2,105 @@ import dynamic from "next/dynamic";
 
 import { useRouter } from 'next/router'
 import Container from '@/components/container'
-const MoreStories = dynamic(() => import("@/components/more-stories"));
-const EditorPick2 = dynamic(() => import("@/components/new-index/EditorPick2"));
+// const MoreStories = dynamic(() => import("@/components/more-stories"));
+// const EditorPick2 = dynamic(() => import("@/components/new-index/EditorPick2"));
 const NewPagination = dynamic(() => import("@/components/pagination"));
-import Layout from '@/components/layout'
+import Layout from "@/components/new-index/layoutForIndex";
 import { useIntl } from 'react-intl';
-import PostTitle from '@/components/post-title'
+// import PostTitle from '@/components/post-title'
+import TagsNavRow from "@/components/v4/section/TagsNavRow";
+import PostsSectionHero from "@/components/v4/section/PostsSectionHero";
+import useUser from "@/lib/iron-session/useUser";
 
 import { getAllPostsForPostsPage, getPostsByPageForPostsPage } from '@/lib/api'
+import PostTitle from "@/components/post-title";
 // import Head from 'next/head'
 const PAGE_SIZE = 12;
 export default function PostsPage({allPosts = [], preview, pagination = {}}) {
     let heroPost;
     let morePosts = [];
     let coverImage;
-    if (allPosts.length && pagination.page && pagination.page == 1) {
+    // if (allPosts.length && pagination.page && pagination.page == 1) {
         heroPost = allPosts[0]
         morePosts = allPosts.slice(1)
-        coverImage = 
-        heroPost.attributes.featuredImage?.data?.attributes?.url? heroPost.attributes.featuredImage?.data?.attributes?.url:
-        heroPost.attributes.legacyFeaturedImage ? heroPost.attributes.legacyFeaturedImage:'https://s3-us-west-1.amazonaws.com/tinify-bucket/%2Fprototypr%2Ftemp%2F1595435549331-1595435549330.png'
-    }
+        coverImage = heroPost?.attributes?.featuredImage?.data?.attributes?.url
+        ? heroPost.attributes.featuredImage?.data?.attributes?.url
+        : heroPost?.attributes?.legacyFeaturedImage
+        ? heroPost?.attributes?.legacyFeaturedImage
+        : "https://s3-us-west-1.amazonaws.com/tinify-bucket/%2Fprototypr%2Ftemp%2F1595435549331-1595435549330.png";
+    // }
     const router = useRouter()
     const intl = useIntl();
-
+  const { user, isLoading } = useUser({
+    redirectIfFound: false,
+  });
     const onPageNumChange = (pageNo) => {
         router.push(`/posts/page/${pageNo}`)
     }
 
     return (
         <>
-          <Layout 
-              maxWidth={'max-w-[1320px] search-wide'}
-
-          seo={{
+          <Layout
+        navOffset={false}
+        padding={false}
+        preview={preview}
+        background={"#EFF4FB"}
+        seo={{
           title: `Prototypr Design articles – free for everyone | Page ${pagination?.page}`,
           description:
             "Design content open and accessible to everyone, no paywall here.",
           //   image: "",
           canonical:`https://prototypr.io/posts/page/${pagination?.page}`,
           url: `https://prototypr.io/posts/page/${pagination?.page}`,
         }}
-          activeNav={"posts"} preview={preview}>
-            <Container>
-            {router.isFallback ? (
+      >
+      <div className="pt-[74px]">
+
+        <TagsNavRow/>
+        </div>
+        <Container padding={false} maxWidth="max-w-[1320px] mx-auto z-30 relative">
+        {router.isFallback ? (
                  <PostTitle>Loading…</PostTitle>
                 ) :
                 <>  
                 {
             <>
-              {  pagination.page && pagination.page == 1 && (
-                    <>
-                        {/* <Intro /> */}
-                        {heroPost && (
-                           <div className="pt-12">
-                           <EditorPick2 header={intl.formatMessage({ id: "editpicker.title"})} post={heroPost} />
-                          </div>
-                        )}
-                    </>
-                )
-            }
             {
                 pagination.page && pagination.page == 1 ? (
-                    morePosts.length > 0 && <MoreStories posts={morePosts} />
+                    morePosts.length > 0 &&  <PostsSectionHero
+                    user={user}
+                    heroCardPost={heroPost}
+                    viewablePosts={morePosts}
+                    showRecent={true}
+                  />
+
                 ): (
                     allPosts.length > 0 && 
-                    <div className="pt-8">
-                      <MoreStories posts={allPosts} />
+                    <div className="pt-4">
+                      <PostsSectionHero
+                        user={user}
+                        // heroCardPost={heroPost}
+                        viewablePosts={allPosts}
+                        showRecent={false}
+                      />
+
                     </div>
                 )
               }
             </>}
               </>}
+
 
-            <NewPagination 
-                total={pagination?.total}
-                pageSize={PAGE_SIZE}
-                currentPage={pagination?.page}
-                onPageNumChange={(pageNum) => {onPageNumChange(pageNum)}}
-            />
-
-            </Container>
-          </Layout>
+          <NewPagination
+            total={pagination?.total}
+            pageSize={PAGE_SIZE}
+            currentPage={pagination?.page}
+            onPageNumChange={(pageNum) => {
+              onPageNumChange(pageNum);
+            }}
+          />
+        </Container>
+      </Layout>
         </>
       )
 }