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

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

---