comments section MVP

bs3/src/components/comments-section.tsx

@@ -0,0 +1,128 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { db } from '../api/firebaseConfig';
+import {
+  collection,
+  addDoc,
+  onSnapshot,
+  query,
+  orderBy,
+  updateDoc,
+} from 'firebase/firestore';
+import { Card, CardContent, Typography, TextField, InputAdornment, Fab } from '@mui/material';
+import SendIcon from '@mui/icons-material/Send';
+import { Comment } from '../types/types';
+import { useAppSelector } from '../app/hooks';
+import { timeAgo } from './utils';
+
+interface CommentsSectionProps {
+  postId: string;
+}
+
+function CommentsSection({ postId }: CommentsSectionProps) {
+
+  const [comments, setComments] = useState<Comment[]>([]);
+  const [text, setText] = useState('');
+
+  const textAreaRef = useRef<HTMLTextAreaElement | null>(null);
+
+  const userId = useAppSelector(state => state.app.user);
+  const location = useAppSelector(state => state.geolocation.location);
+
+  useEffect(() => {
+    if (textAreaRef.current) {
+      // Scroll to the bottom of the TextField's container
+      const { top, height } = textAreaRef.current.getBoundingClientRect();
+      const scrollPosition = window.scrollY + top + height;
+      window.scrollTo({ top: scrollPosition, behavior: "smooth" });
+    }
+  }, [text]); // Trigger on value changes
+
+
+  useEffect(() => {
+    const commentsRef = collection(db, 'posts', postId, 'comments');
+    const q = query(commentsRef, orderBy('timestamp', 'asc'));
+
+    const unsubscribe = onSnapshot(q, (snapshot) => {
+      const newComments = snapshot.docs.map((doc) => ({
+        ...(doc.data() as Comment),
+      }));
+      setComments(newComments);
+    });
+
+    return () => unsubscribe();
+  }, [postId]);
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    console.log("handleSubmit called");
+    e.preventDefault();
+    const commentsRef = collection(db, 'posts', postId, 'comments');
+    const newComment = await addDoc(commentsRef, {
+      // author: string;
+      text,
+      upVoted: [],
+      downVoted: [],
+      timestamp: new Date().toISOString(),
+      userId: userId,
+    });
+    await updateDoc(newComment, {
+      id: newComment.id, // Update the document with its own ID
+    });
+    setText('');
+  };
+
+  return (
+    <div>
+      <Typography variant="h6" sx={{ mb: 1, ml: 1 }}>
+        Comments ({comments.length})
+      </Typography>
+      <ul>
+        {comments.map(({ id, text, timestamp }) => (
+          <Card key={id} sx={{ my: 0.5 }} elevation={0}>
+            <CardContent sx={{ py: 0.5 }}>
+              <Typography variant="body1">{text}</Typography>
+              <Typography variant="caption" color="text.secondary">
+                {timeAgo(timestamp)}
+              </Typography>
+            </CardContent>
+          </Card>
+        ))}
+        {location.local && (
+          <Card sx={{ my: 0.5 }} elevation={0}>
+            <CardContent sx={{ py: 0.5, mb: 4 }}>
+              <form onSubmit={handleSubmit}>
+                <TextField
+                  id="comment"
+                  label="Add a comment..."
+                  value={text}
+                  onChange={(e) => setText(e.target.value)}
+                  inputRef={textAreaRef}
+                  multiline
+                  minRows={1}
+                  required
+                  fullWidth
+                  sx={{ mb: 1 }}
+                  InputProps={{
+                    endAdornment: (
+                      <InputAdornment position="end">
+                        <Fab 
+                          color="secondary" 
+                          aria-label="send" 
+                          size="small" 
+                          type="submit"
+                          disabled={!text.trim()}>
+                          <SendIcon />
+                        </Fab>
+                      </InputAdornment>
+                    ),
+                  }}
+                />
+              </form>
+            </CardContent>
+          </Card>
+        )}
+      </ul>
+    </div>
+  );
+}
+
+export default CommentsSection;

bs3/src/components/post-card.tsx

@@ -5,17 +5,22 @@ import CardContent from '@mui/material/CardContent';
 import Button from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
 import Chip from '@mui/material/Chip';
-import { CardActionArea, Stack, IconButton, Modal, Box } from '@mui/material';
+import { CardActionArea, Stack, IconButton, Modal, Box, Divider } from '@mui/material';
 import ArrowCircleDownIcon from '@mui/icons-material/ArrowCircleDown';
 import ArrowCircleUpIcon from '@mui/icons-material/ArrowCircleUp';
 import EditIcon from '@mui/icons-material/Edit';
 import DeleteIcon from '@mui/icons-material/Delete';
+import ChatBubbleIcon from '@mui/icons-material/ChatBubble';
 import { Link, useNavigate } from 'react-router-dom';
 import { useAppDispatch, useAppSelector } from '../app/hooks';
 import { upVotePost, downVotePost, sortPosts, deletePost } from '../app/firestoreSlice';
-import { useState } from 'react'
+import { useState, useEffect } from 'react';
 import ReactMarkdown from 'react-markdown';
 import { PostData } from '../types/types';
+import CommentsSection from './comments-section';
+import { timeAgo } from './utils';
+import { collection, onSnapshot, query } from 'firebase/firestore';
+import { db } from '../api/firebaseConfig'; // adjust import if needed
 
 // Define types for ConditionalLink props
 interface ConditionalLinkProps {
@@ -46,11 +51,11 @@ interface ThisPostState {
 }
 
 export default function BasicCard({ post, extended = false }: BasicCardProps) {
-
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
 
   const [deleteWarningOpen, setDeleteWarningOpen] = useState<boolean>(false);
+  const [commentsCount, setCommentsCount] = useState<number>(0);
 
   const userId = useAppSelector(state => state.app.user);
   const location = useAppSelector(state => state.geolocation.location);
@@ -60,6 +65,15 @@ export default function BasicCard({ post, extended = false }: BasicCardProps) {
     userDownVoted: post.downVoted.includes(userId),
   });
 
+  useEffect(() => {
+    const commentsRef = collection(db, 'posts', post.id, 'comments');
+    const q = query(commentsRef);
+    const unsub = onSnapshot(q, (snapshot) => {
+      setCommentsCount(snapshot.size);
+    });
+    return () => unsub();
+  }, [post.id]);
+
   const handleEdit = () => {
     localStorage.setItem('newPostForm', JSON.stringify(post));
     navigate('/new');
@@ -171,9 +185,15 @@ export default function BasicCard({ post, extended = false }: BasicCardProps) {
           </div>
         )}
         <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
-          <Typography variant="body2" color="text.secondary" gutterBottom>
-            {timeAgo(post.timestamp)}
-          </Typography>
+          <Stack direction="row" spacing={1} alignItems="center">
+            <Typography variant="body2" color="text.secondary" gutterBottom>
+              {commentsCount}
+            </Typography>
+            <ChatBubbleIcon fontSize="small" sx={{color: 'gray'}}/>
+            <Typography variant="body2" color="text.secondary" gutterBottom>
+              {timeAgo(post.timestamp)}
+            </Typography>
+          </Stack>
         </Box>
         <Stack
           direction="row"
@@ -248,31 +268,19 @@ export default function BasicCard({ post, extended = false }: BasicCardProps) {
               <Typography variant="h5" component="div">
                 {post.title}
               </Typography>
-              <ReactMarkdown>{post.body}</ReactMarkdown>
+              <Typography component="div">
+                <ReactMarkdown>{post.body}</ReactMarkdown>
+              </Typography>
             </CardActionArea>
           </ConditionalLink>
         </Stack>
       </CardContent>
+      {extended && (
+        <>
+          <Divider sx={{ my: 2 }} />
+          <CommentsSection postId={post.id} />
+        </>
+      )}
     </Card>
   );
-}
-
-// Helper function for timeAgo
-function timeAgo(timestamp: string): string {
-  const now = new Date();
-  const postDate = new Date(timestamp);
-  const diffInSeconds = Math.floor((now.getTime() - postDate.getTime()) / 1000);
-
-  if (diffInSeconds < 60) {
-    return 'now';
-  } else if (diffInSeconds < 3600) {
-    const minutes = Math.floor(diffInSeconds / 60);
-    return `${minutes} minute${minutes > 1 ? 's' : ''} ago`;
-  } else if (diffInSeconds < 86400) {
-    const hours = Math.floor(diffInSeconds / 3600);
-    return `${hours} hour${hours > 1 ? 's' : ''} ago`;
-  } else {
-    const days = Math.floor(diffInSeconds / 86400);
-    return `${days} day${days > 1 ? 's' : ''} ago`;
-  }
 }

bs3/src/components/utils.ts

@@ -0,0 +1,19 @@
+// Helper function for timeAgo
+export function timeAgo(timestamp: string): string {
+    const now = new Date();
+    const postDate = new Date(timestamp);
+    const diffInSeconds = Math.floor((now.getTime() - postDate.getTime()) / 1000);
+
+    if (diffInSeconds < 60) {
+      return 'now';
+    } else if (diffInSeconds < 3600) {
+      const minutes = Math.floor(diffInSeconds / 60);
+      return `${minutes} minute${minutes > 1 ? 's' : ''} ago`;
+    } else if (diffInSeconds < 86400) {
+      const hours = Math.floor(diffInSeconds / 3600);
+      return `${hours} hour${hours > 1 ? 's' : ''} ago`;
+    } else {
+      const days = Math.floor(diffInSeconds / 86400);
+      return `${days} day${days > 1 ? 's' : ''} ago`;
+    }
+  }

bs3/src/types/types.ts

@@ -1,3 +1,13 @@
+export type Comment = {
+    id: string;
+    author: string;
+    text: string;
+    upVoted: string[];
+    downVoted: string[];
+    timestamp: string;
+    userId: string;
+}
+
 export type PostData = {
     id: string;
     title: string;