Day 6 🚀 - Learning ReactJS: Calling APIs & Creating Context Providers | Distriator Feature Update

Hey there, Hive community! 👋

Welcome back to my wild ReactJS learning ride 🎢 — and guess what? We’re already on Day 6! If you've missed previous episodes, don't worry. Grab some popcorn 🍿 and catch up below:

📖 ReactJS Journey So Far

• 📚 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 relative path spaghetti 🍝

📡 API Calling — The Right Way

Using fetch() is easy. But keeping things organized? That’s next-level!

📁 Folder structure:

src/api/
├── business/
│   ├── BusinessApi.tsx  // 👈 Get Business API here

👉 Here’s how I call my Business API:

import type { BusinessDTO } from "@/types/BusinessApiResponse";

export const fetchBusinesses = async () => {
  const response = await fetch("https://some-xyz-server.com/business");
  if (!response.ok) throw new Error("API error");
  const jsonData = await response.json();
  return jsonData as BusinessDTO[];
};

💡 Why a separate file? Because real-world APIs are messy. Headers, body payloads, response transformations — it's cleaner this way! 😎

🧬 DTOs / POJOs / Data Models

Using TypeScript = getting predictable & strongly typed data 💪

📁 Types live here:

src/types/
├── BusinessApiResponse.tsx  // 👈 All your DTOs in one place

Here’s a sneak peek of my DTO setup:

export interface BusinessDTO {
    distriator?: DistriatorDTO;
    profile?:    ProfileDTO;
    contact?:    ContactDTO;
    location?:   LocationDTO;
    id?:         string;
}

export interface ContactDTO {
    website?: string;
}

export interface DistriatorDTO {
    guides?:             GuideDTO[];
    owner?:              string;
    creator?:            string;
    expiry?:             Date;
    subscriptionStatus?: string;
    paymentMethods?:     string[];
    spendHBDLink?:       string;
}

🧠 Context Providers to the Rescue!

If businesses are needed everywhere in your app, the answer is simple: Context Provider! 🪄

✅ Step 1: Folder Setup

src/
├── components/
│   └── BusinessList.jsx
├── context/
│   └── BusinessesContext.jsx   // ✅ Lives here

✅ Step 2: Create the Context + Provider

import type { FC, ReactNode } from "react";
import type { BusinessDTO } from "@/types/BusinessApiResponse";
import { fetchBusinesses } from "@/api/BusinessApi";

import React, { createContext, useContext, useState, useEffect } from "react";

const BusinessesContext = createContext();

export const useBusinesses = () => useContext(BusinessesContext);

export const BusinessesProvider: FC<{ children: ReactNode }> = ({ children }) => {
  const [businesses, setBusinesses] = useState<BusinessDTO[]>([]);
  const [loading, setLoading] = useState(true);

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

  const refreshBusinesses = async () => {
    try {
      setLoading(true);
      const data = await fetchBusinesses();
      setBusinesses(data);
    } catch (e) {
      console.error(e);
    } finally {
      setLoading(false);
    }
  };

  return (
    <BusinessesContext.Provider
      value={{ businesses, loading, refreshBusinesses }}
    >
      {children}
    </BusinessesContext.Provider>
  );
};

✅ Step 3: Wrap Your App

import { BusinessesProvider } from "@/context/BusinessesContext";

function App() {
  return (
    <BusinessesProvider>
      <AiohaProvider aioha={aioha}>
        <BrowserRouter>
          <Routes>
            <Route path="/" element={<LandingPage />} />
          </Routes>
        </BrowserRouter>
      </AiohaProvider>
    </BusinessesProvider>
  );
}

✅ Step 4: Use It Anywhere!

import React from "react";
import { useBusinesses } from "@/context/BusinessesContext";

function BusinessList() {
  const { businesses, loading } = useBusinesses();

  if (loading) return <p>⏳ Loading businesses...</p>;

  return (
    <div>
      <h2>🏪 All Businesses</h2>
      <ul>
        {businesses.map((biz) => (
          <li key={biz.id}>📍 {biz.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default BusinessList;

And boom 💥 — your business data is now globally available!

🔧 Distriator Project Update

We’ve rolled out a new feature that displays Hive Power of a business! 🐝

This allows users to instantly see how invested a business is in Hive 💪

✅ Currently in alpha
🚀 Rolling out to production very soon!

🙌 Wrapping Up

I hope this post helps some curious mind someday 🧠
If you found value in this, consider supporting me in my journey on the Hive blockchain 💖

🙏 Vote me as a Hive Witness
⚡ Let’s build a stronger decentralized world together

Cheers 🥂
More power to Hive community members!
More power to Hive blockchain!

📝 Final Note

• I asked ChatGPT/AI 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://chatgpt.com/share/688ad30f-5d64-8000-9f97-b26950da7bd6

🚀 My Contributions to ♦️ Hive Ecosystem

🙌 Support Back

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

Vote	For	Witness
	sagarkothari88	@sagarkothari88
	threespeak	@threespeak