import Head from "next/head"; import styles from "../styles/Home.module.css"; import { Toolbar } from "../components/toolbar"; import imageUrlBuilder from "@sanity/image-url"; import { useState, useEffect } from "react"; import { useRouter } from "next/router"; export default function Home({ posts, authors }) { const router = useRouter(); const [mappedPosts, setMappedPosts] = useState([]); const [mappedAuthors, setMappedAuthors] = useState([]); console.log(mappedAuthors); console.log("mappedPosts: ", mappedPosts); useEffect(() => { if (posts.length && authors.length) { const imgBuilder = imageUrlBuilder({ projectId: "9w4ss8xn", dataset: "production", }); setMappedPosts( posts.map((p) => { return { ...p, mainImage: imgBuilder.image(p.mainImage).width(500).height(250), }; }) ); setMappedAuthors( authors.map((a) => { return { ...a, image: imgBuilder.image(a.image).width(100).height(100), }; }) ); } else { setMappedPosts([]); } }, [posts, authors]); return ( <div> <Toolbar /> <div className={styles.main}> <h1>Welcome To My Blog</h1> <h3>Recent Posts:</h3> <div className={styles.feed}> {mappedPosts.length ? ( mappedPosts.map((p, index) => ( <div key={index} className={styles.post}> <div onClick={() => router.push(`/post/${p.slug.current}`)} key={index} className={styles.post} > <h3>{p.title}</h3> <img className={styles.mainImage} src={p.mainImage} /> </div> {mappedAuthors .filter((a) => a._id === p.author._ref) .map((a, index) => ( <div key={index}> <img src={a.image} /> <h4>{a.name}</h4> </div> ))} </div> )) ) : ( <>No Posts Yet</> )} </div> </div> </div> ); } export const getServerSideProps = async (pageContext) => { const query = encodeURIComponent('*[ _type == "post" ]'); const qauthors = encodeURIComponent('*[ _type == "author" ]'); const url = `https://9w4ss8xn.api.sanity.io/v1/data/query/production?query=${query}`; const urlauthors = `https://9w4ss8xn.api.sanity.io/v1/data/query/production?query=${qauthors}`; const result = await fetch(url).then((res) => res.json()); const resultauthors = await fetch(urlauthors).then((res) => res.json()); if ( !result.result || !result.result.length || !resultauthors.result || !resultauthors.result.length ) { return { props: { posts: [], authors: [], }, }; } else { return { props: { posts: result.result, authors: resultauthors.result, }, }; } };
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter