show correct order of tools on homepage, stop user nav flicker

Prototypr · May 29, 2024 · a4b2a5d · a4b2a5d
1 parent a0abe06
commit a4b2a5d
Show file tree

Hide file tree

Showing 13 changed files with 71 additions and 50 deletions.
diff --git a/components/BusinessNav.js b/components/BusinessNav.js
@@ -150,7 +150,7 @@ export default function BusinessNav({
                   showJobsButton={showJobsButton}
                   hideLocaleSwitcher={true}
                   user={user}
-                  userLoading={isLoading}
+                  userLoading={false}
                   userLoggedInCookie={userLoggedInCookie}
                   activeNav={activeNav}
                   editor={isEditor}
@@ -170,7 +170,7 @@ export default function BusinessNav({
             <NavigationMenuMobile
               user={user}
               userLoggedInCookie={userLoggedInCookie}
-              userLoading={isLoading}
+              userLoading={false}
               activeNav={activeNav}
             />
           </div>

diff --git a/components/EditorNav.js b/components/EditorNav.js
@@ -124,7 +124,7 @@ export default function EditorNav({ activeNav, postStatus }) {
                   showJobsButton={false}
                   hideLocaleSwitcher={true}
                   user={user}
-                  userLoading={isLoading}
+                  userLoading={false}
                   userLoggedInCookie={userLoggedInCookie}
                   activeNav={activeNav}
                   editor={true}
@@ -144,7 +144,7 @@ export default function EditorNav({ activeNav, postStatus }) {
             <NavigationMenuMobile
               user={user}
               userLoggedInCookie={userLoggedInCookie}
-              userLoading={isLoading}
+              userLoading={false}
               activeNav={activeNav}
             />
           </div>

diff --git a/components/Navbar/Navbar.jsx b/components/Navbar/Navbar.jsx
@@ -195,7 +195,7 @@ const Navbar = ({
                 </NavigationMenuList>
               </NavigationMenu>
               <div className="relative">
-                <UserMenu userLoading={isLoading} user={user} />
+                <UserMenu userLoading={false} user={user} />
               </div>
               {sponsor?<NavSponsor sponsor={sponsor} />:null}
               <div>&nbsp;</div>

diff --git a/components/Navbar/NavbarApp.js b/components/Navbar/NavbarApp.js
@@ -197,7 +197,7 @@ const Navbar = ({
                 </NavigationMenuList>
               </NavigationMenu>
               <div className="relative">
-                <UserMenu userLoading={isLoading} user={user}  sessionUser={sessionUser}/>
+                <UserMenu userLoading={false} user={user}  sessionUser={sessionUser}/>
               </div>
               {sponsor?<NavSponsor sponsor={sponsor} />:null}
               <div>&nbsp;</div>

diff --git a/components/navbar-menu.js b/components/navbar-menu.js
@@ -225,7 +225,7 @@ export const NavigationMenuDemo = ({
             {user && user?.isLoggedIn ? (
               <div className="ml-2 w-8 relative">
                 {/* <Link href="/account"> */}
-                {user ? <UserMenu userLoading={userLoading} user={user} /> : ""}
+                {user ? <UserMenu userLoading={false} user={user} /> : ""}
                 {/* {user && 
                   <ProfileBadge
                   user={user}

diff --git a/components/navbar2.js b/components/navbar2.js
@@ -156,7 +156,7 @@ export default function Navbar({ activeNav }) {
                 <NavigationMenuDemo
                   collapsed={showNav}
                   user={user}
-                  userLoading={isLoading}
+                  userLoading={false}
                   userLoggedInCookie={userLoggedInCookie}
                   activeNav={activeNav}
                 />
@@ -165,7 +165,7 @@ export default function Navbar({ activeNav }) {
           </div>
           <SubNav
             collapse={showNav}
-            userLoading={isLoading}
+            userLoading={false}
             activeNav={activeNav}
           />
         </div>
@@ -180,7 +180,7 @@ export default function Navbar({ activeNav }) {
             <NavigationMenuMobile
               user={user}
               userLoggedInCookie={userLoggedInCookie}
-              userLoading={isLoading}
+              userLoading={false}
               activeNav={activeNav}
             />
           </div>

diff --git a/components/small-nav.js b/components/small-nav.js
@@ -140,7 +140,7 @@ export default function Navbar({ activeNav }) {
                 <NavigationMenuDemo
                   collapsed={showNav}
                   user={user}
-                  userLoading={isLoading}
+                  userLoading={false}
                   userLoggedInCookie={userLoggedInCookie}
                   activeNav={activeNav}
                 />

diff --git a/components/v4/card/BigCard/BigBackgroundCard.js b/components/v4/card/BigCard/BigBackgroundCard.js
@@ -4,6 +4,7 @@ import Avatar from "../../avatar/Avatar";
 import MediumTag from "../../tag/MediumTag";
 import gumletLoader from "@/components/new-index/gumletLoader";
 import Moment from "react-moment";
+const defaultBase64 = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAABLCAQAAAA1k5H2AAAAi0lEQVR42u3SMQEAAAgDoC251a3gL2SgmfBYBRAA`;
 
 // layouts: 1 is big image
 // 2 is small image
@@ -35,7 +36,7 @@ const BigBackgroundCard = ({
         <Link href={link ?? ""}>
           <Image
             placeholder="blur"
-            blurDataURL={post?.attributes?.base64}
+            blurDataURL={post?.attributes?.base64?post?.attributes?.base64:defaultBase64}
             loader={gumletLoader}
             className="object-cover cursor-pointer group-hover:scale-[1.03] transition transition-all duration-700"
             layout="fill"

diff --git a/components/v4/layout/CardColumn.js b/components/v4/layout/CardColumn.js
@@ -77,7 +77,7 @@ const CardColumn = ({
             })}
       </div>
       <div className="flex flex-col pt-6 grid grid-cols-6 gap-5">
-        {tools.slice(3, tools.length - 1).map((tool, index) => {
+        {tools.slice(2, tools.length - 1).map((tool, index) => {
           return (
             <div key={index} className="flex col-span-6 sm:col-span-3 lg:col-span-3 xl:col-span-6 flex-col">
               {index !== 0 ? (

diff --git a/lib/locale/transformLocale.js b/lib/locale/transformLocale.js
@@ -68,7 +68,7 @@ export const transformPost =(post, locale) =>{
  */
 export const transformPostListOld = (postList, locale) =>{
 
-  for (var i =0;i<postList.length;i++){
+  for (var i =0;i<postList?.length;i++){
     var post = postList[i]
 
     let title={}

diff --git a/lib/utils/groupPostsByDate.js b/lib/utils/groupPostsByDate.js
@@ -15,7 +15,7 @@ export function groupPostsByDate(posts) {
   const thisWeekStart = new Date(today.getTime() - today.getDay() * 86400000);
   const lastMonth = new Date(today.getFullYear(), today.getMonth() - 1, today.getDate());
 
-  posts.forEach(post => {
+  posts?.forEach(post => {
     const postDate = new Date(post.attributes?.date);
     const postDateStart = new Date(postDate.getFullYear(), postDate.getMonth(), postDate.getDate());
 

diff --git a/lib/utils/postUtils.js b/lib/utils/postUtils.js
@@ -29,7 +29,7 @@ function authorExists(authors, slug) {
 
 // https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array
 export const shuffleArray = (array)=> {
-    for (var i = array.length - 1; i > 0; i--) {
+    for (var i = array?.length - 1; i > 0; i--) {
         var j = Math.floor(Math.random() * (i + 1));
         var temp = array[i];
         array[i] = array[j];

diff --git a/pages/index.js b/pages/index.js
@@ -92,7 +92,6 @@ export default function Index({
   // const jobsSidebar = jobs.filter((item, i) => i !== 0);
   const toolsList = allTools;
 
-
   return (
     <>
       <Layout
@@ -112,7 +111,7 @@ export default function Index({
           url: "https://prototypr.io",
         }}
       >
-        {!user?.isLoggedIn  ? (
+        {!user?.isLoggedIn ? (
           <>
             <IntroBanner sponsor={sponsors?.length ? sponsors[0] : null} />
             {/* <SectionDivider
@@ -141,8 +140,8 @@ export default function Index({
             </div>
 
             <div className="order-2 md:order-2 col-span-9 md:col-span-6 ">
-            <h3 className="md:hidden mt-6 mb-3 font-bold drop-shadow-sm text-xl tracking-[-0.018em] text-gray-800">
-                  New Posts
+              <h3 className="md:hidden mt-6 mb-3 font-bold drop-shadow-sm text-xl tracking-[-0.018em] text-gray-800">
+                New Posts
               </h3>
               <HeroArticleSection
                 user={user}
@@ -184,7 +183,7 @@ export default function Index({
               <CardColumn
                 sponsor={navSponsor}
                 withBackground={false}
-                tools={[...toolsList.slice(0, 8)]}
+                tools={toolsList ? [...toolsList.slice(0, 8)] : []}
               />
             </div>
           </div>
@@ -206,7 +205,9 @@ export default function Index({
           <NewsletterSection />
         </div>
         <div className="mt-14 py-4 pb-[100px] bg-[#f2f4fa]">
-          <ToolsCarouselSection toolsList={toolsList} sponsors={sponsors} />
+          {toolsList?.length > 0 ? (
+            <ToolsCarouselSection toolsList={toolsList} sponsors={sponsors} />
+          ) : null}
           {/* <Container maxWidth="max-w-[1320px] -mb-10 mt-12 z-30 relative">
           <TwoColumnCards />
         </Container> */}
@@ -216,8 +217,12 @@ export default function Index({
           <HeroArticleSection
             user={user}
             cols={4}
-            heroCardPost={morePosts[4]}
-            viewablePosts={morePosts.slice(5, morePosts.length)}
+            heroCardPost={morePosts?.length > 3 ? morePosts[4] : null}
+            viewablePosts={
+              morePosts?.length > 5
+                ? morePosts.slice(5, morePosts.length)
+                : null
+            }
             showBigPost={2}
             showTitle={false}
           />
@@ -322,7 +327,10 @@ export default function Index({
           {/* <SectionDivider /> */}
           {TAB_ITEMS?.map((topic, index) => {
             return (
-              <div key={`topicsection_${index}`} className={`z-40 ${index % 2 === 0?'bg-[#f2f4fa]':''} py-10 `}>
+              <div
+                key={`topicsection_${index}`}
+                className={`z-40 ${index % 2 === 0 ? "bg-[#f2f4fa]" : ""} py-10 `}
+              >
                 <TopicSectionHome
                   tagline={topic.tagline}
                   showSidebar={false}
@@ -336,8 +344,13 @@ export default function Index({
                   )}
                   // heroJob={heroJob}
                   sponsors={sponsors}
-                  toolsList={topicRes[topic.slug]?.tools.slice(0, 10)}
-                  authorsList={topicRes[topic.slug]?.authors}
+                  toolsList={(
+                    (topicRes && topicRes[topic.slug]?.tools) ||
+                    []
+                  ).slice(0, 10)}
+                  authorsList={
+                    (topicRes && topicRes[topic.slug]?.authors) || {}
+                  }
                 />
 
                 {/* <SectionDivider py="py-12 opacity-70" transparentLine={true} /> */}
@@ -362,7 +375,6 @@ export default function Index({
               </div>
             );
           })}
-
         </div>
         {/* <BrowserView>
           <DesignTool allTools={toolsList} />
@@ -395,11 +407,14 @@ export async function getStaticProps({ preview = null, locale }) {
       "date:desc",
     ])) || [];
 
-
-  for (var x=0;x<allTools.data.length;x++){
+  for (var x = 0; x < allTools?.data?.length; x++) {
     //generate blurhash here
-    allTools.data[x].attributes.logoBase64 = createB64WithFallback(allTools.data[x]?.attributes?.logo?.data?.attributes?.blurhash);
-    allTools.data[x].attributes.base64 = createB64WithFallback(allTools.data[x]?.attributes?.featuredImage?.data?.attributes?.blurhash);
+    allTools.data[x].attributes.logoBase64 = createB64WithFallback(
+      allTools.data[x]?.attributes?.logo?.data?.attributes?.blurhash
+    );
+    allTools.data[x].attributes.base64 = createB64WithFallback(
+      allTools.data[x]?.attributes?.featuredImage?.data?.attributes?.blurhash
+    );
   }
 
   let allNews = (await getAllNews(preview, 15, 0)) || [];
@@ -413,10 +428,11 @@ export async function getStaticProps({ preview = null, locale }) {
       (await getCommonQuery(preview, [tag], "article", 12, 0, sort)) || [];
 
     //add blurhash to the images
-    for(var x = 0;x<res.data.length;x++){
-      res.data[x].attributes.base64 = createB64WithFallback(res.data[x]?.attributes?.featuredImage?.data?.attributes?.blurhash);
+    for (var x = 0; x < res?.data?.length; x++) {
+      res.data[x].attributes.base64 = createB64WithFallback(
+        res.data[x]?.attributes?.featuredImage?.data?.attributes?.blurhash
+      );
     }
-
 
     const topicToolsRes =
       (await getCommonQuery(
@@ -437,9 +453,14 @@ export async function getStaticProps({ preview = null, locale }) {
     shuffleArray(topicToolsRes.data);
 
     //add blurhash to the images
-    for(var x = 0;x<topicToolsRes.data.length;x++){
-      topicToolsRes.data[x].attributes.logoBase64 = createB64WithFallback(topicToolsRes.data[x]?.attributes?.logo?.data?.attributes?.blurhash);
-      topicToolsRes.data[x].attributes.base64 = createB64WithFallback(topicToolsRes.data[x]?.attributes?.featuredImage?.data?.attributes?.blurhash);
+    for (var x = 0; x < topicToolsRes?.data?.length; x++) {
+      topicToolsRes.data[x].attributes.logoBase64 = createB64WithFallback(
+        topicToolsRes.data[x]?.attributes?.logo?.data?.attributes?.blurhash
+      );
+      topicToolsRes.data[x].attributes.base64 = createB64WithFallback(
+        topicToolsRes.data[x]?.attributes?.featuredImage?.data?.attributes
+          ?.blurhash
+      );
     }
 
     const topicData = {
@@ -450,7 +471,6 @@ export async function getStaticProps({ preview = null, locale }) {
     topicRes[tag] = topicData;
   }
 
-
   // const popularTags =
   //   (await getPopularTopics({ postType: "article", pageSize: 34 })) || [];
 
@@ -461,8 +481,10 @@ export async function getStaticProps({ preview = null, locale }) {
   allTools = transformPostListOld(allTools.data, locale);
 
   //add blurhash to allPosts images
-  for(var x = 0;x<allPosts.length;x++){
-    allPosts[x].attributes.base64 = createB64WithFallback(allPosts[x]?.attributes?.featuredImage?.data?.attributes?.blurhash);
+  for (var x = 0; x < allPosts?.length; x++) {
+    allPosts[x].attributes.base64 = createB64WithFallback(
+      allPosts[x]?.attributes?.featuredImage?.data?.attributes?.blurhash
+    );
   }
 
   // shuffleArray(allTools)
@@ -471,28 +493,26 @@ export async function getStaticProps({ preview = null, locale }) {
   allTools = formatAllTools({ tools: allTools, tagNumber: 1 });
   allNews = formatAllTools({ tools: allNews.data, tagNumber: 0 });
 
-
-  const {navSponsor, sponsors} = await getSponsors();
+  const { navSponsor, sponsors } = await getSponsors();
 
   // for(var x = 0; x<allNews.tools.length;x++){
   //   allNews.tools[x].attributes.base64 = createB64WithFallback(allNews.tools[x]?.attributes?.featuredImage?.data?.blurhash);
   //   allTools.data[x].attributes.logoBase64 = createB64WithFallback(allTools.data[x]?.attributes?.logo?.data?.blurhash);
   // }
 
   let groupedNewsPosts = groupPostsByDate(allNews);
-
 
   return {
     props: {
-      heroPost: allPosts[0],
-      morePosts: allPosts.slice(1),
-      allTools: allTools,
-      allNews: allNews,
-      groupedNewsPosts: groupedNewsPosts,
+      heroPost: allPosts?.length ? allPosts[0] : null,
+      morePosts: allPosts?.length > 1 ? allPosts.slice(1) : null,
+      allTools: allTools?.length ? allTools : null,
+      allNews: allNews?.length ? allNews : null,
+      groupedNewsPosts: groupedNewsPosts ? groupedNewsPosts : null,
       // popularTags,
       // otherPosts: otherPosts,
       // interviewPosts: interviews.data,
-      topicRes,
+      topicRes: topicRes ? topicRes : null,
       preview,
       // jobs,
       // randomPosts: randomPosts.slice(0, 8),