Implemented home feed for unauthenticated users

- Show community logo on post items while in the nome page

src/components/Posts/NewPostForm.tsx

@@ -32,6 +32,7 @@ import TabItem from "./TabItem";
  */
 type NewPostFormProps = {
   user: User; // parent component checks user so additional checks aer not needed ut
+  communityImageURL?: string;
 };
 
 // Tab items which are static (not react) hence outside
@@ -63,7 +64,10 @@ export type FormTab = {
   icon: typeof Icon.arguments;
 };
 
-const NewPostForm: React.FC<NewPostFormProps> = ({ user }) => {
+const NewPostForm: React.FC<NewPostFormProps> = ({
+  user,
+  communityImageURL,
+}) => {
   const router = useRouter();
   const [selectedTab, setSelectedTab] = useState(formTabs[0].title); // formTabs[0] = Post
   const [textInputs, setTextInputs] = useState({
@@ -79,6 +83,7 @@ const NewPostForm: React.FC<NewPostFormProps> = ({ user }) => {
     // create a new post object
     const newPost: Post = {
       communityId: communityId as string,
+      communityImageURL: communityImageURL || "",
       creatorId: user?.uid,
       creatorUsername: user.email!.split("@")[0],
       title: textInputs.title,

src/components/Posts/PostItem.tsx

@@ -5,6 +5,7 @@ import {
   Flex,
   Icon,
   Image,
+  Link,
   Skeleton,
   Spinner,
   Stack,
@@ -19,6 +20,7 @@ import {
   IoArrowDownCircleSharp,
   IoArrowUpCircleOutline,
   IoArrowUpCircleSharp,
+  IoPeopleCircleOutline,
 } from "react-icons/io5";
 import { MdOutlineDelete } from "react-icons/md";
 
@@ -43,6 +45,7 @@ type PostItemProps = {
   ) => void; // function to handle voting
   onDeletePost: (post: Post) => Promise<boolean>; // function to handle deleting post
   onSelectPost?: (post: Post) => void; // optional because once a post is selected it cannot be reselected
+  isHomePage?: boolean;
 };
 
 const PostItem: React.FC<PostItemProps> = ({
@@ -52,6 +55,7 @@ const PostItem: React.FC<PostItemProps> = ({
   onVote,
   onDeletePost,
   onSelectPost,
+  isHomePage,
 }) => {
   const [loadingImage, setLoadingImage] = useState(true);
   const [error, setError] = useState(false);
@@ -155,8 +159,41 @@ const PostItem: React.FC<PostItemProps> = ({
       {/* right side containing content  */}
       <Flex direction="column" width="100%">
         <Stack spacing={1} p="10px">
-          <Stack direction="row" spacing={0.5} align="center" fontSize="9pt">
+          <Stack
+            direction="row"
+            spacing={0.5}
+            align="center"
+            fontSize="9pt"
+            borderRadius="full"
+            boxSize="18px"
+            mr={2}
+            width="100%"
+          >
             {/* Check whether home page to decide whether to display community image */}
+            {isHomePage && (
+              <>
+                {post.communityImageURL ? (
+                  <Image src={post.communityImageURL} alt="Community logo" />
+                ) : (
+                  <Icon
+                    as={IoPeopleCircleOutline}
+                    mr={1}
+                    fontSize="18pt"
+                    color="red.500"
+                  />
+                )}
+                <Link href={`/community/${post.communityId}`}>
+                  <Text
+                    fontWeight={700}
+                    _hover={{ textDecoration: "underline" }}
+                    pr={2}
+                    onClick={(event) => event.stopPropagation()}
+                  >
+                    {post.communityId}
+                  </Text>
+                </Link>
+              </>
+            )}
             <Text>{topText}</Text>
           </Stack>
           {/* post title */}

src/pages/community/[communityId]/submit.tsx

@@ -22,7 +22,12 @@ const SubmitPostPage: React.FC = () => {
             Create Post
           </Text>
         </Box>
-        {user && <NewPostForm user={user} />}
+        {user && (
+          <NewPostForm
+            user={user}
+            communityImageURL={communityStateValue.currentCommunity?.imageURL}
+          />
+        )}
       </>
       <>
         {communityStateValue.currentCommunity && (

src/pages/index.tsx

@@ -1,12 +1,101 @@
-import Head from 'next/head'
-import Image from 'next/image'
-import { Inter } from '@next/font/google'
-import styles from '@/styles/Home.module.css'
+import Head from "next/head";
+import Image from "next/image";
+import { Inter } from "@next/font/google";
+import styles from "@/styles/Home.module.css";
+import PageContent from "@/components/Layout/PageContent";
+import { useAuthState } from "react-firebase-hooks/auth";
+import { auth, firestore } from "@/firebase/clientApp";
+import { useEffect, useState } from "react";
+import { useRecoilValue } from "recoil";
+import { communityState } from "@/atoms/communitiesAtom";
+import { collection, getDocs, limit, orderBy, query } from "firebase/firestore";
+import usePosts from "@/hooks/usePosts";
+import { Post } from "@/atoms/postsAtom";
+import CreatePostLink from "@/components/Community/CreatePostLink";
+import PostLoader from "@/components/Posts/PostLoader";
+import { Stack } from "@chakra-ui/react";
+import PostItem from "@/components/Posts/PostItem";
 
-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({ subsets: ["latin"] });
 
 export default function Home() {
+  const [user, loadingUser] = useAuthState(auth);
+  const [loading, setLoading] = useState(false);
+  const communityStateValue = useRecoilValue(communityState);
+  const {
+    setPostStateValue,
+    postStateValue,
+    onSelectPost,
+    onVote,
+    onDeletePost,
+  } = usePosts();
+
+  const buildUserHomeFeed = () => {};
+
+  const buildNoUserHomeFeed = async () => {
+    setLoading(true);
+    try {
+      const postQuery = query(
+        collection(firestore, "posts"),
+        orderBy("voteStatus", "desc"),
+        limit(10)
+      );
+
+      const postDocs = await getDocs(postQuery);
+      const posts = postDocs.docs.map((doc) => ({ id: doc.id, ...doc.data() }));
+      setPostStateValue((prev) => ({
+        ...prev,
+        posts: posts as Post[],
+      }));
+    } catch (error) {
+      console.log("Error: buildNoUserHomeFeed", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const getUserPostVotes = () => {};
+
+  /**
+   * Loads the home feed for unauthenticated users.
+   * Runs when there is no user and the system is no longer attempting to fetch a user.
+   * While the system is attempting to fetch user, the user is null.
+   */
+  useEffect(() => {
+    if (!user && !loadingUser) {
+      buildNoUserHomeFeed();
+    }
+  }, [user, loadingUser]);
+
   return (
-    <div>Hello</div>
-  )
+    <PageContent>
+      <>
+        <CreatePostLink />
+        {loading ? (
+          <PostLoader />
+        ) : (
+          <Stack>
+            {postStateValue.posts.map((post) => (
+              <PostItem
+                key={post.id}
+                post={post}
+                onSelectPost={onSelectPost}
+                onDeletePost={onDeletePost}
+                onVote={onVote}
+                userVoteValue={
+                  postStateValue.postVotes.find(
+                    (item) => item.postId === post.id
+                  )?.voteValue
+                }
+                userIsCreator={user?.uid === post.creatorId}
+                isHomePage={true}
+              />
+            ))}
+          </Stack>
+        )}
+      </>
+
+      <></>
+    </PageContent>
+  );
 }