polluterofminds · July 14, 2022 19:26
diff --git a/index.js b/index.js
 import Head from 'next/head'
 import { useState, useEffect } from 'react'
 import Posts from '../components/Posts'
 import Skeleton from '../components/Skeleton';

 export default function Home({ data }) {
  const [posts, setPosts] = useState([])
  const [loading, setLoading] = useState(true);
  const [offset, setOffset] = useState(0);
  const [limit, setLimit] = useState(10);

  useEffect(() => {
    if (data) {
      setLoading(false);            
    }

    if(data && data.error) {
      alert("Trouble loading posts");
    }
  }, [data]);

  return (
    <div>
      <Head>
        <title>Pinata NFT Gated Blog</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div className="container">
        <h1 className="center">Welcome to the blog</h1>
        <p className="center">A source of all things Pinata and NFTs</p>
        {
          loading && data.length === 0 ? 
          <div className="center">
            <Skeleton />
          </div> : 
          <div className="center">
            {data && data.length > 0 && data.map(p => {
              return (
                <Posts key={p.id} post={p} />
              )
            })}
          </div>
        }
      </div>
      </div>
  )
 }

 export async function getServerSideProps(context) {
  try {    
    const host = process.env.NODE_ENV === "production" ? process.env.HOSTED_URL : "http://localhost:3000";
    const data = await fetch(`${host}/api/getPosts?offset=0&limit=10`);
    const json = await data.json();
    return { props: { data: json } } 
  } catch (error) {
    console.log(error);
    return { props: { data: { error: true } } }
  }  
 }
	import Head from 'next/head'
	import { useState, useEffect } from 'react'
	import Posts from '../components/Posts'
	import Skeleton from '../components/Skeleton';

	export default function Home({ data }) {
	const [posts, setPosts] = useState([])
	const [loading, setLoading] = useState(true);
	const [offset, setOffset] = useState(0);
	const [limit, setLimit] = useState(10);

	useEffect(() => {
	if (data) {
	setLoading(false);
	}

	if(data && data.error) {
	alert("Trouble loading posts");
	}
	}, [data]);

	return (
	<div>
	<Head>
	<title>Pinata NFT Gated Blog</title>
	<meta name="description" content="Generated by create next app" />
	<link rel="icon" href="/favicon.ico" />
	</Head>
	<div className="container">
	<h1 className="center">Welcome to the blog</h1>
	<p className="center">A source of all things Pinata and NFTs</p>
	{
	loading && data.length === 0 ?
	<div className="center">
	<Skeleton />
	</div> :
	<div className="center">
	{data && data.length > 0 && data.map(p => {
	return (
	<Posts key={p.id} post={p} />
	)
	})}
	</div>
	}
	</div>
	</div>
	)
	}

	export async function getServerSideProps(context) {
	try {
	const host = process.env.NODE_ENV === "production" ? process.env.HOSTED_URL : "http://localhost:3000";
	const data = await fetch(`${host}/api/getPosts?offset=0&limit=10`);
	const json = await data.json();
	return { props: { data: json } }
	} catch (error) {
	console.log(error);
	return { props: { data: { error: true } } }
	}
	}