Installation

 npx create-sad-app

Quick Start

The quickest way to get started with React Project with in-build Utilities are shown below:

Features

• Automate Folder Structure
• Automate Installation of necessary Packages
• Automate TailwindCSS Setup
• Set Material UI
• Error Handling Hooks
• Redux Toolkit Query Setup

Usage/Examples

Here is Tutorial how to use ErrorHandler Hooks:

• useAsyncMutation
• useError

here's the simple setup of RTK Query:

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

export const api = createApi({
  reducerPath: "Reducer Name",
  baseQuery: fetchBaseQuery({
    baseUrl: "http://localhost:4000/",
    credentials: "include",
  }),

  endpoints: (builder) => ({
    getallbooks: builder.query({
      query: () => ({
        url: "/getallbooks",
        credentials: "include",
      }),

    }),


    export const { useGetallbooksQuery} = api;

UseError Hook:

Simply Hand the Errors to useError Hook

Remember, useError Hook is for GET request Query

  const { data, isLoading, isError, error } = useGetallbooksQuery();



  useErrors([{ isError, error }]);

in case You are using Multiple GET requests,

Simply Create a Variable like:

const BookDetails = useGetallbooksQuery();

useErrors([
  { isError: BookDetails.isError, error:BookDetails.error }
  ]);

UseAsyncMutation Hook

AsyncMutation Hook works for Every requests except GET requests For this hook, Order Matters!

• First one is an Updating Function
• Second one is if the Function is loading

//simple PATCH request to update book Name:

 const [updateBookMutation, isupdatingbook] = useAsyncMutation(
    useUpdatebookMutation
  );

   const savedata = () => {

     //first Argument is the Message, and second Argument is the state where bookName is saved

    updateBookMutation("Updating Book", editingBook);
    closeDialog();
  };

You Can Use Multiple Arguments

and For isUpdatingBook, I will Simply disable Button

<Button disabled={isupdatingbook} color="primary" onClick={savedata}>
          Save
        </Button>

Support

For support, Stay Tunes for TypeScript setup Update!