# ১. রিপোজিটরি ক্লোন করুন
git clone https://github.com/Learn-with-Sumit/rnext.git

# ২. ফোল্ডারে ঢুকুন
cd rnext

# ৩. সঠিক ব্রাঞ্চে switch করুন
git checkout 5.15

# ৪. backend ফোল্ডারে গিয়ে dependency ইনস্টল করুন
cd backend-server
npm i

# ৫. সার্ভার চালান
npm run dev

npm install axios

npm install -g json-server@0.17.4

{
  "posts": [
    {
      "id": "1",
      "title": "প্রথম পোস্ট",
      "body": "json-server দিয়ে তৈরি প্রথম পোস্ট।"
    },
    {
      "id": "2",
      "title": "দ্বিতীয় পোস্ট",
      "body": "Axios দিয়ে এই ডেটা fetch করা হবে।"
    }
  ],
  "comments": [{ "id": "1", "postId": "1", "text": "সুন্দর পোস্ট!" }]
}

json-server --watch db.json --port 8000

import { useState, useEffect } from "react";
import axios from "axios";

function App() {
  const [posts, setPosts] = useState([]); // শুরুতে খালি array
  const [error, setError] = useState(null); // এরর মেসেজ রাখার জন্য

useEffect(() => {
  const fetchPosts = async () => {
    // এখানে axios call হবে
  };

  fetchPosts(); // ফাংশনটাকে সাথে সাথে কল করা হচ্ছে
}, []); // খালি array মানে এটা শুধু একবার, component mount হওয়ার সময় রান করবে

useEffect(() => {
  const fetchPosts = async () => {
    try {
      const response = await axios.get("http://localhost:8000/posts");

      // Axios সরাসরি response.data-তে রেজাল্ট দিয়ে দেয়
      if (response && response.data) {
        setPosts(response.data);
      }
    } catch (err) {
      setError(err.message);
      console.error("API Call Error:", err);
    }
  };

  fetchPosts();
}, []);

  return (
    <div className="App">
      <h1>API Request with Axios</h1>

      {/* এরর থাকলে দেখাবে */}
      {error && (
        <div style={{ backgroundColor: "pink", padding: "10px", margin: "10px 0" }}>
          Error: {error}
        </div>
      )}

      {/* পোস্ট লিস্ট */}
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <strong>{post.title}</strong>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

const response = await axios.get("http://localhost:8000/posts");

response.data; // আসল ডেটা — সাধারণত এটাই লাগে
response.status; // HTTP status code: 200, 201, 404, 500
response.statusText; // "OK", "Created" ইত্যাদি
response.headers; // Response headers
response.config; // যে config দিয়ে request করা হয়েছিল

const config = {
  url: "/posts",
  method: "get",

  baseURL: "http://localhost:8000", // সব URL-এর আগে যুক্ত হবে

  headers: {
    "Content-Type": "application/json",
    Authorization: "Bearer your-token-here",
  },

  params: { page: 1, limit: 10 }, // URL-এ query string যোগ হবে: /posts?page=1&limit=10

  timeout: 10000, // কত millisecond পরে request cancel হবে

  responseType: "json", // 'json', 'blob', 'text', 'arraybuffer'
};

axios(config).then((res) => console.log(res.data));

catch (error) {
  if (error.response) {
    // সার্ভার response দিয়েছে, কিন্তু 4xx বা 5xx status সহ
  } else if (error.request) {
    // Request পাঠানো হয়েছে, কিন্তু কোনো response আসেনি
  } else {
    // Request বানানোর সময়ই কিছু ভুল হয়েছে
  }
}

try {
  const res = await axios.get("http://localhost:8000/posts");
  setPosts(res.data);
} catch (err) {
  if (err.response) {
    // err.response থাকা মানে সার্ভার একটা রেসপন্স পাঠিয়েছে,
    // কিন্তু সেটা ভুল status (যেমন ৪০৪) নিয়ে এসেছে
    setError(`সার্ভার এরর: ${err.response.status} ${err.response.statusText}`);
  } else {
    // err.response নেই মানে request-ই সার্ভার পর্যন্ত পৌঁছায়নি
    // (Network Error — সার্ভার বন্ধ, বা ইন্টারনেট নেই)
    setError("সার্ভারের সাথে যোগাযোগ করা যাচ্ছে না।");
  }
}

setError(
  err.response
    ? `${err.response.status}: ${err.response.statusText}`
    : "নেটওয়ার্ক এরর — সার্ভার সাড়া দিচ্ছে না।",
);

function getFriendlyErrorMessage(error) {
  if (!error.response) {
    return "ইন্টারনেট কানেকশন বা সার্ভার সমস্যা। একটু পরে চেষ্টা করুন।";
  }
  const status = error.response.status;
  const msg = error.response.data?.error || error.response.data?.message;

  switch (status) {
    case 400:
      return msg || "Request-এ কিছু ভুল আছে।";
    case 401:
      return "লগইন করা নেই বা session শেষ।";
    case 403:
      return "এই কাজের অনুমতি নেই।";
    case 404:
      return "যা খুঁজছেন তা পাওয়া যায়নি।";
    case 500:
      return "সার্ভারে সমস্যা। একটু পরে চেষ্টা করুন।";
    default:
      return "কিছু একটা ভুল হয়েছে।";
  }
}

const handleAddPost = async (title, body) => {
  try {
    const newPost = {
      id: Date.now().toString(), // একটা ইউনিক id বানানো
      title,
      body,
    };

    const response = await axios.post("http://localhost:8000/posts", newPost);

    // সার্ভার সফলভাবে সেভ করার পর যে ডেটা ফেরত দিলো, সেটা দিয়েই local state আপডেট
    setPosts((prevPosts) => [...prevPosts, response.data]);
  } catch (err) {
    setError(getFriendlyErrorMessage(err));
  }
};

const handleEditPost = async (postId, updatedFields) => {
  try {
    const response = await axios.patch(
      `http://localhost:8000/posts/${postId}`,
      updatedFields,
    );

    // পুরনো posts array থেকে শুধু matching id-টা replace হবে, বাকিগুলো অপরিবর্তিত থাকবে
    setPosts((prevPosts) =>
      prevPosts.map((post) => (post.id === postId ? response.data : post)),
    );
  } catch (err) {
    setError(getFriendlyErrorMessage(err));
  }
};

const handleDeletePost = async (postId) => {
  const confirmed = window.confirm("পোস্টটা সত্যিই ডিলিট করতে চান?");
  if (!confirmed) return;

  try {
    await axios.delete(`http://localhost:8000/posts/${postId}`);

    // সার্ভার থেকে ডিলিট সফল হলে, সেই id বাদে বাকি সব post রাখা হচ্ছে
    setPosts((prevPosts) => prevPosts.filter((post) => post.id !== postId));
  } catch (err) {
    setError(getFriendlyErrorMessage(err));
  }
};

const res = await axios.get("/posts"); // ডেটা আনা
const res = await axios.post("/posts", data); // নতুন ডেটা তৈরি
const res = await axios.put("/posts/1", data); // পুরো ডেটা replace
const res = await axios.patch("/posts/1", data); // আংশিক আপডেট
const res = await axios.delete("/posts/1"); // ডেটা মুছে ফেলা

// src/api/api.js
import axios from "axios";

const api = axios.create({
  baseURL: "http://localhost:8000",
});

export default api;

import api from "./api/api";

const posts = await api.get("/posts"); // baseURL বারবার লিখতে হচ্ছে না
const newPost = await api.post("/posts", { title: "নতুন পোস্ট" });

api.interceptors.request.use((config) => {
  const token = localStorage.getItem("token");
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

api.interceptors.response.use(
  (response) => response, // সব ঠিক থাকলে response সেভাবেই পাস হয়ে যাবে
  (error) => {
    console.error("API Error:", getFriendlyErrorMessage(error));
    return Promise.reject(error);
  },
);

json-server --watch db.json --port 8000 --no-cors

npm create vite@latest fb-feed-frontend -- --template react
cd fb-feed-frontend
npm install
npm install axios react-router-dom

src/
├── actions/
│   └── index.js             ← সব action type এক জায়গায়
├── api/
│   └── api.js               ← মূল Axios instance
├── context/
│   ├── AuthContext.jsx       ← Login state সবখানে শেয়ার
│   └── ProfileContext.jsx    ← Profile state সবখানে শেয়ার
├── hooks/
│   ├── useAuth.js            ← AuthContext-এর সহজ hook
│   ├── useAxios.js           ← Auth-aware API hook (interceptors সহ)
│   └── useProfile.js         ← ProfileContext-এর সহজ hook
├── reducers/
│   └── profileReducer.js     ← Profile state management
├── services/
│   ├── authService.js        ← register, login
│   ├── postService.js        ← posts-এর সব CRUD
│   └── profileService.js     ← profile ও avatar
├── components/
│   ├── LoginForm.jsx
│   ├── RegisterForm.jsx
│   ├── ProtectedRoute.jsx
│   ├── PostFeed.jsx
│   ├── PostCard.jsx
│   ├── CreatePostForm.jsx
│   └── profile/
│       ├── ProfileImage.jsx
│       └── Bio.jsx
├── pages/
│   ├── LoginPage.jsx
│   ├── RegisterPage.jsx
│   ├── FeedPage.jsx
│   └── ProfilePage.jsx
└── App.jsx

VITE_API_BASE_URL=http://localhost:3000

// src/api/api.js
import axios from "axios";

const api = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL,
  timeout: 15000,
});

export default api;

{
  "user": {
    "id": "a9f2813e-a0a3-4ae0-80a1-570f3d5fbd23",
    "firstName": "Mojnu",
    "lastName": "Miah",
    "email": "mojnu@example.com",
    "avatar": null
  },
  "token": {
    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
    "refreshToken": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
  }
}

// src/actions/index.js
export const actions = {
  profile: {
    PROFILE_FETCHING: "PROFILE_FETCHING",
    PROFILE_FETCHED: "PROFILE_FETCHED",
    PROFILE_FETCH_ERROR: "PROFILE_FETCH_ERROR",
    PROFILE_UPDATED: "PROFILE_UPDATED",
    IMAGE_UPDATED: "IMAGE_UPDATED",
  },
};

// src/context/AuthContext.jsx
import { createContext, useState } from "react";

const AuthContext = createContext(null);

export const AuthProvider = ({ children }) => {
  const [auth, setAuth] = useState(null);
  // auth object: { user, authToken, refreshToken }

  return (
    <AuthContext.Provider value={{ auth, setAuth }}>
      {children}
    </AuthContext.Provider>
  );
};

export default AuthContext;

// src/hooks/useAuth.js
import { useContext } from "react";
import AuthContext from "../context/AuthContext";

const useAuth = () => {
  return useContext(AuthContext);
};

export default useAuth;

// src/hooks/useAxios.js
import { useEffect } from "react";
import api from "../api/api";
import useAuth from "./useAuth";

const useAxios = () => {
  const { auth, setAuth } = useAuth();

  useEffect(() => {
    // Request Interceptor — প্রতিটা request-এর আগে চলে
    const requestIntercept = api.interceptors.request.use(
      (config) => {
        const token = auth?.authToken;
        if (token) {
          config.headers.Authorization = `Bearer ${token}`;
        }
        // FormData (ছবি আপলোড) হলে Content-Type নিজে সেট করবেন না
        if (config.data instanceof FormData) {
          delete config.headers["Content-Type"];
        } else {
          config.headers["Content-Type"] = "application/json";
        }
        return config;
      },
      (error) => Promise.reject(error),
    );

    // Response Interceptor — প্রতিটা response আসার পরে চলে
    const responseIntercept = api.interceptors.response.use(
      (response) => response,
      async (error) => {
        const originalRequest = error.config;

        // originalRequest.alreadyRetried এখনো false/undefined মানে —
        // এই request-এর জন্য আমরা এখনো একবারও refresh চেষ্টা করিনি।
        const isFirstFailure =
          error.response?.status === 401 && !originalRequest.alreadyRetried;

        if (isFirstFailure) {
          // মার্ক করে দিলাম: "এই request একবার retry হচ্ছে"
          // এর ফলে refresh token নিজেও যদি fail করে, তখন এই if-এ
          // আর দ্বিতীয়বার ঢুকবে না — infinite loop বন্ধ হয়ে যায়
          originalRequest.alreadyRetried = true;

          try {
            const { data } = await api.post("/auth/refresh-token", {
              refreshToken: auth?.refreshToken,
            });

            setAuth((prev) => ({ ...prev, authToken: data.token }));

            originalRequest.headers.Authorization = `Bearer ${data.token}`;
            return api(originalRequest);
          } catch (refreshError) {
            // Refresh token-ও কাজ করলো না — session শেষ, logout
            setAuth(null);
            window.location.href = "/login";
            return Promise.reject(refreshError);
          }
        }

        return Promise.reject(error);
      },
    );

    return () => {
      api.interceptors.request.eject(requestIntercept);
      api.interceptors.response.eject(responseIntercept);
    };
  }, [auth]);

  return { api };
};

export default useAxios;

const { api } = useAxios();

const api = useAxios();

await api.get("/posts");
await api.post("/posts");

// authService.js
export const loginUser = (api, email, password) =>
  api.post("/auth/login", { email, password });

export const registerUser = (api, payload) =>
  api.post("/auth/register", payload);

// Component
const { api } = useAxios();

await loginUser(api, email, password);

Component
    ↓
useAxios()
    ↓
Service Layer
    ↓
API

// src/components/LoginForm.jsx
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import useAuth from "../hooks/useAuth";
import { loginUser } from "../services/authService";

export default function LoginForm() {
  const { setAuth } = useAuth();
  const navigate = useNavigate();

  const [form, setForm] = useState({ email: "", password: "" });
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);

  const handleChange = (e) => {
    setForm({ ...form, [e.target.name]: e.target.value });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError("");
    setLoading(true);

    try {
      const response = await loginUser(form.email, form.password);

      if (response.status === 200) {
        // Server থেকে আসা response:
        // { user: {...}, token: { token: "...", refreshToken: "..." } }
        const { user, token } = response.data;
        const { token: authToken, refreshToken } = token;

        setAuth({ user, authToken, refreshToken });
        navigate("/");
      }
    } catch (err) {
      setError(
        err.response?.data?.error || "লগইন ব্যর্থ হয়েছে। আবার চেষ্টা করুন।",
      );
    } finally {
      setLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        name="email"
        type="email"
        placeholder="ইমেইল"
        value={form.email}
        onChange={handleChange}
        required
      />
      <input
        name="password"
        type="password"
        placeholder="পাসওয়ার্ড"
        value={form.password}
        onChange={handleChange}
        required
      />
      {error && <p style={{ color: "red" }}>{error}</p>}
      <button type="submit" disabled={loading}>
        {loading ? "লগইন হচ্ছে..." : "লগইন করুন"}
      </button>
    </form>
  );
}

// src/components/RegisterForm.jsx
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import useAuth from "../hooks/useAuth";
import { registerUser, loginUser } from "../services/authService";

export default function RegisterForm() {
  const { setAuth } = useAuth();
  const navigate = useNavigate();

  const [form, setForm] = useState({
    firstName: "",
    lastName: "",
    email: "",
    password: "",
  });
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);

  const handleChange = (e) => {
    setForm({ ...form, [e.target.name]: e.target.value });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError("");
    setLoading(true);

    try {
      // প্রথমে registration করুন
      await registerUser(form);

      // সফল হলে সাথে সাথে login করিয়ে দিন
      const loginRes = await loginUser(form.email, form.password);
      const { user, token } = loginRes.data;
      const { token: authToken, refreshToken } = token;

      setAuth({ user, authToken, refreshToken });
      navigate("/");
    } catch (err) {
      setError(
        err.response?.data?.error ||
          "রেজিস্ট্রেশন ব্যর্থ হয়েছে। আবার চেষ্টা করুন।",
      );
    } finally {
      setLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        name="firstName"
        placeholder="প্রথম নাম"
        value={form.firstName}
        onChange={handleChange}
        required
      />
      <input
        name="lastName"
        placeholder="শেষ নাম"
        value={form.lastName}
        onChange={handleChange}
        required
      />
      <input
        name="email"
        type="email"
        placeholder="ইমেইল"
        value={form.email}
        onChange={handleChange}
        required
      />
      <input
        name="password"
        type="password"
        placeholder="পাসওয়ার্ড"
        value={form.password}
        onChange={handleChange}
        required
      />
      {error && <p style={{ color: "red" }}>{error}</p>}
      <button type="submit" disabled={loading}>
        {loading ? "একাউন্ট তৈরি হচ্ছে..." : "রেজিস্ট্রেশন করুন"}
      </button>
    </form>
  );
}

// src/components/ProtectedRoute.jsx
import { Navigate } from "react-router-dom";
import useAuth from "../hooks/useAuth";

export default function ProtectedRoute({ children }) {
  const { auth } = useAuth();

  if (!auth) {
    return <Navigate to="/login" replace />;
  }

  return children;
}

// src/services/postService.js
import api from "../api/api";

// সব পোস্ট আনা
export const getPosts = () => api.get("/posts");

// একটা পোস্ট আনা
export const getPost = (id) => api.get(`/posts/${id}`);

// নতুন পোস্ট তৈরি (টেক্সট + ঐচ্ছিক ছবি)
export const createPost = ({ content, image }, onUploadProgress) => {
  const formData = new FormData();
  formData.append("postType", image ? "image" : "text");
  formData.append("content", content);
  if (image) {
    formData.append("image", image);
  }

  return api.post("/posts", formData, {
    onUploadProgress: (progressEvent) => {
      if (!onUploadProgress) return;
      const percent = Math.round(
        (progressEvent.loaded * 100) / (progressEvent.total || 1),
      );
      onUploadProgress(percent);
    },
  });
};

// পোস্ট আপডেট
export const updatePost = (id, { content }) => {
  const formData = new FormData();
  formData.append("content", content);
  return api.patch(`/posts/${id}`, formData);
};

// পোস্ট ডিলিট
export const deletePost = (id) => api.delete(`/posts/${id}`);

// লাইক বা আনলাইক
export const toggleLike = (id) => api.patch(`/posts/${id}/like`);

// কমেন্ট করা
export const addComment = (postId, comment) =>
  api.patch(`/posts/${postId}/comment`, { comment });

// কমেন্ট ডিলিট
export const deleteComment = (postId, commentId) =>
  api.delete(`/posts/${postId}/comment/${commentId}`);

// src/components/PostFeed.jsx
import { useEffect, useState } from "react";
import useAxios from "../hooks/useAxios";
import { getPosts } from "../services/postService";
import PostCard from "./PostCard";

export default function PostFeed() {
  const { api } = useAxios(); // interceptor activate করতে call করতে হবে
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

  useEffect(() => {
    let isMounted = true;

    const fetchPosts = async () => {
      try {
        const res = await getPosts();
        if (isMounted) setPosts(res.data);
      } catch (err) {
        if (isMounted) setError("পোস্ট লোড করা যায়নি। পরে আবার চেষ্টা করুন।");
      } finally {
        if (isMounted) setLoading(false);
      }
    };

    fetchPosts();
    return () => {
      isMounted = false;
    };
  }, []);

  if (loading) return <p>পোস্ট লোড হচ্ছে...</p>;
  if (error) return <p style={{ color: "red" }}>{error}</p>;
  if (posts.length === 0) return <p>এখনো কোনো পোস্ট নেই।</p>;

  return (
    <div>
      {posts.map((post) => (
        <PostCard key={post.id} post={post} onListChange={setPosts} />
      ))}
    </div>
  );
}

// src/components/CreatePostForm.jsx
import { useState } from "react";
import useAxios from "../hooks/useAxios";
import { createPost } from "../services/postService";

export default function CreatePostForm({ onCreated }) {
  const { api } = useAxios();
  const [content, setContent] = useState("");
  const [image, setImage] = useState(null);
  const [progress, setProgress] = useState(0);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!content.trim()) return;

    setLoading(true);
    setProgress(0);
    setError("");

    try {
      const res = await createPost({ content, image }, setProgress);
      onCreated?.(res.data);
      setContent("");
      setImage(null);
    } catch (err) {
      setError(
        err.response?.data?.error || "পোস্ট তৈরি হয়নি। আবার চেষ্টা করুন।",
      );
    } finally {
      setLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <textarea
        value={content}
        onChange={(e) => setContent(e.target.value)}
        placeholder="আপনি কী ভাবছেন?"
        required
      />
      <input
        type="file"
        accept="image/*"
        onChange={(e) => setImage(e.target.files?.[0] ?? null)}
      />
      {loading && (
        <div>
          <progress value={progress} max="100" />
          <span>{progress}%</span>
        </div>
      )}
      {error && <p style={{ color: "red" }}>{error}</p>}
      <button type="submit" disabled={loading}>
        {loading ? `আপলোড হচ্ছে... ${progress}%` : "পোস্ট করুন"}
      </button>
    </form>
  );
}

// src/components/PostCard.jsx
import { useState } from "react";
import useAxios from "../hooks/useAxios";
import {
  updatePost,
  deletePost,
  toggleLike,
  addComment,
  deleteComment,
} from "../services/postService";

export default function PostCard({ post, onListChange }) {
  const { api } = useAxios();
  const [editing, setEditing] = useState(false);
  const [content, setContent] = useState(post.content ?? post.body);
  const [commentText, setCommentText] = useState("");

  const removeFromList = (id) =>
    onListChange((prev) => prev.filter((p) => p.id !== id));

  // পুরো list re-fetch না করে শুধু একটা পোস্ট update করুন
  const replaceInList = (updated) =>
    onListChange((prev) =>
      prev.map((p) => (p.id === updated.id ? updated : p)),
    );

  const handleUpdate = async () => {
    try {
      const res = await updatePost(post.id, { content });
      replaceInList(res.data);
      setEditing(false);
    } catch (err) {
      console.error("আপডেট ব্যর্থ:", err.message);
    }
  };

  const handleDelete = async () => {
    if (!confirm("পোস্টটা কি সত্যিই মুছবে?")) return;
    try {
      await deletePost(post.id);
      removeFromList(post.id);
    } catch (err) {
      console.error("ডিলিট ব্যর্থ:", err.message);
    }
  };

  const handleLike = async () => {
    try {
      const res = await toggleLike(post.id);
      replaceInList(res.data);
    } catch (err) {
      console.error("লাইক ব্যর্থ:", err.message);
    }
  };

  const handleComment = async (e) => {
    e.preventDefault();
    if (!commentText.trim()) return;
    try {
      const res = await addComment(post.id, commentText);
      replaceInList(res.data);
      setCommentText("");
    } catch (err) {
      console.error("কমেন্ট ব্যর্থ:", err.message);
    }
  };

  const handleDeleteComment = async (commentId) => {
    try {
      const res = await deleteComment(post.id, commentId);
      replaceInList(res.data);
    } catch (err) {
      console.error("কমেন্ট ডিলিট ব্যর্থ:", err.message);
    }
  };

  return (
    <div className="post-card">
      {editing ? (
        <div>
          <textarea
            value={content}
            onChange={(e) => setContent(e.target.value)}
          />
          <button onClick={handleUpdate}>সেভ করুন</button>
          <button onClick={() => setEditing(false)}>বাতিল</button>
        </div>
      ) : (
        <div>
          <p>{post.content ?? post.body}</p>
          {post.image && <img src={post.image} alt="পোস্টের ছবি" />}
          <button onClick={() => setEditing(true)}>এডিট</button>
          <button onClick={handleDelete}>ডিলিট</button>
        </div>
      )}

      <button onClick={handleLike}>👍 লাইক ({post.likes?.length ?? 0})</button>

      <ul>
        {post.comments?.map((c) => (
          <li key={c.id}>
            <strong>{c.author?.firstName}:</strong> {c.comment}{" "}
            <button onClick={() => handleDeleteComment(c.id)}>✕</button>
          </li>
        ))}
      </ul>

      <form onSubmit={handleComment}>
        <input
          value={commentText}
          onChange={(e) => setCommentText(e.target.value)}
          placeholder="একটা কমেন্ট লিখুন..."
        />
        <button type="submit">কমেন্ট করুন</button>
      </form>
    </div>
  );
}

// src/reducers/profileReducer.js
import { actions } from "../actions";

export const initialState = {
  user: null,
  posts: [],
  loading: false,
  error: null,
};

const profileReducer = (state, action) => {
  switch (action.type) {
    case actions.profile.PROFILE_FETCHING:
      return { ...state, loading: true, error: null };

    case actions.profile.PROFILE_FETCHED:
      return {
        ...state,
        user: action.data.user,
        posts: action.data.posts,
        loading: false,
        error: null,
      };

    case actions.profile.PROFILE_FETCH_ERROR:
      return { ...state, loading: false, error: action.error };

    case actions.profile.PROFILE_UPDATED:
      return { ...state, user: action.data, loading: false };

    case actions.profile.IMAGE_UPDATED:
      // শুধু avatar বদলান, বাকি user data ঠিক রাখুন
      return {
        ...state,
        user: { ...state.user, avatar: action.data.avatar },
        loading: false,
      };

    default:
      return state;
  }
};

export default profileReducer;

// src/context/ProfileContext.jsx
import { createContext, useReducer } from "react";
import profileReducer, { initialState } from "../reducers/profileReducer";

const ProfileContext = createContext(null);

export const ProfileProvider = ({ children }) => {
  const [state, dispatch] = useReducer(profileReducer, initialState);

  return (
    <ProfileContext.Provider value={{ state, dispatch }}>
      {children}
    </ProfileContext.Provider>
  );
};

export default ProfileContext;

// src/hooks/useProfile.js
import { useContext } from "react";
import ProfileContext from "../context/ProfileContext";

const useProfile = () => {
  return useContext(ProfileContext);
};

export default useProfile;

// src/pages/ProfilePage.jsx
import { useEffect } from "react";
import { actions } from "../actions";
import useAuth from "../hooks/useAuth";
import useAxios from "../hooks/useAxios";
import useProfile from "../hooks/useProfile";
import ProfileImage from "../components/profile/ProfileImage";
import Bio from "../components/profile/Bio";

const ProfilePage = () => {
  const { auth } = useAuth();
  const { api } = useAxios();
  const { state, dispatch } = useProfile();

  useEffect(() => {
    if (!auth?.user?.id) return;

    const fetchProfile = async () => {
      dispatch({ type: actions.profile.PROFILE_FETCHING });

      try {
        const response = await api.get(`/profile/${auth.user.id}`);
        dispatch({
          type: actions.profile.PROFILE_FETCHED,
          data: response.data,
        });
      } catch (error) {
        dispatch({
          type: actions.profile.PROFILE_FETCH_ERROR,
          error: error.response?.data?.message || error.message,
        });
      }
    };

    fetchProfile();
  }, [auth?.user?.id]);

  if (state.loading) return <p>প্রোফাইল লোড হচ্ছে...</p>;
  if (state.error) return <p style={{ color: "red" }}>এরর: {state.error}</p>;
  if (!state.user) return null;

  return (
    <div>
      <ProfileImage />
      <h1>
        {state.user.firstName} {state.user.lastName}
      </h1>
      <Bio />
      <p>{state.posts?.length} টা পোস্ট</p>
    </div>
  );
};

export default ProfilePage;

// src/components/profile/ProfileImage.jsx
import { useRef } from "react";
import { actions } from "../../actions";
import useAuth from "../../hooks/useAuth";
import useAxios from "../../hooks/useAxios";
import useProfile from "../../hooks/useProfile";

const ProfileImage = () => {
  const { auth } = useAuth();
  const { api } = useAxios();
  const { state, dispatch } = useProfile();
  const fileInputRef = useRef(null);

  // Edit button click করলে লুকানো file input খুলবে
  const handleEditClick = (e) => {
    e.preventDefault();
    fileInputRef.current.click();
  };

  // ফাইল select হলে সাথে সাথে upload করবে
  const handleFileChange = async (e) => {
    const file = e.target.files?.[0];
    if (!file) return;

    try {
      const formData = new FormData();
      formData.append("avatar", file);

      // Content-Type header useAxios interceptor নিজেই handle করবে
      const response = await api.post(
        `/profile/${auth.user.id}/avatar`,
        formData,
      );

      if (response.status === 200) {
        dispatch({
          type: actions.profile.IMAGE_UPDATED,
          data: response.data,
        });
      }
    } catch (err) {
      dispatch({
        type: actions.profile.PROFILE_FETCH_ERROR,
        error: err.message,
      });
    }
  };

  // Server থেকে avatar path আসে: "uploads/avatar/filename.jpg"
  // পুরো URL বানাতে base URL যোগ করতে হয়
  const avatarUrl = state.user?.avatar
    ? `${import.meta.env.VITE_API_BASE_URL}/${state.user.avatar}`
    : "https://via.placeholder.com/180";

  return (
    <div style={{ position: "relative", width: 180, height: 180 }}>
      <img
        src={avatarUrl}
        alt={state.user?.firstName}
        style={{
          width: "100%",
          height: "100%",
          borderRadius: "50%",
          objectFit: "cover",
        }}
      />

      <button
        onClick={handleEditClick}
        style={{
          position: "absolute",
          bottom: 8,
          right: 8,
          background: "rgba(0,0,0,0.6)",
          border: "none",
          borderRadius: "50%",
          cursor: "pointer",
          padding: 6,
        }}
        title="ছবি বদলান"
      >
        ✏️
      </button>

      {/* লুকানো file input */}
      <input
        ref={fileInputRef}
        type="file"
        accept="image/*"
        onChange={handleFileChange}
        style={{ display: "none" }}
      />
    </div>
  );
};

export default ProfileImage;

// src/components/profile/Bio.jsx
import { useState } from "react";
import { actions } from "../../actions";
import useAuth from "../../hooks/useAuth";
import useAxios from "../../hooks/useAxios";
import useProfile from "../../hooks/useProfile";

const Bio = () => {
  const { auth } = useAuth();
  const { api } = useAxios();
  const { state, dispatch } = useProfile();

  const [editMode, setEditMode] = useState(false);
  const [bio, setBio] = useState(state.user?.bio ?? "");

  const handleSave = async () => {
    dispatch({ type: actions.profile.PROFILE_FETCHING });

    try {
      // ⚠️ Backend quirk: profile update-এ field নাম "firstname" (lowercase n)
      // কিন্তু registration-এ "firstName" (capital N) — backend inconsistency।
      // সবসময় Postman দিয়ে confirm করুন।
      const response = await api.patch(`/profile/${auth.user.id}`, { bio });
      dispatch({
        type: actions.profile.PROFILE_UPDATED,
        data: response.data,
      });
      setEditMode(false);
    } catch (error) {
      dispatch({
        type: actions.profile.PROFILE_FETCH_ERROR,
        error: error.message,
      });
    }
  };

  return (
    <div>
      {editMode ? (
        <div>
          <textarea
            value={bio}
            onChange={(e) => setBio(e.target.value)}
            rows={4}
            placeholder="আপনার সম্পর্কে কিছু লিখুন..."
          />
          <button onClick={handleSave}>সেভ করুন</button>
          <button onClick={() => setEditMode(false)}>বাতিল</button>
        </div>
      ) : (
        <div>
          <p>{state.user?.bio || "এখনো কোনো bio যোগ করা হয়নি।"}</p>
          <button onClick={() => setEditMode(true)}>✏️ Bio এডিট করুন</button>
        </div>
      )}
    </div>
  );
};

export default Bio;

// src/services/profileService.js
import api from "../api/api";

export const getProfile = (id) => api.get(`/profile/${id}`);

// ⚠️ backend quirk: field নাম "firstname" (lowercase n)
export const updateProfile = (id, { firstname, lastName, bio }) =>
  api.patch(`/profile/${id}`, { firstname, lastName, bio });

export const uploadAvatar = (id, file, onUploadProgress) => {
  const formData = new FormData();
  formData.append("avatar", file);

  return api.post(`/profile/${id}/avatar`, formData, {
    onUploadProgress: (progressEvent) => {
      if (!onUploadProgress) return;
      const percent = Math.round(
        (progressEvent.loaded * 100) / (progressEvent.total || 1),
      );
      onUploadProgress(percent);
    },
  });
};

// ❌ ধীর: sequential (দুটোর সময় যোগ হয়)
const profileRes = await api.get(`/profile/${userId}`);
const postsRes = await api.get("/posts");

// ✅ দ্রুত: parallel (যেটা বেশি সময় নেয় শুধু সেটার সময় লাগে)
const [profileRes, postsRes] = await Promise.all([
  api.get(`/profile/${userId}`),
  api.get("/posts"),
]);

const profile = profileRes.data;
const posts = postsRes.data;

import { useEffect, useState } from "react";
import api from "../api/api";

function useSearchPosts(query) {
  const [results, setResults] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (!query.trim()) {
      setResults([]);
      return;
    }

    const controller = new AbortController();
    setLoading(true);

    api
      .get("/posts", {
        params: { search: query },
        signal: controller.signal,
      })
      .then((res) => {
        setResults(res.data);
        setLoading(false);
      })
      .catch((err) => {
        // "CanceledError" মানে আমরাই cancel করেছি — এটা real error নয়
        if (err.name !== "CanceledError") {
          console.error("সার্চ এরর:", err.message);
          setLoading(false);
        }
      });

    return () => {
      controller.abort(); // পরের keystroke-এ আগের request cancel হবে
    };
  }, [query]);

  return { results, loading };
}

// src/pages/FeedPage.jsx
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import useAuth from "../hooks/useAuth";
import CreatePostForm from "../components/CreatePostForm";
import PostFeed from "../components/PostFeed";

export default function FeedPage() {
  const { auth, setAuth } = useAuth();
  const navigate = useNavigate();
  const [refreshKey, setRefreshKey] = useState(0);

  const handleLogout = () => {
    setAuth(null);
    navigate("/login");
  };

  return (
    <div>
      <header>
        <h2>স্বাগতম, {auth?.user?.firstName}!</h2>
        <button onClick={handleLogout}>লগআউট</button>
      </header>

      <CreatePostForm onCreated={() => setRefreshKey((k) => k + 1)} />

      {/* key বদলালে PostFeed নতুন করে mount হয়, useEffect আবার চলে */}
      <PostFeed key={refreshKey} />
    </div>
  );
}

// src/pages/LoginPage.jsx
import { Link } from "react-router-dom";
import LoginForm from "../components/LoginForm";

export default function LoginPage() {
  return (
    <div>
      <h2>লগইন করুন</h2>
      <LoginForm />
      <p>
        একাউন্ট নেই? <Link to="/register">রেজিস্ট্রেশন করুন</Link>
      </p>
    </div>
  );
}

// src/pages/RegisterPage.jsx
import { Link } from "react-router-dom";
import RegisterForm from "../components/RegisterForm";

export default function RegisterPage() {
  return (
    <div>
      <h2>নতুন একাউন্ট খুলুন</h2>
      <RegisterForm />
      <p>
        আগে থেকে একাউন্ট আছে? <Link to="/login">লগইন করুন</Link>
      </p>
    </div>
  );
}

// src/App.jsx
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { AuthProvider } from "./context/AuthContext";
import { ProfileProvider } from "./context/ProfileContext";
import ProtectedRoute from "./components/ProtectedRoute";
import LoginPage from "./pages/LoginPage";
import RegisterPage from "./pages/RegisterPage";
import FeedPage from "./pages/FeedPage";
import ProfilePage from "./pages/ProfilePage";

export default function App() {
  return (
    // AuthProvider সবার বাইরে — সব component-এ auth দরকার
    <AuthProvider>
      <BrowserRouter>
        <Routes>
          {/* Public routes */}
          <Route path="/login" element={<LoginPage />} />
          <Route path="/register" element={<RegisterPage />} />

          {/* Protected routes — login করা লাগবে */}
          <Route
            path="/"
            element={
              <ProtectedRoute>
                <FeedPage />
              </ProtectedRoute>
            }
          />
          <Route
            path="/profile"
            element={
              <ProtectedRoute>
                {/* ProfileProvider শুধু ProfilePage-এর জন্য */}
                <ProfileProvider>
                  <ProfilePage />
                </ProfileProvider>
              </ProtectedRoute>
            }
          />
        </Routes>
      </BrowserRouter>
    </AuthProvider>
  );
}

npm run dev