diff --git a/src/components/search.js b/src/components/search.js index 0a14f5b..d9450b9 100644 --- a/src/components/search.js +++ b/src/components/search.js @@ -20,16 +20,30 @@ const inputStyles = css` export default function Search(props) { const [searchInput, setSearchInput] = useState(''); + const searchBarPlaceholder = props.isGlobalSearch ? 'Search published posts...' : 'Search your posts...' - useEffect(() => { - const delayDebounceFn = setTimeout(() => { - if (props.posts) { - filterPosts(); + const handleKeyDown = (event) => { + if (props.isGlobalSearch) { + if (event.key === 'Enter') { + console.log('do validate') props.getSearchInput(searchInput); } - }, 500) + } + } - return () => clearTimeout(delayDebounceFn) + useEffect(() => { + if (props.isGlobalSearch) { + + } else { + const delayDebounceFn = setTimeout(() => { + if (props.posts) { + filterPosts(); + props.getSearchInput(searchInput); + } + }, 500) + + return () => clearTimeout(delayDebounceFn) + } }, [searchInput]) const filterPosts = () => { @@ -39,13 +53,18 @@ export default function Search(props) { let tempPosts = props.posts.filter(p => p.title.toLowerCase().includes(searchInput.toLowerCase())) props.getFilteredPosts(tempPosts); } - } + const exploreSearchBarStyles = + props.isGlobalSearch ? + css`width: 100%` // Explore page search bar styles + : + css`width: 80%` // Dashboard page search bar styles + return ( -
+
{ setSearchInput(e.target.value); diff --git a/src/lib/db.js b/src/lib/db.js index 2680e64..4f5a996 100644 --- a/src/lib/db.js +++ b/src/lib/db.js @@ -112,4 +112,21 @@ export async function createPostForUser(userId) { .update({ posts: firebase.firestore.FieldValue.arrayUnion(doc.id) }) return doc.id -} \ No newline at end of file +} + +export async function filterExplorePosts(searchInput) { + let posts = [] + const snapshot = await firebase.firestore().collection('posts') + .where("published", "==", true) + .where('title', '!=', '') + .where("title", ">=", searchInput) + .where('title', "<", searchInput + 'z') + .get() + snapshot.docs.map(doc => { + posts.push({ + id: doc.id, + ...doc.data() + }); + }) + return posts; +} diff --git a/src/pages/dashboard/index.js b/src/pages/dashboard/index.js index 244471a..c22186a 100644 --- a/src/pages/dashboard/index.js +++ b/src/pages/dashboard/index.js @@ -65,15 +65,11 @@ export default function Dashboard() { return ( <>
- Reading List - - {/*Adds a new Link to the Contact Page*/} - - - Contact + + Explore 'Profile'} uid={user?.uid} /> @@ -118,9 +114,6 @@ export default function Dashboard() { isGlobalSearch={false} getFilteredPosts={getFilteredPosts} getSearchInput={getSearchInput} - css={css` - width: 3em - `} > diff --git a/src/pages/dashboard/list.js b/src/pages/dashboard/list.js index 513a1df..4a85bf5 100644 --- a/src/pages/dashboard/list.js +++ b/src/pages/dashboard/list.js @@ -123,6 +123,9 @@ export default function ReadingList() { Dashboard + + Explore + 'Profile'} uid={user?.uid} />
diff --git a/src/pages/explore/index.js b/src/pages/explore/index.js new file mode 100644 index 0000000..33d750b --- /dev/null +++ b/src/pages/explore/index.js @@ -0,0 +1,190 @@ +/** @jsxImportSource @emotion/react */ +import Link from 'next/link' +import Head from 'next/head' +import { useEffect, useState } from 'react' +import { css } from '@emotion/react' +import { useRouter } from 'next/router' +import { htmlToText } from 'html-to-text' +import { useAuthState } from 'react-firebase-hooks/auth' +import { useCollectionData } from 'react-firebase-hooks/firestore' +import { collection, query, where, getDocs } from "firebase/firestore"; + +import { createPostForUser, filterExplorePosts } from '../../lib/db' +import { firestore, auth } from '../../lib/firebase' + +import Button from '../../components/button' +import Header from '../../components/header' +import Spinner from '../../components/spinner' +import Container from '../../components/container' +import Search from '../../components/search' +import ProfileSettingsModal from '../../components/profile-settings-modal' +import { truncate } from '../../lib/utils' +import { getPostByID } from '../../lib/db' + +export default function Explore() { + const router = useRouter() + + const [user, userLoading, userError] = useAuthState(auth); + const [initPosts, initPostsLoading, initPostsError] = useCollectionData( + firestore.collection('posts') + .where('published', '==', true) + .where('title', '!=', '') + .orderBy('title') + .limit(15),{ idField: 'id' }, + ) + const [explorePosts, setExplorePosts] = useState([]); + + useEffect(() => { + console.log(user, userLoading, userError) + if (!user && !userLoading && !userError) { + router.push('/') + return + } + }, [router, user, userLoading, userError]); + + // Set initial filteredPosts + useEffect(() => { + (async () => { + let posts = await setPostAuthorProfilePics(initPosts); + setExplorePosts(posts); + })() + }, initPosts) + + // Set the profile pics for each author + const setPostAuthorProfilePics = async(filteredExplorePosts) => { + const postPromises = filteredExplorePosts?.map(async p => { + const post = await getPostByID(p.id) + const author = await firestore + .collection('users') + .doc(post.author) + .get() + post.author = author.data() + return post; + }) + const posts = postPromises ? await Promise.all(postPromises) : null + return posts + } + + // Get the searchInput from Search component and do the global search on db + const getFilteredExplorePosts = async (searchInput) => { + let filteredExplorePosts = await filterExplorePosts(searchInput); + filteredExplorePosts = await setPostAuthorProfilePics(filteredExplorePosts); + setExplorePosts(filteredExplorePosts) + return filteredExplorePosts; + } + + return ( + <> +
+ + Dashboard + + + Reading List + + 'Profile'} uid={user?.uid} /> + +
+ + {userError ? ( + <> +

Oop, we've had an error:

+ 
{JSON.stringify(error)}
+ + ) : user ? ( + explorePosts && explorePosts.length > 0 ? ( + <> + + + + ) : ( +

No posts have been published yet... You could be the first!

+ ) + ) : ( + + )} + + ) +} +Explore.getLayout = function Explore(page) { + return ( + + + Explore / The Abyss + + {page} + + ) +}