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

🙌 Support Back

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

Vote	For	Witness
	sagarkothari88	@sagarkothari88
	threespeak	@threespeak