DEV Community: Michele

Easily fetch data: react-api-hook

Michele — Fri, 30 Apr 2021 21:22:02 +0000

When developing a complex web app with React, the best thing is modularise and break up the code in smaller components, hooks or functions.
So our code will be easier to maintain during the time, and it is more readable.

While reading this blog post, I understood how the usually fetch handling with:


import React, { useState } from 'react'

const ComponentWithFetch = () => {
    const [data, setData] = useState();
    const [isLoading, setIsLoading] = useState();

    const fetchTheData = () => {
        setIsLoading(true);
        //handle the fetch
    };

    return (
        <button
            onClick={fetchTheData}
            disabled={isLoading}
        >
            Start
        </button>
    );
};

export default ComponentWithFetch;

Is basically wrong, because is detached from the logic, and this is not good.

So, I decided to make a package, to make this easier, and simply integrate in a project, declaring the hook in the component and passing the datas as parameters.

All the states of the fetch will be executed separately, in an independent logic, handled by useReducer.

It is also possible to cancel the request and the state will update with inAbort and then canceled

To install the package:

Go to the root of your React Project and, on the terminal, write:

npm i react-api-hook

How to use the package

Now, you can use the package in any component:

import React,  {  useEffect  }  from  "react";
import useAPIHook from  "react-api-hook";

function  App()  {
    const  [state,  send,  cancel]  =  useAPIHook(
        "https://jsonplaceholder.typicode.com/posts",
        {  method:  "GET"  },
    );

    useEffect(()  =>  {
        if (status.status  ===  "success") {
            console.log(status.data);
            //status.data.json() for the body of response  
        }
        if(status.status  ===  "failure") {
            console.log(status.error);
        }
    }, [status]);

    return (
        <div  className="App">
            <header  className="App-header">
                <div>{status.state}</div>
                <div>
                    <button  onClick={send}>start fetching</button>
                    <button  onClick={cancel}>stop fetching</button>
                </div>
            </header>
        </div>
    );
}

export  default  App;

You will see in the console the response and, on the screen, the status of the request.

Thanks for reading! I'm open to any pull request or suggestions in the comment!

Package link

Custom complex React Context and TypeScript

Michele — Wed, 28 Apr 2021 18:10:36 +0000

One of the fundamental aspects when developing a website, an application or simply a program, is the use of components that are as reusable as possible, as the DRY (Don't repeat yourself!) rule explains.

When developing a web app, especially if it is very complex, it is very important to follow this approach, in order to be able to maintain all the components and functions in a much simpler way.
In this article, we're going to see how React Context can help us in sharing values in all the children of the context and how to create custom and more complex ones (with hooks, reducers, memoization). In addition, we will also add strong TypesScript support.

Summary

Create the project
Add types
Create the custom provider
Create the custom hook
Implement the provider
Handle the logic
Dispatch the values
Epilogue

Create the project

First, let's create the project, through CRA:

npx create-react-app example --template typescript

And then in /src/contexts (create if doesn't exists) we create userContext.tsx:

import React, { useContext, createContext, useMemo, useReducer } from "react";

const UserContext = createContext();

export default UserContext;

Add types

Next, we add the types of both the context and the reducers:

interface ContextInterface {
  id?: string;
}

interface ActionInterface {
  type: setUser
  payload: ContextInterface;
}

type DispatchInterface = (action: ActionInterface) => void;

And then we add these interfaces to UserContext:

const UserContext = createContext<
  | {
      state: ContextInterface;
      dispatch: DispatchInterface;
    }
  | undefined
>(undefined);

We give it an initial value of undefined, so that later, when we create the provider, we'll pass the reducer to it.

Create the custom provider

But first, we're going to create the reducer:

const reducerUser = (
  state: ContextInterface,
  action: ActionInterface
): ContextInterface => {
  switch (action.type) {
    case "setUser":
      return { ...state, id: action.payload.id };
    default:
      throw new Error("Invalid action type in context.");
  }
};

Let's now create the custom provider of the userContext and also declare the reducer, which we will pass as a value to the provider:

const UserProvider: React.FC = ({ children }) => {
  const [state, dispatch] = useReducer(reducerUser, {});

  const memoizedUser = useMemo(() => ({ state, dispatch }), [state, dispatch]);

  return (
    <UserContext.Provider value={memoizedUser}>{children}</UserContext.Provider>.
  );
};

In case our context is very complex and the value needs to be updated often, I suggest to use useMemo, so React won't do any re-rendering in case the value is equal to the previous one.
In case the context is very simple (like in this case), it's not essential to do this, on the contrary, using useMemo when you don't need it, leads to lower performance. It is shown here as an example only.

Create the custom hook

Now, let's create our custom hook that will allow us to fetch the id of the user from the children of the context.

const useUser = () => {
  const user = useContext(UserContext);

  return user;
};

So, user, will contain state and dispatch, with which we're going to display and update the user id.

And finally, we export everything:

export { UserProvider, useUser };

Implement the provider

Let's move to App.tsx and implement what we just created. Let's wrap everything inside our context:

import React from react;

import { Dashboard, UserProvider } from "./index.d";

const App: React.FC = () => {
  return (
    <UserProvider>
      <Dashboard />
    </UserProvider>
  );
};

export default App;

Handle the logic

In Dashboard.tsx, we will import the useUser hook created earlier and with that we will check the id. If it isn't undefined, then, it will show the login.
Otherwise, it will show a simple dashboard that shows the user the user id:

import React from react;
import { useUser, Login } from "../index.d";

const Dashboard: React.FC = () => {
  const userContext = useUser();

  if (!userContext!.state.id) return <Login />;

  return (
    <div>
      <h2>Dashboard</h2>>

      <p>
        User logged with <em>id</em>: <strong>{userContext!.state.id}</strong>
      </p>
    </div>
  );
};

As soon as we open the page, the id will obviously be undefined, because no one logged in.
So, we'll be shown the login page (in Login.tsx):

import React, { useState } from react;
import { useUser } from "../index.d";

const Login: React.FC = () => {
  const [username, setUsername] = useState<string>("");
  const [password, setPassword] = useState<string>("");

  const handleLogin = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    loginTheUser().then((id) => {});
  };

  return (
    <div>
      <div>
        <h1>Login</h1>.
        <form onSubmit={handleLogin}>
          <div>
            <input
              id="user"
              type="text"
              value={username}
              placeholder="Username"
              onChange={(e) => setUsername(e.target.value)}
            />
          </div>
          <div>
            <input
              type="password"
              id="password"
              value={password}
              placeholder="Password"
              onChange={(e) => setPassword(e.target.value)}
            />
          </div>
          <button type="submit">sign in</button>
        </form>
      </div>
    </div>
  );
};

export default Login;

Dispatch the values

To make the context work, however, you must import the custom hook:

const handleUserContext = useUser();

And finally, we add the dispatch call that updates our state:

const handleLogin = () => {
    loginTheUser().then((id) =>
      handleUserContext!.dispatch({ type: "setUser", payload: { id: id } })
    );
  };

Ok, now, after logging in, the message we wrote will appear.
It seems to be working, perfect! But what if you want to pass it between multiple components? Do you have to pass it as a prop in the children?

No, otherwise the point of Context would be lost. To display or update the id, just call the hook from a UserContext child and use the state and dispatch variables to update it.
Simple, isn't it?

Epilogue

Now, before we wrap it up, we can install styled-components and add some simple (and ugly) CSS to our project and, to see it finished, I refer you to the repo on Github.

This here is just a basic example, but it can come in very handy when developing complex web apps, where there are some data that need to be passed in all children (such as authentication, or global settings, like dark mode).

Thanks for reading this article! If you encountered any errors or if you want to add something, leave a comment!

Github repo.

First approach to mobile design

Michele — Wed, 30 Dec 2020 23:11:59 +0000

Some months ago, as a developer, I got caught by designing systems and guidelines, because in all my projects I always tried to have, in the end, a well cared graphic. But I always had bad results, and when I built some mobile apps or website, I always used frontend framework (such as Bootstrap) or pre-built components (I use React Native) to have some sufficient result.

So, I decided to start studying a bit deeper how design is chosen and made, when starting building an application.

During Black Friday I bought a course that focuses only on design from the point-of-view of developers.

After some episode of the course I decided to start dive in this "world" and so I downloaded Figma and started a new project.

I started from scratch, with a blank page so I had no idea of what to design.

I was with zero inspiration and a lot of will to start, so I opened Dribbble and I started searching for some design ideas.

Then finally I understood that if I would continue searching the "perfect idea", I would never start and inspiration comes by doing, also.

So, in the end, I decided to create the template of an eBooks app. I created a simple wireframe of the main screen and then I decided to create the templates of the Main Screen and Product Screen.

Here's my results.

I wanted to share this to receive some feedbacks about this, especially if there is someone that know this arguments and some design techniques or if something is wrong (such as colors or fonts). I'm still a newbie about this argument and I have a lot to learn, so any feedback will be appreciated!

Also, for the next future another challenge for me is to port to React Native code this template, after adjusting something, because could be very useful for learning new styles techniques.