🚀 My React Learning Journey – Distriator 🛠 | Showing Monthly Cashback Claim History 💰

👋 Hello Amazing Hive Community!

In our ReactJS adventure so far, we’ve been on a wild dev ride — from fixing rebellious NavBars to brewing delicious Toast notifications 🍞, and even sprinkling in some secure login sorcery ✨.

So far, the app could load cashback details right after you log in — but hey, why stop there?
We decided to also show a monthly cashback claim history… because history matters (and so does money 💵).

📜 Learning Journey Recap

Here’s the Netflix Series Recap of my React learning saga so far 🎬👇

• 📚 Day 1 – Fresh React app + AIOHA integration!
• 🧭 Day 2 – Routing drama & rebellious NavBar 💥
• 🛠️ Day 3 – Layout & routing rescue mission 🛟
• 🧠 Day 4 – State & effect chaos 😅
• 🧹 Day 5 – Path spaghetti cleanup 🍝
• 📡 Day 6 – Context + API magic 🪄
• 🍞 Day 7 – Toasts that make you smile 😋
• 🔐 Day 8 – Login spells 🔮
• 😂 Day 9 – Fun tweaks & giggles 😂
• 🆕 Day 10 – Smooth account switching + JWT freshness
• 🆕 Day 11 – Cashback API unlocked 🔓
• 💵 Day 12 – Cashback ClaimBox: UI glory ✨

💡 The Big Idea

The cashback API already sends us:
- available cashback 💰
- AND your monthly claimed history 📜

But we weren't displaying the monthly list yet.

🤔 So the mission was clear:
Show users what they’ve claimed this month — in style!

🧪 Attempt 1: The (Not-So-Mobile-Friendly) Table

Result?
Horizontal scroll. My biggest enemy. ❌
Nope. Deleted instantly 💀

🃏 Attempt 2: Cards

Also nope ❌
Cards confused users because we already had one for available cashback.

📜 Attempt 3: The Winning List 🎯

This DaisyUI list was love at first sight ❤️.
But before beauty… came the brains 🧠.

🔍 Parsing the JSON Response

API returns:
- memo
- invoice 🧾
- timestamp ⏳
- cashback amount 💸

🪄 Extracting Business Name

Regex magic to the rescue:

  const regexBusinessName = (memo: string) => {
    const match = memo.match(
      /&(?:\s*adding?\s*review\s*of\s*)(.*?)\s*-\s*http/i
    );
    if (match) {
      const businessName = match[1];
      return businessName;
    } else {
      return "Cafe Coffee Jitters";
    }
  };

🖼 Getting Business Image

   const getBusinessImage = (username: string) => {
    const filteredItems = businesses.filter(
      (b) => b.profile?.displayName === username
    );
    if (filteredItems.length > 0) {
      return (
        filteredItems[0].profile?.displayImage ||
        "https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp"
      );
    } else {
      return "https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp";
    }
  };

🔗 Business Review Link

  const linkToPost = (memo: string) => {
    const match = memo.match(/-\s*(https?:\/\/\S+)/i);
    if (match) {
      const link = match[1];
      return link;
    } else {
      return "https://hive.blog/@shaktimaaan/ylgfiaqv";
    }
  };

🧾 Invoice ID Shortcode

  const invoice = (memo: string) => {
    const match = memo.match(/\(([^)]+)\)/);
    if (match) {
      const invoiceId = match[1];
      return invoiceId;
    } else {
      return "HDC-XYMYX";
    }
  };

🎨 Rendering the Monthly Cashback History List

  return (
    <div>
      <ul className="list bg-base-100 rounded-box shadow-md">
        <li className="p-4 pb-2 text-xs opacity-60 tracking-wide">
          Your claims from this month
        </li>
        {monthly?.map((claim, index) => (
          <li className="list-row" key={index} onClick={()=> window.open(linkToPost(claim.memo), "_blank")}>
            <div className="text-4xl font-thin opacity-30 tabular-nums">
              {index + 1}
            </div>
            <div>
              <img
                className="size-10 rounded-box"
                src={getBusinessImage(regexBusinessName(claim.memo))}
              />
            </div>
            <div>
              <div>{regexBusinessName(claim.memo)}</div>
              <div className="text-xs uppercase font-semibold opacity-60">{invoice(claim.memo)}</div>
            </div>
            <div>
            <div>{claim.amount}</div>
            <div>{dayjs(claim.timestamp).fromNow()}</div>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );

👀 How Does it Look?

Cash back claim history from this month

📂 Wanna See the Damn Code?

• GitHub Repo: https://github.com/sag333ar/react-distriator
• Direct Commit: https://github.com/sag333ar/react-distriator/commit/e0703d66f1c1cdec3b1d406b32973512ec5f6005
• Snapshot View: https://github.com/sag333ar/react-distriator/tree/e0703d66f1c1cdec3b1d406b32973512ec5f6005

🙏 Thank You for Surviving My Tech Rant!

• Hope you got a smile, a lesson, and maybe even a bit of cashback happiness 💜
• 🔥 More Power to the Hive Community 🚀
• 🌕 Hive to the moon and beyond! ✨
• 👋 See you in the next post! 🥳

📝 Final Note

• I asked perplexity to help optimize this post to make it more readable and viewer-friendly.
• Here is the link where you can find both original content & improvements made by AI
• https://www.perplexity.ai/search/beeac6de-9d94-42e8-b12f-c6d8d1375838

🚀 My Contributions to ♦️ Hive Ecosystem

🙌 Support Back

❤️ Appreciate my work? Consider supporting @threespeak & @sagarkothari88! ❤️

Vote	For	Witness
	sagarkothari88	@sagarkothari88
	threespeak	@threespeak