From 464457ee1668e51669a945e126ee4c779b057293 Mon Sep 17 00:00:00 2001 From: jennifershinshin Date: Tue, 3 Oct 2023 17:12:37 -0700 Subject: [PATCH 1/6] wip: Updated header css so that it highlights the current page youre on, fixed search bar css --- src/components/search.js | 39 +++++-- src/lib/db.js | 15 ++- src/pages/dashboard/index.js | 15 ++- src/pages/dashboard/list.js | 6 ++ src/pages/explore/index.js | 190 +++++++++++++++++++++++++++++++++++ 5 files changed, 245 insertions(+), 20 deletions(-) create mode 100644 src/pages/explore/index.js diff --git a/src/components/search.js b/src/components/search.js index 0a14f5b..3e97ecb 100644 --- a/src/components/search.js +++ b/src/components/search.js @@ -21,15 +21,28 @@ const inputStyles = css` export default function Search(props) { const [searchInput, setSearchInput] = useState(''); - 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 +52,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..da573bd 100644 --- a/src/lib/db.js +++ b/src/lib/db.js @@ -112,4 +112,17 @@ 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) { + const query = await firestore + .collection('posts') + .where('published', '==', true) + .get(); + + query.forEach(doc => { + console.log('momo foreach', doc.excerpt) + }) + + return query +} diff --git a/src/pages/dashboard/index.js b/src/pages/dashboard/index.js index 244471a..5d44e2b 100644 --- a/src/pages/dashboard/index.js +++ b/src/pages/dashboard/index.js @@ -50,6 +50,7 @@ export default function Dashboard() { // Set initial filteredPosts useEffect(() => { setFilteredPosts(posts) + console.log('momo posts', posts) }, posts) // Get the filtered posts from Search component @@ -65,15 +66,14 @@ export default function Dashboard() { return ( <>
- + +
Dashboard + Reading List - - {/*Adds a new Link to the Contact Page*/} - - - Contact + + Explore 'Profile'} uid={user?.uid} /> @@ -118,9 +118,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..4b9e446 100644 --- a/src/pages/dashboard/list.js +++ b/src/pages/dashboard/list.js @@ -123,6 +123,12 @@ export default function ReadingList() { Dashboard + + Reading List + + + 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..f2bd1eb --- /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) + .limit(15),{ idField: 'id' }, + ) + const [explorePosts, setExplorePosts] = useState([]); + + const getMyDocs = async (searchInput) => { + let filteredPosts = await filterExplorePosts(searchInput); + console.log('momo getMyDocs', filteredPosts) +} + + useEffect(() => { + console.log(user, userLoading, userError) + if (!user && !userLoading && !userError) { + router.push('/') + return + } + }, [router, user, userLoading, userError]); + + // Set initial filteredPosts + useEffect(() => { + (async () => { + const postPromises = initPosts?.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 + setExplorePosts(posts) + console.log('momoo yay',explorePosts); + })() + }, initPosts) + + // Get the searchInput from Search component and do the global search + const getSearchInput = (searchInput) => { + let docs = getMyDocs(searchInput); + console.log('MOMO DOCS', docs); + return searchInput + } + + return ( + <> +
+ + Dashboard + + + Reading List + + + Explore + + '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} + + ) +} From 21aba2744660f70074ee1db235f5382b8ca7dae5 Mon Sep 17 00:00:00 2001 From: jennifershinshin Date: Wed, 4 Oct 2023 21:46:56 -0700 Subject: [PATCH 2/6] wip: got published posts and trying to query on it --- src/components/search.js | 3 ++- src/lib/db.js | 20 ++++++++++---------- src/pages/explore/index.js | 17 ++++++----------- 3 files changed, 18 insertions(+), 22 deletions(-) diff --git a/src/components/search.js b/src/components/search.js index 3e97ecb..d9450b9 100644 --- a/src/components/search.js +++ b/src/components/search.js @@ -20,6 +20,7 @@ const inputStyles = css` export default function Search(props) { const [searchInput, setSearchInput] = useState(''); + const searchBarPlaceholder = props.isGlobalSearch ? 'Search published posts...' : 'Search your posts...' const handleKeyDown = (event) => { if (props.isGlobalSearch) { @@ -72,7 +73,7 @@ export default function Search(props) { { diff --git a/src/lib/db.js b/src/lib/db.js index da573bd..f9dbfaf 100644 --- a/src/lib/db.js +++ b/src/lib/db.js @@ -115,14 +115,14 @@ export async function createPostForUser(userId) { } export async function filterExplorePosts(searchInput) { - const query = await firestore - .collection('posts') - .where('published', '==', true) - .get(); - - query.forEach(doc => { - console.log('momo foreach', doc.excerpt) - }) - - return query + let posts = [] + const snapshot = await firebase.firestore().collection('posts') + .where("published", "==", true) + .where("title", ">=", searchInput) + .get() + snapshot.docs.map(doc =>{ + console.log('momo', doc.id, " => ", doc.data()); + posts.push(doc.data()) + }); + return posts; } diff --git a/src/pages/explore/index.js b/src/pages/explore/index.js index f2bd1eb..d189475 100644 --- a/src/pages/explore/index.js +++ b/src/pages/explore/index.js @@ -32,11 +32,6 @@ export default function Explore() { ) const [explorePosts, setExplorePosts] = useState([]); - const getMyDocs = async (searchInput) => { - let filteredPosts = await filterExplorePosts(searchInput); - console.log('momo getMyDocs', filteredPosts) -} - useEffect(() => { console.log(user, userLoading, userError) if (!user && !userLoading && !userError) { @@ -63,11 +58,11 @@ export default function Explore() { })() }, initPosts) - // Get the searchInput from Search component and do the global search - const getSearchInput = (searchInput) => { - let docs = getMyDocs(searchInput); - console.log('MOMO DOCS', docs); - return searchInput + // Get the searchInput from Search component and do the global search on db + const getFilteredExplorePosts = async (searchInput) => { + let filteredExplorePosts = await filterExplorePosts(searchInput); + console.log('momo filteredExplorePosts', filteredExplorePosts) + return filteredExplorePosts; } return ( @@ -97,7 +92,7 @@ export default function Explore() { Date: Sat, 14 Oct 2023 10:26:25 -0700 Subject: [PATCH 3/6] removed some comments, updated filterExplorePosts --- src/lib/db.js | 3 ++- src/pages/dashboard/index.js | 4 ---- src/pages/dashboard/list.js | 3 --- src/pages/explore/index.js | 5 ----- 4 files changed, 2 insertions(+), 13 deletions(-) diff --git a/src/lib/db.js b/src/lib/db.js index f9dbfaf..799ea16 100644 --- a/src/lib/db.js +++ b/src/lib/db.js @@ -119,9 +119,10 @@ export async function filterExplorePosts(searchInput) { const snapshot = await firebase.firestore().collection('posts') .where("published", "==", true) .where("title", ">=", searchInput) + .where('title', "<", searchInput + 'z') .get() snapshot.docs.map(doc =>{ - console.log('momo', doc.id, " => ", doc.data()); + console.log('search results', doc.id, " => ", doc.data()); posts.push(doc.data()) }); return posts; diff --git a/src/pages/dashboard/index.js b/src/pages/dashboard/index.js index 5d44e2b..c22186a 100644 --- a/src/pages/dashboard/index.js +++ b/src/pages/dashboard/index.js @@ -50,7 +50,6 @@ export default function Dashboard() { // Set initial filteredPosts useEffect(() => { setFilteredPosts(posts) - console.log('momo posts', posts) }, posts) // Get the filtered posts from Search component @@ -66,9 +65,6 @@ export default function Dashboard() { return ( <>
- - Dashboard - Reading List diff --git a/src/pages/dashboard/list.js b/src/pages/dashboard/list.js index 4b9e446..4a85bf5 100644 --- a/src/pages/dashboard/list.js +++ b/src/pages/dashboard/list.js @@ -123,9 +123,6 @@ export default function ReadingList() { Dashboard - - Reading List - Explore diff --git a/src/pages/explore/index.js b/src/pages/explore/index.js index d189475..18866d9 100644 --- a/src/pages/explore/index.js +++ b/src/pages/explore/index.js @@ -54,14 +54,12 @@ export default function Explore() { }) const posts = postPromises ? await Promise.all(postPromises) : null setExplorePosts(posts) - console.log('momoo yay',explorePosts); })() }, initPosts) // Get the searchInput from Search component and do the global search on db const getFilteredExplorePosts = async (searchInput) => { let filteredExplorePosts = await filterExplorePosts(searchInput); - console.log('momo filteredExplorePosts', filteredExplorePosts) return filteredExplorePosts; } @@ -74,9 +72,6 @@ export default function Explore() { Reading List - - Explore - 'Profile'} uid={user?.uid} />
From e4727685c56a12acd1210dba81196cc8a7478f6d Mon Sep 17 00:00:00 2001 From: jennifershinshin Date: Sat, 14 Oct 2023 10:51:48 -0700 Subject: [PATCH 4/6] small fix but still buggy --- src/pages/explore/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/explore/index.js b/src/pages/explore/index.js index 18866d9..5be3e19 100644 --- a/src/pages/explore/index.js +++ b/src/pages/explore/index.js @@ -60,6 +60,7 @@ export default function Explore() { // Get the searchInput from Search component and do the global search on db const getFilteredExplorePosts = async (searchInput) => { let filteredExplorePosts = await filterExplorePosts(searchInput); + setExplorePosts(filteredExplorePosts) return filteredExplorePosts; } From 096b8a74cd31aecbec3f01fb882332637312b8a7 Mon Sep 17 00:00:00 2001 From: jennifershinshin Date: Sun, 15 Oct 2023 13:39:16 -0700 Subject: [PATCH 5/6] cleaned up explore posts. order by title, fixed bug where author profile pics dont show after search --- src/lib/db.js | 10 ++++++---- src/pages/explore/index.js | 30 +++++++++++++++++++----------- 2 files changed, 25 insertions(+), 15 deletions(-) diff --git a/src/lib/db.js b/src/lib/db.js index 799ea16..029125c 100644 --- a/src/lib/db.js +++ b/src/lib/db.js @@ -121,9 +121,11 @@ export async function filterExplorePosts(searchInput) { .where("title", ">=", searchInput) .where('title', "<", searchInput + 'z') .get() - snapshot.docs.map(doc =>{ - console.log('search results', doc.id, " => ", doc.data()); - posts.push(doc.data()) - }); + snapshot.docs.map(doc => { + posts.push({ + id: doc.id, + ...doc.data() + }); + }) return posts; } diff --git a/src/pages/explore/index.js b/src/pages/explore/index.js index 5be3e19..4ff76d9 100644 --- a/src/pages/explore/index.js +++ b/src/pages/explore/index.js @@ -28,6 +28,7 @@ export default function Explore() { const [initPosts, initPostsLoading, initPostsError] = useCollectionData( firestore.collection('posts') .where('published', '==', true) + .orderBy('title') .limit(15),{ idField: 'id' }, ) const [explorePosts, setExplorePosts] = useState([]); @@ -43,23 +44,30 @@ export default function Explore() { // Set initial filteredPosts useEffect(() => { (async () => { - const postPromises = initPosts?.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 - setExplorePosts(posts) + 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; } From 1da5a6827b5e8f8bafef0f2dd542e4f3efff3322 Mon Sep 17 00:00:00 2001 From: jennifershinshin Date: Sun, 15 Oct 2023 13:46:40 -0700 Subject: [PATCH 6/6] Filtered out published Untitled posts --- src/lib/db.js | 1 + src/pages/explore/index.js | 1 + 2 files changed, 2 insertions(+) diff --git a/src/lib/db.js b/src/lib/db.js index 029125c..4f5a996 100644 --- a/src/lib/db.js +++ b/src/lib/db.js @@ -118,6 +118,7 @@ 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() diff --git a/src/pages/explore/index.js b/src/pages/explore/index.js index 4ff76d9..33d750b 100644 --- a/src/pages/explore/index.js +++ b/src/pages/explore/index.js @@ -28,6 +28,7 @@ export default function Explore() { const [initPosts, initPostsLoading, initPostsError] = useCollectionData( firestore.collection('posts') .where('published', '==', true) + .where('title', '!=', '') .orderBy('title') .limit(15),{ idField: 'id' }, )