DEV Community: Anxiny

Tips for AI-Assisted Web Development.

Anxiny — Tue, 20 Dec 2022 02:34:50 +0000

In this blog, we will examine how we can utilize the latest machine learning (ML) and artificial intelligence (AI) tools, such as CoPilot, and ChatGPT, to reduce the number of keystrokes required for programming and create more robust and reliable code bases for our applications.

By incorporating these advanced technologies into our development process, we can streamline our workflow, minimize the risk of errors, and create smarter, more adaptive software.

This post will explore the use of AI and ML in front-end development using TypeScript as the primary language. And approach may also apply from Non-AI-Assisted development.

And let's start with:

Define types first

By defining types upfront, we can:

Make it easier for AI tools to understand the structure and requirements of a codebase
Defining types can also lead to the generation of more comprehensive and effective test cases.

For example, below are generated code with and without type:

// No User type defined
function updatePaymentInfo(user: {[key: string]: any}, paymentInfo: {[key: string]: any}) {
  for (const key in paymentInfo) {
    user[key] = paymentInfo[key];
  }
}

const user = {
  name: 'John Smith',
  paymentNumber: '123456',
  cardExpiry: '01/2022'
};

const paymentInfo = {
  paymentNumber: '654321',
  cardExpiry: '05/2022'
};

updatePaymentInfo(user, paymentInfo);
console.log(user);

If User type is not define, as shown above, AI will try to guess what is in the user object. Instead:

type User = {
  id: number;
  username: string;
  paymentInfo: string;
};

function updatePaymentInfo(user: User, newPaymentInfo: string): void {
  user.paymentInfo = newPaymentInfo;
}

updatePaymentInfo({ id: 1, username: 'johnsmith', paymentInfo: 'abc123' }, 'def456');

As you can see, by defining the User type, we can clearly specify the structure of the user object that is passed to the updatePaymentInfo function so AI don't have to guess the data type, and make life easier when you need to refer the data type later on.

Also, it can save lots of effort to tell AI how to implement the function. With type defined we can simply tell the AI that "Write me a function to update the User's paymentInfo". Instead of doing:

"Write me a function to update the user's payment info"
[AI generated a function with wrong fields]
"Write me a function to update the user's payment info, the user object is contains ..., and payment info is a string."
[AI generated a function that is missing the ...]

In short, making AI understand your idea is much difficult than your co-workers, so just be more specific on your request will be very helpful to get the correct result.

Simple process for each function

This point should be very obvious since it is also the general rule for programming. But we should take an extra effort here to make tasks simple for AI to able to understand the task.

Here are a few tips for making tasks simple for AI:

Break tasks down into even smaller, more manageable chunks.
Use clear, concise naming conventions: Choose descriptive and meaningful names for variables, functions, and other code elements. It is okay to have long name, especially you are not the one to type it.
Document your code: Adding comments and documentation to your code can help to make it more clear and understandable - not just for AI, but also for you and your teammates!

These tips will make it easier for AI to understand the purpose of each element and how it fits into the overall task. Again, saving your time to correct the code.

Implement utilities first

Similar to the type, having a well-defined and implemented(Can be done by AI as well) functions can also help AI to understand what and how to generate the code to modify the data.

Glue your code by steps

For each implementation, with all your well-defined types and utilities, you should able to simply ask AI to implement your business logic in steps that can generate code like:

"Write a paymentHandler that will:"
"get user from the payment request"
"get payment amount from payment request."
"..."

function async paymentHandler(req:PaymentRequest, res:PaymentResponse){
  try {
    const user: User = getUserIdFromPaymentRequest(req);
    const paymentAmount = getPaymentAmountFromPaymentRequest(req);
    const shippingMethod = getShippingMethodFromPaymentRequest(req);
    const transactionId  = await processPayment(user, paymentAmount);
    const shippingId = await processShipping(transactionId);

    res.send(confirmationMessage(transactionId, shippingId));
  }catch(e){
    res.send(generateErrorMessage(e))
  }

In this way, it not only easy for AI the generate the code, but also make human debugging less difficult.

Ask AI to review the code

Just as how we human does, you should also ask your AI tool to review the code before send for human review, as it can catch the obvious problem early, so you can have less back-forward with your teammate.

Summary

In conclusion, the use of AI in software development can greatly enhance the efficiency and reliability of our code bases. As developer, we should quickly understand and adapt the new tool that is available and boost our productivity with the practice fit for the solutions.

Hope these tips can help you achieve more by doing less!

Simple React Global State Management

Anxiny — Tue, 27 Sep 2022 00:33:01 +0000

Hi everyone!

I recently created my own solution for managing global state in my web app. It's working well so far, but I'm open to feedback and suggestions. I'm curious to know if there are any potential issues with my implementation, or if there are better ways to manage global state.

Thank you in advance for any input you might have!

import { useState, Dispatch, SetStateAction, useEffect, useId } from "react";

type Setter<T> = Dispatch<SetStateAction<T>> | ((value: T) => void)

/**
 * Create a pod with default value
 * @param value 
 * @returns usePod, value, updater
 */
export function createPod<T>(value: T) {
    const pod = {
        value: value
    };

    const setters: { [key in string]: Setter<T> } = {};

    const updater = (value: T) => {
        pod.value = value;
        for (let key in setters) {
            if (!setters.hasOwnProperty(key)) return;
            setters[key](value);
        }
    }

    const usePod = () => {
        const [value, setValue] = useState(pod.value);
        const key = useId()
        useEffect(() => {
            setters[key] = setValue;
            return () => {
                delete setters[key];
            }
        }, [])

        return [value, updater] as const
    }
    return [usePod, pod.value, updater] as const;
}

Custom React Hook - useIntersection with Intersection Observer

Anxiny — Sat, 05 Feb 2022 19:41:38 +0000

This hook is an updated version from my previous Post

interface IntersectionHookInit extends IntersectionObserverInit {
// In case I want to add something
}

type OnIntersection = (isIntersecting: boolean, ob: IntersectionObserver) => boolean | void;

const DefaultOptions: IntersectionHookInit = {
    root: null,
    threshold: 0,
}

// Most of time we only need ob until intersecting, so return false here to disconnect ob. 
const DefaultOnIntersection: OnIntersection = (isIntersecting, ob) => {
    if (isIntersecting) return false;
}

export function useIntersection(onIntersection: OnIntersection = DefaultOnIntersection, options: IntersectionHookInit = DefaultOptions) {
    const [isIntersecting, setIsIntersecting] = useState(false);
    const elemRef = useRef<null | Element| undefined>(null);
    const setElem = (elem:any) => {
        elemRef.current = elem;
    }

    useEffect(() => {
        if (!elemRef.current) return;
        let isUnmounted = false;
        const ob = new IntersectionObserver(([entry]) => {
            if (isUnmounted) return;
            const isElementIntersecting = entry.isIntersecting;
            if (onIntersection(isElementIntersecting, ob) === false) {
                ob.disconnect();
            };
            setIsIntersecting(isElementIntersecting)

        }, { ...options })
        ob.observe(elemRef.current);
        return () => {
            ob.disconnect();
            isUnmounted = true;
        }
    }, [elemRef.current, options]);

    return [isIntersecting, setElem] as const;
}

Usage:

export function LazyLoad(props) {
    const [isIntersecting, ref] = useIntersection();
    return (
        <div ref={ref}>
            {isIntersecting ? props.children : null}
        </div>
    )
}

Thanks for reading!

A Clean Way to Conditionally Render Components

Anxiny — Sun, 16 Jan 2022 00:03:24 +0000

Today, I want to share a clean way to conditionally render child components while using React. It's very simple.

Live Demo:
https://codesandbox.io/s/if-component-demo-9iipl?file=/src/App.js

Before

function App(){
  // ...
  return <div>
      {someCondition?
      <SomeChildA>
        <div>Some Contents</div>
        <div>Some Contents</div>
        <div>Some Contents</div>
      </SomeChildA>
      : 
      <SomeChildB>
        <div>Some Contents</div>
        <div>Some Contents</div>
        <div>Some Contents</div>
      </SomeChildB>}
    </div>
}

After

function App(){
  // ...
  return <div>
      <If condition={someCondition}>
        <SomeChildA>
          <div>Some Contents</div>
          <div>Some Contents</div>
          <div>Some Contents</div>
        </SomeChildA>
      </If>
      <If condition={!someCondition}>
        <SomeChildB>
          <div>Some Contents</div>
          <div>Some Contents</div>
          <If condition={someOtherCondition}>
            <NestExample/>
          </If>
          <div>Some Contents</div>
        </SomeChildB>
      </If>
    </div>
}

<If/> Component

function If(props) {
    return props.condition ? <>{props.children}</> : null;
}

Thanks for reading! Have a nice day!

We made a website to easily share links between our devices.

Anxiny — Sat, 15 Jan 2022 23:31:25 +0000

My partner and I made a website to make us easily share links between our devices.

https://www.linkshared.io/

Backstory

Many times when we found something interesting and wanted to share a link from one's phone or laptop to her desktop so we can both watch it on the big screen, we had to send the link by email, or sent to her phone via some app and she had to copy the link from her phone to the PC, Or we have to download some apps, etc.. The process was really annoying.

Therefore, we decided to make a website that can allow people share link by simply visit our webpage.

How it works:

This webpage will hold the shared link for 2 minutes, for now, and people can share the link via a share code so other people can access the shared text.

Steps are very simple:

Share your text on the website.
Use the share code to get your text on other devices. If the text contains a URL, website will detect it and extract the link for you.

How we made it & Costs

We used NextJS to implement both the frontend and backend API.
We opened a free Redislabs account so we can host our cache.
We used the free hosting service provide by Vercel.
We brought a domain name on Vercel for $70/yr.

Why a two minutes limit?

We don't want to make a cloud storage.
We don't want to pay for a cloud storage.
In most use cases, this webpage just works like clipboard, so no long term storage is needed.
We don't want to pay for a cloud storage.

Why don't just use a chat app?

We're using WeChat, their desktop version login is annoying.
We don't like to download unnecessary apps in our phones and PCs, and people are using different apps, so a website can avoid installing unwanted apps.

We really hate the trend that everything needs an app to use nowadays.

Thank you!

Please feel free to leave your comment!

Steps to create a React Typescript library

Anxiny — Tue, 30 Nov 2021 00:46:53 +0000

Introduction

This post will help you to publish your own react library to npm, so you can reuse your own component and functions.

This post is intended for people who just want to follow the steps without understand the details.

Before start, You will need to have NPM, Typescript and other common dev dependencies installed

Steps

First, create tsconfig.json file at your project root:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "declaration": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react",
    "outDir": "lib/esm",
  },
  "include": [
    "src"
  ],
  "exclude": ["node_modules", "lib"]
}

then run npm init, and modify package.json flie:

...
  "main": "./lib/cjs/index.js",
  "module": "./lib/esm/index.js",
  "types": "./lib/esm/index.d.ts",
  "files": [
    "src"
  ],
  "scripts": {
    "build": "npm run build:esm && npm run build:cjs",
    "build:esm": "tsc",
    "build:cjs": "tsc --module commonjs --outDir lib/cjs",
    "publish": "npm publish"
  },
...
  "peerDependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@types/node": "16.11.10",
    "@types/react": "^17.0.37"
  },
  "dependencies": {
    "@types/react-dom": "^17.0.11"
  }
...
}

Add .gitignore file if you are using git:

# dependencies
/node_modules

Create src folder and src/index.tsx file:

import React from "react";

export function CheckLib(){
    return <div>Lib Ok</div>
}

Then run npm run build to create the build folder.

Run npm publish to publish your package.

Finally, you can use npm install <your-package-name> to install your library in other project.

You may need to run npm login to login your npm account if you never logged in before.

Run Local Version of Library

If you want to have a playground of your library or just want to use it.

Run npm link at your library root.
In your other project root run npm link "You-Library-Name-Here".
After this, you should be able to find your library inside the node_modules folder.

Notice

I tested this method with a project created by create-next-app. I assume this will work CRA as well.
If you find your project does not run your library, you may need to explore some more complex methods.
I'm using Windows for this method, if you're using Mac or other OS you may want to change build script to work with your CLI environment.

Thanks

Create a Slideshow With React

Anxiny — Thu, 01 Jul 2021 20:08:07 +0000

Let's create a simple slideshow component today. It's easy and only take few steps to achieve.
Here is a demo and source code.

In order to create a slideshow, we need to have two components:

The container that holds contents.
The individual slide.

Container

For a slideshow, we need a container that can:

contain all slides.
hide slides that outside viewport of the container.
sent a signal that tells slides to move in.
sent a signal that tells slides to move out.
track which slide should be shown.

First, let's create a basic container with style:

export function Slideshow({ children, className, style }) {
  return (
      <div
        style={{
          height: "600px",
          width: "600px",
          position: "relative",
          overflow: "hidden"
        }}
      >
        {children}
      </div>
  );
}

Second, let's add a context that will track activated slide and a timer:

const SlideshowContext = createContext();

export function Slideshow({ children, className, style }) {
  const [context, setContext] = useState({
    items: [],
    edge: false
  });
  const timer = useRef(null);

  useEffect(() => {
    if (timer.current) clearTimeout(timer.current);
    timer.current = setTimeout(() => {
      // Move deactivated slide out when edge is false
      // Move activated slide in when edge is true
      if (context.items.length > 1 && context.edge) {
        const head = context.items.shift();
        context.items.push(head);
      }
      context.edge = !context.edge;
      setContext({ ...context });
    }, 2500);

    return () => clearTimeout(timer.current);
  });

  console.log(context.items);

  return (
    <SlideshowContext.Provider value={[context, setContext]}>
      <div
        style={{
          height: "600px",
          width: "600px",
          position: "relative",
          overflow: "hidden"
        }}
      >
        {children}
      </div>
    </SlideshowContext.Provider>
  );
}

And that's all for the container.

Slide

The slide will have at least three stages:

on stage - slide is in viewport and has highest z-index.
off stage - slide is in viewport and has lowest z-index
ready for stage - slide is moved out from viewport, and it's waiting at ready position.

The reason we don't move out the slide at "off stage", is because, for this slideshow, we want to move "off" slide after the "on" slide completely cover the "off" one.

Slide will update it's stage when received signal from the container, so it will like:

slide at ready position.
when signal come and the slide is activated, moved to viewport.
when signal come and the current slide is not the activated one, lower the z-index.
when next signal come, move to ready position.

So, we can have something like this:

export function SlideshowItem({ children }) {
  const name = useRef(`${performance.now()}_${Math.random()}`);
// Generate a name for this slide.
  const [context] = useContext(SlideshowContext);
  const [stage, setStage] = useState("ready");

  useEffect(() => {
    // register self with the name.
    context.items.push(name.current);
    return () => {
      // Remove the name when slide is removed.
      const index = context.items.indexOf(name.current);
      context.items.splice(index, 1);
    };
  }, []);

  useEffect(() => {
    const activeName = context.items[0];
    if (activeName === name.current) {
      setStage("on");
    }
    if (activeName !== name.current && stage === "on") {
      setStage("off");
    }
    if (activeName !== name.current && stage === "off") {
      setStage("ready");
    }
  }, [context]);

  let left = 0;
  let zIndex = 0;
  switch (stage) {
    case "ready":
      left = "100%";
      break;
    case "on":
      left = "0";
      zIndex = 1;
      break;
    case "off":
      zIndex = 0;
      break;
    default:
  }

  return (
    <div
      style={{
        transition: "0.5s",
        position: "absolute",
        top: 0,
        left: left,
        zIndex: zIndex
      }}
    >
      {children}
    </div>
  );
}

And now, we have a simple Slideshow.
Thanks all!

Create an Image Magnifier with React

Anxiny — Sun, 02 May 2021 20:53:39 +0000

Today, let's create a simple image magnifier component.

First, let's create the basic structure of the component.

function ImageMagnifier({
  src,
  width,
  height,
  magnifierHeight = 100,
  magnifieWidth = 100,
  zoomLevel = 1.5
}: {
  src: string;
  width?: string;
  height?: string;
  magnifierHeight?: number;
  magnifieWidth?: number;
  zoomLevel?: number;
}) {
  return (
    // the container
    <div
      style={{
        position: "relative",
        height: height,
        width: width
      }}
    >
      // the image
      <img
        src={src}
        style={{ height: height, width: width }}
        alt={"img"}
      />

      // a div for the magnifier
      <div></div>
    </div>
  );
}

Then, we need to add a state that controll the display of magnifier

 const [showMagnifier, setShowMagnifier] = useState(false);

and, the event handler that update the state.

...
    <img
        src={src}
        style={{ height: height, width: width }}
        onMouseEnter={(e) => {
          setShowMagnifier(true);
        }}
        onMouseLeave={() => {
          setShowMagnifier(false);
        }}
        alt={"img"}
      />

...

Now, we need to add a state that holds x, y position of magnifier, and update it when mouse move hover the image.

...
const [[x, y], setXY] = useState([0, 0]);
...
<img
    ...
    onMouseMove={(e) => {
          // update cursor position
          const elem = e.currentTarget;
          const { top, left } = elem.getBoundingClientRect();

          // calculate cursor position on the image
          const x = e.pageX - left - window.pageXOffset;
          const y = e.pageY - top - window.pageYOffset;
          setXY([x, y]);
    }}
    ...
/>

The pageX/Y coordinates are relative to the left/top corner of current page.
The pageXOffset/pageYOffset are the scroll offsets of the page.
The left/top are the coordinates of the image left/top position.

const x = e.pageX - left - window.pageXOffset;
const y = e.pageY - top - window.pageYOffset;

These two calculations will give us the cursor's x/y coordinates based on the image.

In order to calculate the position of the magnifier, we also need to have the size of image in pixels, so let's update it when mouse is entering the image.

<img
    ...
    onMouseEnter={(e) => {
          // update image size and turn-on magnifier
          const elem = e.currentTarget;
          const { width, height } = elem.getBoundingClientRect();
          setSize([width, height]);
          setShowMagnifier(true);
    }}
    ...
/>

Now, we can add the position and other basic styles to the magnifier.

<div
    style={{
        display: showMagnifier ? "" : "none",
         position: "absolute",

        // prevent magnifier blocks the mousemove event of img
        pointerEvents: "none",
        // set size of magnifier
        height: `${magnifierHeight}px`,
        width: `${magnifieWidth}px`,
        // move element center to cursor pos
        top: `${y - magnifierHeight / 2}px`,
        left: `${x - magnifieWidth / 2}px`,
        opacity: "1", // reduce opacity so you can verify position
        border: "1px solid lightgray", // show the border of magnifier
        backgroundColor: "white",
        backgroundImage: `url('${src}')`,
        backgroundRepeat: "no-repeat",
    }}
/>

Then, we need to zoom the image inside the magnifier.

    ...
    //calculate zoomed image size
    backgroundSize: `${imgWidth * zoomLevel}px ${imgHeight * zoomLevel}px`,
    ...

Also, we need to center the image in the magnifier base on cursor position on the image.

    ...
    //calculate position of zoomed image.
    backgroundPositionX: `${-x * zoomLevel + magnifieWidth / 2}px`,
    backgroundPositionY: `${-y * zoomLevel + magnifierHeight / 2}px`
    ...

We done it. Here is the full code and a demo:

function ImageMagnifier({
  src,
  width,
  height,
  magnifierHeight = 100,
  magnifieWidth = 100,
  zoomLevel = 1.5
}: {
  src: string;
  width?: string;
  height?: string;
  magnifierHeight?: number;
  magnifieWidth?: number;
  zoomLevel?: number;
}) {
  const [[x, y], setXY] = useState([0, 0]);
  const [[imgWidth, imgHeight], setSize] = useState([0, 0]);
  const [showMagnifier, setShowMagnifier] = useState(false);
  return (
    <div
      style={{
        position: "relative",
        height: height,
        width: width
      }}
    >
      <img
        src={src}
        style={{ height: height, width: width }}
        onMouseEnter={(e) => {
          // update image size and turn-on magnifier
          const elem = e.currentTarget;
          const { width, height } = elem.getBoundingClientRect();
          setSize([width, height]);
          setShowMagnifier(true);
        }}
        onMouseMove={(e) => {
          // update cursor position
          const elem = e.currentTarget;
          const { top, left } = elem.getBoundingClientRect();

          // calculate cursor position on the image
          const x = e.pageX - left - window.pageXOffset;
          const y = e.pageY - top - window.pageYOffset;
          setXY([x, y]);
        }}
        onMouseLeave={() => {
          // close magnifier
          setShowMagnifier(false);
        }}
        alt={"img"}
      />

      <div
        style={{
          display: showMagnifier ? "" : "none",
          position: "absolute",

          // prevent magnifier blocks the mousemove event of img
          pointerEvents: "none",
          // set size of magnifier
          height: `${magnifierHeight}px`,
          width: `${magnifieWidth}px`,
          // move element center to cursor pos
          top: `${y - magnifierHeight / 2}px`,
          left: `${x - magnifieWidth / 2}px`,
          opacity: "1", // reduce opacity so you can verify position
          border: "1px solid lightgray",
          backgroundColor: "white",
          backgroundImage: `url('${src}')`,
          backgroundRepeat: "no-repeat",

          //calculate zoomed image size
          backgroundSize: `${imgWidth * zoomLevel}px ${
            imgHeight * zoomLevel
          }px`,

          //calculate position of zoomed image.
          backgroundPositionX: `${-x * zoomLevel + magnifieWidth / 2}px`,
          backgroundPositionY: `${-y * zoomLevel + magnifierHeight / 2}px`
        }}
      ></div>
    </div>
  );
}

Thank you all!

Infinite Scroll with React Hook & Intersection Observer

Anxiny — Tue, 27 Apr 2021 00:06:20 +0000

In this post, we going to use the useIntersectionObserver hook that I create in

Article No Longer Available

In short, this hook will check if the target element is in the viewport of a document or window.

Ok, let's start with a component that will load a picture:

function Component({ id }: { id: number }) {
  const [data, setData] = useState<any>({});
  useEffect(() => {
    fetch(`https://jsonplaceholder.typicode.com/photos/${id}`)
      .then((res) => res.json())
      .then((data) => {
        setData(data);
      });
  }, []);
  return (
    <div style={{ height: "600px" }}>
      <img src={data.url} alt="pic" />
    </div>
  );
}

then, we can use it inside the App.js:

const pageSize=5;
export default function App() {
  const [count, setCount] = useState(0);
  return (
    <div className="App">
      {(() => {
        const children = [];
        for (let i = 1; i <= count * pageSize; i++) {
          children.push(<Component key={i} id={i} />);
        }
        return children;
      })()}
    </div>
  );
}

Now, we add the hook, a component that can be used as trigger, and an useEffect that can increase the counter:

const pageSize = 5;
export default function App() {
  const [count, setCount] = useState(0);
  const ref = useRef(null);

  const isBottomVisible = useIntersectionObserver(
    ref,
    {
      threshold: 0 //trigger event as soon as the element is in the viewport.
    },
    false // don't remove the observer after intersected.
  );

  useEffect(() => {
    //load next page when bottom is visible
    isBottomVisible && setCount(count + 1);
  }, [isBottomVisible]);

  return (
    <div className="App">
      {(() => {
        const children = [];
        for (let i = 1; i <= count * pageSize; i++) {
          children.push(<Component key={i} id={i} />);
        }
        return children;
      })()}
      <div ref={ref} style={{ width: "100%", height: "20px" }}>
        Bottom
      </div>
    </div>
  );
}

Now we can test the code, here is a demo:

Thank you all!

A Custom React Hook that handles duplicate API call

Anxiny — Mon, 26 Apr 2021 00:39:44 +0000

Today, we are going to create a custom hook that solve this problem:

We have multiple components that calling same API.
Component may not always be on same page, therefore, they have to call the API by themselves.

Here is a example hook I think can handle this problem:

let isCalling = new Map(); // This can be replace by some global state. I use this for the sake of simplicity.
function useFetch(url) {
  const [data, setData] = useState("");
  useEffect(() => {
    let isThisAPICalling = isCalling.get(url);
    if (!isThisAPICalling) {
      console.log("new");
      isThisAPICalling = fetch(url).then((response) => response.json());
      isCalling.set(url, isThisAPICalling);
      // The body can only be parsed once.
    }
    isThisAPICalling.then((json) => {
      console.log("done");
      console.log(json.title);
      isCalling.delete(url);
      setData(json.title);
    });
  }, []);
  return data;
}

Here is a demo.

Thank you all! Please let me know if you have any suggestion.

Custom React Hook - useObjectState

Anxiny — Sun, 25 Apr 2021 20:49:45 +0000

A custom hook that make things easier with object state.

function useObjectState(defaultValue = {},defaultFieldValue = null) {
  const [obj, setObj] = useState(defaultValue);
  const update = (key, value) => {
    setObj({ ...obj, [key]: value });
  };
  const get = (key, defaultValue=null) => {
    if(!key)return obj;
    return obj[key] ?? defaultValue ?? defaultFieldValue;
  };
  return [get, update, setObj];
}

Example:

function SomeForm({defaultData}){
    const [get,update]=useObjectState(defaultData, '');

    return <form>
            <input value={get('name','John Doe')} onChange={(e)=>update('name',e.target.value)} />
            <input value={get('address')} onChange={(e)=>update('address',e.target.value)} />
            ...
        </form>
}

Thank you all! Please feel free to leave any comments.

A simple way to use Web Worker with React-Create-APP - No eject needed

Anxiny — Sat, 24 Apr 2021 05:24:54 +0000

The problem of using Web Worker with an app that start with create-react-app is that:

create-react-app hide its webpack config from user to modify, if not ejected.
You need to modify webpack config in order to emit worker file.
If ejected, the webpack.config is overwhelming and hard to modify.
worker-loader is not very typescript-friendly.

A Solution

We can generator worker.js by running another webpack thread that only take care worker files. Here are what we need to do:

If you haven't install webpack-cli, you need to install it.

I'm using typescript, so let's install the ts-loader.

Then, add a webpack.config.js file at project root like this:

const path = require('path');
const webpack = require('webpack');

const src = path.resolve(__dirname, './src');
const build = path.resolve(__dirname, './public'); // output worker.js to public folder


const tsLoader = {
  loader: 'ts-loader',
  options: { compilerOptions: { module: 'esnext', noEmit: false } }
}


module.exports = {
  mode: 'none',
  target: "webworker", //Importan! Use webworker target
  entry: './src/worker.ts',
  output: {
    filename: 'worker.js',
    path: build
  },
  resolve: {
    modules: ["node_modules", src],
    extensions: [".js", ".json", ".jsx", ".ts", ".tsx"],
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('development') })
  ],
  module: {
    rules: [
      {
        test: /\.ts?$/,
        use: [tsLoader]
      },

    ]
  }
};

Note, we need to change the following config:

Change output to ./public folder so react-scripts can use it.
The target needs to be webworker.
Add compilerOptions: {..., noEmit: false, ...} to ts-loader options. This will overwrite the noEmit:true in the tsconfig.json that created by create-react-app.

then, add a npm script to package.json and run it:

...
 "worker": "webpack --watch",
...

And, in you app:

const worker = new Worker('worker.js');

Now, start your react app and enjoy your worker.

PS:

I know this solution is not the best one, if you have any other suggestion, please leave a comment and let me know. Thanks!