Feature: ✨ Creating Dashboard page and updating post css

Author: GilbertoASJ

src/hooks/useFetchDocuments.js

@@ -37,6 +37,14 @@ export const useFetchDocuments = (docCollection, search = null, uid = null) => {
 						orderBy('createdAt', 'desc')
 					);
 
+				} else if(uid) {
+
+					q = await query(
+						collectionRef, 
+						where('uid', '==', uid), 
+						orderBy('createdAt', 'desc')
+					);
+
 				} else {
 
 					q = await query(collectionRef, orderBy('createdAt', 'desc'));
@@ -65,7 +73,7 @@ export const useFetchDocuments = (docCollection, search = null, uid = null) => {
 
 		loadData();
 
-	}, [docCollection, search, documents, uid, cancelled])
+	}, [docCollection, search, uid, cancelled])
 
 	// deal with memory leak
 	useEffect(() => {

src/pages/Dashboard/Dashboard.jsx

@@ -1,11 +1,41 @@
 import styles from './Dashboard.module.scss';
+import { Link } from 'react-router-dom';
+
+// hooks
+import { useAuthValue } from '../../context/AuthContext';
+import { useFetchDocuments } from '../../hooks/useFetchDocuments';
 
 const Dashboard = () => {
 
+	const { user } = useAuthValue();
+	const uid = user.uid;
+
+	const { documents: posts, loading, error } = useFetchDocuments('posts', null, uid)
+
 	return (
-		<>
+		<div>
 			<h1>Dashboard</h1>
-		</>
+			<p>Gerencie os seus posts</p>
+			{posts && posts.length === 0 ? (
+
+				<div className={styles.noposts}>
+					<p>Não foram encontrados posts!</p>
+					<Link to="/posts/create" className="btn">
+						Crie seu primeiro post
+					</Link>
+				</div>
+			) : (
+
+				<div>
+					<p>Tem posts!</p>
+				</div>
+			)}
+
+			{posts && posts.map((post) => (
+
+				<h3>{post.title}</h3>
+			))}
+		</div>
 	)
 }
 

src/pages/Post/Post.jsx

@@ -13,7 +13,7 @@ const Post = () => {
 		<div className={styles.post_container}>
 			{loading && (<p>Carregando post...</p>)}
 			{post && (
-				<div>
+				<div className={styles.post_detail}>
 					<h1>{post.title}</h1>
 					<img 
 						src={post.image} 

src/pages/Post/Post.module.scss

@@ -1,14 +1,28 @@
 .post_container {
 	text-align: center;
+	padding-top: 3.5rem;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
 
-	// p.body {
-	// 	text-align: justify;
-	// }
+	p.body {
+		text-align: justify;
+		margin: 1rem 0;
+	}
+
+	img {
+		margin-top: 1rem;
+	}
 
 	h3 {
 		margin-bottom: .2rem;
 	}
 
+	.post_detail {
+		width: 600px;
+	}
+
 	.tags {
 		display: flex;
 		justify-content: center;