3.1.4 Frontend (React) Example

// src/features/feed/Feed.jsx
import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { getSocket } from '../../services/socket';

function Feed() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    // Initial fetch
    axios.get('/api/posts')
      .then(res => setPosts(res.data))
      .catch(err => console.error(err));

    // Real-time updates
    const socket = getSocket();
    socket.on('newPost', (post) => {
      setPosts(prev => [post, ...prev]);
    });

    return () => {
      socket.off('newPost');
    };
  }, []);

  return (
    <div>
      <h2>SUM+1 Feed</h2>
      {posts.map(p => (
        <div key={p.id}>
          <p>{p.content}</p>
          <small>By: {p.user?.username} on {new Date(p.createdAt).toLocaleString()}</small>
        </div>
      ))}
    </div>
  );
}

export default Feed;