+ {/* 3. Streamlined Auth Buttons */}
+
+
+
+
+ {/* Mobile Menu Overlay */}
+
@@ -155,5 +168,4 @@ const Navbar = () => {
);
};
-export default Navbar;
-
+export default Navbar;
\ No newline at end of file
diff --git a/frontend/src/components/chat/ChatThread.jsx b/frontend/src/components/chat/ChatThread.jsx
new file mode 100644
index 0000000..a656183
--- /dev/null
+++ b/frontend/src/components/chat/ChatThread.jsx
@@ -0,0 +1,162 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { useChat } from '../../contexts/ChatContext';
+import { messagesAPI } from '../../api/api';
+import { useAuth } from '../../contexts/AuthContext';
+import { Send, Smile } from 'lucide-react';
+import EmojiPicker from 'emoji-picker-react';
+import { formatDistanceToNow } from 'date-fns';
+import UserAvatar from '../common/UserAvatar';
+
+const ChatThread = ({ conversation, selectedUser, onMessageSent }) => {
+ const { user } = useAuth();
+ const { socket, joinConversation, leaveConversation } = useChat();
+ const [messages, setMessages] = useState([]);
+ const [newMessage, setNewMessage] = useState('');
+ const [showEmoji, setShowEmoji] = useState(false);
+ const bottomRef = useRef(null);
+
+ useEffect(() => {
+ let mounted = true;
+
+ const fetchMessages = async () => {
+ if (conversation?.id) {
+ try {
+ const res = await messagesAPI.getConversation(conversation.id);
+ if (mounted) setMessages(res);
+ } catch (err) {
+ console.error(err);
+ }
+ } else {
+ setMessages([]);
+ }
+ };
+
+ fetchMessages();
+
+ if (conversation?.id && socket) {
+ joinConversation(conversation.id);
+
+ const handleReceive = (msg) => {
+ setMessages(prev => [...prev, msg]);
+ };
+
+ socket.on('message:receive', handleReceive);
+
+ return () => {
+ mounted = false;
+ socket.off('message:receive', handleReceive);
+ leaveConversation(conversation.id);
+ };
+ }
+
+ return () => { mounted = false; };
+ }, [conversation?.id, socket]);
+
+ useEffect(() => {
+ bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+ }, [messages]);
+
+ const handleSend = async (e) => {
+ e.preventDefault();
+ if (!newMessage.trim()) return;
+
+ try {
+ const sentMsg = await messagesAPI.sendMessage({
+ conversationId: conversation?.id,
+ receiverId: selectedUser?.id,
+ content: newMessage
+ });
+
+ setMessages(prev => [...prev, sentMsg]);
+ setNewMessage('');
+ if (onMessageSent) onMessageSent();
+ } catch (err) {
+ console.error(err);
+ }
+ };
+
+ const onEmojiClick = (emojiData) => {
+ setNewMessage(prev => prev + emojiData.emoji);
+ setShowEmoji(false);
+ };
+
+ const otherUser = selectedUser || conversation?.members?.find(m => m.user.auth0Id !== user?.auth0Id)?.user;
+
+ if (!otherUser) {
+ return (
+
+
+
Select a conversation to start chatting
+
+ );
+ }
+
+ return (
+
+
+
+
+
{otherUser.username}
+
Active Now
+
+
+
+
+ {messages.map((msg, i) => {
+ const isMe = msg.sender.auth0Id === user?.auth0Id;
+ return (
+
+
+ {msg.content}
+
+
+ {formatDistanceToNow(new Date(msg.createdAt), { addSuffix: true })}
+
+
+ );
+ })}
+
+
+
+
+
+ );
+};
+
+export default ChatThread;
diff --git a/frontend/src/components/common/UserAvatar.jsx b/frontend/src/components/common/UserAvatar.jsx
new file mode 100644
index 0000000..3415d94
--- /dev/null
+++ b/frontend/src/components/common/UserAvatar.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+const UserAvatar = ({ user, className = 'w-10 h-10', onClick }) => {
+ const username = user?.username || 'User';
+ const avatarUrl = user?.profile?.avatarUrl || `https://ui-avatars.com/api/?name=${encodeURIComponent(username)}&background=EEF2FF&color=4F46E5&bold=true`;
+
+ return (
+
{
+ e.target.src = `https://ui-avatars.com/api/?name=${encodeURIComponent(username)}&background=EEF2FF&color=4F46E5&bold=true`;
+ }}
+ />
+ );
+};
+
+export default UserAvatar;
diff --git a/frontend/src/components/community/CreatePostModal.jsx b/frontend/src/components/community/CreatePostModal.jsx
new file mode 100644
index 0000000..c346cfe
--- /dev/null
+++ b/frontend/src/components/community/CreatePostModal.jsx
@@ -0,0 +1,137 @@
+import React, { useState } from 'react';
+import { useAuth } from '../../contexts/AuthContext';
+import { postsAPI } from '../../api/api';
+import { Image, Tag, Hash, X } from 'lucide-react';
+import EmojiPicker from 'emoji-picker-react';
+import UserAvatar from '../common/UserAvatar';
+
+const CreatePostModal = ({ onClose, onPostCreated }) => {
+ const { user } = useAuth();
+ const [content, setContent] = useState('');
+ const [showEmoji, setShowEmoji] = useState(false);
+ const [tags, setTags] = useState([]);
+ const [tagInput, setTagInput] = useState('');
+ const [submitting, setSubmitting] = useState(false);
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ if (!content.trim()) return;
+ setSubmitting(true);
+ try {
+ await postsAPI.createPost({
+ content,
+ tags
+ });
+ onPostCreated();
+ onClose();
+ } catch (err) {
+ console.error(err);
+ setSubmitting(false);
+ }
+ };
+
+ const handleTagAdd = (e) => {
+ e.preventDefault();
+ if (tagInput.trim() && !tags.includes(tagInput.trim())) {
+ setTags([...tags, tagInput.trim()]);
+ setTagInput('');
+ }
+ };
+
+ const removeTag = (tagToRemove) => {
+ setTags(tags.filter(t => t !== tagToRemove));
+ };
+
+ const onEmojiClick = (emojiObject) => {
+ setContent(prevInput => prevInput + emojiObject.emoji);
+ setShowEmoji(false);
+ };
+
+ return (
+
+
+
+
Create Post
+
+
+
+