Do you know that React Reconciler uses double buffering

Config PWA in your next app

Boxing in Javascript


Mapped types are one of the best tools in TypeScript for transforming types. It takes a type and turns it into another type in an organized and deliberate way. You can think of the mapped type as Array.map – iterating over it to create new types. This is the same pattern used to create utilities in TypeScript, such as Pick Partial, and Required. We will see examples of how to create your own Pick, Omit … with custom conditions.

Mapped types Syntax

```tsx
[P in K]: T
```

Here, <Tag>P</Tag> is a variable that represents a property key of the original type <Tag>K</Tag>. We can customize <Tag>P</Tag> as we want; we can use <Tag>as</Tag> to convert it to sommthing else or create new key using literal strings. <Tag>T</Tag> is the type that the property will be transformed into. Here, we can use it to create a new type.

# Create mapped type

Let’s imagine we have a static union

```tsx
type union = 'firstname' | 'lastname'
```

or we can create a union from an object we have already, using keyof and typeof

```tsx
// typeof: returns the  object with key and values as the type
// keyof: return union from keys of the object

const obj = {
  firstname: 'wassim',
  lastname: 'nassour'
}

type keys = keyof typeof obj
```

Let’s create a mapped type that switches all strings in the obj to a boolean

```tsx
const obj = {
  firstname: string,
  lastname: string
}

type objBolean = {
  [k in obj]: boolean
}

// using generics
type objBoolean<T extends {}> = {
  //  T extends {} is a conditional check to check if T is the Object first
  [k in keyof typeof T]: boolean
}
```

Now if you use objBoolean on obj you will get

```tsx
{
  firstname:boolean,
  lastname:boolean
}
```

# implement your Own Pick, Recod ….

## Implementation of Record :

```tsx
type MyRecod<K extends string | number | symbol, T> = {
  [P in K]: T
}
```

<Tag>P in K</Tag>, <P className="inline text-white">means, that the key property in an object will match one of the K arguments and T is the type of value can object has T can be anything in this example but we can put some constraints</P>

## Implementation of Pick :

```typescript
//This is how Pick is implemented, Pick will try to pick only the matched keys with K
// and T is the Object
type Pick<T, K extends keyof T> = {
  [P in K]: T[P]
}

//We can implement Pick with optional keys
type PickOptional<T, K extends keyof T> = {
  [P in K]?: T[P]
}

//We can implement Pick with read-only  keys
type PickWithReadOnly<T, K extends keyof T> = {
  readonly [P in K]?: T[P]
}
```

# Key Remapping with String Litterlale

With the feature of key mapping in typescript and the help of <Tag>as</Tag> You can leverage features like [template literal types](https://www.typescriptlang.org/docs/handbook/2/template-literal-types.html) to create new property names from prior ones:

example we have a normal typescript object type containing data like this :

```tsx
const dataState = {
  game: number,
  player: number
}
```

and we want to create another type containing actions like setPlayer and setGame , we can simply do this

```tsx
type dataState = {
  game: number
  player: number
}

type dataActions = {
  [K in keyof dataState as `set${Capitalize<K>}`]: (arg: dataState[K]) => dataState[K]
}

function methods(actions: dataActions) {
  actions.setGame(3)
  // if we try to run setGame with string we will get this error
  // argument of type 'string' is not assignable to the parameter of type 'number'.(2345)
}
```

# Filtering out Properties

In TypeScript, you can filter properties out of an object type using the Omit utility type, or you can create a custom type that excludes specific properties. In this explanation, we will implement our custom Omit type, which will allow us to perform more advanced filtering, such as excluding properties based on string literals or specific conditions, like excluding all properties that are functions or numbers, or any other criteria you require.

This is an example of normal Omit without any typescript utility

```tsx
interface Obj {
  name: string
  lastname: string
  age: string
}
type MyOmit<T, K extends keyof T> = {
  [Key in keyof T as Key extends K ? never : Key]: T[Key]
}

type TestOmit = MyOmit<Obj, 'name' | 'age'>
```

# Filtering using String Litterlal

This is an example of normal Omit without any typescript utility

```tsx
interface Obj {
  name: string
  nameAgain: string
  age: string
}

//We removed the extends here because will provide a
//key that the typescript can't know
type MyOmit<T extends {}, K> = {
  [Key in keyof T as Key extends K ? never : Key]: T[Key]
}

type TestOmit = MyOmit<Obj, `name${string}`>
```

using <Tag>`name${string}`</Tag> will exclude all properties that start with a name and follow a string

# Filtering based on values

```typescript
interface Obj {
  name: string
  nameAgain: string
  age: string
}

type OmitFunction<T, K> = {
  [Key in keyof T as T[Key] extends () => void ? never : Key]: T[Key]
}

type TestOmit = OmitFunction<Obj>
```

this OmitFunction will exclude all properties that have a value of function that returns void

<br />
<br />

Thank you for reading this article, See you in the next article chuss 👋


Mapped Types in Typescript 


Hi friends, this article shows how you can test your <Tag>next/router</Tag> in different ways. To test push or any method from <Tag>next/router</Tag> , I found two approaches: mocking the <Tag>next/router</Tag> , and creating a router context inside your test and wrapping your app with it. We will dig deep into both approaches.

If you try to run <Tag>next/router</Tag> in isolation, you will encounter an issue. To understand this issue, you need to know how <Tag>useRouter</Tag> from <Tag>next/router</Tag> works.

<Img src={'/assets/blog/Test-router-in-nextjs/ErrorMessage.png'} quality={100} />

this is the internal code of <Tag>useRouter</Tag> as you see it just consumes the routerContext that’s setup when you run the app

<Img
  className="w-full object-cover"
  src={'/assets/blog/Test-router-in-nextjs/rourterInternal.png'}
/>

To avoid this issue in our app, we have two approaches. The first is to mock <Tag>next/router</Tag> ,
while the second is to create the context for <Tag>useRouter</Tag> in the component we are testing.

The component we are testing is a simple one, with a push method from <Tag>useRouter</Tag> . However, with this approach, we are testing the methods of <Tag>next/router</Tag> . You will see that we are only checking the methods now, because we have fixed the error that <Tag>useRouter</Tag> throws.

```jsx
const Component = () => {
  const router = useRouter()
  const navigateToNext = () => {
    router.push('/next-page?name=test')
  }
  return (
    <div>
      <button onClick={navigateToNext}>Navigate to Other page</button>
    </div>
  )
}
```

# First approach: mock useRouter from the next/router

The first approach involves mocking <Tag>next/router</Tag> using the <Tag>jest.mock</Tag> method. By creating a mock implementation of <Tag>useRouter</Tag> , you can simulate routing behavior in your tests. You can render your component, simulate the button click, and then verify that the push method is called with the expected URL

```jsx
import Home from '../pages/index'
import { fireEvent, render, screen } from '@testing-library/react'
import { useRouter } from 'next/router'

jest.mock('next/router', () => {
  const router = {
    push: jest.fn(),
    query: {}
  }
  return {
    useRouter: jest.fn().mockReturnValue(router)
  }
})

test('test navigation with push', () => {
  render(<Home />)
  const button = screen.getByRole('button', {
    name: 'Navigate to Other page'
  })
  fireEvent.click(button)
  expect(useRouter().push).toHaveBeenCalledTimes(1)
  expect(useRouter().push).toHaveBeenCalledWith('/next-page?name=test')
})
```

# Second approach: mock the context for the useRouter hook

we will create helper function that generates a mocked router object with necessary methods and values . also create MockRouterWrapper component that provides the router object as a value to the RouterContext. We can then use this wrapper in our test to render the component and simulate the button click.

```jsx
import Home from '../pages/index'
import { RouterContext } from 'next/dist/shared/lib/router-context'

export function createMockRouter(router) {
  return {
    basePath: '',
    pathname: '/',
    route: '/',
    query: {},
    asPath: '/',
    back: jest.fn(),
    beforePopState: jest.fn(),
    prefetch: jest.fn(),
    push: jest.fn(),
    reload: jest.fn(),
    replace: jest.fn(),
    events: {
      on: jest.fn(),
      off: jest.fn(),
      emit: jest.fn()
    },
    isFallback: false,
    isLocaleDomain: false,
    isReady: true,
    defaultLocale: 'en',
    domainLocales: [],
    isPreview: false,
    ...router
  }
}

const MockRouterWrapper = ({ children, router }) => {
  return <RouterContext.Provider value={router}>{children}</RouterContext.Provider>
}
```

Finally, after we created our Wrapper and function helper , we can once again check that the push method is called with the correct URL an.

```jsx
test('test navigation with push', () => {
  // create wrapper object
  const router = createMockRouter()
  render(<Home />, {
    // pass wrapper router options
    wrapper: props => <MockRouterWrapper {...props} router={router} />
  })
  const button = screen.getByRole('button', {
    name: 'Navigate to Other page'
  })
  fireEvent.click(button)
  expect(router.push).toHaveBeenCalledTimes(1)
  expect(router.push).toHaveBeenCalledWith('/next-page?name=test')
})
```

In summary, both approaches allow you to focus on testing the <Tag>useRouter</Tag> methods. We chose to test only the push method because the main idea is to be able to test the methods from userRouter. With the function helper or the mocking version, you can check or simulate any method from useRouter


Test routing in nextjs


Hi folks, we will discuss how to upload images to S3 buckets using the <Tag>getSignedUrl</Tag> method. This method enables direct uploading of images to S3 without having to first upload them to your server.

## How it’s work and why this way is more scalable:

<br />

This image explains the full flow.

<Img
  className="w-full"
  alt="Upload Images to S3 buckets with React and Node in scalable way , using getSignedUrl"
  src="/assets/blog/Upload-Images-to-S3-buckets-with-React-and-Node/flow.png"
/>

One of the ways to upload images to S3 buckets is to handle the image on the server before sending it to S3. However, this requires more resources on the backend, which can result in slower processing times. An alternative approach is to upload the image with a signed URL. This method requires fewer resources because with <Tag>getSignedUrl</Tag>, we only need to specify the operation name and some parameter objects.

After using the <Tag>getSignedUrl</Tag> method to upload images to S3 buckets on the server, we are returned a URL as results. We can utilize the URL to perform a PUT request with the image on the React client. This approach enables direct uploading of the image to S3 without passing through the server. Consequently, the approach is more scalable, as it reduces the backend's load and improves processing times.

## Security :

<Li> Users cannot spam our S3 bucket with many files.</Li>
<Li> Users cannot request</Li>
<Li> a URL for one file and then upload a different one. </Li>
<Li> URLs can expire.</Li>
<Li>URLs are generated securely through a request between our server and AWS.</Li>
<Li>URLs can only work for the specific S3 bucket they were created for.</Li>

## implementations :

this is the backend implementation

```javascript
const AWS = require('aws-sdk')

const s3 = new AWS.S3()

AWS.config.update({
  accessKeyId: process.env.AWS_ACCESS_KEY_ID,
  secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY
})

app.post('/upload-image', async (req, res) => {
  const { fileName, fileType } = req.query

  const s3Params = {
    // name_of_your_bucket_here
    Bucket: process.env.S3_BUCKET,
    // define name of the resource in the s3 bucket it’s better to use it like this
    // way resourseName +’/’+ random id better to use UID
    Key: fileName,
    // file type Image/Jpeg...
    ContentType: fileType,
    // expires in 60 seconds
    Expires: 60
  }

  try {
    const signedUrl = await getSignedUrl(s3, s3Params)
    console.log(signedUrl)
    res.json({ signedUrl })
  } catch (err) {
    console.error(err)
    next(err)
  }
})
```

## React Implementation:

Let's consider that you have created a form and are now in the function that will upload an image to your backend.

```javascript
async function uploadImage({ fileName, fileType }) {
  const options = { fileName, fileType }

  const response = await axios.post('/upload-image', options)

  if (response?.url) {
    axios.put(response?.url, file, options)
  }
}
```

### Handling CORS

<Li>S3 Bucket setting</Li>
<Li>Create a DNS compliant bucket name</Li>
<Li>Set default encryption</Li>
<Li>Give appropriate read and write permissions</Li>
<Li>Add the following CORS rules</Li>

```xml
  <?xml version="1.0" encoding="UTF-8"?>
  <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>/ origins allowed to upload image /</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedMethod>HEAD</AllowedMethod>
        <AllowedMethod>DELETE</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
  </CORSConfiguration>

```

<AnchorLink
  href="https://github.com/wassimnassour/Upload-Images-to-S3-buckets-with-React-and-Node-/blob/main/index.js"
  target="_blanc"
  className="text-secondary"
>
  full code
</AnchorLink>


Upload Images to S3 buckets with React and Node in scalable way , using getSignedUrl


The single responsibility principle is created by Robert C. Martin , and the main goal and idea behind it is that every class, module, component, and hook …, should have only one responsibility/purpose, and the reason for making a module or component… have single responsibility will help us in a lot of things

<Li>reduce the number of bugs</Li>
<Li>improve our development experience</Li>
<Li>avoid unexpected bugs</Li>
<Li>writing test will be extremely fast and easy because our code has only one responsibility</Li>
---

if we have a component that renders a list of users I see no reason, that component should hold information about users

as well, when our requirement in a component or hook changes the surface of changes and affected code will be small, opposite if we have conflicted code a component does a lot of things that can lead to some side effects or changes

writing tests will be easy too, and this principle can help us also when writing TDD cuz you wrote a small component that requires less test, also building our component, and hooks independently, and composing them together, Reuse will become an obvious citizen of your systems.

I will write an example of a component that doesn’t use this principle and I will apply it to see the difference and how it can help us

this is our component called Users fetches users from the backend listing all of them and filter

```tsx
import axios from 'axios'
import { useEffect, useMemo, useState } from 'react'

const api = 'https://jsonplaceholder.typicode.com/users'

interface User {
  id: string
  name: string
  username: 'Bret'
  email: string
  address: Object
  phone: string
  website: string
  company: {
    name: string
    catchPhrase: string
    bs: string
  }
}

export function Users() {
  const [users, setUsers] = useState<User[]>([])
  const [searchKeyword, setSearchKeyword] = useState('')

  const fetchProducts = async () => {
    const response = await axios.get(api)
    if (response && response.data) setUsers(response.data)
  }

  useEffect(() => {
    fetchProducts()
  }, [])

  const filterUsers = useMemo(
    () =>
      users.filter((user: User) => user.name.toLowerCase().includes(searchKeyword?.toLowerCase())),
    [users, searchKeyword]
  )

  return (
    <div className="flex flex-col h-full w-full">
      <div className="flex flex-col justify-center items-center">
        <input
          className="border"
          placeholder="search for user"
          onChange={e => setSearchKeyword(e.target.value)}
        />
      </div>
      <div className="h-full flex mt-10  flex-wrap justify-center">
        {filterUsers?.map(user => (
          <div className="max-w-md mr-2 mb-3 p-2 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
            <div className="flex justify-end px-4 pt-4">
              <div
                id="dropdown"
                className="z-10 hidden text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700"
              >
                <ul className="py-2" aria-labelledby="dropdownButton">
                  <li>
                    <a
                      href="#"
                      className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
                    >
                      Edit
                    </a>
                  </li>
                  <li>
                    <a
                      href="#"
                      className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
                    >
                      Export Data
                    </a>
                  </li>
                  <li>
                    <a
                      href="#"
                      className="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
                    >
                      Delete
                    </a>
                  </li>
                </ul>
              </div>
            </div>
            <div className="flex flex-col items-center pb-10">
              <img
                className="w-24 h-24 mb-3 rounded-full shadow-lg"
                src="https://i.pravatar.cc/300"
                alt={user?.id}
              />
              <h5 className="mb-1 text-xl font-medium text-gray-900 dark:text-white">
                {user?.name}
              </h5>
              <span className="text-sm text-gray-500 dark:text-gray-400">
                {user?.company?.name}
              </span>
              <div className="flex mt-4 space-x-3 md:mt-6">
                <a
                  href="#"
                  className="inline-flex items-center px-4 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
                >
                  Add friend
                </a>
                <a
                  href="#"
                  className="inline-flex items-center px-4 py-2 text-sm font-medium text-center text-gray-900 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-700 dark:focus:ring-gray-700"
                >
                  Message
                </a>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}
```

our Users Components have more than one responsibility, fetch users, list users, and search for user, let’s use the SRP principle to clean and organize this code based on the responsibilities

<Img src={'/assets/blog/Single-responsibility-in-react/1.png'} />

this is our code after using the principle, created a Component for listing users and move our fetching from the backend logic to separate hook, do the same with the search separate search logic from the search component

```tsx
import { useState } from 'react'
import { User } from '../types/user'
import { useFetchUsers, useSearchUser } from './hooks'
import { UserCard } from './UserCard'
import { SearchUserComponent } from './SearchUser'

export function Users() {
  const [searchKeyword, setSearchKeyword] = useState('')
  const { users } = useFetchUsers()
  const { filterUsers } = useSearchUser({ searchKeyword, users })

  return (
    <div className="flex flex-col h-full w-full">
      <SearchUserComponent setSearchKeyword={setSearchKeyword} />
      <div className="h-full flex mt-10  flex-wrap justify-center">
        {filterUsers?.map((user: User) => (
          <UserCard user={user} />
        ))}
      </div>
    </div>
  )
}
```

useFetchUsers fetch all users

```tsx
import axios from 'axios'
import { useEffect, useState } from 'react'

import { User } from '../../types/user'

const api = 'https://jsonplaceholder.typicode.com/users'

export const useFetchUsers = () => {
  const [users, setUsers] = useState<User[]>([])

  const fetchProducts = async () => {
    const response = await axios.get(api)
    if (response && response.data) setUsers(response.data)
  }

  useEffect(() => {
    fetchProducts()
  }, [])

  return {
    users
  }
}
```

useFilterUsers hook for search for specific user

```tsx
import { useMemo } from 'react'
import { User } from '../../types/user'

interface Params {
  users: User[]
  searchKeyword: string
}

export const useSearchUser = ({ searchKeyword, users }: Params) => {
  const filterUsers = useMemo(
    () =>
      users.filter((user: User) => user.name.toLowerCase().includes(searchKeyword?.toLowerCase())),
    [users, searchKeyword]
  )

  return {
    filterUsers
  }
}
```

UserCard component display only the user information only

```tsx
import { User } from '../../types/user'

interface Props {
  user: User
}

export const UserCard = ({ user }: Props) => (
  <div className="max-w-md mr-2 mb-3 p-2 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
    <div className="flex justify-end px-4 pt-4">
      <div
        id="dropdown"
        className="z-10 hidden text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700"
      >
        <ul className="py-2" aria-labelledby="dropdownButton">
          <li>
            <a
              href="#"
              className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
            >
              Edit
            </a>
          </li>
          <li>
            <a
              href="#"
              className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
            >
              Export Data
            </a>
          </li>
          <li>
            <a
              href="#"
              className="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
            >
              Delete
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div className="flex flex-col items-center pb-10">
      <img
        className="w-24 h-24 mb-3 rounded-full shadow-lg"
        src="https://i.pravatar.cc/300"
        alt={user?.id}
      />
      <h5 className="mb-1 text-xl font-medium text-gray-900 dark:text-white">{user?.name}</h5>
      <span className="text-sm text-gray-500 dark:text-gray-400">{user?.company?.name}</span>
      <div className="flex mt-4 space-x-3 md:mt-6">
        <a
          href="#"
          className="inline-flex items-center px-4 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
        >
          Add friend
        </a>
        <a
          href="#"
          className="inline-flex items-center px-4 py-2 text-sm font-medium text-center text-gray-900 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-700 dark:focus:ring-gray-700"
        >
          Message
        </a>
      </div>
    </div>
  </div>
)
```

search input component

```tsx
interface Props {
  setSearchKeyword: (keyword: string) => void
}

export const SearchUserComponent = ({ setSearchKeyword }: Props) => (
  <div className="flex flex-col justify-center items-center">
    <input
      className="border"
      placeholder="search for user"
      onChange={e => setSearchKeyword(e.target.value)}
    />
  </div>
)
```

we separate the code based on the responsibility , and this as i said before will be very help full in reading code , finding\bugs quickly write test , also writing TDD with this approach will be easy

<AnchorLink href="https://codesandbox.io/s/srp-article2-fzbuox?file=/src/App.tsx">
  Check the code in the sandbox
</AnchorLink>


WN

Wassim Nassour

Quick intro 👋🏻

Notes

Do you know that React Reconciler uses double buffering

Config PWA in your next app

Boxing in Javascript

Blog

Mapped Types in Typescript

Test routing in nextjs

Upload Images to S3 buckets with React and Node in scalable way , using getSignedUrl

Single responsibility in react

Contact Me!

Created by @Wassim built with @NextJs deployed in @Vercel