Fetch and Sort Brand Page Visits




১.useEffect কী করছে

useEffect(() => { ... }, []);

• useEffect হলো React এর একটি হুক যা কম্পোনেন্ট মাউন্ট হওয়ার পরে কোনো সাইড ইফেক্ট (যেমন ডাটা ফেচিং) করার জন্য ব্যবহৃত হয়।

• এখানে [] ডিপেনডেন্সি অ্যারে খালি, মানে এটা কেবল কম্পোনেন্ট প্রথমবার মাউন্ট হওয়ার সময়ই চলবে।

---

২️ fetchVisitorLogs ফাংশন ডিফাইন

async function fetchVisitorLogs() { ... }

• আমরা একটি অ্যাসিনক্রোনাস ফাংশন বানিয়েছি, যাতে await ব্যবহার করে ডাটার জন্য অপেক্ষা করতে পারি।

---

৩️API থেকে ডাটা আনা

const response = await fetch(`${baseURL}/api/visitor/log-get`);
const data = await response.json();

• fetch দিয়ে visitor/log-get API থেকে ডাটা আনা হচ্ছে।

• await response.json() দিয়ে API থেকে JSON ফরম্যাটে ডাটা নিয়ে আসা হচ্ছে।

---

৪️ব্র্যান্ড অনুযায়ী ভিজিটের হিসাব

const brandCounts = data.data.reduce((acc, log) => {
  if (log.page_type === "brand") {
    const existing = acc.find(b => b.brand_name === log.page_name);
    if (existing) {
      existing.total_visits += 1;
    } else {
      acc.push({ brand_name: log.page_name, total_visits: 1 });
    }
  }
  return acc;
}, []);

• data.data.reduce(...): ডাটার মধ্যে লুপ চালাচ্ছে এবং প্রতিটি লোগকে প্রোসেস করছে।

• log.page_type === "brand": শুধুমাত্র ব্র্যান্ড পেজের লোগগুলো বিবেচনা করা হচ্ছে।

• acc.find(...): আগে থেকে কোনো ব্র্যান্ডের রেকর্ড আছে কি না চেক করা হচ্ছে।

• যদি ব্র্যান্ড আগে থেকেই থাকে → existing.total_visits += 1 (ভিজিট সংখ্যা বাড়ানো)।

• যদি না থাকে → নতুন ব্র্যান্ড অবজেক্ট acc তে যোগ করা।

• এইভাবে আমরা সব ব্র্যান্ডের মোট ভিজিটের সংখ্যা গণনা করি।

---

৫️ভিজিট সংখ্যা অনুযায়ী সাজানো

brandCounts.sort((a, b) => b.total_visits - a.total_visits);

• sort দিয়ে ব্র্যান্ডগুলোর তালিকাকে বেশি ভিজিটের ব্র্যান্ড আগে এবং কম ভিজিটের পরে সাজানো হচ্ছে।

---

৬️React state-এ সংরক্ষণ

setMostVisitedBrands(brandCounts);

• setMostVisitedBrands হলো একটি React state ফাংশন।

• আমরা এখানে গণনা করা ব্র্যান্ড এবং তাদের ভিজিট সংখ্যা React state-এ রাখছি, যাতে কম্পোনেন্টে ডাটা ব্যবহার করা যায়।

---

৭️এরর হ্যান্ডলিং

} catch (error) {
  console.error("Error fetching visitor logs:", error);
}

• যদি কোনো সমস্যা হয় API কলের সময়, তা কনসোলে দেখানো হবে।

---

৮️ফাংশন কল করা

fetchVisitorLogs();

• উপরের সব কাজ করার জন্য আমরা ফাংশনটাকে একবার কল করছি।

---

💡 সারসংক্ষেপ:

1. কম্পোনেন্ট মাউন্ট হলে ডাটা ফেচ হবে।

2. শুধু ব্র্যান্ড পেজের ভিজিটের লোগ নেওয়া হবে।

3. প্রতিটি ব্র্যান্ডের মোট ভিজিট গণনা করা হবে।

4. ভিজিট সংখ্যা অনুযায়ী ব্র্যান্ড সাজানো হবে।

5. React state-এ সেট করা হবে।