Fueling Curiosity, One Insight at a Time

useFieldArray is a hook provided by React Hook Form that simplifies the process of managing dynamic form fields. It allows you to create forms where users can add, remove, move, and manipulate groups of inputs (or arrays of fields), like a list of tasks, addresses, or any repeatable form sections.
Features :-
1. Dynamic Fields Management
2. Efficient Rendering
Functions Provided by useFieldArray
• append(): Adds a new item to the end of the field array.
• prepend(): Adds a new item to the beginning of the field array.
• remove(index): Removes a field at the specified index.
• insert(index, value): Inserts a new field at a specific index.
#react-hook #react-form #form

To create a model in Prisma:
1. Open the schema.prisma file.
2. Define datasource and generator:

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

generator client {
  provider = "prisma-client-js"
}

Create the model:

model Retro {
  id              String   @id @default(cuid())
  date            DateTime @default(now())   // Auto-fills current date
  scrumMasterId   String                        // For Scrum Master (User)
  slackChannel    String                        // Slack Channel input
  questions       String[]                      // Default retro questions
  projectId       Int       @relation(fields: [projectId], references: [id])
  project         Project   @relation(fields: [projectId], references: [id])
}

This creates the Retro table for your retrospectives.

@id: Marks a field as the primary key.
@default(): Sets a default value for a field.
@relation(): Defines relationships between models.
@unique: Ensures a field has unique values.
String[]: Defines an array of strings.
cuid(): Generates a unique ID.
@updatedAt: Automatically updates the field with the current timestamp when data changes.

#prisma #database #columns #model

Mocking in Jest
Jest provides several ways to mock:
• jest.fn(): Creates a mock function that you can use instead of a real function.
• jest.mock(): Mocks entire modules.
• jest.spyOn(): Tracks calls to an existing method while optionally replacing its implementation.
#jest #test #mock

Async Local Storage in Node.js

• Provides us a way to store and manage context-specific data across asynchronous operations without needing to pass it explicitly through function arguments.
• Built on the async_hooks module, which tracks asynchronous resource lifecycle events.
• We need to use asyncLocalStorage.run(store, callback) to create a new context.
• Asynchronous operations initiated within this callback inherit that context.
• Each context created with asyncLocalStorage.run() is unique and does not interfere with other contexts.
• Common use cases can be maintaining custom context in our web app (e.g., request data, user ID...) across multiple layers (controllers, services, etc.), can help us with tracing how a request propagates through different async functions.
• Automatically cleans up the context after the asynchronous operations are complete.
• run(store, callback): Creates a new context and runs the callback with the provided store (like a Map or a primitive value).
• Set a value: asyncLocalStorage.getStore().set('requestId', requestId);
• Get a value: const requestId = asyncLocalStorage.getStore().get('requestId');

const http = require('node:http');
const { AsyncLocalStorage } = require('node:async_hooks');
const { v4: uuid } = require('uuid');

const asyncLocalStorage = new AsyncLocalStorage();

function logWithId(msg) {
  const requestId = asyncLocalStorage.getStore(); 
  console.log(`${requestId} - ${msg}`);
}

function serviceA() {
  logWithId('Service A log');
}

function serviceB() {
  logWithId('Service B log');
}

http.createServer((req, res) => {
  const requestId = uuid();
  asyncLocalStorage.run(requestId, () => { 
    logWithId('Request received');
    serviceA();
    serviceB();
    logWithId('All services called');
    res.end('Response sent');
  });
}).listen(4040);

http.get('https://localhost:4040');

// Output:
<generated-request-id> - Request received
<generated-request-id> - Service A log
<generated-request-id> - Service B log
<generated-request-id> - All services called

## Avoid Mutating Objects Loaded from JSON Files

Today I learned that even if data is loaded from a static JSON file - once it's parsed and stored as a JavaScript object in memory, it behaves like any other object—meaning it's mutable by reference.

This means that modifying a property of an object loaded from a JSON file will mutate the original object in memory, affecting all references to that object across the app.

To avoid accidental mutations, it's best to create a copy of the object (using methods like { ...obj } for shallow copies) before modifying it. This ensures that the original data remains unchanged and helps prevent unexpected side effects throughout the codebase.

Example of creating a copy to avoid mutation:

const content = { ...emails['Signup success'] };

This protects the original emails object from being modified, keeping the rest of the app safe from unintended changes.

---

It's a small but important detail when dealing with mutable JavaScript objects loaded from static sources!

#passByReference #js #json #objects

The default behavior of a form's submit button in Rails is to disable itself once the form has been submitted. In any situation if you want to submit form multiple times without reloading the page, we can use a simple trick:

1. Move the submit button outside of the form.
2. Create a controller that connects the button and the form.
3. Implement an action in controller to submit the form when the button is clicked.
Form:

<%= form_with(model: @object, data: {
    controller: "form",
    form_target: "form"
}) do |form| %>
  <%= form.label :name %>
  <%= form.text_field :name %>

  <%= form.label :status %>
  <%= form.select :status, ["Active", "Inactive"] %>

<% end %>

<%= button_tag "submit", type: "submit", data: {
      action: "click->form#formSubmit"
    } %>

Controller:

export default class extends Controller {
    static targets = ["form"];

    formSubmit(){
        this.formTarget.submit()
    }
}

Why This Works
By placing the button outside the form, it becomes unlinked from the form submission process, allowing it to remain enabled even after the form is submitted.

#CU6U0R822 #form #stimulus

While using React-Query, Cache invalidation is key for keeping your data up-to-date with server state.
Data becomes "stale" after a set time (staleTime), and stale data gets re-fetched when the query is re-triggered (e.g., on component remount, on focus, or on manual refetch).

Following cache invalidation techniques are used to set the data as "stale" in react query:
• Implicitly setting up the staleTime .
• Adding triggers to react-query: refetchOnWindowFocus , refetchOnReconnect, refetchOnMount , refetchInterval .
• Manual invalidation for specific queries using queryClient.invalidateQueries() .
To have more control over specific query invalidation, we can utilise the queryKey property:

queryClient.invalidateQueries({
  queryKey: ['todos'],
})

queryClient.invalidateQueries({
  queryKey: ['todos', { type: 'done' }],
})

#react-query #cache-invalidation #data-synchronization

Understanding context.params and req.nextUrl.searchParams() in Next.js
1. context.params for Dynamic Routes
In Next.js, dynamic routes are created by using brackets in the file names inside the pages directory (or in the /app directory in the case of the App Router). For example, if you create a file called [id].js, you are creating a dynamic route where id is a parameter.
Example:

const { id } = context.params;

2. req.nextUrl.searchParams() for Query Strings
Query strings are parameters passed through the URL, typically after a ? symbol. These are useful for handling additional data or filters that don’t affect the route structure.
In Next.js, with the App Router or when using API routes, you can use req.nextUrl.searchParams() to access query parameters.
Example:

const searchParams = req.nextUrl.searchParams;
const searchTerm = searchParams.get('query'); // ?query=nextjs

Key Differences:

• Dynamic Routes (context.params) are part of the URL path, like /product/123, where 123 is dynamically extracted.
• Query Strings (req.nextUrl.searchParams) are optional parameters passed in the URL, like /api/search?query=nextjs.
Both are useful depending on whether you want to make the parameters part of the URL path or pass them as additional optional information.
#nextJS #query #dynamic-params

Pagy Gem for Efficient Pagination in Rails

A fast, lightweight, and efficient solution for pagination in Ruby on Rails applications.


Why pagy?

1. Faster and less resource heavy when compared to other pagination gems like Kaminari or Will Paginate
2. Highly customizable : We can easily configure pagy through pagy.rb initializer file like default items per page.etc
3. "Helpful" Helpers : Pagy provides various helper methods that make it easy to implement pagination in views with minimal code.
4. Efficiency: It significantly reduces the number of queries, making it ideal for large datasets.
5. Performance-Oriented: Pagy is claiming to perform up to 40x faster than other pagination gems such as Kaminari and Will Paginate
Example Usage:

Code for basic pagination:

In the controllers (e.g. application_controller.rb)

include Pagy::Backend

In the Helpers (e.g. application_helper.rb)

include Pagy::Frontend

Wrap your collections with pagy in your actions :

@pagy, @records = pagy(Product.all)

Optionally set your defaults in the pagy initializer pagy.rb :

# Set default items per page and navigation size
Pagy::DEFAULT[:items] = 10  # items per page
Pagy::DEFAULT[:size]  = [1, 4, 4, 1]  # control how many navigation links are shown

In the view:

<%= pagy_nav(@pagy) %>

1. pagy_nav: Renders the full pagination navigation links (next, previous, and page numbers).
2. pagy_info: Displays pagination information such as the range of items being shown and the total count.
Some additional helpers:

1. pagy.from: This returns the starting index of the current page’s items.
2. https://pagy.to|pagy.to: This returns the ending index of the current page’s items.
3. pagy.count: This returns the total number of items being paginated.

Example Usage:

Showing <%= pagy.from(@pagy) %> to <%= pagy.to(@pagy) %> of <%= @pagy.count %> items.

If we are on page 1 and displaying 8 items per page and total count is 20, This would display Showing 1 to 8 of 20 items Giving more clarity about the pagination, making it user-friendly

#pagy #pagination #RubyOnRails

CSRF stands for Cross-Site Request Forgery, which is a type of attack where a malicious actor tricks a user into performing unwanted actions on a web application in which the user is authenticated. The attacker essentially "forges" a request from the user's browser without their consent, taking advantage of the user's active session with the target website.

How CSRF Works:
1. User Authentication: The user logs into a website (e.g., a banking website) and receives a session cookie that keeps them authenticated.
2. User Visits a Malicious Site: While logged in, the user visits a malicious site or clicks on a malicious link.
3. Forged Request: The malicious site generates a hidden request (such as a form submission) to the target site (e.g., bank) on behalf of the user, utilizing the user's active session and browser cookies.
4. Unintended Action: Since the user is authenticated, the target site processes the request as valid, allowing the attacker to perform actions like transferring money, changing account details, etc.

CSRF Prevention Mechanisms:
To protect against CSRF, developers can implement several mechanisms:
1. CSRF Tokens: The most common and effective defense.
◦ Every form submission or sensitive request includes a hidden, random token (CSRF token) that is unique to the user's session.
◦ The server validates the token before processing the request, ensuring the request originated from a legitimate source.
2. SameSite Cookies: A modern defense where cookies are only sent with requests originating from the same site.
◦ Setting SameSite attribute in cookies can prevent browsers from sending cookies in cross-origin requests.
◦ Set-Cookie: sessionID=abc123; SameSite=Strict;
NextAuth.js and CSRF Protection:
In the context of NextAuth.js, CSRF protection is enabled by default when handling authentication requests. It ensures that malicious websites can’t perform unwanted actions on behalf of a logged-in user.
#csrf #security