DEV Community: Raynaldo Sutisna

📚 RTK Query: Understanding useQuery Hook

Raynaldo Sutisna — Wed, 29 Nov 2023 20:24:02 +0000

Introduction

It's been a while since I last wrote about RTK Query. I realized some people left questions in my previous blog about RTK Query, so I decided to write more about it. Hopefully, it will be helpful for some people. I want to share my deep understanding of the useQuery hook, specifically in this documentation.

If you haven't read my previous blog, I recommend to start reading the 📚 RTK Query Tutorial (CRUD). I will refer to that in this blog

📚 RTK Query Tutorial (CRUD)

Raynaldo Sutisna ・ Nov 29 '22

#react #redux #javascript #tutorial

UseQuery

A React hook that automatically triggers fetches of data from an endpoint, 'subscribes' the component to the cached data, and reads the request status and cached data from the Redux store. The component will re-render as the loading status changes and the data becomes available.

That is a description according to the RTK Query docs. From my perspective, I just think about fetching, but it's not a simple fetching. RTK Query gives us many features rather than just a simple fetch. I already talked about this in my previous blog. Once again, go there before going through this blog! Sorry another reminder to make sure you are not lost here.

Let's go to the main reason that I wrote this blog. In my previous blog, I had my repository to give you an example of how to use useQuery



  const {
    data: albums = [],
    isLoading,
    isFetching,
    isError,
    error,
  } = useGetAlbumsQuery(page);

https://github.com/raaynaldo/rtk-query-setup-tutorial/blob/main/src/components/Albums.js#L11-L17

It's just some options and results.

The full feature of useQuery is like this



  const {
    data: albums = [],
    originalArgs,
    currentData,
    requestId,
    endpointName,
    startedTimeStamp,
    fulfilledTimeStamp,
    isUninitialized,
    isLoading,
    isFetching,
    isError,
    error,
    refetch,
  } = useGetAlbumsQuery(page, {
    skip: true,
    selectFromResult: (result) => result,
    pollingInterval: 5000,
    refetchOnFocus: true,
    refetchOnReconnect: true,
    refetchOnMountOrArgChange: true,
  });

That's a lot right? I'm pretty sure, we will not use all of these at the same time. I just want to share their purposes, so you can utilize them in the future.

Before I explain the useQueryOptions in the useQuery, I should let you know that some options such as refetchOnFocus, refetchOnReconnect, and refetchOnMountOrArgChange could be use as createApi parameters as well. Check the docs here.
If we are using createAPI, all the useQuery from the API will follow those configurations.

🟠 UseQueryOptions

This is the second parameter of the useQuery when you call it in your component.



useGetAlbumsQuery(arg: any, option: UseQueryOptions)

keep in mind that the options are an object, so you can use them like this.



 useGetAlbumsQuery(page, {
    skip: true,
    selectFromResult: (result) => result,
    pollingInterval: 5000,
    refetchOnFocus: true,
    refetchOnReconnect: true,
    refetchOnMountOrArgChange: true,
  })

Let's delve into every attribute on the object.

All code examples that I use will refer to this file, so you feel free to explore the project

🔸 skip?: boolean

The default is false.
If we set the skip to true, the fetching will not run at first, until the skip is updated to false.



  const {
    data: albums = [],
    isLoading,
    isFetching,
    isError,
    error,
  } = useGetAlbumsQuery(page, {
    skip: true,
  });

Maybe for the real-life use case, we don't want to fetch the data if the argument is not ready yet. We can utilize the skip to be like this.



  const {
    data: albums = [],
    isLoading,
    isFetching,
    isError,
    error,
  } = useGetAlbumsQuery(page, {
    skip: page === undefined,
  });

In the next GIF, I added a new state called skip, so I can modify it in react dev tools.

Technically, if the skip is true, it will either not start the fetch or will remove the data that already has been fetched. Just want to be clear, if the data that has been fetched is hidden because this skip is true, and you update the skip to be false, it will only call the cache data. I proofed this because the requestId is the same. I will explain more about requestId later.

🔸 selectFromResult?: boolean

It's one of the interesting options here, we can do more flexibility here. This could override the useQueryResult (which I'll explain later in the next section).

I give an example of how could I update the result data to be upper case.



  const {
    data: albums = [],
    isLoading,
    isFetching,
    isError,
    error,
  } = useGetAlbumsQuery(page, {
    selectFromResult: (result) => {

      result.data = result.data.map((album) => ({
        ...album,
        title: album.title.toUpperCase(),
      }));

      return result;
    },
  });

One thing you need to make sure that if you want to utilize the the result value from RTK Query, you must return the original result. That's why I just update the result.data, so I can still use the data, isLoading, 'isFetching', 'isError', and 'error'

Also, you can create another option if you add a new attribute to the return value of the function. To be honest, I'm not sure if it's a good practice or not, but it works.

Try to update with this.



  const {
    data: albums = [],
    isLoading,
    isFetching,
    isError,
    error,
    newResult,
  } = useGetAlbumsQuery(page, {
    selectFromResult: (result) => {
      result.data = result.data?.map((album) => ({
        ...album,
        title: album.title.toUpperCase(),
      }));

      result.newResult = 'test newResult';
      return result;
    },
  });

  console.log({ newResult });

🔸 pollingInterval?: number

Be cautious when using this option. It will cost a lot of API fetch requests. It will tell the redux toolkit to refetch your API on specify time. The number for this pollingInterval refers to time in milliseconds.



  const {
    data: albums = [],
    isLoading,
    isFetching,
    isError,
    error,
  } = useGetAlbumsQuery(page, {
    pollingInterval: 2000,
  });

If you see my data is a little bit flashy, it's a quick loading component that is showing. I make my useQuery refetch the data for every 2 seconds.

🔸 refetchOnFocus?: boolean

Another option to refetch the data rather than using time interval, we can utilize this feature, which depends on the user interactions. When the users is focused on the browser or tab, and they come back to the page it will fetch the data again from the API.



  const {
    data: albums = [],
    isLoading,
    isFetching,
    isError,
    error,
  } = useGetAlbumsQuery(page, {
    refetchOnFocus: true,
  });

🔸 refetchOnReconnect?: boolean

Similar to the refetchOnFocus, it's just a different trigger of the refetch. It will do the refetch if the browser is disconnected from the internet and reconnect again to the internet. How to test? Attempt to disconnect from your Wi-Fi connection.



  const {
    data: albums = [],
    isLoading,
    isFetching,
    isError,
    error,
  } = useGetAlbumsQuery(page, {
    refetchOnReconnect: true,
  });

🔸 refetchOnMountOrArgChange?: boolean

I should apologize for not fully understanding how this option works. If you have insights into this feature, please leave a comment. 🙏

🔵 UseQueryResult

It's the result of calling the useQuery function. It may not be necessary to use all of its features.

Additionally, you can see mostly the result from the redux dev tools extension as well. Download the extension here.
Google Chrome: https://chromewebstore.google.com/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?pli=1
Mozilla Firefox: https://addons.mozilla.org/en-US/firefox/addon/reduxdevtools/

🔹 data

It's the result of the fetch data.



  const {
    data: album = [],
  } = useGetAlbumsQuery(page);

If you're wondering why I renamed and assigned a default value to data as data: album = []

In order to differentiate different useQuery data, I prefer to rename it rather than data, and it could be ambiguous with another query result.

For default value using an empty array, makes our code to be less complicated when we want to render the data. We don't need to add any conditional render or even an optional chaining (?.)



{albums.map((album) => ( ... ))}

🔹 isLoading

it's a boolean status that refers to the first fetch. Keep in mind it's only before the data is existed until the first fetch. It's different with isFetching



  const {
    isLoading,
  } = useGetAlbumsQuery(page);

🔹 isFetching

This is different from the isLoading because this status depends on the refetching situation. For example, if the data is already fetched for the first time, and RTK Query does refetch to update the cache, it will refer to this status.



  const {
    isFetching,
  } = useGetAlbumsQuery(page);

If you remember some options that I explained before, such as refetchOnFocus, refetchOnReconnect, and pollingInterval. It will affect the isFetching, not the isLoading

This is why I handle loading with these two statuses.



  if (isLoading || isFetching) {
    return <div>loading...</div>;
  }

🔹 isSuccess

Status for showing the fetching or refetching is successful. it is opposite of isError status.



  const {
    isSuccess,
  } = useGetAlbumsQuery(page);

🔹 isError

Status for showing the fetching or refetching is failed or error. it opposites of isSuccess status. I usually utilize this status for handling the error and showing the error message.



  const {
    isError,
  } = useGetAlbumsQuery(page);

The screenshot illustrates that isError and isSuccess will consistently differ.

🔹 error

The error response that comes from the API.



  const {
    error,
  } = useGetAlbumsQuery(page);

This is how I utilize isError and error results.



  if (isError) {
    console.log({ error });
    return <div>{error.status}</div>;
  }

🔹 refetch

It's an interesting feature, so we can run refect whenever we want. I believe it can be used for refreshing the data. If you need to refresh the data when the user clicks a button. You can utilize this function.



  const {
    refetch,
  } = useGetAlbumsQuery(page);

I created a new button for this refetch feature.



      <button disabled={isError} onClick={refetch}>
        Refetch
      </button>

🔹 requested

I assume this attribute is not necessary to be used in your project. However, I want to point out about invalidating the cache. The requestId will be updated to be a different id if RTK query runs a refetch or update the cache.



  const {
    requestId,
  } = useGetAlbumsQuery(page);

What I did to simulate the GIF

Go to the next page
Back to the previous page
Go to the next page (Same request ID with number 1)
Back to the next page (Same request ID with number 1)
Click Refetch button(new request Id is generated)
Click Refetch button(new request Id is generated)
Click Refetch button(new request Id is generated)

🔹 The Rest of Result Attributes

I believe that the above attributes that I already explained are the most important attributes that we can implement for real-life scenarios. Other attributes could be useful in your case, but I believe it's easy to understand if you go to the docs.

Conclusion

In summary, learning about the useQuery hook in RTK Query has shown us lots of cool things beyond just getting data. The UseQueryOptions allows us to control how fetching works, like skipping the first fetch, changing the data after getting it, and even fetching again based on time or user actions. The UseQueryResult attributes, like data, isLoading, and isError, help us know what's happening with our fetch in real time, making it easier to build user-friendly apps. Even though some things, like requestId, might seem tricky, they're useful for certain situations, like updating stored data. So, as we finish up, remember that understanding useQuery in RTK Query opens up new possibilities for making efficient React apps. Feel free to explore more in the documentation to see what fits best for your projects! Happy Reading, and leave a comment if you have questions. 📚

⚙️ Leetcode Heap (Priority Queue) in JavaScript

Raynaldo Sutisna — Mon, 20 Nov 2023 17:04:10 +0000

Introduction

Hey there, fellow JavaScript devs! If you're here, chances are you're diving into the heap of questions on LeetCode – been there, done that. I get it. I used to wrestle with those same challenges, and now I want to be the friend who helps you through the struggle. So, if you're scratching your head over heap problems, relax, I've got your back. JavaScript doesn't have any Priority Queue built-in function. You need to understand these important codes to solve heap questions in LeetCode with JavaScript.

JavaScript in Leetcode

According to the LeetCode support page, they utilize @datastructures-js/priority-queue package. It mentioned that the version is v4.1. However, after exploring the package, I realized we could also use the v5. Therefore, if you want to go to the official documentation in Github, you need to make sure that you are looking at v5. I believe v5 is the complement of v4, so you just need to check the v5 docs.

Heap (Priority Queue) in General

I will not discuss how the heap works in depth because that's not the purpose of this blog. The main idea of a heap is it will keep maintaining the order of all the data. If you are using the Minimum Priority Queue, the first element will be the smallest. Therefore, it's the same idea for the Maximum Priority Queue

Take a look at the Min Heap simulation here.

Visualization Link:
https://www.cs.usfca.edu/~galles/visualization/Heap.html

🔵 Initialization

There are three constructors in the package that you can use to suit your needs, which are MinPriorityQueue, MaxPriorityQueue, and PriorityQueue

📈 MinPriorityQueue and MaxPriorityQueue

If you want to import to your project, you need to use import or require. However, you don't need to add this in Leetcode.



const {
  MinPriorityQueue,
  MaxPriorityQueue
} = require("@datastructures-js/priority-queue");

// or

import {
  MinPriorityQueue,
  MaxPriorityQueue
} from
  "@datastructures-js/priority-queue";

You just need to initiate the Priority Queue class, and run the .enqueue for each data that you want to insert.



const arr = [10, 22, 4, 5, 21, 8, 9, 59];
const numbersMinQueue = new MinPriorityQueue();
const numbersMaxQueue = new MaxPriorityQueue();

for (const num of arr) {
  numbersMinQueue.enqueue(num);
  numbersMaxQueue.enqueue(num);
}

console.log(numbersMinQueue.toArray());
/** 
[
  { priority: 4, element: 4 },
  { priority: 5, element: 5 },
  { priority: 8, element: 8 },
  { priority: 9, element: 9 },
  { priority: 10, element: 10 },
  { priority: 21, element: 21 },
  { priority: 22, element: 22 },
  { priority: 59, element: 59 }
]
*/
console.log(numbersMaxQueue.toArray());
/** 
[
  { priority: 59, element: 59 },
  { priority: 22, element: 22 },
  { priority: 21, element: 21 },
  { priority: 10, element: 10 },
  { priority: 9, element: 9 },
  { priority: 8, element: 8 },
  { priority: 5, element: 5 },
  { priority: 4, element: 4 }
]
*/

Pay attention to the console.log result. It returns an array of objects. The object attribute is



interface PriorityQueueItem { 
  priority: number;
  element: any;
}

Keep in mind, the object is only generated when you are using MinPriorityQueue() or MaxPriorityQueue()

priority attribute is automatically generated by the priority queue, and the element attribute is whatever we insert in the .enqueue() parameter.

If you are wondering could pass other than the number value to the .enqueue() parameter, and how it will be compared, it's a good thought!

MinPriorityQueue and MaxPriorityQueue with options

We can pass an option parameter when we initiate the MinPriorityQueue or MaxPriorityQueue class. It's an object that has a priority attribute, and it's required a function



interface PriorityQueueOptions{
  priority: (element: T) => number;
}

Technically, you need to decide which attribute you want to compare if you are not inserting a number. For example, I want to insert this kind of object



const person = {
  name: 'Ray',
  height: 165
};

Therefore, you need to add an option in the initialization.



const heightQueue = new MinPriorityQueue({ 
  priority: (person) => person.height 
});

This is an example of the whole code.



const heightArr = [
  { name: 'John', height: 170 }, 
  { name: 'Jane', height: 160 }, 
  { name: 'Bob', height: 150 }, 
  { name: 'Mary', height: 180 }
];

const heightQueue = new MinPriorityQueue({ 
  priority: (person) => person.height 
});

for (const height of heightArr) {
    heightQueue.enqueue(height);
}

console.log(heightQueue.toArray())
/** 
[
  { priority: 150, element: { name: 'Bob', height: 150 } },
  { priority: 160, element: { name: 'Jane', height: 160 } },
  { priority: 170, element: { name: 'John', height: 170 } },
  { priority: 180, element: { name: 'Mary', height: 180 } }
]
*/

The option also works for the MaxPriorityQueue. I prepared a CodeSandbox playground in the of the blog, and you can play around if you want to try the MaxPriorityQueue.

📈 PriorityQueue

MaxPriorityQueue and MinPriorityQueue prepare everything about the sorting function. I believe some problems require us to modify the sorting rule. That's why the PrioirtyQueue class is here. The idea is similar to the options for MaxPriorityQueue or MinPriorityQueue. It's just a different attribute and function. This is the same function that you need to pass in JavaScript .sort() function. Check the docs here.



interface PriorityQueueOptions{
  compare: (a: T, b: T) => number;
}

For instance, we need to arrange the ages in ascending order, and in case of a tie, we want to sort the names in descending order. This is the initialize option that we need in PriorityQueue



const ageQueue = new PriorityQueue({
  compare: (a, b) => {
    if (a.age < b.age) {
      return -1; // don't swap
    } else if (a.age > b.age) {
      return 1; // swap
    } else {
      // If the ages are equal, we sort the names in descending order.
      return b.name.localeCompare(a.name); 
      // or
      // return b.name > a.name ? 1 : -1;
    }
  }
});

This is the whole code for the Priority Queue example



// Priority Queue
const ageArr = [
  { name: 'John', age: 33 }, { name: 'Jane', age: 42 }, { name: 'Jack', age: 16 }, { name: 'Jill', age: 35 }, { name: 'Jessica', age: 33 }
]
const ageQueue = new PriorityQueue({
  compare: (a, b) => {
    if (a.age < b.age) {
      return -1;
    } else if (a.age > b.age) {
      return 1;
    } else {
      return b.name.localeCompare(a.name);
      // or
      // return b.name > a.name ? 1 : -1;

    }
  }
});

for (const person of ageArr) {
  ageQueue.enqueue(person);
}

🔵 `.enqueue()` and `.deqeue()`

Both time complexity is O(log(n))

.enqueue()

is adding an element based on the comparison with the existing element in the heap.
will return the PriorityQueue, MaxPrioirityQueue, or MinPriorityQueue object depending on the initialization. Keep in mind, that the return of this function is just pointing to your original heap object. If you are calling .enqueue() or .dequeue(), it will mutate your heap.

.dequeue()

is removing an element from the top of the heap.
will return the highest priority object that has been removed.



// ... refer to the previous code block in PriorityQueue

// Enqueue
const newAge = { name: 'Monica', age: 27 };
const heap = ageQueue.enqueue(newAge);
console.log(heap);
/** 
PriorityQueue {
  _compare: [Function: compare],
  _heap: CustomHeap {
    _nodes: [ [Object], [Object], [Object], [Object], [Object], [Object] ],
    _leaf: { name: 'Jane', age: 42 },
    _comparator: [Function: compare]
  }
}
*/
console.log(heap.toArray());
/** 
[
  { name: 'Jack', age: 16 },
  { name: 'Monica', age: 27 },
  { name: 'John', age: 33 },
  { name: 'Jessica', age: 33 },
  { name: 'Jill', age: 35 },
  { name: 'Jane', age: 42 }
]
*/

// Dequeue
const topPriority = heap.dequeue()
console.log(topPriority);
/**
{ name: 'Jack', age: 16 }
*/

// Proof of the return `.enqueu()` is just refering to the original heap
console.log(heap.toArray());
/** 
[
  { name: 'Monica', age: 27 },
  { name: 'John', age: 33 },
  { name: 'Jessica', age: 33 },
  { name: 'Jill', age: 35 },
  { name: 'Jane', age: 42 }
]
*/
console.log(ageQueue.toArray());
/** 
[
  { name: 'Monica', age: 27 },
  { name: 'John', age: 33 },
  { name: 'Jessica', age: 33 },
  { name: 'Jill', age: 35 },
  { name: 'Jane', age: 42 }
]
*/

🔵 .toArray()

Time complexity is O(n * log(n))
I assume that you understand the purpose of this function because I used it several times before. It returns a sorted array by priority.



console.log(ageQueue.toArray());
/** 
[
  { name: 'Monica', age: 27 },
  { name: 'John', age: 33 },
  { name: 'Jessica', age: 33 },
  { name: 'Jill', age: 35 },
  { name: 'Jane', age: 42 }
]
*/

🔵 .size()

Time complexity is O(1)
return the number of elements in the heap.



ageQueue.size();
// 5

🔵 .isEmpty()

Time complexity is O(1)
return a boolean whether the heap is empty or not.



ageQueue.isEmpty();
// false

🔵 .front()

Time complexity is O(1)
return the highest priority element



ageQueue.front();
// { name: 'Monica', age: 27 }

🔵 .back()

Time complexity is O(1)
return the lowest priority element



ageQueue.back();
// { name: 'Jane', age: 42 }

🔵 .clear()

Time complexity is O(1)
clear all the elements in the heap



ageQueue.clear();

Conclusion

As a JavaScript developer, I experienced a struggle time when I solved heap questions in Leetcode, and it made me skip those problems because of this package. I took time to understand and learn all of this. I wish this blog could help you to use the package better without feeling like I felt again. Good luck and happy reading 📚.

Sorry, I failed to make the embed CodeSandbox open my index.js at the beginning. You need to open the index.js first, or opening the CodeDanbox in the new tab will be much easier.

or you can check my repo data-structures/heap.js

raaynaldo / algorithm-ds-playground

Algorithm and Data Structure Playground

Getting Start

Install all Packages

npm install

Go to your file directory that you want to run

cd data-structures

Run the file with node

node heap.js

View on GitHub

⚙️ Binary Search Finding Max/Min Template in Javascript

Raynaldo Sutisna — Wed, 15 Nov 2023 15:04:23 +0000

🏁 Introduction

Albert Einstein once said, "If you can't explain it simply, you don't understand it well enough." I find great inspiration in Einstein's words, as they motivate me to explore subjects thoroughly, seeking not just surface-level knowledge but a deep understanding. When I learned about Binary Search, I thought it was just for a simple search for a specific answer. However, it is not! We can optimize the Binary Search approach with creative solving max/min questions. I was trying to figure out the easiest template to use for all scenarios.

If you don't know how the Binary Search is being used, you may go to my previous blog here.

🍌 Koko Eating Bananas

Before I explain the template, I think it's a good time to understand the problems usually look like for Binary Search Max/Min questions. Let's start to discuss the popular LeetCode question, 875. Koko Eating Bananas

Take your time to read the question before diving into my explanation. Understanding the problem is important rather than jumping to the solution directly.

If you can't figure out how to implement the Binary Search in this question, it is totally fine. I was in the same position before. Maybe you are wondering, there is no sorted number here, how could I solve with the binary search? That's a good initial thought.

At this point, I assume you already understand the problem. If not, please go back to the LeetCode, and take your time.

Understanding the Problem

The main idea of the problem is you need to find the minimum speed that could finish all the bananas less than h. Also, Koko could not eat more than a pile if the pile was less than the speed that Koko chose.

Let's take a look at the first example

Input: piles = [3,6,7,11], h = 8
Output: 4

Start to think about how many the minimum/maximum Koko's bananas-per-hour eating that we can try to calculate.

We can assume that the maximum speed depends on the maximum number of piles of bananas. From the first example, the maximum is 11. If we pick a number greater than 11, it's just a wasteful check because there will be no difference.

3/11 = 1;
6/11 = 1;
7/11 = 1;
11/11 = 1;
Total = 4 hours

3/12 = 1;
6/12 = 1;
7/12 = 1;
11/12 = 1;
Total = 4 hours

How about the minimum speed? We can just start from 1 because it will be the slowest speed to finish all the bananas

3/11 = 3;
6/11 = 6;
7/11 = 7;
11/11 = 11;
Total = 27 hours

Checkpoint here. Could you see if this question is a binary search problem?

If we want to do a brute force solution, there are just doing a loop from 1 - 11 until we get the 8 hours. However, the time complexity will be O(N^2) because the calculating hours will cost another loop. This is why Binary Search is necessary.

Get A Paper and Draw!

To help you solve a binary search problem, I highly recommend that you draw on paper. It will be easier to translate the problem to your code.

After seeing the curve that we made, we can imagine how the two pointers of the binary search will move.

function minEatingSpeed(piles, h) {
    // ...
    let left number = 1;
    let right = maxPile;

    let result;
    while (left <= right) {
        const mid = Math.floor((left + right) / 2);
        const counthours = countHour(piles, mid);

        if () {
            left = mid - 1;
        } else {
            right = mid - 1;
        }
    }

    return result;
}

function countHour(piles, speed){
   // ...
}

Take a look at the code above. I wrote the main template that we can use for Binary Search over the Solution Space problem.

Figuring out the condition

        if () {
            left = mid + 1;
        } else {
            right = mid - 1;
        }

Hopefully, you see this empty if statement. It's one of two things that you need to translate from the image to the code.
We should find a condition that makes the left pointer update to be mid + 1

        if (hours > h) {
            left = mid + 1;
        } else {
            right = mid - 1;
        }

If you are confused, try to think h = 6, so we can pretend the minimum speed is 7 because 8 < 6. So in this condition, we need to move the left pointer to the mid + 1. On the other hand, we will move the right pointer to the mid - 1. It's also equal to hours <= h condition.

Figuring out the answer

After solving the condition for the if statement, we need to know which condition will have the result. because the condition is hours > h and it's not in the range of our answer, we can't put the result in that condition.

Return the minimum integer k such that she can eat all the bananas within h hours.

The statement above shows us that if the hours is more than h, it's the wrong answer.

        if (hours > h) {
            left = mid + 1;
        } else {
            right = mid - 1;
            result = mid;
        }

We need to put the result = mid in the else statement. This is just my trick to easy place that line of code. I will find which statement that's include the = / equal condition. I mentioned before that the else statement is equal to hours <= h, so in that statement, we can put the code.

Final Code

You can try to run it in the LeetCode. https://leetcode.com/problems/koko-eating-bananas/

function minEatingSpeed(piles, h): number {
    const maxPile = piles.reduce((prev, curr) => Math.max(prev, curr), 0);
    let left = 1;
    let right = maxPile;

    let result = 0;
    while (left <= right) {
        const mid = Math.floor((left + right) / 2);
        const hours = countHour(piles, mid);

        if (hours > h) {
            left = mid + 1;
        } else {
            right = mid - 1;
            result = mid;
        }
    }

    return result;
}

function countHour(piles, speed) {
    let sum = 0;
    for (const pile of piles) {
        sum += Math.ceil(pile / speed)
    }

    return sum;
}

If you want to play around more, we can switch the condition as well. My approach starts with the left pointer movement, but if you want to start with the right pointer movement, you can use this code below. Pay attention the result also move to the first statement. Like I mentioned about my trick, it will follow whereever the condition has =.

        if (hours <= h) {
            right = mid - 1;
            result = mid;
        } else {
            left = mid + 1;
        }

✨ Conclusion

My template works for me to understand and solve the problem with Binary Search for finding min/max. I wish this could be helpful to people who have some difficulties implementing Binary Search. I want to share this snippets again, so you can use it anytime

    let left = 1;
    let right = Math.Max; // find the lower max if it's possible

    let result = 0;
    while (left <= right) {
        if (your condition) {
            left = mid + 1; depends on your condition
            // result = mid;
        } else {
            right = mid - 1;
            // result = mid; depends on your condition
        }
    }

    return result;

Remember there are two steps to translate the problem into the code. First one is condition, and second is the answer.

I also have another similar question to solve if you want to see your understanding after reading my blog. Try to solve this problem.
https://leetcode.com/problems/minimum-speed-to-arrive-on-time/description/

Good luck and happy reading! 📚

⚙️ Easy Binary Search Template in Javascript

Raynaldo Sutisna — Mon, 23 Oct 2023 18:03:40 +0000

🏁 Introduction

After finishing 250 questions in LeetCode, I experienced difficulty when I solved the binary search problem. As a human being, I forgot how to write a binary search code. The concept was inside my head, but it was confusing when I should move the left or right index when we fulfilled the condition. Therefore, I took my time to re-learn the binary search and found the key point of binary search on algorithm questions.

🚩 Binary Search Recap

I want to share these two resources that I love to understand Binary Search. One is video and one is text, so you can choose which one you like.

https://www.programiz.com/dsa/binary-search

If you are watching the video, Fireship mentioned about binary search is similar to opening a dictionary. I want to you keep in mind about of that concept.

Key points of binary search:

only works on sorted list or array
uses two pointers plus a middle index
time complexity is O(log n) faster than O(n) / linear

I created a simple case for searching.

You are given arr is a sorted array and k the target value that you need to find the index of the target. If the number is not found, return -1.

arr = [1,3,4,5,7,9];
k = 3;

function search(arr, k){
 let left = 0;
 let right = arr.length - 1;

 while (left <= right) {
   const mid = Math.floor((left + right) / 2);
   if (arr[mid] === k) {
     return mid;
   } else if(arr[mid] < target) {
     left = mid + 1;
   } else {
     right = mid - 1;
   }
 }
}

return -1;

Hopefully, these steps will make it easier to understand the step.

First Loop
Second Loop
Third Loop

I wish at this point, you already understand the main concept of binary search. Let's go deeper to understand the code.

Two Pointers

Make sure you have two variables ready for pointers. I usually use left or right because I'm thinking of an array and it's diagonal. Some people use low or high too.

 let left = 0;
 let right = arr.length - 1;

Iterative

I used left <= right, so the loop will stop when the left pointer is bigger or crosses the right pointer

while (left <= right) {
// ...
}

Let's change the target to be 2, so the last step of the previous example will be like this.

Middle Index

Don't forget about the middle index. It's a must!
We can just sum left and right and divide by 2.
Also, we need to add the Math.floor() because the sum will not always even, so in order to prevent the decimal we can do round down the sum

const mid = Math.floor((left + right) / 2);

Moving the pointers

Okay, the last part of the binary search step. This is why you need strong logic and an understanding of the problem.
Keep in mind you need to move the pointer, so you can reach your answer.

   if (arr[mid] === k) {
     return mid;
   } else if(arr[mid] < target) {
     left = mid + 1;
   } else {
     right = mid - 1;
   }

There are three conditions here.

Number is found, so we can just return it (easy)
Moving the left index closer to the right index. The condition when the mid-index number is smaller than the target.
Moving the right index closer to the left index. The condition when the mid-index number is bigger than the target.

🏁 Conclusion

This is the time to tap your back and say a great job to yourself. I hope these steps can help you to understand the binary search concept and try to implement it. There is another blog for this series because you could utilize binary search to find the minimum or maximum value. I will create another blog specifically for those cases.

Happy Reading and Good Luck!

📚 RTK Query Tutorial (CRUD)

Raynaldo Sutisna — Tue, 29 Nov 2022 14:02:16 +0000

☀️ Introduction

Finally, I have a chance to continue my Redux blog series. If you haven't read it, I suggested to read the first blog first here. You must understand the Redux concept before reading this blog. To be honest, I was planning to have a blog about Thunk before Writing Redux Toolkit Query, but I was thinking Redux Toolkit Query is more powerful rather than learning Thunk again. However, leave me a comment if you are interested about Thunk. 😀

My goal in this blog is explaining the very basic concept and the easy step to implement the first Redux Toolkit Query. I plan to explain another detail about it in the next blog.

⁉️ What is Redux Toolkit Query/RTK Query?

According to Redux Toolkit documentation,

RTK Query is a powerful data fetching and caching tool. It is designed to simplify common cases for loading data in a web application, eliminating the need to hand-write data fetching & caching logic yourself.

This feature is an optional add-on in the Redux Toolkit package, so if you are using Redux Toolkit in your project, it means your project has access to the RTK query.

Maybe, some of you already heard about React Query or SWR. I believe those state management package have the same concept with the RTK Query. However, a winning point about RTK query is all in one with Redux. If you are using Redux, so it's a free optional feature without installing a new package.

⁉️ Why do you need RTK Query?

Let's take a look the simple data fetch in the code below.

It is just simple fetch request. When you are doing a fetch request, does that simple fetch request is enough?

How about these features:

Fetch loading
Error handling
Caching

🔺 Fetch Loading and Error Handling

Okay, I can handle the fetch loading, and error handling. Maybe your code will look like this.

Our states are getting bigger and also the useEffect. This is why RTK Query could solve our problem. You could learn the detail from RTK Query motivation.

🔺 Caching

You can skip this part if you are understand why we need caching

I tried to explain this because I know that myself as a React Junior Dev will not understand why I need this.

Let's think about this. When do we need to fetch the data for the second time? It should be when the data is updated, correct? As long the data in our database is not changed, and we already fetch the data. Technically, there is no point to retrieve the data again.

Make sure, you are agree with the concept above first.

Let's take a look my last code sandbox again. Where I call the fetch data? It's in the useEffect with an empty array dependency, which means it will fetch the data whenever the component is mounted. Therefore, If the component is unmounted and mounted again, it will fetch the data again.

In order to prevent the fetch again, we should have a caching functionality. Rather than we fetch all the time to the server, we should utilize the cache data. This is another feature that RTK query has, so we don't need to think to create a new caching functionality.

⭐ Implementation

Finally, This is the best part. If you already read my previous blog about Redux Toolkit, you will be familiar with the beginning steps because it's similar.

♦️ Run this command in the terminal

npm install @reduxjs/toolkit react-redux

For the next steps, you can fork from my starting branch to follow my tutorial.

I prepared a json-server with the data, so if you run npm start, there is an API is running on http://localhost:8000/. json-server prepared CRUD endpoint for us, and the data will be save in a json file. Before starting the RTK Query implementation, I recommend to tweak the json-server first.

♦️ Create the first API Service

src/app/services/jsonServerApi.js

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

export const jsonServerApi = createApi({
  reducerPath: 'jsonServerApi',
  baseQuery: fetchBaseQuery({ baseUrl: 'http://localhost:8000/' }),
  endpoints: (builder) => ({
    getAlbums: builder.query({
      query: (page = 1) => `albums?_page=${page}&_limit=10`,
    }),
  }),
});

export const { useGetAlbumsQuery } = jsonServerApi;

I created a query is called getAlbums with a page parameter, and it will return 10 records because I limit the API.

Because we are creating a query for fetching data, we need to export a function at the end with adding a prefix and suffix. use + endpoints attribute name (getAlbums) + Query = useGetAlbumsQuery. This is redux toolkit syntax, so we just need to follow the pattern.

♦️ Create Store and Add Service to the store

src/app/store.js

import { configureStore } from '@reduxjs/toolkit';
import { setupListeners } from '@reduxjs/toolkit/query';
import { jsonServerApi } from './services/jsonServerApi';

export const store = configureStore({
  reducer: {
    [jsonServerApi.reducerPath]: jsonServerApi.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(jsonServerApi.middleware),
});

setupListeners(store.dispatch);

If we compare with Redux Toolkit only, this part is getting more complicated to see. However, the main idea is still same, we need to attach the api that we already created to the reducer. In addition, we need to setup the middleware, and call setupListeners in the last part.

Just in case you are questioning about attributes in jsonServerApi? It's because we export the jsonServerApi, and the createApi is generated those attributes.

♦️ Wrap App component with the Provider

An easy step here.

// ...
import { store } from './app/store';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

♦️ Call the `useGetAlbumsQuery` in a component (Queries/Read Operation)

I create a new component file is called Albums
src/components/Albums.js

import { useGetAlbumsQuery } from './app/services/jsonServerApi';

export default function Albums() {
  const { data: albums } = useGetAlbumsQuery(1);

  return (
    <ul>
      {albums?.map((album) => (
        <li key={album.id}>
          {album.id} - {album.title}
        </li>
      ))}
    </ul>
  );
}

Don't forget to call the Albums component in the App component
src/App.js

import Albums from './components/Albums';

function App() {
  return (
    <div>
      <Albums />
    </div>
  );
}

export default App;

Where is the loading and error handle?
Good catch!

There you go!

import { useGetAlbumsQuery } from '../app/services/jsonServerApi';

export default function Albums() {
  const {
    data: albums = [],
    isLoading,
    isFetching,
    isError,
    error,
  } = useGetAlbumsQuery(page);

  if (isLoading || isFetching) {
    return <div>loading...</div>;
  }

  if (isError) {
    console.log({ error });
    return <div>{error.status}</div>;
  }

  return (
    <ul>
      {albums.map((album) => (
        <li key={album.id}>
          {album.id} - {album.title}
        </li>
      ))}
    </ul>
  );
}

Okay, let's do a step back first. Compare the code above with our first approach using the conventional fetch request. It's using less code, less complicated code, and no state at all!

One thing that I believe about using RTK Query. We don't necessary need to use state for data fetching related.

Could you find out that I change something between the two previous code?

  const {
    data: albums = [],
    isLoading,
    isFetching,
    isError,
    error,
  } = useGetAlbumsQuery(page);

I make a default value to be empty string to the album.

Why?

I can remove the Optional chaining (?.) operator whenever I call albums. A clever solution, right?

💎 Pagination

This is just a bonus trick.

I added two buttons and a state for handling the page changing. Yeah, at this point, we need a state because it's not related to data fetching.

// ...
export default function Albums() {
  const [page, setPage] = useState(1);

// ...
  return (
    <div>
// ...
      <button 
        disabled={page <= 1} 
        onClick={() => setPage((prev) => prev - 1)}
      >
        Prev
      </button>
      <button
        disabled={albums.length < 10}
        onClick={() => setPage((prev) => prev + 1)}
      >
        Next
      </button>
    </div>
  );
}

♦️ Mutation / Create Update Delete Operation

We are entering the fun part here. In the real application, for sure, we need to add new data, update existing data or maybe delete a data. Whatever changes that we made in database, it defines as a mutation in RTK Query.

🟠 Create

Let's create a new component for creating a new album.
This is still the empty html without any logic.
src/components/NewAlbumForm.js

import React from 'react';

export default function NewAlbumForm() {
  return (
    <form>
      <h3>New Album</h3>
      <div>
        <label htmlFor='title'>Title:</label>{' '}
        <input type='text' id='title' />
      </div>

      <br />

      <div>
        <input type='submit' value='Add New Album' />
      </div>
    </form>
  );
}

We need to create a new endpoint in the jsonServerApi.js. However, we are not creating query endpoint anymore, but we create a mutation endpoint.

export const jsonServerApi = createApi({
  reducerPath: 'jsonServerApi',
  baseQuery: fetchBaseQuery({ baseUrl: 'http://localhost:8000/' }),
  endpoints: (builder) => ({
    getAlbums: builder.query({
      query: (page = 1) => `albums?_page=${page}&_limit=10`,
    }),

    createAlbum: builder.mutation({
      query: (title) => ({
        url: `albums`,
        method: 'POST',
        body: { title },
      }),
    }),
  }),
});

export const { useGetAlbumsQuery, useCreateAlbumMutation } = 
jsonServerApi;

One thing that you need to keep in mind. When we call the mutation from the component, we only can send one parameter. For this case, I only send a string because we only need to save a title. We can also make the parameter to be an object and use a destructuring assignment to access the attribute easily.

For example

    createAlbum: builder.mutation({
      query: ({ title, description, createdBy }) => ({
        url: `albums`,
        method: 'POST',
        body: { title, description, createdBy },
      }),

Now, we can add call the mutation in our NewAlbumForm component

import React from 'react';
import { useCreateAlbumMutation } from '../app/services/jsonServerApi';

export default function NewAlbumForm() {
  const [createAlbum, { isLoading }] = useCreateAlbumMutation();

  function submitAlbum(event) {
    event.preventDefault();
    createAlbum(event.target['title'].value);
    event.target.reset();
  }

  return (
    <form onSubmit={(e) => submitAlbum(e)}>
      <h3>New Album</h3>
      <div>
        <label htmlFor='title'>Title:</label>{' '}
        <input type='text' id='title' />
      </div>

      <br />

      <div>
        <input type='submit' 
          value='Add New Album' 
          disabled={isLoading}   
        />
        {isLoading && ' Loading...'}
      </div>
    </form>
  );
}

Let's try the apps now. There is one thing that I want to show you here in this implementation.
Try these steps:

Go to the last page 11.
Add a new title.
Submit.

Do you find something weird?

Could you guess what's happening in here?
The data is not updated even though we change the page.

Caching!

Our data still refers to Caching data, and we don't hit to the backend to invalidate our data.

Let's step back again to the jsonServerApi.js. We miss something there.

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

export const jsonServerApi = createApi({
  reducerPath: 'jsonServerApi',
  baseQuery: fetchBaseQuery({ baseUrl: 'http://localhost:8000/' }),
  tagTypes: ['Albums'],
  endpoints: (builder) => ({
    getAlbums: builder.query({
      query: (page = 1) => `albums?_page=${page}&_limit=10`,
      providesTags: ['Albums'],
    }),

    createAlbum: builder.mutation({
      query: (title) => ({
        url: `albums`,
        method: 'POST',
        body: { title },
      }),
      invalidatesTags: ['Albums'],
    }),
  }),
});

export const { useGetAlbumsQuery, useCreateAlbumMutation } = jsonServerApi;

After adding those codes, the results will be different. Give it a shot now.

I'm using a throttling in browser dev tools, so we can see the list whether it is loading or not. If there's a loading, it means we fetch a data to the API. After we are doing a mutation, all getAlbums query will be updated when we call the query.

🟠 Update and Delete

I believe if you can handle the createAlbum mutation, you can also handle the updateAlbum and deleteAlbum mutation.

I will share the RTK query endpoint to you, but I will leave the implementation to you. However, if you want to see how I have done, you can check my main branch.

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

export const jsonServerApi = createApi({
  reducerPath: 'jsonServerApi',
  baseQuery: fetchBaseQuery({ baseUrl: 'http://localhost:8000/' }),
  tagTypes: ['Albums'],
  endpoints: (builder) => ({
    getAlbums: builder.query({
      query: (page = 1) => `albums?_page=${page}&_limit=10`,
      providesTags: ['Albums'],
    }),

    createAlbum: builder.mutation({
      query: (title) => ({
        url: 'albums',
        method: 'POST',
        body: { title },
      }),
      invalidatesTags: ['Albums'],
    }),

    updateAlbum: builder.mutation({
      query: ({ id, title }) => ({
        url: `albums/${id}`,
        method: 'PUT',
        body: { title },
      }),
      invalidatesTags: ['Albums'],
    }),

    deleteAlbum: builder.mutation({
      query: (id) => ({
        url: `albums/${id}`,
        method: 'DELETE',
      }),
      invalidatesTags: ['Albums'],
    }),
  }),
});

export const {
  useGetAlbumsQuery,
  useCreateAlbumMutation,
  useUpdateAlbumMutation,
  useDeleteAlbumMutation,
} = jsonServerApi;

🌙 Conclusion

Finally, we cover all the CRUD operations, and I hope it will be helpful to understand the basics of RTK Query. At least, you can start to set up the RTK Query from the ground. I haven't explained anything in detail about all the hooks and RTK Query documentation. I should separate it from another blog. Therefore, please let me know if you have any questions or suggestions about this blog. Leave a comment! ❇️

Good luck and see you in the next series! 👋

raaynaldo / rtk-query-setup-tutorial

rtk-query-setup-tutorial

RTK Query Setup Tutorial

Getting Start

Install all Packages

npm install

Run the project

npm start

Runs the app in the development mode.
Open http://localhost:8001 to view it in your browser.

json-server will serve in http://localhost:8000

json-server Routes

GET     /Albums
GET     /Albums/1
POST    /Albums
PUT     /Albums/1
DELETE  /Albums/1

Access the data in db.json file

View on GitHub

My First One Year Experience in the US Start-Up Company! 🏉

Raynaldo Sutisna — Wed, 06 Jul 2022 00:31:14 +0000

Just took a moment to reflect what I have done in my first year at VitusVet.
I summarized 5 important things What I learn after Working at VitusVet for a year 🔥:

1️⃣ Peer Review. ✅

I had never done any peer review in my previous company before I joined VitusVet. I know that doing peer review is good to prevent a bug in our code base. However, there are a lot of benefits when we are doing peer review.
🔶 We could reduce the possibility of defect/bug
🔶 I learn many things from someone's code.
🔶 When we need to change people's codes, we already get some ideas because of peer review.
🔶 It makes me realized that writing a code is not solving a problem, but we must think about how other people could read your code.

2️⃣ One-on-one Meeting. 🧑‍🤝‍🧑

This is also something new for me at VitusVet. I didn't expect that a One-on-one meeting with my manager could be so important for me. I believe everyone has experienced imposter syndrome. My imposter syndrome is about my communication in English. I remembered when I had a one-on-one meeting with my manager, I shared with him what I felt about my weakness. Therefore, he encouraged me that my English is fine. That helped me a lot to boost my confidence. I'm grateful to have had this session because it gives me a lot of improvements.

3️⃣ The Benefit of mentorship. 👨‍🏫

It has been a pleasure to have a chance mentoring someone in VitusVet. I thought I would not qualify to mentor and improve someone's quality. As a mentor, I realize that the responsibility to teach someone could push me to learn the basics again. If we don't really understand the basics, it is difficult to help someone understand them. Mentorship is not beneficial only for the mentee but for the mentor as well.

4️⃣ Being Consistent. 📈

I learned this from my ex-colleague at VitusVet. He doesn't have an IT background, but he could change his career just by being consistent to learn code every day. I started to put the "Consistent" word into my head. Not only for coding but also for my table tennis practice. A small step every day gives so much powerful impact on your ability.

5️⃣ Planning before Code. 📅

When I started my career as a software engineer, I thought finishing tickets as soon as possible is the thing that I should achieve. After one year in VitusVet, I understand that it's not about speed, but it's about the quality of your code. Planning is not only for solving your problem, but it should be thinking about clean code scalability for your system. Writing a bad code in your code is similar to bringing garbage in your bag for your whole life. Your bad code might be there forever until someone realizes and refactor your code. Take your time to plan everything before you start writing a code.

📚 Redux Toolkit Setup Tutorial

Raynaldo Sutisna — Mon, 23 May 2022 13:42:05 +0000

Introduction

Does anyone feel reluctant when you want to implement Redux in your react app? I always feel implementing Redux at the beginning is too much effort especially because Redux has a lot of boilerplate, and I always don't remember all the steps.
Luckily, we have Redux Toolkit now to answer our reluctance. Even though Redux Toolkit makes our life easier, I still can't remember all the steps. I have decided to make an easy tutorial for my notes.

Redux Inside My Head

I will not explain the concept of Redux itself, but I will mention the important points about Redux.

Redux is a global state
Redux is not necessary for every project.
You may need Redux if you don't want to do props drilling (passing props too deep).
If you are still confused about Redux, just think about the React state. The only difference is you can access the state from anywhere.

I always make Redux simple when I hear about Redux. Remember this statement.

Redux is a global state

It's basically a React state. What can you do if you have a react state? You can get the state and you can set state, right?



// Initial state
const [count, setCount] = useState(0);

// get state
console.log(count);

// set state
setCount(1);

Just remember that concept get and set. In Redux, we can think that get is a selector, and set is a dispatch

If you want to learn in-depth, I suggest reading this documentation.

Especially this illustration.

Implementation

let's skip to the good part!

Installation

You only need two npm packages.



npm install @reduxjs/toolkit react-redux

Create a Redux Store

src/app/store.js



import { configureStore } from '@reduxjs/toolkit';

export default configureStore({
  reducer: {},
});

configureStore

I want to cover configure store a little bit. you can read the documentation here.

configureStore is only accepting one parameter, which is an Object, which is called ConfigureStoreOptions. Pay attention to my snippet again.

ConfigureStoreOptions has several attributes (? means optional):

reducers
middleware?
devTools?
preloadedState?
enhancers?

I'm not going crazy to explain all because I don't have that experience with those. However, the most important and easy to understand are reducers, devTools, and preloadedState

reducers (object)

the reducers attribute is the mandatory option that we put our reducers as attributes. The attribute name will be related to selector. I will explain later.

devTools (boolean)

devTools plugin links for Chrome and Firefox

It's something important for your development environment. The default value is true, so you don't necessary to add this attribute. However, you may need this attribute for the production environment.

preloadedState (object)

preloadedState is the same as the initial value in React state. If you want to put an initial value, you could put it in this attribute.

Include the Redux Store to App.js parent

This makes your whole app could access the Redux.

Wrap your <App /> component with the Provider and include the store that you made recently.



//...
import { Provider } from 'react-redux';
import store from './app/store';


// ...
  <Provider store={store}>
    <App />
  </Provider>
// ...

Create a Redux State Slice

The main idea here is Slice will produce an action that we will use for dispatch and a reducer that we will use in configureStore.

src/features/todo/todoSlice.js



import { createSlice } from '@reduxjs/toolkit';

export const todoSlice = createSlice({
  name: 'todos',
  initialState: [],
  reducers: {
    addTodo: (state, action) => {
      const todo = {
        id: uuid(),
        text: action.payload,
      };

      state.push(todo);
  },
});

// this is for dispatch
export const { addTodo } = todoSlice.actions;

// this is for configureStore
export default todoSlice.reducer;

Here is the most complicated part of implementing redux. I assume you already know about Redux reducers. With createSlice, we don't need to implement the Redux reducer manually. However, there is something that you need to keep in mind. Redux Toolkit's createSlice is built-in with Immer

When we want to update React state, we can't mutate the state. Therefore, we need to create completely new data to update the state. This is the same paradigm in conventional Redux. However, Immer makes our life easier. We can mutate the state directly. Take a look at my example in the addTodo reducer function. I don't return anything, but I just mutate the state.



addTodo: (state, action) => {
  const todo = {
    id: uuid(),
    text: action.payload,
  };

  // mutate the state
  state.push(todo);
}

Mutating the state is not the only way to update the state, we can also use the Redux immutable concept, which is using return



addTodo: (state, action) => {
  const todo = {
    id: uuid(),
    text: action.payload,
  };

  // return a new data
  return [...state, todo];
}

You can read the full documentation from Redux Toolkit about Immer here.

Add Slice Reducers to the Store



import { configureStore } from '@reduxjs/toolkit';
import todoReducer from '../features/todo/todoSlice';

export default configureStore({
  reducer: {
    todos: todoReducer,
  },
});

Implementing useSelector and useDispatch in React Components

useSelector

I mentioned before that if you want to get the state you will use a selector. This is how you can access the redux state.



import React from 'react';
import { useSelector } from 'react-redux';

export default function Todos() {
  const todos = useSelector((state) => state.todos);
  // todos comes from the reducer attribute name 
  // in configureStore

  return (
    <div>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            <span>{todo.text}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}



export default configureStore({
  reducer: {
    todos: todosReducer,
    // state.todos comes from this attribute name
  },
});

useDispatch

Lastly, if we want to modify the global state we need to useDispatch and the action that we already created in slice.



import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { addTodo } from '../features/todos/todosSlice';

export default function AddTodo() {
  const [text, setText] = useState('');
  // initial the dispatch here
  const dispatch = useDispatch();

  const addTodoHandler = (event) => {
    event.preventDefault();
    // update the state here using addTodo action
    // action only receive one parameter, which is payload
    dispatch(addTodo(text));
    setText('');
  };

  return (
    <form onSubmit={addTodoHandler}>
      <input
        type='text'
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <button>Add todo</button>
    </form>
  );
}

Conclusion

To sum up, we have 6 steps to implement the Redux Toolkit to our react project:

Install Redux Toolkit and React-Redux Packages
Create a Redux Store
Include the Redux Store to App.js parent
Create a Redux State Slice
Add Slice Reducers to the Store
Implementing useSelector and useDispatch in React Components

Congratulations! 🥳 you just learned how to use Redux Toolkit.
I also created a small project about this redux toolkit implementation.

raaynaldo / redux-toolkit-tutorial

Redux Toolkit Tutorial

Read the full tutorial blog here

View on GitHub

Live app link here

Thank you for reading 📚. Please leave a comment if you have any questions for me 🥰

Through Ping Pong, I learn that Consistency and Mentorship are Essential 📈🏓

Raynaldo Sutisna — Sat, 16 Apr 2022 21:48:05 +0000

As a software engineer, I always think about how I can improve my skills quickly, and I can build and deliver applications faster than now. Recently, I proved that consistency and mentorship are really important to improve my skills not only as a software engineer, but I think they can be implemented for any type of field.

I came up with consistency and mentorship through my ping pong skills. I have a hobby, which is playing ping pong. I started playing ping pong when I was in college around 2014 (I wish I could start early). However, when I started to play ping pong, I did not have a routine schedule to play or practice. After moving to the US, I have a ping pong buddy, Jayson, and we started playing ping pong every week in August 2021. Fun fact, we planned to play ping pong together in May 2020, but pandemics came. Finally, we made it happen last year.

When we played together, sometimes, I brought my GoPro to record our game. Therefore, we can see what is our mistakes. After around 7 months, we have several videos that we have already recorded. Amazingly, we can see many improvements even though we are not at the advanced level yet. Our improvement after playing consistently every week shows us the result. Check out the video below.

I was so happy with the result because I haven’t improved that fast before. If you know about Pingpong, I could not return backspin with topspin, but now, I can do that. Consistency brought me to another level.

After I saw our videos, that make me realized that if people are consistent to do something, it will not disappoint the result. I also remembered that my friend, Alfian, mentioned a statement from James Clear’s book, Atomic Habit, if we can get 1% better every day for a year, we will be better 37 times at the end of the year. You can watch the video below as well.

Why do I think about mentorship also? In fact, in the beginning, when Jayson and I played for the first time, I was better than him because I play ping pong earlier than him. Therefore, I gave him some advice to improve his skills, and now, he can beat me most of the time. If there is someone who can mentor and guide you, I’m pretty sure it will speed up your improvements.

Now, I think this is the time to prove it in my software engineering skills. I start to have algorithm night every Tuesday with Jessica, and I make a commitment to creating a blog post every month. I can’t wait to see how far my skills go next year.

Leave a comment below if you think consistency and mentorship are essential, and I’m curious how many people players see this post?

📅 Javascript Datetime 📅

Raynaldo Sutisna — Thu, 31 Mar 2022 11:18:08 +0000

Introduction

Have you ever felt annoyed when you should code related to Datetime? Maybe you have not experienced it yet, but when you get there, you will be thankful to read this blog. I decided to write this post because I feel upset when I see a DateTime format. In this blog post, I will cover the timestamp format, Javascript Date, and my favorite Datetime NPM packages.

ISO 8601 and Unix Timestamp

I wish I know about these two main formats early before I work in my company. I experienced seeing these formats and I was so confused. What are the differences between these two?

// ISO 8601
2022-03-29T12:04:06.179Z 
2022-03-29T12:04:06.179+07:00

// Unix Timestamp
1648555411546

ISO 8601

For ISO 8601 format, the confusing thing is the last indicator, which is z or +07:00. z means Zulu time, and Zulu time is the same like UTC (Universal Time Coordinated) or GMT+0 (Greenwich Mean Time Zone)

How about Unix Timestamp?

Unix Timestamp is always based on UTC.

One interesting fact that you must know about Unix Timestamp is Unix Timestamp will end on January 19, 2038, at 3:14 a.m. UTC.
Why? It is because the Unix Timestamp data type is using a signed integer, which is traditionally 32 bits. If your logical thinking says that Unix Timestamp has a start time, you are absolutely correct. It started on January 1st, 1970 at 00:00:00 UTC. If you have heard about Unix Epoch Time, that refers to the start time of Unix Timestamp. Read about the definition of Epoch here. I even haven't been born yet, and hopefully, I can see how Unix Timestamp is ended. Leave a comment if you see the Unix Timestamp is started :P.

I also want to share this DateTime converter that I found helpful for my work. https://www.timestamp-converter.com/

Javascript Date

In this section, I will cover the most popular Javascript Date that most people use.

You can try my chunks of code in your browser developer tools, so you could prove it.

new Date()

This is a Date constructor, so it will return a Date object.

Date()
// "Thu Mar 31 2022 06:41:59 GMT-0400 (Eastern Daylight Time)"

However, when we called Date as a function, it will return a string, which is the same like new Date().toString()

Date.now()
// 1648723728520

If you are questioning how we can produce Unix Timestamp in Javascript, this is the answer.

new Date().toISOString()
// "2022-03-31T10:52:47.427Z"

Of course, I will show it. This is for ISO ISO 8601. Remember there is a Z in the last character, which means Zulu time. Therefore, it's UTC, not our time zone (if you are not in the UTC zone)

Date NPM Package Library

In my company, I found three npm packages, which is annoying. I will share three of them, and I will give a recommendation.

We are using three libraries inside our projects, which are moment Moment.js, Day.js, and date-fns.

These three libraries are helpful to help us if we need to manipulate DateTime in our code. However, I have several considerations to choosing between these three.

Moment.js is a legacy code now. It states on their website here.

Now, it's between Day.js and date-fns. I found an article that explains between Day.js and date-fns. I think it will give you the answer. https://how-to.dev/dayjs-vs-date-fns

To summarize, According to Marcin Wosinek, in his blog above, If you already use moment.js, you can use Day.js to convert it because most of the API is the same. However, for the size matter, date-fns is smaller than Day.js. You can start with date-fns if you don't have any preference. Focus on one Date library is enough because you do not want to learn all libraries.

Conclusion

Hopefully, my suffered how to read timestamp format could be helpful for you. Please leave a comment if you have any questions, and share the DateTime library that you love.
Happy reading 📚!

🔥 7 Powerful Mac Applications that You Must Install 🚀

Raynaldo Sutisna — Mon, 28 Feb 2022 16:59:04 +0000

Tom Cruise said, “I feel the need... the need for speed.” Me too! I started using MacBook in 2014. Originally, I was a Windows user, and I had a difficult time getting familiar with macOS. I even didn’t like to use Mac because it was so weird. However, after several years of getting familiar with Mac, now, I don’t want to switch back to Windows because I have found these powerful apps that can speed up your workflow.

1. Raycast

https://www.raycast.com

This is my best Mac app ever! Have you heard about Alfred? Raycast is Alfred’s alternative, and it is FREE! I can’t live without this app. The main idea of Raycast is to substitute Mac spotlight, but Raycast has so many extensions that could help our productivity.

The wonderful features here are alias and hotkey that we can set up in each extension.

Clipboard History

My hotkey : Cmd + Shift + V

We can access all the things that we copy (cmd + c). It’s not only text but also pictures!

Snippets

My hotkey: Control + S

Saving any text that you might use many times. I save my email, address, driver’s license id, Credit Card testing, and anything that I cannot remember.

This is a game-changer as a developer. In my case, I’m working with a payment application, and I need to insert credit card details repeatedly. Using this snippets extension will speed up my workflow.

In order, to paste the snippet automatically, you must set it up in the extension settings.

Window Management

One reason that I don’t like Mac is because I can’t make the applications to be in half on the screen like in Windows. I hate that, but I found one application, which is called Spectacle
. I still want to put it here because it helped me a lot. I also know paid apps for window management such as Magnet and Rectangle.

If you are already familiar with those shortcuts, we can just set up the preset here.

Let me show you how I use my window management in my ultra-wide monitor.

I’m using Spectacle hotkey preset. These are the main hotkey that I use in my daily basis:

Full Screen Cmd + Opt + F
Center Cmd + Opt + C
Reasonable Size Cmd + Opt + R
Left Half Cmd + Opt + ←
Right Half Cmd + Opt + →
Move to another Monitor Cmd + Ctrl + Opt + → or Cmd + Opt + Ctrl + ←
Left third Ctrl + Opt + D
Center third Ctrl + Opt + F
Right third Ctrl + Opt + G
Left two third Ctrl + Opt + E
Center two third Ctrl + Opt + R
Right two third Ctrl + Opt + T

Quicklinks

This is another powerful extension that can get you faster to a website. For example, to go to Google or YouTube, you can just find Quicklinks and type your search argument there.

If you are questioning what is raynaldo.me Quicklinks is, here is the answer. My brother, Thedorus Clarence created a Next.js project called notiolink, so we can create short links in notion. If you are interested, you can install it by yourself. I will give some demo videos below.

theodorusclarence / notiolink

⚡ Self-hostable branded link shortener built with Next.js & Notion API

Notiolink

⚡ Self-hostable branded link shortener built with Next.js & Notion API

Made by Theodorus Clarence

Installation Guide

Please read the full guide on this notion page

If you are migrating from v0 to v1, I suggest to re-fork the project and add the environment variables.

Features

⚡ Unlimited branded links (use your own domain!)
☝ Self-hostable with Vercel
💨 Fast redirect using Next.js Middleware Functions
🌑 Awesome CMS using Notion
➕ See click count statistics
💠 Zero config, all customizable via env
💅 Numerous themes

Link Tree Page

You can easily configure it on the notion database

Add New Link

Route: /new

You can add link straight from the website for easy access, don't worry this is protected with login page so no one will mess with your links

Link Details & Count

You can see the statistics with /:slug/detail route

Categorized Tree

Every category will be made into…

View on GitHub

My shortcut is Ctrl + R

Jira

Active sprint hotkey: Ctrl + J

Lastly, I also want to show the Jira extension because it’s handy to use Jira without opening the browser. We can read the ticket, update the ticket status, assign the ticket to someone, and open the ticket by using Raycast.

There are a lot of extensions because Raycast has a store for it, I will not show everything. You can check other extensions here. Several extensions that I used:

Search Recent Project VSCodes
Github
Bitwarden Vault
Slack Status

2. CleanShot X

https://cleanshot.com/

CleanShot X is a screenshot application with a lot of features. This is a paid application, but I recommend it. I don't usually spend my money on an application. However, I don’t regret buying this powerful application. It’s so helpful to communicate with others if we need to share a screenshot, GIF, or video.

I will not explain all CleanShot X’s features in detail because you can see them on the website, but I want to share some of cool features:

The Editor

The screenshot editor is very cool! We will get a lot of features for editing.

Record GIF and Video

All my videos and GIFs screen recordings are using CleanShot X. You can record your voice, computer sound, and your video. Also, we can highlight our clicks and show our keystrokes. It’s so configurable and convenient for recording your screens.

Of course, you can also trim the video and mute your video afterward.

Scrolling Capture

I hate when I need to take a long screenshot. I usually need to separate it into two screenshots, but CleanShot X did a great job here. Scrolling capture gives me the flexibility to take a long screenshot.

Capture Text (OCR)

This is a feature that I have never expected because I thought CleanShot X is only taking a screenshot and screen video. However, they give us access to copy a text with OCR. Thank you, CleanShot X! I love this feature.

My CleanShot X KeyStrokes

Capture full screen Cmd + Shitf + 3
Capture some area Cmd + Shift + 4
Record Screen (GIF or Video) Cmd + Shift + 5
Scrolling Capture Cmd + Shift + 2
Capture Text (OCR) Cmd + Shift + C
Restore closed file Cmd + Shift + E

Go to their website here to learn more about other cool CleanShot X features.

3. Logi Options

This is a free application, but you must buy a Logitech mouse with a programmable buttons feature. I’m using M590 because I got another 5 buttons excluding left-click and right-click. However, I checked in the Logitech store it’s said Sold Out Temporarily, but you can buy M585 for the substitution. The only difference M585 doesn’t have a silent click feature.

Why do I love this application?

We can program the buttons differently for a specific application.

I mainly use the feature for Visual Studio Code and my browsers (Firefox and Chrome).

My Logi Options Setup

Visual Studio Code

Scroll Left - Keystroke Cmd + B → Open side bar
Scroll Right - Keystroke Ctrl + ` → Open terminal
Side Front - Keystroke - Shift + Ctrl + - → Forward to the next line of code
Side Back - Keystroke - Ctrl + - → Back to the previous line of code

Firefox

Scroll Left - Keystroke Opt + Cmd + I → Open web developer tools
Scroll Right - Keystroke Shift + Opt + C → Toggle CSS Debug
Side Front - Zoom using scroll wheel
Side Back - Keystroke - Opt + Cmd + M Responsive Design Mode

Google Chrome

Scroll Left - Keystroke Opt + Cmd + I → Open web developer tools
Scroll Right - Keystroke Shift + Opt + C → Toggle CSS Debug
Side Front - Zoom using scroll wheel
Side Back - Keystroke - Shift + Cmd + M Responsive Design Mode after opening web dev tools.

4. f.lux

https://justgetflux.com/

If you have a health concern with your eyes, this is a recommended application for it. F.lux will adapt the screen color temperature at a certain time. Therefore, your laptop screen will be changed to warm color at night. Staying in front of your laptop until late might impact your night's rest.

This is how my screen looks like at night.

5. Dozer

https://github.com/Mortennn/Dozer

Do you feel annoyed with many applications icon in your top bar? Dozer could help you to hide them.

6. iTerm2

https://iterm2.com/

Natural Text Editing

The most favorite feature in iTerm2 is that I can set key mappings to natural text editing. It means that we can use Cmd + ← or Cmd + → for moving our cursor to the end of the beginning of the character, and also Opt + ← or Opt + → for moving our cursor per word. It makes me so flexible to type in the terminal.

Follow these steps to set the natural text editing in iTerm2:

Open iTerm2 Preferences
Go to Profiles
Go to Keys
Go to Key Mappings
Change the Presets to Natural Text Editing

Window Arrangement

It is so lazy if we need to go to the same directory when we open the terminal for the first time. However, We can open our saved window arrangement in iTerm2. Shortcut for default window arrangement Cmd + Shift + R

How to save the window arrangement is here.

7. Gitify

https://www.gitify.io/

Lastly, my favorite Mac app is Gitify. It gives you a sound if you get a notification from your Github. You can realize quickly if your colleagues leave some comments in your pull request.

Conclusion

Hopefully, these applications could boost your productivity and help you finish your tasks efficiently. Please leave me a comment about which application you love, or any other app suggestions you may have. Thank you for reading.

An Easy Way to Understand Promise in Javascript

Raynaldo Sutisna — Mon, 24 Jan 2022 17:19:56 +0000

Introduction

Do you feel confuse when you read new Promise(), .then(), or .catch()? You are not alone, and I experience the same thing. Let's start with reading the documentation itself.

According to MDN Web docs, "The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value."

Promise Object States

A promise object has three states pending, fulfilled, and rejected. I will use an analogy here. Same as the name, Promise, it is similar to your friend who wants to make a promise to you. After he/she states a promise with you, the only thing that you can do is wait, right? Waiting is the pending state in JavaScript promise. In the end, you can find out if your friend will fulfill your promise or reject to keep his promise.

Understanding the Promise State Flow

When we create a promise object, at first, we will get a pending state. The promise state will be changed to be fulfilled if the function inside the promise calls the resolve callback. However, if the function inside promise calls reject callback, the state will be changed to be rejected

Try to run this code in your browser console to see how the promise state is changed from pending to fulfilled.



  const newPromise = new Promise((resolve) => {
    setTimeout(() => resolve('Success'), 2000);
  });
  console.log("[After promise initialization]", newPromise);

  setTimeout(() => console.log("[After resolve callback run]", newPromise), 2000);

Promise Object Methods

After we understand the basic concept of promise states, we can move forward with promise methods. We just saw the state was changing from pending to fulfilled, but we didn't access the result. That's the reason why we need the promise methods.

If we take a look inside the promise prototype, we can find out that promise has a constructor method, and three prototype methods, which are .then(), .catch(), .finally(). Therefore, whenever you see those methods are being called, you can assume that the variable before the method is a promise object.

Constructor

The promise constructor requires a callback function to be sent as a parameter. The callback function has two function parameters, and the parameter name convention is resolve and reject.
resolve function will cause the state change to be fulfilled. On the other hand, reject will change the state to be rejected. Both functions has one parameter to return the value.



  const fulfilledPromise = new Promise((resolve, reject) => {
    resolve("Success")
  });
  const rejectedPromise = new Promise((resolve, reject) => {
    reject("Fail")
  });

.then()

Alright, the most popular promise method. You probably see this method everywhere. .then() has two optional parameters that are onFulfilled and onRejected. I guess you can understand it easily. The first parameter will handle the result of the promise if the state is fulfilled, and the second parameter is for handling rejected state.



// ...
newPromise.then(
  (fulfilledResult) => {
    console.log(fulfilledResult);
  },
  (rejectedResult) => {
    console.log(rejectedResult);
  }
);

-- OR --



// ...
function onFulfilled(result) {
  console.log(result);
}
function onRejected(error) {
  console.log(error);
}
newPromise.then(onFulfilled, onRejected);

In fact, in my experience, I don't use the second parameter because we have another method to handle the rejected state, which we will discuss in the next section.

.catch()

With this method, the rejected state will directly be handled. It's similar like .then(), but .catch() is only has one callback function parameter.



newPromise.catch((error) => {
  console.log(error);
});

Example of chaining .catch() with then().



// ...
myPromise.then(result => console.log(result))
   .catch(error => console.log(error));

.finally()

Finally, it is .finally(), the last promise object method. .then() same like .catch that it only has one callback function.In addition, It will be called when the promise is settled whether the state is fulfilled or rejected. However, the .finally() callback function doesn't have any parameter.



// ..
newPromise.finally(() => {
  console.log('Done');
});

.then(), .catch(), .finally(), and Promise constructor return a promise object. That's why you might see this chaining method.



fetch('https://api.zippopotam.us/us/90210')
  .then((res) => res.json())
  .then((data) => console.log(data))
  .catch((error) => console.log(error))
  .finally(() => console.log('done'));

Async and Await

In the beginning, I was confused with fetch(). Why does fetch always need double .then like the previous example. After I read the fetch and response.json() documentation meticulously, I realized that those return promise objects as well. That's why we need .then()

There is another way if we don't want to use chaining .then(). Thanks to async and await. In order to activate await, we must call await inside the async function. This is an example.



async function fetchData() {
  const response = await fetch('https://api.zippopotam.us/us/90210');
  const data = await response.json();
}

If I translate to our language, await is like waiting for our friend to answer his promise. Therefore, using await we can get the answer before we execute the next line of code.

Try to run the first code snippet in your browser console, and compare it with the second code. The first code will return a promise, but in the second one, you can get the value.



async function fetchData() {

  const response = fetch('https://api.zippopotam.us/us/90210');

  console.log(response);

  const data = response.json();

  console.log(data);

}

fetchData();



async function fetchData2() {

  const response = await fetch('https://api.zippopotam.us/us/90210');

  console.log(response);

  const data = await response.json();

  console.log(data);

}

fetchData2();

Conclusion

I wish I can understand about promise in detail at first. It will be so helpful to read the chaining method. Other Promise Methods might be helpful in our code, and I might write them in another post. I hope this promise blog could help you to work around with promise.

react-router: useHistory, useLocation and useParams

Raynaldo Sutisna — Sun, 04 Jul 2021 01:36:06 +0000

Introduction

I expect that you have read my previous blog, so you already know what is the three route props. If you don't know about it, check my previous blog here. I discuss how we can pass the three route props, and I want to show you another easy way to access it without thinking to pass as props.

useHistory

Basically, this hook gives you access to history objects and you have access to several functions to navigate your page. It's all about navigation. This is how you can use useHistory.

import { useHistory } from 'react-router-dom';

const Portfolio = (props) => {
    const history = useHistory();
    console.log(history);

    return (
        <div>
            Portfolio
        </div>
    );
};

export default Portfolio;

What's inside history?

Okay... so many things here. I know it is confusing in the beginning. I will explain the most common uses of these attributes.

length(number): the length of the page that you visited.
action(string): (POP, PUSH, REPLACE)
- POP: Visiting the route via url, Using history go function(history.goBack(), history.goForward(), history.go())
- PUSH: Using history.push()
- REPLACE: using history.replace()
.push(pathname: string, state: any)/(location: object): push a path or location to the history stack. There are several ways to use push, and I show the examples below.

    //using pathname
    history.push("/blog");
    //https://localhost:3000/blogs

    //using pathname and state
    history.push("/blog", { fromPopup: true });
    //https://localhost:3000/blogs

    //using location
      history.push({
      pathname: "/blogs",
      search: "?id=5",
      hash: "#react",
      state: { fromPopup: true }
    });
    // https://localhost:3000/blogs?id=5#react

I have never utilized the state before. However, after I read the documentation, the documentation gave me an idea. For example, if you want to know where the user came from, you can utilize the state.

.replace(pathname: string, state: any)/(location: object): this is basically similar to push, but it will remove the existing history and update to the new one. Whenever the user clicks back in the browser after .replace, it will not go back to the previous one.
.goBack(): move back to the previous history.
.goForward(): move forward to the previous history.
.go(delta: number): move to a different index and can specify how many indexes from this position (can be minus or positive)

I have never used the three go function, but I just want to let you know that this function has existed in history

I also prepare codesandbox to help you understand.

useLocation

Briefly, this is like a state that always returns your current URL. If the URL is changed, the useLocation will be updated as well.

What's inside location?

useLocation doesn't have any function like useHistory, and it is just to grab information about your current URL.

I will use the previous link that we tried to use .push from history in the example localhost:3000/blogs?id=5#react.

from that URL, if we are trying to call useLocation, we will get this object.

Just keep in mind the purpose useLocation() is getting information from the current route, and it will return these attributes.

{
  key: 'ac3df4', // not with HashHistory!
  pathname: '/somewhere',
  search: '?some=search-string',
  hash: '#howdy',
  state: {
    [userDefined]: true
  }
}

useParams

This is the easiest hook from react-router to understand. Whenever you call this hook you will get an object that stores all the parameters as attributes.

You just need this line of code and you can have access to your params.

const params = useParams();

you can play around in my CodeSandBox

Conclusion

I hope this post could help you to understand the three main useful hooks from react-router. It is confusing in the beginning, but after I play around with it, everything makes sense and understandable. Enjoy playing react-router! post your comments to ask me questions.

DEV Community: Raynaldo Sutisna

📚 RTK Query: Understanding useQuery Hook

Introduction

📚 RTK Query Tutorial (CRUD)

Raynaldo Sutisna ・ Nov 29 '22

UseQuery

🟠 UseQueryOptions

🔸 skip?: boolean

🔸 selectFromResult?: boolean

🔸 pollingInterval?: number

🔸 refetchOnFocus?: boolean

🔸 refetchOnReconnect?: boolean

🔸 refetchOnMountOrArgChange?: boolean

🔵 UseQueryResult

🔹 data

🔹 isLoading

🔹 isFetching

🔹 isSuccess

🔹 isError

🔹 error

🔹 refetch

🔹 requested

🔹 The Rest of Result Attributes

Conclusion

⚙️ Leetcode Heap (Priority Queue) in JavaScript

Introduction

JavaScript in Leetcode

Heap (Priority Queue) in General

🔵 Initialization

📈 MinPriorityQueue and MaxPriorityQueue

MinPriorityQueue and MaxPriorityQueue with options

📈 PriorityQueue

🔵 .enqueue() and .deqeue()

.enqueue()

.dequeue()

🔵 .toArray()

🔵 .size()

🔵 .isEmpty()

🔵 .front()

🔵 .back()

🔵 .clear()

Conclusion

raaynaldo / algorithm-ds-playground

Algorithm and Data Structure Playground

Getting Start

⚙️ Binary Search Finding Max/Min Template in Javascript

🏁 Introduction

🍌 Koko Eating Bananas

Understanding the Problem

Get A Paper and Draw!

Figuring out the condition

Figuring out the answer

Final Code

✨ Conclusion

⚙️ Easy Binary Search Template in Javascript

🏁 Introduction

🚩 Binary Search Recap

Two Pointers

Iterative

Middle Index

Moving the pointers

🏁 Conclusion

📚 RTK Query Tutorial (CRUD)

☀️ Introduction

⁉️ What is Redux Toolkit Query/RTK Query?

⁉️ Why do you need RTK Query?

🔺 Fetch Loading and Error Handling

🔺 Caching

⭐ Implementation

♦️ Run this command in the terminal

♦️ Create the first API Service

♦️ Create Store and Add Service to the store

♦️ Wrap App component with the Provider

♦️ Call the useGetAlbumsQuery in a component (Queries/Read Operation)

💎 Pagination

♦️ Mutation / Create Update Delete Operation

🟠 Create

🟠 Update and Delete

🌙 Conclusion

raaynaldo / rtk-query-setup-tutorial

🔵 `.enqueue()` and `.deqeue()`

♦️ Call the `useGetAlbumsQuery` in a component (Queries/Read Operation)

devTools (boolean)