debug: investigating hydrating error

components/Categories.tsx

@@ -9,21 +9,33 @@ export type Category = {
     slug?: string
 }
 interface CategoriesProps {
-    nested?:boolean
+    nested?:boolean,
+    passedCategories?:[string]
 }
 
-const Categories  = ({nested = false}: CategoriesProps): JSX.Element => {
+const Categories  = ({passedCategories, nested = false}: CategoriesProps): JSX.Element => {
 
+    const [tags, setTags] = useState<any>([]);
     const { categories } = useContext(StateContext);
 
+    useEffect(()=>{
+
+        if(passedCategories){
+            setTags(passedCategories);
+        }else {
+            setTags(categories);
+        }
+
+    },[]);
+
     return (
         <div className={'rounded-lg p-6 my-4 dark:m-0 mb-8 bg-background-light dark:bg-element-dark ' + (nested ? '' : 'border-[1px] dark:border-0 border-border-light')}>
 
             <h3 className='text-xl mb-8 border-b border-border-light dark:border-copy-dark pb-4 text-copy-light dark:text-copy-dark'>
                 Popular Tags
             </h3>
 
-            {categories.map((category:Category) => (
+            {(passedCategories || tags).map((category:Category) => (
                 <div key={category.name} className='flex flex-row items-center w-full lg:py-2 py-1' > 
 
 

components/CollectionsWidget.tsx

@@ -6,23 +6,30 @@ import {FaHome, FaColumns, FaRobot, FaFeather, FaQuestionCircle} from "react-ico
 import { getWithExpiry, HOUR_MS, setWithExpiry } from '../utils/utils';
 
 interface CollectionsWidgetProps {
-  nested?:boolean
+  nested?:boolean,
+  passedCollections?:[]
 }
 
-const CollectionsWidget = ({nested=false}: CollectionsWidgetProps): JSX.Element=> {
+const CollectionsWidget = ({passedCollections, nested=false}: CollectionsWidgetProps): JSX.Element=> {
 
     const [collections, setCollections] = useState([]);
 
     useEffect(()=>{
 
+        if (passedCollections) { //remove this while running locally
+          // Returns [] on first render, so the client and server match
+
+          return setCollections(passedCollections);
+        }
+
         let localCollections = getWithExpiry('collections');
         if(localCollections){
           setCollections(JSON.parse(localCollections));
 
           return;
         }
 
-        getCollections(10).then((results)=>{
+        getCollections(6).then((results)=>{
             setCollections(results);
 
             setWithExpiry('collections', JSON.stringify(results), HOUR_MS);
@@ -36,7 +43,7 @@ const CollectionsWidget = ({nested=false}: CollectionsWidgetProps): JSX.Element=
         {'Article Collections'}
       </h3>
 
-      {collections.map((item: any)=>(
+      {(passedCollections || collections).map((item: any)=>(
 
         <Link className='text-md text-copy-light dark:text-copy-dark' key={item.title} href={`/collections/${item.slug}`}>
 

components/LandingHero.tsx

@@ -78,19 +78,18 @@ const LandingHero = ({featuredPosts}:LandingHeroInterface): JSX.Element => {
         });
     }
 
-    useEffect(()=>{
-        //initial search on component load
-
-
-        if(featuredPosts.length > 3){
-            setMoreInitialPosts(true);
-        }else{
-            setMoreInitialPosts(false);
-        }
+    // useEffect(()=>{
+    //     //initial search on component load
+
+    //     if(featuredPosts.length > 3){
+    //         setMoreInitialPosts(true);
+    //     }else{
+    //         setMoreInitialPosts(false);
+    //     }
 
-        setInitialPosts(featuredPosts.filter((post:any, index:number)=>index < 3));
+    //     setInitialPosts(featuredPosts.filter((post:any, index:number)=>index < 3));
 
-    }, []);
+    // }, [featuredPosts]);
 
     return (
 
@@ -271,18 +270,18 @@ const LandingHero = ({featuredPosts}:LandingHeroInterface): JSX.Element => {
 
                                 ''
                             }
+
 
 
-
-                            {initialPosts.length > 0 && posts.length == 0 ?
+                            {(featuredPosts?.slice(0,3) || initialPosts).length > 0 && posts.length == 0 ?
 
                                 <div className='flex flex-col items-center justify-start w-full pt-[50px]'>
                                     <span className='text-copy-light dark:text-copy-dark text-xl font-semibold pb-5'>
                                         Articles you may like  
                                     </span>
 
                                     <div className='w-full text-md flex flex-col items-center justify-center'>
-                                        {initialPosts.map((post:any, index:number)=>(
+                                        {(featuredPosts?.slice(0,3) || initialPosts).map((post:any, index:number)=>(
 
                                             <Link href={`/post/${post.slug}`} key={post.id}>
                                                 <div className='search-result-show h-auto p-6 bg-cover border-0 hover:duration-300 transition flex flex-col md:flex-row justify-items-start md:justify-between items-center w-full mb-1 lg:mb-4 bg-element-light/[0.7] dark:bg-background-dark/[0.4] lg:rounded-lg cursor-pointer'
@@ -342,7 +341,7 @@ const LandingHero = ({featuredPosts}:LandingHeroInterface): JSX.Element => {
                                         ))}
                                     </div>
 
-                                    {moreInitialPosts ? 
+                                    {(moreInitialPosts || featuredPosts.length > 3) ? 
 
                                         <Link href={{ pathname: '/search', query: { searchQuery: 'featured' } }}>
                                             <div className='transition-all duration-500 cursor-pointer button bg-button-color soft-glow text-white p-3 hover:px-10 px-6 rounded-lg mt-[25px]'> 

components/PostWidget.tsx

@@ -11,15 +11,21 @@ export type Post = {
 interface PostWidgetProps {
   categories?: [string],
   slug?: string,
-  nested?:boolean
+  nested?:boolean,
+  recentPosts?:[]
 }
 
-const PostWidget = ({categories, slug, nested=false}: PostWidgetProps): JSX.Element=> {
+const PostWidget = ({categories, slug, recentPosts, nested=false}: PostWidgetProps): JSX.Element=> {
 
   const [ relatedPosts, setRelatedPosts ] = useState<[]>([]);
 
   useEffect(()=>{
 
+    if (recentPosts) { //remove this while running locally
+      // Returns [] on first render, so the client and server match
+      return setRelatedPosts(recentPosts);
+    }
+
     if(slug){
       //means we are looking at a specific post
 
@@ -65,7 +71,7 @@ const PostWidget = ({categories, slug, nested=false}: PostWidgetProps): JSX.Elem
         {slug ? 'Related Posts' : 'Recent Posts'}
       </h3>
 
-      {relatedPosts.map((post:any) => (
+      {(recentPosts || relatedPosts).map((post:any) => (
 
         <Link key={post.slug} href={`/post/${post.slug}`}>
           <div key={post.slug} className='cursor-pointer flex flex-row items-center w-full lg:py-2 py-1' > 

components/RightBarWidget.tsx

@@ -14,15 +14,16 @@ export type Post = {
 interface PostWidgetProps {
   categories?: [string],
   slug?: string
+  collections?:[]
 }
 
-const RightBarWidget = ({categories, slug}: PostWidgetProps): JSX.Element=> {
+const RightBarWidget = ({categories, slug, collections}: PostWidgetProps): JSX.Element=> {
 
     return (
         <div className='lg:rounded-lg m-0 mb-4 bg-background-light dark:bg-element-dark border-[1px] dark:border-0 border-border-light'>
 
             <SearchWidget />
-            <CollectionsWidget nested={true} />
+            <CollectionsWidget passedCollections={collections} nested={true} />
 
         </div>
     )

components/SideBarWidget.tsx

@@ -12,16 +12,17 @@ export type Post = {
 }
 interface PostWidgetProps {
   categories?: [string],
-  slug?: string
+  slug?: string,
+  recentPosts?:[]
 }
 
-const SideBarWidget = ({categories, slug}: PostWidgetProps): JSX.Element=> {
+const SideBarWidget = ({categories, slug, recentPosts}: PostWidgetProps): JSX.Element=> {
 
   return (
     <div className='lg:rounded-lg m-0  mb-4 bg-background-light dark:bg-element-dark border-[1px] dark:border-0 border-border-light'>
 
-        <PostWidget nested={true} slug={slug} categories={categories}/>
-        <Categories nested={true} />
+        <PostWidget recentPosts={recentPosts} nested={true} slug={slug} categories={categories}/>
+        <Categories nested={true} passedCategories={categories} />
 
         <div className={' p-6 dark:m-0 my-4 mb-8 w-full'}>
 

pages/index.tsx

@@ -9,7 +9,7 @@ import TestFeatured from '../components/TestFeature';
 import useScrollDirection from '../hooks/useScrollDirection';
 import useWindowDimensions from '../hooks/useWindowDimensions';
 import { useWindowScrollPositions } from '../hooks/useWindowScrollPositions';
-import {getCategories, getCollections, getPosts } from '../services'; 
+import {getCategories, getCollections, getPosts, getRecentPosts } from '../services'; 
 import { StateContext } from './_app';
 import createScrollSnap from 'scroll-snap';
 import { BsCloudMoonFill } from "react-icons/bs";
@@ -21,7 +21,10 @@ import Script from 'next/script';
 
 interface HomeProps {
   posts: [],
-  collections: []
+  collections: [],
+  recentPosts: [],
+  categories: [string],
+  passedFeaturedPosts: []
 }
 
 //augmenting console object
@@ -36,20 +39,13 @@ console.blog = (userName: string) => {
   console.log("Console.blog for ", userName);
 }
 
-const Home: NextPage<HomeProps> = ({ posts, collections }: HomeProps): JSX.Element => {
+const Home: NextPage<HomeProps> = ({ posts, collections, recentPosts, categories }: HomeProps): JSX.Element => {
 
-  const searchRef = useRef(null);
-  const featuredPosts = posts.filter((post:any)=> post.featuredPost); 
+  const featuredPosts = posts.filter((post:any)=> post.featuredPost); //for SSR
   const {menu} = useContext(StateContext);
-  const scrollDirection = useScrollDirection();
-  const {windowHeight} = useWindowDimensions();
-  const {scrollY} = useWindowScrollPositions();
-  const [scrollTop, setScrollTop] = useState(0);
-  const [lastScroll, setLastScroll] = useState(new Date());
-  const collectionsRef = useRef<HTMLDivElement>(null);
   const containerRef = useRef<HTMLDivElement>(null); 
+
   // const collectionOnScreen = useOnScreen(collectionsRef); 
-  const [snapping, setSnapping] = useState(false);
 
 
 
@@ -160,7 +156,7 @@ const Home: NextPage<HomeProps> = ({ posts, collections }: HomeProps): JSX.Eleme
               <div className="transition-all duration-300 lg:sticky relative lg:top-[90px]">
 
 
-                <SideBarWidget />
+                <SideBarWidget categories={categories} recentPosts={recentPosts} />
 
                 {/* <SideTray options='homeOptions'/> */}
 
@@ -211,7 +207,7 @@ const Home: NextPage<HomeProps> = ({ posts, collections }: HomeProps): JSX.Eleme
                   <div className="transition-all duration-300 my-4 lg:sticky relative lg:top-[90px]">
 
 
-                    <RightBarWidget />
+                    <RightBarWidget collections={collections} />
 
                   </div>
 
@@ -222,7 +218,7 @@ const Home: NextPage<HomeProps> = ({ posts, collections }: HomeProps): JSX.Eleme
                   <div className="transition-all duration-300 lg:sticky relative lg:top-[90px]">
 
 
-                    <SideBarWidget />
+                    <SideBarWidget categories={categories} recentPosts={recentPosts} />
 
                   </div>
 
@@ -248,11 +244,21 @@ const Home: NextPage<HomeProps> = ({ posts, collections }: HomeProps): JSX.Eleme
 
 export const getStaticProps = async () : Promise<{}> => {
 
-  const posts = (await getPosts()) || [];
-  const collections = (await getCollections()) || [];
+  try {
+    const posts = (await getPosts()) || [];
+    const collections = (await getCollections(6)) || [];
+    const recentPosts = (await getRecentPosts()) || [];
+    const categories = (await getCategories()) || [];
+    const featuredPosts = posts.filter((post:any)=> post.featuredPost); 
+
+    return {
+      props: { posts, collections, recentPosts, categories, featuredPosts }
+    }
+  }catch (e) {
+
+    console.log('error: ', e);
 
-  return {
-    props: { posts, collections }
+    return Promise<{}>; 
   }
 }