Day 6 πŸš€ - Learning ReactJS: Calling APIs & Creating Context Providers | Distriator Feature Update

By sagarkothari88 on 8/1/2025

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


πŸ“‘ API Calling β€” The Right Way

Fetch Data from server

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

Type Script - Type Image

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!

Context Provider Example Image

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 πŸ’ͺ

businesses with hive power

βœ… 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


πŸš€ 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

Comments (5)

indiaunited's avatar @indiaunited 8/1/2025

This post has been manually curated by @bhattg from Indiaunited community. Join us on our Discord Server.

Do you know that you can earn a passive income by delegating to @indiaunited. We share more than 100 % of the curation rewards with the delegators in the form of IUC tokens. HP delegators and IUC token holders also get upto 20% additional vote weight.

Here are some handy links for delegations: 100HP, 250HP, 500HP, 1000HP.

image.png

100% of the rewards from this comment goes to the curator for their manual curation efforts. Please encourage the curator @bhattg by upvoting this comment and support the community by voting the posts made by @indiaunited.

sagarkothari88's avatar @sagarkothari88 8/1/2025

Thank you so much @bhattg & @indiaunited for considering my post for curation. Have a good day
via Inbox

kgakakillerg's avatar @kgakakillerg 8/1/2025

Stop downvoting my original content with your alt account @letusbuyhive I know you work for Dan so fuck off

πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚

Blocktrades can you please stop downvoting my original content with your alt accounts thanks πŸ™πŸΎ

πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚

Don't be jealous So sad @themarkymark aka @theycallmemarky Aka @marky @gogreenbuddy Aka @usainvote @buildawhale Aka @punkteam Aka @ipromote

@letusbuyhive Aka @sagarkothari88 please explain why you keep downvoting my original content and comments πŸ€”

Please explain to everyone why πŸ€”

@meno @steevc @crimsonclad @azircon let's not forget blocktrades πŸ˜‚ please tell your racist friend to stop downvoting my original content

How can we we allow a mentally ill person to have so much control on Hive πŸ˜‚

It's unbelievable you downvoted this Goodbye Auntie R.I.P πŸ™πŸΎ You fucked up big time it's clear blocktrades is in control πŸ˜‚

If nothing can be done about your downvote abuse then Hive is a dead project πŸ‘ŽπŸΎ

It's crazy that the person doing the downvoting is also farming the shit out of Hive πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚

If anyone wants to speak to me privately send me a message on Instagram @kgakakillerg

You can never stop the truth with lies πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚

It's crazy we have a man who pretends to be a millionaire running around Hive downvoting people for fun πŸ€” and nothing has been done πŸ€”

It's crazy that someone is trying to bully me on Hive πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚

It's unbelievable that no one has came to help as people are afraid to say anything or they get downvoted too πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚

There's no real freedom on Hive if one person can cause so much harm

I feel sorry for you πŸ™πŸΎ

One thing you need to remember you can't take anything with you πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚

Go and enjoy your life have a bit of fun let your hair down go out and meet some real people in the flesh πŸ˜‰

Your actions show that you must own Hive Blockchain πŸ€” why do your actions go unchallenged πŸ€”

You are now stalking me πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚

Are you jealous about the DHF πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚

Aren't you farming enough rewards πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚

I heard you were into very young girls πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚

Is that why you are always online πŸ€”

Stalking people

No one is scared of you πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚

You are bad for Hive

Power down and go away get a life

https://hive.blog/hive-135178/@crimsonclad/re-kgakakillerg-sxllhv

https://hive.blog/hive-148441/@hivewatchers/svftu9

https://hive.blog/hive-148441/@hivewatchers/svdjjz

https://hive.blog/hive-176853/@steevc/re-kgakakillerg-syyy4x

https://hive.blog/dev/@howo/re-kgakakillerg-szhax7

It's unbelievable that they downvoted this Goodbye Auntie R.I.P πŸ™πŸΎ

It's clear you need help πŸ™πŸΎ

Hive is being held down by downvoting whales

Do you get a buzz out of downvoting people πŸ€”

You should really try to get outside more spend some time in the real world 🌎🌍

Why are you pushing people away to blurt and steemit

You are all definitely going to hell πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚

Why do you want to make enemies all over the world πŸ€”

Blocktrades stop making a fool of yourself πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚

Steevc please explain to your friend they have been exposed πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚

Downvotes are weak like you πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚

Why don't you go and spend your millions of dollar's you have πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚

Blocktrades please explain why you keep downvoting my original content with your alt accounts πŸ€”

You are so sad it's unreal πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚

You must know that you can't hide on Hive πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚

If you want everyone to leave Hive keep doing what you are doing πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚

Just remembered who started this

I'll be here to turn the lights off πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚

You are still stalking me πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚ it proves you have no life outside of Hive πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ‘ŽπŸΎπŸ‘ŽπŸΎπŸ‘ŽπŸΎπŸ‘ŽπŸΎπŸ‘ŽπŸΎπŸ‘ŽπŸΎπŸ‘ŽπŸΎπŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚

Blocktrades please can you stop downvoting my original content with your alt accounts πŸ€”

Also is bullying people ok on Hive πŸ€”

You are only making Hive look like a big scam

Why do you keep stalking me I'm not gay sorry I can't help you πŸ™πŸΎ

Just tell me what the issue is πŸ€”

You are that stupid you set up an account called letusbuyhive to downvote people and support your farming Hive friend's πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚ and @buildawhale

Please get some help πŸ™πŸΎ

It's clear who has mental health issues that's why you should really stop pointing fingers at others πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚

It's clear blocktrades is behind this πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚

Can you please explain why you keep downvoting my original content I don't want to hear it's because disagreement of rewards I don't make any πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚

Please move on with your life blocktrades and leave me alone thank you πŸ™πŸΎ

Please tell everyone why you keep downvoting my original content πŸ€”

Still stalking me πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚

The way you are stalking me it's clear you have no Life outside of Hive πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚

Keep downvoting people away πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚

Some people never learn πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ€£πŸ€£πŸ€£πŸ€£πŸ€£

Is life that bad πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚

You can't win this πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚

hivebuzz's avatar @hivebuzz 8/1/2025

Congratulations @sagarkothari88! You received a personal badge!

https://images.hive.blog/70x70/https://hivebuzz.me/badges/pud.png?202508010855You powered-up at least 10 HIVE on Hive Power Up Day!
Wait until the end of Power Up Day to find out the size of your Power-Bee.
May the Hive Power be with you!

You can view your badges on your board and compare yourself to others in the Ranking

Check out our last posts:

Hive Power Up Month Challenge - July 2025 Winners List
Be ready for the August edition of the Hive Power Up Month!
Hive Power Up Day - August 1st 2025
hivebuzz's avatar @hivebuzz 8/2/2025

Congratulations @sagarkothari88! You received a personal badge!

https://images.hive.blog/70x70/https://hivebuzz.me/badges/pud.s5.png?202508020003You powered-up at least 1000 HP on Hive Power Up Day and got the biggest Power-Bee!
See you at the next Power Up day to see if you will repeat this feat.
May the Hive Power be with you!

You can view your badges on your board and compare yourself to others in the Ranking

Check out our last posts:

Hive Power Up Month Challenge - July 2025 Winners List
Be ready for the August edition of the Hive Power Up Month!
Hive Power Up Day - August 1st 2025
vastavikadi's avatar @vastavikadi 8/2/2025

Okay, I have a doubt rather than going for context hooks and complicating things why don't you go for Redux-Toolkit? Correct me if I'm wrong, but I would like to know it from you.

sagarkothari88's avatar @sagarkothari88 8/3/2025

I am going anywhere possible 🀣

You're not wrong at all. I am doing direction-less learning.

Good that you've pointed out. I'll do some redux-toolkit learning as well. It's on my list now.
via Inbox

vastavikadi's avatar @vastavikadi 8/3/2025

Sure. I got your blogs on my feed and they are interesting to me as I too come from the same background. Now, I'm scrolling through them only and I gotta do the same. For a long time, I have been writing travelling and other random blogs over here.

sagarkothari88's avatar @sagarkothari88 8/3/2025

React isn't my skillset at all. I used to be Swift-iOS app developer - straight 10 years but Apple is innovating backwards. I tried flutter for over 5 years but it feels dead to me. Now, I don't know who am I? Where am I heading?

Typical Developers FOMO situation.

fomo

Coding even on Monday 😹
via Inbox

vastavikadi's avatar @vastavikadi 8/3/2025

Hearing this from someone who has been in the industry for almost 2 decades is already killing. I too sometimes get the FOMO that's why I just keep exploring things, and whichever I feel like I should get it finished I do that from scratch to the advanced.

sagarkothari88's avatar @sagarkothari88 8/3/2025

I feel so bad for myself because I sometimes still code in dead-objective-c programming language in which AI hardly does something well. AI has killed all experience. Anyone, literally, anyone from market of devs, can do much much better with help of AI. Forget anyone, even AI is doing better than me, when I ask it to do.

Looks like We have to focus somewhere else.
via Inbox

vastavikadi's avatar @vastavikadi 8/3/2025

The best thing to do right now, is to make AI your companion and keep growing. You can't compete with it, you can only use it for yourself and your learning.

sagarkothari88's avatar @sagarkothari88 8/3/2025

Yes. Noted. That's the only way to survive.
via Inbox

vastavikadi's avatar @vastavikadi 8/3/2025

Cool