Hive React Dev – Day 11: Getting Cash backs details Like a Boss & Having Fun 🍕💸

🎉 Hello Awesome Hive Community!

I’m back with day 11 of our caffeinated ReactJS adventure! This week’s flavor? Integrating the Distriator cashback claim API (yes, more cash for you!).

---

💡 Epic Learning Journey Recap

Missed a day? Here's the trail of my misadventures:

• 📚 Day One: Fresh React app + AIOHA integration!
• 🧭 Day Two: Routing drama & rebellious NavBar
• 🛠️ Day Three: Fixed layouts, Routing & AIOHA
• 🧠 Day Four: useState, useEffect, and .env headaches 😅
• 🧹 Day Five: Path Aliases to clean up path spaghetti 🍝
• 📡 Day Six: Create Context Provider & call API
• 🍞 Day Seven: Show a toast message
• 🔐 Day Eight: Login with AIOHA, Distriator & LocalStorage magic
• 😂 Day Nine: Toasts, Laughs & Custom Magic!
• 🆕 Day 10: Handling user-account-switch and getting fresh JWT Token

---

💵 Day 11: Cashback Claim API – Implementation

Today’s Fun Plan:

• Fetch Distriator cashback claim data when the user lands on the dashboard or switches accounts. So easy, even a blockchain squirrel could do it 🐿️.

---

📦 Step 1: Define the Types!

Do you like types? I like types!

• In your types folder, add a new file: UserClaimsApiResponse.tsx
• Pop in these types:

export interface UserClaimResponseDTO {
  claim?: UserClaimResponseClaimDTO;
  claims?: UserClaimResponseClaimDTO[];
  monthly: UserClaimResponseBiweeklyDTO[];
  biweekly: UserClaimResponseBiweeklyDTO[];
}

export interface UserClaimResponseBiweeklyDTO {
  amount: string;
  memo: string;
  invoice: string;
  timestamp: Date;
}

export interface UserClaimResponseClaimDTO {
  amount: string;
  memo: string;
  invoice: string;
  timestamp: Date;
  business: string;
  guides: UserClaimResponseOnborderDTO[];
  country: string;
  onborder: UserClaimResponseOnborderDTO;
  percentage: string;
  claimValue: string;
  transactionAmount: string;
  percentAsPerTransactionAmount: string;
}

export interface UserClaimResponseOnborderDTO {
  name: string;
  percent: string;
  guidesPercent?: string;
  value: string;
}

Fun fact: If you think my naming conventions are quirky, tell me yours! Sharing is caring.

---

🔌 Step 2: Add the User Claims API

• Under your api folder, create a file: UserClaimsApiResponse.tsx
• Drop this code for a token-powered API call:

import type { UserClaimResponseDTO } from "@/types/UserClaimsApiResponse";
import { DISTRIATOR_API_BASE_URL } from "@/api/constants";
import { getCurrentUser } from "@/utils/LocalStorageUtils";

export const fetchUserClaimsApi = async (): Promise<UserClaimResponseDTO> => {
  const user = getCurrentUser();
  if (user === null) {
    throw new Error("Session may have expired");
  }
  const response = await fetch(`${DISTRIATOR_API_BASE_URL}/claims/v2`, {
    method: "GET",
    headers: {
      Accept: "*/*",
      "Content-Type": "application/json",
      Authorization: user.token,
    },
  });
  if (!response.ok) {
    throw new Error("Failed to fetch user claims");
  }
  return response.json();
};

---

🚦 Step 3: Hook API Into Your Dashboard Page

• Import like a pro:

Let's add necessary imports

import { fetchUserClaimsApi } from "@/api/UserClaimsApi";
import type { UserClaimResponseDTO } from "@/types/UserClaimsApiResponse";
import React, { useEffect, useState } from "react";

const DashboardPage = () => {

• Call the API and manage the data (and don’t forget error-handling for when the bugs come out to party):

const getUserClaimsData = async () => {
  const fetchClaims = async () => {
    try {
      const data = await fetchUserClaimsApi();
      setClaims(data);
    } catch {
      setErrorMessage("Failed to fetch claims");
      setToastStyle(ToastStyle.Regular);
      setToastType(ToastType.Error);
      setShowToast(true);
    }
    setIsLoading(false);
  };
  fetchClaims();
};

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

Now your dashboard revels in cashback glory!

---

🤯 Feeling Confused? It’s Open Tomato Sauce! 🥫

Confused by code snippets? Don’t stress—I run on “open sauce”! It’s open source, but with more randomness.

• Repository: https://github.com/sag333ar/react-distriator
• Codebase at this commit: https://github.com/sag333ar/react-distriator/tree/105254a4da8aa69a72a1d73ed1aa28c29feb2f96
• Review all changes: https://github.com/sag333ar/react-distriator/commit/105254a4da8aa69a72a1d73ed1aa28c29feb2f96

---

🔮 What’s Next?

Stay tuned! Next episode:

• We’ll ditch the homebrew snackbar for a sonnar-based toast 🔔
• UI for this dashboard coming soon!
• And then… the grand reveal: Distriator cashback claim integration!

---

🙏 Thank You for Surviving My Tech Rant!

I hope you’ve smiled, learned, and maybe grabbed some cashback on the way! It's all open source, for Hive & for fun.

More Power to the Hive Community 🚀
More Power to Hive Blockchain
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/ac6dfce8-8edd-4164-88db-80613013b271

---

🚀 My Contributions to ♦️ Hive Ecosystem

Contribution	To	Hive	Ecosystem
Hive Witness Node	Hive API Node (in progress)	3Speak Video Encoder Node Operator (highest number of nodes)	3Speak Mobile App Developer
3Speak Podcast App Developer	3Speak Shorts App Developer	3Speak Support & Maintenance Team	Distriator Developer
CheckinWithXYZ	Hive Inbox	HiFind	Hive Donate App
Contributed to HiveAuth Mobile App	Ecency ↔ 3Speak Integration	Ecency ↔ InLeo Integration	Ecency ↔ Actifit Integration
Hive Stats App	Vote for Witness App	HiveFlutterKit	New 3Speak App

---

🙌 Support Back

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

Vote	For	Witness
	sagarkothari88	@sagarkothari88
	threespeak	@threespeak

---