DEV Community: Frulow

A Script To Help React Native Developers

Frulow — Fri, 06 Sep 2024 17:16:13 +0000

Hi there!

If you've been working with React Native, you've likely encountered emulator issues. You run the React Native command, but the emulator isn’t detected. Even after setting all the necessary environment variables in your .zshrc, .bash_profile, or similar files, it still doesn’t work.

Here are some common problems and fixes:

Emulator Not Found: This can happen if the Android SDK path isn't correctly set. Double-check that the ANDROID_HOME and PATH environment variables point to the correct directories. You can add these lines to your .zshrc or .bash_profile:
```
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
```
After making these changes, restart your terminal or run source ~/.zshrc (or source ~/.bash_profile).
Watchman Errors: Sometimes, Watchman—Facebook’s file watching service—can cause issues with stale file caches. To fix this, run:
```
watchman watch-del-all
```
Then, restart your React Native server.
adb reverse to Connect to localhost: If your app cannot connect to localhost from within the Android emulator, you might need to run:
```
adb reverse tcp:8081 tcp:8081
```
This command routes traffic from the emulator to your local machine. Make sure adb is accessible from your terminal.
Clear Cache and Rebuild: If you still face issues, try clearing the cache and rebuilding the project:
```
npm start -- --reset-cache
cd android && ./gradlew clean
cd ios && xcodebuild clean
```
Then run your React Native app again.
Using react-native run-android or run-ios Directly: If the emulator is not starting correctly from your IDE or terminal, try running the app directly with:
```
npx react-native run-android
npx react-native run-ios
```

Debugging these issues can be frustrating, but these steps have helped me solve many common problems.

I created an easy-to-use script too


const {spawn, exec} = require('child_process');
const path = require('path');

// Define paths
const projectPath = path.resolve();

// Define commands
const watchDelCommand = `watchman watch-del '${projectPath}'`;
const watchProjectCommand = `watchman watch-project '${projectPath}'`;

// Function to execute commands
const clearWatchman = () => {
  // Execute watch-del command
  exec(watchDelCommand, (error, stdout, stderr) => {
    if (error) {
      console.error(`Error executing watch-del command: ${error.message}`);
      return;
    }
    if (stderr) {
      console.error(`stderr: ${stderr}`);
      return;
    }
    console.log(`watch-del command executed successfully: ${stdout}`);

    // Execute watch-project command
    exec(watchProjectCommand, (error, stdout, stderr) => {
      if (error) {
        console.error(
          `Error executing watch-project command: ${error.message}`,
        );
        return;
      }
      if (stderr) {
        console.error(`stderr: ${stderr}`);
        return;
      }
      console.log(`watch-project command executed successfully: ${stdout}`);
    });
  });
};

async function reverseAdb() {
  console.log('Running... adb reverse tcp:8080 tcp:8080');
  // After the emulator has started  adb reverse tcp:8080 tcp:8080
  const adbReverse = spawn('adb', ['reverse', 'tcp:8080', 'tcp:8080']);
  await new Promise((resolve, reject) => {
    let output = '';
    adbReverse.stdout.on('data', data => {
      output += data.toString();
    });
    adbReverse.on('close', () => {
      resolve();
    });
    adbReverse.stderr.on('error', reject);
  }).catch(error => console.error('Error  reversing ADB port to 8080:', error));
}

async function runEmulator() {
  try {
    clearWatchman();
    // Check for running emulator
    const adbDevices = spawn('adb', ['devices']);
    const devices = await new Promise((resolve, reject) => {
      let output = '';
      adbDevices.stdout.on('data', data => {
        output += data.toString();
      });
      adbDevices.on('close', () => {
        resolve(output.includes('emulator'));
      });
      adbDevices.stderr.on('error', reject);
    });

    if (devices) {
      console.log('Emulator is already running');
      reverseAdb();
      return;
    }

    // Get list of available emulators
    const emulatorList = spawn('emulator', ['-list-avds']);
    const emulatorName = await new Promise((resolve, reject) => {
      let output = '';
      emulatorList.stdout.on('data', data => {
        output += data.toString();
      });
      emulatorList.on('close', () => {
        const lines = output.split('\n').filter(Boolean); // Filter out empty lines
        if (lines.length === 0) {
          reject(new Error('No AVDs found'));
        } else {
          resolve(lines[lines.length - 1]); // Get the last non-empty line
        }
      });
      emulatorList.stderr.on('error', reject);
    });

    // Start the emulator in detached mode
    const emulatorProcess = spawn('emulator', ['-avd', emulatorName], {
      detached: true,
      stdio: 'ignore',
    });

    emulatorProcess.unref(); // Allow the parent process to exit independently of the child

    reverseAdb();

    console.log(`Starting emulator: ${emulatorName}`);
  } catch (error) {
    console.error('Error running emulator:', error);
  }
}

runEmulator();


// package.json

  "scripts": {
    ...

    "dev:android": "yarn android:emulator && npx react-native@latest start",
    "android:emulator": "node runEmulator.js",

    ...
  },

By using the script above, you can run both the emulator and React Native simultaneously.

Thanks for reading!

Introducing Thin: The App for Rapid, Concise Content Sharing

Frulow — Wed, 26 Jun 2024 08:21:00 +0000

Hello dev.to community,

I'm excited to introduce Thin, an app designed to revolutionize how you consume and share content. Whether you’re looking to share a digest of your latest blog post or quickly read up on various topics, Thin makes it easy and efficient.

Why Thin?

Thin is all about brevity and convenience. In today's fast-paced world, getting meaningful information quickly is crucial. That's where Thin comes in, offering a platform to access and share short, summarized digests and blogs across various categories, with a special focus on developers.

Key Features

Concise Snippets: Thin delivers content in bite-sized pieces, perfect for quick consumption.

Wide Range of Categories: From tech and development to lifestyle and beyond, find and share content that interests you.

Effortless Sharing: Share your blog digests, articles, and more with ease, helping you reach a broader audience quickly.
For Developers, By Developers

As developers, we understand the value of time and the need for efficient content consumption. Thin is designed to cater to this need, allowing you to:

Share summaries of your blog posts or articles.
Quickly read through digests and stay updated on the latest trends.
Save time by accessing condensed, yet meaningful information.

Get Started with Thin

Download Thin and start diving into a world of concise, rapid content. Share your thoughts, stay informed, and make the most out of your reading time.

We're eager to hear your feedback and suggestions to make Thin even better. Let's create a community where sharing and consuming content is not only easy but also enjoyable.

Enjoy Thin App: thin.maarkar.in

Happy reading and sharing!

Dev.to: Where the Bots Outnumber the Devs? (But Seriously, Let's Discuss)

Frulow — Tue, 20 Feb 2024 14:58:32 +0000

What's the deal with all these Dev.to posts lately? They're just these clickbait lists of the "hottest" tech, courses, or languages. Feels super fishy, you know? And what's even weirder, every single post has every single reaction! Come on, who actually clicks every heart and unicorn on every single thing they see? It's like they're trying too hard or something. Am I the only one thinking this?

Example: one post I found

I may be buggin', but the whole thing smells a bit fishy. Maybe it's just me, but what do you think? Are these posts legit or what? And what's up with all the reactions? Let's chat!

Starting With Fastify Today

Frulow — Fri, 26 Jan 2024 07:49:34 +0000

Hi all, this marks my journey with Fastify coming from the background of Express.js.

I know it's just a different architecture and structure of language but still, it's fun. I picked it for performance and to try something new. I am using it to use with GraphQL for one of my apps. Also, I am using it along with TS. A lot of new things to be with, Mercurius, and Graphql. I have not touched them yet for any of my projects, I think now is the time.

Wish me luck, thank you.

My past project( still managing actively ): Frulow.com

🤟 Building A New Place For Coding Libraries

Frulow — Tue, 23 Jan 2024 14:01:18 +0000

Hey there, I hope you are doing fine.

I have created a new platform for coding libraries that is modern and user-friendly, unlike the websites of package managers. The platform aims to store all the data of coding libraries in one place, making it convenient for users to access them.

My vision for this platform is to create a space where users can showcase their work and see what others are building, regardless of its popularity. The platform will display all new content, including relevant and lesser-known libraries.

I strongly believe that every package or library created in any programming language deserves a chance to be seen by the public.

Additionally, the platform will feature a trending list of libraries to help users find the best options available.

Some features of my app:

Search for libraries based on language, tags, and usage.
Categorize libraries for easy browsing.
Enjoy a modern UI for efficient navigation.
View stats of your libraries, which will soon be made public.
Check out the trending list to compete with other libraries.
Like and comment on libraries.
Join the community to share updates related to libraries or anything relevant.
Follow other library creators and users.
Engage in discussions through comments.

"I have used React, Remix, and MUI to develop the web application."

Thanks. Hope you all like it.

Website: Frulow.com

Handling Routes In React.js | A Custom Approach

Frulow — Fri, 19 Jan 2024 09:09:11 +0000

Hey there! If you've ever worked with React, you know how important routes are—they're what connect different pages or sections of your app. However, dealing with them can be a bit tricky.

So, I came up with a nifty way to handle route paths neatly, all in one file, and easily share them across your entire app.

Let's dive into the code:

export const AppRoutePaths = {
  home: '',
  auth: 'auth',
  project: {
    index: 'project',
    create: 'create',
    manage: {
      index: 'manage',
      byId: ({ id }: { id: string }) => `${id}`,
    },
  },
  // ... (other routes)
};

function createAppRouterFullPath(routePaths: Record<string, any>, parentPath = '') {
  let fullPath: Record<string, string> = {};

  for (const key in routePaths) {
    const value = routePaths[key as keyof typeof AppRoutePaths];
    const propKey = parentPath
      ? [parentPath, key]
          .filter((item) => !item.match(/^(?:false|null|undefined|0|NaN|''|""|`.*?`)$/i))
          .join('.')
          .replaceAll('/', '.')
      : key;

    if (typeof value === 'string') {
      fullPath[propKey] = parentPath ? `${parentPath}/${value}` : value;
    } else if (typeof value === 'function') {
      fullPath[propKey] = parentPath
        ? `${parentPath}/${value({ id: ':id' })}`
        : value({ id: ':id' });
    } else if (typeof value === 'object') {
      const nestedFullPath = createAppRouterFullPath(
        value,
        parentPath ? `${parentPath}/${key}` : key
      );
      fullPath = { ...fullPath, ...nestedFullPath };
    }
  }

  return fullPath;
}

export const AppRouterFullPath = createAppRouterFullPath(AppRoutePaths);

Now, let's talk about the purpose of the createAppRouterFullPath function:

If you noticed, the routes inside AppRoutePaths are nested but not connected to their parent. This function helps link them together.

Consider these routes:


export const AppRoutePaths = {
  home: '',
  auth: 'auth',
  project: {
    index: 'project',
    byId: ({ id }: { id: string }) => `${id}`, 
  }

If I want to link to auth, I can use:


<Link href={AppRoutePaths.auth} ... />

But what if I'm on the auth route and want to link to byId inside project?


<Link href={AppRoutePaths.project.byId({ id: 'id' })} ... />

Without the createAppRouterFullPath function, this would redirect to localhost:3000/auth/:id instead of localhost:3000/project/:id. The function takes care of joining nested routes with their parent.

Now, how do you use it? Check this out:


const router = useMemo(
  () =>
    createBrowserRouter([
      {
        errorElement: <ErrorBoundary />,
        element: <Layout />,
        children: [
          {
            path: AppRoutePaths.home, // here
            index: true,
            element: (
              <LazyRoute>
                <HomePage />
              </LazyRoute>
            ),
          },
          // ... (other routes)
        ],
      },
    ]),
  []
);

I've also thrown in a handy function to add '/' in front of routes when needed, preventing them from becoming relative to the current URL:


export function withSlashPrefix(path: string) {
  return `/${path}`;
}

Now linking buttons to pages is a breeze:


<Link href={withSlashPrefix(AppRoutePaths.home)}>
    <Button>GoToHome</Button>
</Link>

It's just one of my explorations; I work with React every day, so I frequently encounter issues and discover reasons to build or update things. This is one of those instances.

Voila! Happy routing!

Libraries and WebApps?

Frulow — Tue, 16 Jan 2024 10:22:00 +0000

Libraries are a great part of the world of web apps. You create one and you use another. Suggest some of the new libraries which are there but people don't know about.

Let's fill the comments with some useful tools and I am going to make a list out of it.

Maybe there are great tools that need your support that die without it. Let's help them.

Why I Built A Coding Libraries Store?

Frulow — Fri, 12 Jan 2024 06:14:36 +0000

I am going to keep it short and simple. It's a genuine problem that I want to solve.

Last year, I started working professionally on a project for a worldwide management consulting firm, where I was responsible for both backend and frontend development.

One thing I learned is that even big giants use packages and libraries extensively. As a developer, part of your responsibility is to find and obtain approval for the best package you come across.

However, not every project uses a single language, and not every package is built for all the languages out there. And even if you find a package that is worth it how do you know if it's worth it? Just because it has low open issues? Why not something to search packages based on categories keywords or language?

Does it make sense to read hundreds of blogs just to find one package you need? Right now, you might only need information on a package, not the actual code.

This, my dear friend, is a significant problem. When you work extensively in one programming language, you may conduct thorough research based on your experience to find the best possible package. But what if you switch to a new programming language? Are you going to repeat the entire process?

This is where my solution comes in. I've created a platform to simplify this process. Just as you are doing the work in one language, someone out there is doing the same in another language, and they possess valuable knowledge about that language. So, why not share this knowledge? Enter Frulow. You can easily share libraries, add them with useful tags, specify the languages or environments they support, and engage with others through comments and likes. Let others know which libraries are valuable to you.

Don't just roam around from one package manager's website to another. Frulow is the place for you to find the libs you need.

I understand this might not be enough, but I am continuously working to make a developer's life much easier day by day. I'm introducing more features to assist them.

Every beginning starts with a bit of support. I hope you all use this platform.

References:
Official Website: https://www.frulow.com/
Twitter: https://twitter.com/FrulowOfficial
LinkedIn: https://www.linkedin.com/company/99833747/admin/feed/posts/

Cover Image: Image by THAM YUAN YUAN from Pixabay

The Art of Crafting Libraries 😃

Frulow — Sat, 23 Dec 2023 07:04:18 +0000

In the world of coding, making libraries is like an art. It needs careful work, creativity, and a strong promise to make things better for developers. Whether you're exploring the details of machine learning or coming up with answers for common problems, creating a library is a way to learn and give back to the growing world of technology.

Setting the Stage

Figuring Out What Your Library Will Do and Learning About Algorithms

...

When you start creating a library, the first big thing is to figure out what exactly it's going to do. What features do you want to include? And, which algorithms will be at the heart of it all? These are the building blocks for the big picture you're about to create.

Learning about algorithms is like delving into classic literature. Take a deep dive into the details of each algorithm you want to include. Get to know the math and logic behind them because this knowledge will be the strong foundation of what you're building.

Shaping the User Experience

Creating an Easy-to-Use Interface

...

The heart of a library lies in its Application Programming Interface (API). It's not just about making it work; it's about crafting an interface that developers can easily understand and use. Consider how your library will fit into different projects, and design an API that makes things simple and straightforward.

Tackling Challenges: Taking Small Steps, Writing Good Code, and Making Things Faster
Creating a library comes with its share of challenges. Start small—begin with simpler algorithms to build a strong foundation. Write code that's neat, organized, and well-documented. This not only helps others understand your work but also ensures that your creation is easy for users to navigate and maintain.

Optimization is the secret to boosting performance. Dive into the details of data structures and algorithms to make your library not just operational but also speedy and efficient.

Illuminating the Path

Testing and Documentation

...

A well-tested library is a reliable library. Implement a comprehensive testing framework to validate the correctness of your creation. Test various scenarios and edge cases to fortify its resilience.

Documentation is the beacon that guides users through your library's intricacies. Provide thorough documentation—explain the purpose, usage, and inner workings of each component. Your documentation is the manual that empowers developers to harness the full potential of your creation.

Collaboration and Community

Embracing Open Source

...

Imagine inviting everyone to contribute to your library. When you open it to the community, amazing things can happen. Working together sparks new ideas, and the open-source community can offer valuable suggestions and enhancements. Share what you've built with the world, and watch it grow as passionate developers come together.

Navigating Challenges Post-Library Creation

Building Recognition and Followers

...

So, you've crafted your library, and now comes the challenge—making it known. Getting followers and spreading the word can be tough. You might find yourself posting it across various websites, hoping to catch someone's eye. But fear not, Frulow steps in to save the day!

The Struggle for Recognition: A Common Hurdle

Getting people to notice your library is no small feat. Whether you're aiming for followers, recognition, or just want your creation to be seen, the struggle is real. With countless platforms and websites out there, it's like navigating a vast ocean.

Enter Frulow: Your Beacon in the Library Universe

Now, imagine a platform tailor-made for developers—Frulow. It's not just another site; it's your beacon in the library universe. Instead of scattering your efforts across multiple platforms, Frulow offers a centralized space to showcase your library. Think of it as your library's home base, where developers can easily discover, appreciate, and follow your work.

How Frulow Saves the Day

Centralized Visibility: No more posting on countless sites. Frulow provides a centralized space for your library, increasing its visibility.
Effortless Discovery: Developers can explore, appreciate, and follow your library with ease, thanks to Frulow's user-friendly interface.
Community Engagement: Frulow fosters a community where developers can discuss, appreciate, and engage with your library, creating a space for organic growth.

Embark on the journey of overcoming post-library creation challenges with Frulow as your ally. It's not just a platform; it's a strategic move to save your library from the vast sea of websites. Happy coding and happy library building!

Truly Free Working: Frulow.com

Frulow — Wed, 09 Aug 2023 06:30:19 +0000

🌟 Introducing Frulow.com - Where Creativity Meets Freedom! 🌟

Hey there, freelancers, entrepreneurs, and creative minds! Today, I'm thrilled to share with you an incredible platform that will revolutionize the way you work and collaborate - Frulow.com! 🚀

Are you tired of those rigid, money-driven freelancing websites that charge you at every step of the process? Well, say goodbye to those hassles because Frulow.com is here to change the game entirely! 🎉

Imagine a world where you can bring your ideas to life without worrying about spending a single dime. Yes, you read that right! Frulow.com is a truly free website that empowers you to work on your projects and collaborate with talented professionals without any unnecessary financial burden.

🔑 The Key to Empowerment: Total Control! 🔑

At Frulow.com, you hold the reins of your projects. You are the mastermind, and we believe you should have the freedom to manage every aspect of your work. From creating your dream project to adding bids and accepting bids, it's all in your hands! No more middlemen dictating terms and taking a cut from your hard-earned money.

💡 Boundless Creativity, Unlimited Potential 💡

Frulow.com is a haven for innovation and creativity. Whether you're a writer, designer, developer, or any other creative professional, our platform welcomes you with open arms. You can explore a vast array of projects from diverse fields, find exciting opportunities that align with your passions, and collaborate with like-minded individuals from around the globe.

🤝 Building Genuine Connections 🤝

Collaboration is the cornerstone of success, and Frulow.com fosters a supportive community where professionals come together to bring ideas to fruition. Say goodbye to cold and impersonal interactions. Our platform promotes genuine connections, allowing you to build long-lasting relationships with clients and fellow freelancers, which can lead to a steady stream of rewarding projects.

🛡️ Ensuring Security and Fairness 🛡️

We understand the importance of trust and security in the freelancing world. That's why Frulow.com prioritizes the safety of your personal information and the integrity of your projects. Our platform employs top-notch security measures to ensure your data is protected, and we have a transparent and robust dispute resolution system in place to guarantee fairness in case any issues arise.

🌐 Embrace Global Opportunities 🌐

In today's interconnected world, borders should never hinder your potential. Frulow.com opens doors to global opportunities, allowing you to work with clients and professionals from various countries. Expand your horizons, learn from different cultures, and gain a diverse perspective that will elevate your skills and creativity to new heights.

🌈 Join the Frulow.com Movement! 🌈

It's time to break free from the shackles of traditional freelancing platforms and embrace a truly liberating experience. Join the Frulow.com movement and let your creativity soar without any financial barriers. Together, we can shape a community where talent thrives, innovation flourishes, and success knows no boundaries!

🚀 Experience the Future of Freelancing - Visit Frulow.com Today! 🚀

📢 Disclaimer: Frulow.com - Embracing Growth and Learning Together! 📢

Before we dive into the exciting world of Frulow.com, I want to be completely transparent with you. As with any platform in its initial release stage, there might be potential bugs and hiccups along the way. We believe in open communication and value your feedback immensely to help us refine and enhance the user experience.

🔧 The Journey of Constant Improvement 🔧

Frulow.com is a labor of love, crafted with passion and dedication to provide you with the ultimate freelancing experience. However, we understand that no platform is perfect from day one. Our team is working tirelessly to iron out any issues that might arise and make continuous improvements based on your invaluable feedback.

💬 Your Feedback Matters 💬

We genuinely value your thoughts and suggestions. If you encounter any bugs, glitches, or have ideas on how we can make Frulow.com even better, please don't hesitate to reach out to our support team. Your feedback is a crucial catalyst for our growth, and we are committed to implementing positive changes to ensure your satisfaction.

🤝 Together We Grow 🤝

As we embark on this journey together, we invite you to be a part of the Frulow.com community actively. Join our forums, engage with fellow users, and share your experiences. Collaboration is at the core of what we do, and your involvement will shape the future of Frulow.com for the better.

⏳ Patience and Understanding ⏳

We understand that encountering a bug or an issue can be frustrating, but we kindly ask for your patience and understanding during this initial release stage. Rest assured, our dedicated team is committed to delivering a seamless and enriching experience for all users, and we won't rest until we achieve just that.

🚀 Embrace the Potential 🚀

Despite any initial hiccups, Frulow.com is brimming with potential and opportunities. Our commitment to being a truly free platform, where creativity flourishes, remains unwavering. We believe that by working together, we can overcome any challenges that may arise and build a thriving ecosystem where freelancers and clients can collaborate effortlessly.

🌟 Join the Adventure Today! 🌟

We invite you to embark on this adventure with us, where possibilities are limitless and the path ahead is full of growth and learning. Embrace the freedom to create, connect, and collaborate on Frulow.com, and together, let's shape the future of freelancing.

🔗 Visit Frulow.com today and be a part of something truly special! 🔗

#Frulow #Freelancing #CreativityUnleashed #Empowerment #Innovation #JoinTheMovement #Frulow #InitialRelease #FeedbackWelcome #TogetherWeGrow #FreelancingCommunity

React Api Calls Using Web Workers - Reusable Hook

Frulow — Sat, 05 Aug 2023 04:54:19 +0000

The aim is to create a reusable react hook to make api requests using axios and it should take all the axios request configs. It should also tell the status of the request: isLoading or error.


// workers/useApiWorker.ts

import React, { useCallback, useRef } from 'react';

import { AxiosRequestConfig, AxiosResponseTransformer } from 'axios';

import axios from '../../_axios';

interface Props {
  enabled: boolean;
  url: string;
  method: AxiosRequestConfig['method'];
  transformResponse?: AxiosResponseTransformer;
}

interface UseApiWorker<T> {
  data: T | null;
  isLoading: boolean;
  error: any | Error | Record<string, any>;
  refetch: (requestConfig: AxiosRequestConfig) => void;
}

type MessageEventDataType<T> =
  | {
      type: 'status';
      isLoading?: boolean;
      isError?: any | false;
    }
  | {
      type: 'response';
      data: T;
    };

export function useApiWorker<T>({
  enabled,
  url,
  method,
  transformResponse,
}: Props): UseApiWorker<T> {
  const workerRef = useRef<Worker | null>(null);

  const [data, setData] = React.useState<T | null>(null);
  const [isLoading, setIsLoading] = React.useState<boolean>(false);
  const [error, setError] = React.useState<any | null>(null);

  const getAxiosConfig = useCallback(() => {
    return { config: { ...axios.config, url }, method, transformResponse };
  }, [method, transformResponse, url]);

  React.useEffect(() => {
    if (!enabled) {
      return;
    }
    // Create the web worker
    const worker = new Worker(new URL('./api.worker.js', import.meta.url));
    workerRef.current = worker;
    worker.postMessage(getAxiosConfig());

    // Define the function to handle messages from the worker
    function handleWorkerMessage(event: MessageEvent<MessageEventDataType<T>>) {
      const data = event.data;
      console.log('Received data from worker:', data);

      if (!data) {
        return;
      }

      if (data.type === 'status') {
        if (typeof data.isLoading !== 'undefined') setIsLoading(data.isLoading);
        if (typeof data.isError !== 'undefined') setError(data.isError);
      }

      if (data.type === 'response')
        // Update your React component's state or perform other actions with the data
        setData(data.data);
    }

    // Listen for messages from the worker
    worker.onmessage = handleWorkerMessage;

    // Clean up the worker when the component unmounts
    return () => {
      worker.terminate();
      workerRef.current = null;
    };
  }, [enabled, getAxiosConfig]);

  const handleRefetch = useCallback(
    (axiosRequestConfig: AxiosRequestConfig) => {
      if (workerRef.current)
        workerRef.current.postMessage({ ...getAxiosConfig(), ...axiosRequestConfig });
    },
    [getAxiosConfig]
  );

  return { data, isLoading, error, refetch: handleRefetch };
}

export default useApiWorker;


// workers/api.worker.js

/* eslint-disable no-restricted-globals */

import axios from 'axios';

/**
 *
 * @param {MessageEvent<{config: {defaultHeaders: {Authorization: string}, baseURL: string, url: string},} & import('axios').AxiosRequestConfig>} event
 */
self.onmessage = function ({ data: { config, ...rest } }) {
  if (!config) return;

  // Define the function to fetch data from the API
  async function fetchDataFromAPI() {
    self.postMessage({ type: 'status', isLoading: true, isError: false });
    try {
      const res = await axios.request(config.url, {
        ...rest,
        baseURL: config.baseURL,
        headers: { ...rest.headers, ...config.defaultHeaders },
      });

      self.postMessage({ type: 'response', data: res.data.package }); // Send the data back to the main thread
    } catch (error) {
      console.error(`Error: [${self.name}]`, error);
      self.postMessage({ type: 'status', isError: error }); // Send the data back to the main thread
    } finally {
      self.postMessage({ type: 'status', isLoading: false });
    }
  }

  fetchDataFromAPI();
};

I just created it, have not tested it. But it should work. There might be minor bugs which I will fix when I will use it.

Hope it helps & Suggestions always accepted. As well as bug fixes. Thanks already!

Asking For Confirmation Inline In React Function

Frulow — Thu, 20 Jul 2023 05:50:45 +0000

Suppose a situation in React where you want to ask for confirmation from the user.

For example, you want to show them a custom popup asking if they really want to delete something or not. This is a
situation I am going to cover.

Let's for example, take a function onDeletePost. Which is called to delete a post. Hence, we are asking for a confirmation from the user, if they intend to do so.

In code we do so like:


const [showPopup, setShowPopup] = useState<boolean>(false)

const onDeletePost = async (id: string) => {
    try {

      if (!showPopup) {
       setShowPopup(true)
       return;
      }

      setShowPopup(false)

      await // call_api()

    } catch (error: any) {
      ...
    }
  };


return (
       <AskConfirmationPopup 
          show={showPopup} 
          onConfirmed={onDeletePost} 
          onCancel={() => setShowPopup(false)} 
       />
)

You do not want to do that everywhere, in each and every component, so let's make it re-usable.

// confirmContext.tsx


import {
  PropsWithChildren,
  createContext,
  useCallback,
  useContext,
  useMemo,
  useState,
} from 'react';

import ConfirmBox, { PromptConfirmOptions, PromptConfirmProps } from '@components/UI/PromptConfirm';

export const ConfirmContext = createContext<{
  askConfirm: (
    title: PromptConfirmProps['title'],
    message: PromptConfirmProps['description'],
    options?: Partial<PromptConfirmOptions>
  ) => Promise<boolean>;
}>({
  askConfirm: async () => false,
});

export const ConfirmProvider = ({ children }: PropsWithChildren) => {
  const [open, setOpen] = useState(false);
  const [title, setTitle] = useState<PromptConfirmProps['title']>('');
  const [message, setMessage] = useState<PromptConfirmProps['description']>('');
  const [options, setOptions] = useState<Partial<PromptConfirmOptions>>({});
  const [resolve, setResolve] = useState<(value: boolean) => void>(() => {
    //anything
  });

  const confirm = useCallback(
    async (
      title: PromptConfirmProps['title'],
      message: PromptConfirmProps['description'],
      options?: Partial<PromptConfirmOptions>
    ) =>
      new Promise<boolean>((res) => {
        setOpen(true);
        setTitle(title);
        setMessage(message);
        setOptions(options ?? {});
        setResolve(() => res);
      }),
    []
  );

  const handleAction = (confirmed: boolean) => {
    setOpen(false);
    resolve(confirmed);
  };

  const values = useMemo(() => {
    return { askConfirm: confirm };
  }, [confirm]);

  return (
    <ConfirmContext.Provider value={values}>
      {children}
      {open && (
        <ConfirmBox title={title} description={message} onAction={handleAction} options={options} />
      )}
    </ConfirmContext.Provider>
  );
};

export const useConfirmBox = () => useContext(ConfirmContext);

I am using @mui/material (basically material ui component library

// PromptConfirm.tsx - The main Popup Component To show

import * as React from 'react';

import { ThemeProvider, Typography } from '@mui/material';
import Button, { ButtonProps } from '@mui/material/Button';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText, { DialogContentTextProps } from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';

import lightTheme from '@styles/theme/lightTheme';

export interface PromptConfirmOptions {
  acceptButtonProps: ButtonProps;
  rejectButtonProps: ButtonProps;
  descriptionProps: DialogContentTextProps;
}
export interface PromptConfirmProps {
  title: React.ReactElement | string;
  description: React.ReactElement | string;
  options: Partial<PromptConfirmOptions>;
  onAction: (proceed: boolean) => void;
}

function ConfirmBox({ title, description, onAction, options }: PromptConfirmProps) {
  const _handleCancel = () => onAction(false);
  const _handleOkay = () => onAction(true);

  return (
    <ThemeProvider theme={lightTheme}>
      <Dialog
        open
        onClose={_handleCancel}
        aria-labelledby='alert-dialog-title'
        aria-describedby='alert-dialog-description'
        PaperProps={{ sx: { borderRadius: 3, p: 1, maxWidth: '20em' } }}
      >
        <DialogTitle id='alert-dialog-title'>
          <Typography variant='h5' sx={{ fontWeight: 700 }}>
            {title}
          </Typography>
        </DialogTitle>
        <DialogContent>
          <DialogContentText id='alert-dialog-description' {...options?.descriptionProps}>
            {description}
          </DialogContentText>
        </DialogContent>
        <DialogActions sx={{ px: 3 }}>
          <Button
            variant='contained'
            fullWidth
            color='error'
            {...options?.acceptButtonProps}
            onClick={_handleOkay}
          >
            Yes
          </Button>
          <Button
            variant='contained'
            autoFocus
            color='primary'
            fullWidth
            {...options?.rejectButtonProps}
            onClick={_handleCancel}
          >
            No
          </Button>
        </DialogActions>
      </Dialog>
    </ThemeProvider>
  );
}

export default ConfirmBox;

Wrap your root component or App.tsx or Index.tsx with below:


import { ConfirmProvider } from 'path/to/confirmContext.tsx';

export default function App(){
return ( <ConfirmProvider> ... </ConfirmProvider> )
}

And now use it anywhere like below


  const { askConfirm } = useConfirmBox();


 const onDeletePost = async (id: string) => {
    try {
      const confirmed = await askConfirm(
        [title], // Delete now?
        [description], // Are you sure?
      );
      if (!confirmed) return; // return if not confirmed
      ...
      // do your thing here

    }catch(erro)...

And here you have a re-usable hooks to call inline in a function from anywhere