7 | @{user.username} 8 |
9 |{``}}
54 | Live
:Unpublished
} 43 | 44 | )} 45 |7 | @{user.username} 8 |
9 |ID: {post.slug}
39 | 40 |Checking...
; 136 | } else if (isValid) { 137 | return{username} is available!
; 138 | } else if (username && !isValid) { 139 | returnThat username is taken!
; 140 | } else { 141 | return ; 142 | } 143 | } 144 | -------------------------------------------------------------------------------- /pages/index.js: -------------------------------------------------------------------------------- 1 | import PostFeed from '@components/PostFeed'; 2 | import Metatags from '@components/Metatags'; 3 | import Loader from '@components/Loader'; 4 | import { firestore, fromMillis, postToJSON } from '@lib/firebase'; 5 | 6 | import { useState } from 'react'; 7 | 8 | // Max post to query per page 9 | const LIMIT = 10; 10 | 11 | export async function getServerSideProps(context) { 12 | const postsQuery = firestore 13 | .collectionGroup('posts') 14 | .where('published', '==', true) 15 | .orderBy('createdAt', 'desc') 16 | .limit(LIMIT); 17 | 18 | const posts = (await postsQuery.get()).docs.map(postToJSON); 19 | 20 | return { 21 | props: { posts }, // will be passed to the page component as props 22 | }; 23 | } 24 | 25 | export default function Home(props) { 26 | const [posts, setPosts] = useState(props.posts); 27 | const [loading, setLoading] = useState(false); 28 | 29 | const [postsEnd, setPostsEnd] = useState(false); 30 | 31 | // Get next page in pagination query 32 | const getMorePosts = async () => { 33 | setLoading(true); 34 | const last = posts[posts.length - 1]; 35 | 36 | const cursor = typeof last.createdAt === 'number' ? fromMillis(last.createdAt) : last.createdAt; 37 | 38 | const query = firestore 39 | .collectionGroup('posts') 40 | .where('published', '==', true) 41 | .orderBy('createdAt', 'desc') 42 | .startAfter(cursor) 43 | .limit(LIMIT); 44 | 45 | const newPosts = (await query.get()).docs.map((doc) => doc.data()); 46 | 47 | setPosts(posts.concat(newPosts)); 48 | setLoading(false); 49 | 50 | if (newPosts.length < LIMIT) { 51 | setPostsEnd(true); 52 | } 53 | }; 54 | 55 | return ( 56 |Welcome! This app is built with Next.js and Firebase and is loosely inspired by Dev.to.
62 |Sign up for an 👨🎤 account, ✍️ write posts, then 💞 heart content created by other users. All public content is server-rendered and search-engine optimized.
63 |