Forem: Selva kumar

Android Release and Publishing to Google Play Store

Selva kumar — Wed, 19 May 2021 06:20:56 +0000

Preparing React Native App for Android Release on Mac
When your React Native Application is ready for release to the Android Platform, you need to perform the following steps to create the .aab file or Android App Bundle which contains your compiled code and resources and you can upload to the Play Store. The APK generation and signing is done by Google Play.

Generating an upload key

Open Terminal and check the Java Home Path:

/usr/libexec/java_home

cd to the path displayed as shown in the image.

Run the keytool command as shown using sudo to generate the keystore and alias as shown below:

sudo keytool -genkey -v -keystore some-helper-key.keystore -alias some-helper-key-alias -keyalg RSA -keysize 2048 -validity 10000

As shown in the screenshot, answer the questions that pop and your Keystore will be generated under the Java Home folder.

Copy that Keystore file and paste it in your Android folder under app in your React Native Project.

Modify the android/gradle.properties file and add:

MYAPP_UPLOAD_STORE_FILE=some-helper-key.keystore
MYAPP_UPLOAD_KEY_ALIAS=some-helper-key-alias
MYAPP_UPLOAD_STORE_PASSWORD=***
MYAPP_UPLOAD_KEY_PASSWORD=***

You might not want to store the passwords directly in the above configuration and store them in the keychain Access App, then the last 2 password configs are not required.

Add the Release signingconfig section to the android/app/build.gradle file:

signingConfigs {
        debug {
            .....
        }
        release {
            if (project.hasProperty('MYAPP_UPLOAD_STORE_FILE')) {
                storeFile file(MYAPP_UPLOAD_STORE_FILE)
                storePassword MYAPP_UPLOAD_STORE_PASSWORD
                keyAlias MYAPP_UPLOAD_KEY_ALIAS
                keyPassword MYAPP_UPLOAD_KEY_PASSWORD
            }
        }
    }

cd to the Android folder and run:

./brew gradlew bundleRelease

The .aab file is generated as: android/app/build/outputs/bundle/release/app-release.aab

Now, this is ready to be uploaded to the Play Store.

Issues Faced:

Resource and asset merger: Duplicate resources

The above error occurred for files under drawable folder, app.json, node_modules_reactnativevectoricons_glyphmaps_materialcommunityicons.json, etc.

Go to android/app/src/main/res and delete all the directories starting withdrawable and the above-mentioned .json files. Do not delete the raw folder if it contains any resources.

If you want to directly test the Release version on your device, run the following command under the Root folder of the Project:

react-native run-android --variant=release

You can install the bundle tool on Mac:

brew install bundle tool
To extract the APK directly from the .aab file, run the following commands:

bundletool build-apks --bundle=/MyApp/my_app.aab --output=/MyApp/my_app.apks

If you want to test it on a device, then also include the App signing information:

bundletool build-apks --bundle=/MyApp/apprelease.aab --output=/MyApp/my_app.apks
--ks=/MyApp/keystore.jks
--ks-pass=pass:***
--ks-key-alias=MyKeyAlias
--key-pass=pass:***

Please note that the .aab file should not contain hyphens else it’ll give a file not found error.

If you want to generate a single Universal apks file, run the below command. Copy the .aab and .keystore files to the folder from where you’ll run bundle tool using terminal:

bundletool build-apks --bundle=MyApp.aab --output=MyApp.apks --mode=universal --ks=my-key.keystore --ks-pass=pass:**** --ks-key-alias=my-key-alias --key-pass=pass:****

Change the extension .apks to .zip and extract the universal.apk file. You can rename this file and transfer it to your Android device for installation.

You can also install the .apks directly to your connected device using the bundle tool:

bundletool install-apks --apks=MyApp.apks

Build Real-World React Native App setups, issues faced, and tips

Selva kumar — Wed, 28 Apr 2021 04:18:53 +0000

This blog post is about will give you complete knowledge about how to start with react-native using typescript.

Keep in mind that if you get stuck on any step, refer to the https://reactnative.dev/docs/getting-started

Creating the Project

Using the React Native CLI we can generate the project with TypeScript pre-installed.

react-native init myapp --template typescript && node myapp/setup.js && cd myapp

NPX is a package runner for NPM, and it’s available since NPM 5.2. With NPX there’s no need to install the ‘react-native-cli’ package globally just to initialize our project.

The ‘ — template react-native-template-typescript’ parameter will use the Typescript template to create the project. I always use Typescript for static type checking, it will make things more developer-friendly and less prone to errors.

The ‘ — npm’ parameter will make the project use NPM instead of Yarn to install initial dependencies.

Setting Up TSLint

Next, we want to set up linting. I like a combination of three rules:

tslint-eslint-rules
tslint-react
tslint-config-prettier

You can check out what the respective configuration does by clicking on it. Let’s install these rules together with TSLint now.

npm install --save-dev tslint tslint-eslint-rules tslint-react tslint-config-prettier

Consequently, we want to set up a tslint.json file. In it, you can fine-tune your linting configuration (below you'll see my personal preference).

You might also want to change the lib key in your tsconfig.json from ["es6"] to ["es2017"] to have access to newer syntax such as Object.value.

If your editor supports TSLint integration, it should already complain about the empty Props interface in App.tsx¹. If your editor does not, add the following value to your scripts key in your package.json:

"lint": "tslint --project tsconfig.json"

Now you can lint using your terminal.

npm run lint

If you set up everything correctly, this will yell at you about the empty interface in App.js.

Initial directory and file changes

I like to move all of the project javascript source files to an ‘src’ directory to keep the project root nice and tidy. Then I move the ‘App.tsx’ file from the project root to the ‘src’ directory. Finally, because we’re using Typescript in the project, I rename the ‘index.js’ file to ‘index.ts’.

React Event Handlers with TypeScript

The React event system is a wrapper around the browser’s native event system. TypeScript types for this event system are available in the @types/react npm package. These types can be used to strongly-type event parameters. Some of the common ones are:

ChangeEvent
KeyboardEvent
MouseEvent
FormEvent

These types are all derived from SyntheticEvent.

Sample Examples

update = (e: React.SyntheticEvent): void => {
    let target = e.target as HTMLInputElement;
    this.props.login[target.name] = target.value;
}

// Also for events instead of React.SyntheticEvent, you can also type
// them as following: Event, MouseEvent, KeyboardEvent...etc,
// depends on the use case of the handler.
update = (e: React.FormEvent<EventTarget>): void => {
    let target = e.target as HTMLInputElement;
    this.props.login[target.name] = target.value;
}

function update(e: React.ChangeEvent<HTMLInputElement>) {
    this.props.login[target.name] = e.target.value;
  }

I have the following in a types.ts file for html input, select, and textarea globally:

export type InputChangeEventHandler = React.ChangeEventHandler<HTMLInputElement>
export type TextareaChangeEventHandler = React.ChangeEventHandler<HTMLTextAreaElement>
export type SelectChangeEventHandler = React.ChangeEventHandler<HTMLSelectElement>

Then import them:

import { InputChangeEventHandler } from '../types'

Then use them:

const updateName: InputChangeEventHandler = (event) => {
  // Do something with `event.currentTarget.value`
}
const updateBio: TextareaChangeEventHandler = (event) => {
  // Do something with `event.currentTarget.value`
}
const updateSize: SelectChangeEventHandler = (event) => {
  // Do something with `event.currentTarget.value`
}

hen apply the functions on your markup (replacing ... with other necessary props):

<input onChange={updateName} ... />
<textarea onChange={updateName} ... />
<select onChange={updateSize} ... >
  // ...
</select>

for update: event: React.ChangeEvent for submit: event: React.FormEvent for click: event: React.MouseEvent.

Events Calls

onClick - An onClick event occurs when a user clicks on an element.
onChange - onChange events happen when the value inside of an element is changed.
onBlur - onBlur event happens when an element loses focus.

React-native clean gradle cache

#Win
cd android && gradlew clean && cd .. && react-native run-android

#osX
cd android && bash gradlew clean && cd .. && react-native run-android --variant=release

Execution failed for task ':react-native-gesture-handler:compileDebugJavaWithJavac:

Method 1

Click in react-native-gesture-handler project on android studio
Click in Refactor on top
Click Migrate to AndroidX.

Method 2

// 1.- Add jetifier as dev dependency
yarn install jetifier --dev

// 2.- Add a task in package.json inside of "scripts" tag,

"scripts": {
....
"jetify": "npx jetify"
}
// 3.- Run as yarn
yarn jetify

Un Used packages identification

With the wide availability of packages in NPM, we very often tend to add plenty of packages. With time, and due to poor management of code, the dependency tree grows and adds extra weight to the bundle.

Identifying and removing unused dependencies manually would be a hideous process. Thankfully, we have yet another package available in NPM to identify the unused dependencies in our package.json file.

Depcheck:

Depcheck analyses package.json to output: how each dependency is used, all the redundant dependencies, and the missing dependencies.
The process is pretty simple. All you have to do is the usual:

npm install -g depcheck

How to use it

depcheck [directory] [arguments]

The directory argument is the root directory of your project (where the package.json file is). If unspecified defaults to the current directory.

Example

The following example checks the dependencies under /path/to/my/project folder:

$> depcheck /path/to/my/project
Unused dependencies
* underscore
Unused devDependencies
* jasmine
Missing dependencies
* lodash

Gradle does not find tools.jar

echo export "JAVA_HOME=\$(/usr/libexec/java_home)" >> ~/.bash_profile

Restart shell ....

Execution failed app:processDebugResources Android Studio

Cleaned the project Steps : *Menubar -> Build -> Clean Project * and then did the build again. It worked.

Thanks for reading it through, I welcome any feedback regarding this topic.

Next week will post about what I developed on react native step by step.

Medium like Blog Post Builder in React with graphql using typescript

Selva kumar — Sat, 10 Apr 2021 07:23:16 +0000

This blog post is about will give you complete knowledge about how to start with react Graphql using typescript and the separation of concern and clean architecture folder structure.

Keep in mind that if you get stuck on any step, refer to the Github repo

To find the completed project, Demo link

This is what we are going to create:

What is GraphQL?

Before going forward, let me give a very brief overview of GraphQL and what all things we are going to discuss. So GraphQL is a query language for APIs that is developed by Facebook. It is an efficient alternative to REST because of its features such as:

With GraphQL there's no over fetching or under fetching of data, unlike REST.
Strongly typed graphQL schema which can be written in GraphQL Schema Definition Language (SDL) helps you validate your API requests during its compile time.
With the development of various GraphQL libraries (Apollo, Relay, etc) you are getting a lot of features such as caching, realtime data, etc.
It provides a large and amazing community! You can always get your queries answered whenever stuck.

This was just a basic introduction to GraphQL, but I recommend you to visit the site to gain deeper insights of the same.

What we'll do?

I will be mainly focussing on the front-end side, where I am gonna explain the two very useful react hooks useQuery and useMutation, how are we using these in our project for GraphQL operations along with the code.

Wait...what are GraphQL operations?

GraphQL provides various types of operations such as Query, Mutation, and Subscription which act as the entry points for the requests sent by the client. In this blog, I'll be discussing the first two types i.e. Query and Mutation.

I'm going to use graphql-hooks have two operations useQuery, useMutation

UseQuery: Basic syntax:

const { loading, error, data } = useQuery<Type1, Type2>(
    QUERY_STRING,
    { variables: <variable>,
onCompleted:()=>{console.log("query successful",data);}
,
onError:(error)=>{console.error(error);},
});

data : The required data we are getting after the query is successful.
loading : It is a boolean value, if true, it means the query is still in flight. After it is successful the value of loading changes to false.
error : It stores the error if occurred while querying.

useMutation: Basic syntax:

 const [mutateFunction,{ error,loading}] = useMutation<Type>(MUTATION_STRING, {
    onCompleted: () => {
    console.log("details updated")
    },
    onError: (error) => {
    onError:(error)=>console.error(error);
    },
    refetchQueries: [{ query: QUERY_STRING, variables: <variable>],
  });

mutateFunction : It is the mutate function which can be called anytime to run the mutation.
The second parameter is the object representing the mutation's execution status such as error , loading which have been explained above.

To use those operation in App need to wrap your app with the provider:

import { GraphQLClient, ClientContext } from 'graphql-hooks'

const client = new GraphQLClient({
  url: '/graphql'
})

function App() {
  return (
    <ClientContext.Provider value={client}>
      {/* children */}
    </ClientContext.Provider>
  )
}

Now in your child components you can make use of useQuery


import { useQuery } from 'graphql-hooks'

const HOMEPAGE_QUERY = `query HomePage($limit: Int) {
  users(limit: $limit) {
    id
    name
  }
}`

function MyComponent() {
  const { loading, error, data } = useQuery(HOMEPAGE_QUERY, {
    variables: {
      limit: 10
    }
  })

  if (loading) return 'Loading...'
  if (error) return 'Something Bad Happened'

  return (
    <ul>
      {data.users.map(({ id, name }) => (
        <li key={id}>{name}</li>
      ))}
    </ul>
  )
}

More details and options you can refer link

Our project's structure:

Before we begin let's talk about how our project is going to be organized.

Once we create our React app using create-react-app, we will have our base React app. Once inside that application, we will create a component pattern and Our folder structure will look like the following:

Now, let’s go over the folders one by one and the and understand the motivation behind them and the type of files you would store in them:

src/ - Contains all of our react codebase.
graphql - queries: This folder contains all static graphql query with props settings
pages - The name is pretty self-explanatory. It contains all the Stateful Components as discussed above.
views - This folder contains all the Presentational/Stateless Components as discussed above.
routes - This folder contains public, private, session differentiation and mainly for App navigation
start - Base react component.
types - Typescript related files or functions.
utils - Helper functions
use - custom hooks
templates - I create a different template for React with React Router 4 like global, error handling, promotions like so on.

Hopefully you understood how to setup a clean, efficient and maintainable folder structure for your React Apps.

Our goal today is to:

Create a new React Blogger App
Have Graphqlzero almansi Api
Using React Routing, be able to navigate our app

Generate project with CreateReactApp:

I often (to not say always 😁) use Create React App to initiate my React projects.

In order to generate our project run :

npx create-react-app my-app --template typescript

let's start coding.

Setting up React Router:

To get React Router going, we are going to need to install our dependency. In the project, run the following command:

npm install --save react-router-dom

It define the route and call the Auth.

// src/start/Routes.tsx

routesTemplates.map((routesTemplate) => {
  const { routes: appRoutes, template: Template , type} = routesTemplate;
  return appRoutes.map( (appRoute) => {
    return (
      <Route
        exact={appRoute.exact}
        path={appRoute.path}
        key={appRoute.path}
        render={(route) =>
          <Auth
            appRoute={appRoute}
            Template={Template}
            route={route}
            type={type}
          />
        }
      />
    );
  });
})

Route Types

There are three route types defined in the project.

// src/routes/routeTypes.tsx

export enum routeTypes {
  private = 'private',
  public = 'public',
  session= 'session',
}

private: private pages like profile, edit-profile, etc. If the user isn’t logged then must to show the login page.
public: public pages like about-us, contact, etc.
session: session pages like login and sign-up. If the user is logged then must to redirect to the private dashboard.

Routes Template

In this file you can define the routes, the template and the rights (public, private, session).

// src/routes/index.tsx

const routesTemplate: IRouteTemplate[] = [
  {
    routes: privateRoutes,
    template: GlobalLayout,
    type: routeTypes.private,
  },
  ...
];

Auth

Verify the rights and redirection.

// src/start/Auth.tsx

if (isPrivate(type) && !global.logged) {
  return <GlobalLayout Component={Error403} route={route} />;
}

if (isSession(type) && global.logged) {
  return <Redirect to="/" />
}

const Layout = appRoute.template ? appRoute.template : Template;
return <Layout
  Component={appRoute.component}
  route={route}
/>;

Building our React components

In this application, we are going to have fives pages for templates:

All Posts List with Author Details
All Author List with Posts listing
Post details

Putting it all together

Now that we have our components set up, we can head on over to “localhost:3000” and see all pages get render.

Feel free to ask questions in any area you don't understand.

To be continued on next article about Graphql implementation...

Building a React Cine World - Movie Application using typescript

Selva kumar — Thu, 25 Mar 2021 15:56:06 +0000

This blog post is about will give you complete knowledge about how to start with React & Typescript and the common view component

Keep in mind that if you get stuck on any step, refer to the Github repo

To find the completed project, Demo link

This is what we are going to create:

Our project's structure:

Before we begin let's talk about how our project is going to be organized.

Our goal today is to:

Create a new React cine world Movie App
Have Themoviedb Api account setup and generate API KEY
Using React Routing, be able to navigate our app

Generate project with CreateReactApp:

I often (to not say always 😁) use Create React App to initiate my React projects.

In order to generate our project run :

npx create-react-app my-app --template typescript

API :

The frontend will have to fetch the data from an API, I choose Themoviedb 🎬 : It's free, we just create an account to get your API key

let's start coding.

Building our React components

In this application, we are going to have fives pages for templates:

All Movies List with Filter
All Movies List with Sorting
Movie details with Production companies list

Let’s create those files. In the src/ folder, create the following folder: src/pages. Within that newly created folder.

Setting up React Router:

To get React Router going, we are going to need to install our dependency. In the project, run the following command:

npm install --save react-router-dom

create router.ts file, copy and paste this code :

import * as React from "react";
import { Route, BrowserRouter } from "react-router-dom";
import Header from "./components/header";
import { ListController } from "./pages/movie-page/movie-listing-container";
import { ItemController } from "./pages/movie-page/movie-details-container";

export const Routes = () => {
  return <BrowserRouter>
    <React.Fragment>
     <Header />
      <Route path="/" exact={true} component={ListController} />
      <Route path="/:movieId" component={ItemController} />
    </React.Fragment>
  </BrowserRouter>;
};

Putting it all together

Now that we have our components set up, we can head on over to “localhost:3000” and see all pages get render.

Feel free to ask questions in any area you don't understand.

To be continued ...

Using Facade pattern create react custom hooks as Reusable and Reliable

Selva kumar — Thu, 18 Mar 2021 09:30:53 +0000

The essential thing when approaching design patterns is to utilize them in a way that improves our codebase. The above means that we sometimes can bend them to fit our needs. The Facade design pattern is commonly associated with object-oriented programming. That doesn’t change the fact that we can take its fundamentals and apply them to something else.

In this article, we explore the Facade pattern both in a conventional setting and with React hooks.

In case if you do not have any idea about the basics of ReactJs and how to start with it, you can refer to link

If you are still not sure what it is Facade design pattern will explain with some examples.

Facade design pattern straightforward way and keep our application more readable

Custom Hooks using the Facade design pattern

The magic with our approach is how quickly and easily we implemented these features with minimal code and how we integrated those features into our views simple.

Example 1: Modal


import React from "react";

export default () => {
  let [modal, setModal] = React.useState(false);
  let [modalContent, setModalContent] = React.useState("I'm the Modal Content");

  let handleModal = (content = false) => {
    setModal(!modal);
    if (content) {
      setModalContent(content);
    }
  };

  return { modal, handleModal, modalContent };
};

we have more than one component that initializes the same state structure and methods it may be a good idea to extract those in a custom hook, and we can have the state and the methods in one place and reuse it.

Example 2: Toggle

This one is probably my favorite and I use it fairly often in projects I work on.

import React, { useState } from "react";

const useToggle = (initialValue = true) => {
  const [value, setValue] = useState(initialValue);
  return [
    value,
    {
      set: setValue,
      toggle: () => setValue(flag => !flag)
    }
  ];
};

Example 3: Form data set and submit with callback Function

Every form will have multiple fields and handle change events and form submissions.

Breaking down what is going on here, we want to:

Keep track of state for an input field
Update the value on change
Make the field value available to the submit handler

import {useState} from 'react';

const useFilterHook = (initialValues, callback) => {
  const [inputs, setInputs] = useState(initialValues);
  const handleSubmit = (event) => {
    if (event) event.preventDefault();
      callback();
  }
  const handleInputChange = (event) => {
    event.persist();
    setInputs(inputs => ({...inputs, [event.target.name]: event.target.value}));
  }
  return {
    handleSubmit,
    handleInputChange,
    inputs
  };
}
export default useFilterHook;

I'm excited to see how leveraging them can start cleaning up and simplifying the code I am working on today. If you're interested in learning more about how to start applying it in your own code, stayed tuned for my upcoming post.

Happy Coding!

React Project: HashTags for Posts with Auth — Part #4

Selva kumar — Tue, 16 Mar 2021 12:48:53 +0000

This is Part-4. This blog post will explain internationalization.

Quick links for our Part Series:

PART #1 - Introduction and Installation of ReactJS (This Post)
PART #2 - ReactJS split the UI by components Components
PART #3 - React Query for remote data fetching instead of Redux thunk
PART #4 - Internationalization with i18next (this post)
PART #5 - Basics to Advanced Usage of styled-components

Keep in mind that if you get stuck on any step, refer to the Github repo

To find the completed project, Demo link

React have extremely easy alternatives to implement this functionality, and today, we are going to meet one of them, the i18next plugin.

Generate project with CreateReactApp:

I often (to not say always 😁) use Create React App to initiate my React projects.

In order to generate our project run :

npx create-react-app i18napp --template typescript

If you already have a project or have just created yours, install the dependencies that we will need for i18next to work properly:

yarn add react-i18next i18next i18next-http-backend i18next-browser-languagedetector

Okay, now we already have the packages we need. Let's get your hands on the code!!!

Configuring i18next

import i18n from "i18next";
import { initReactI18next } from "react-i18next";

import Backend from "i18next-http-backend";

i18n
  .use(Backend)
  .use(initReactI18next)
  .init({
    lng: "en",
    fallbackLng: "en",
    debug: false,
    ns: "translation",
    defaultNS: "translation",
    interpolation: {
      escapeValue: false,
    },
    react: {
      useSuspense: false,
      wait: false,
    },
  });

export default i18n;

After that, we should import it into our index.js, which will look like this:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import './i18n';

ReactDOM.render (
  <React.StrictMode>
    <Suspense fallback={<div>Loading...</div>}>
        <App />
    </Suspense>
  </React.StrictMode>,
  document.getElementById('root')
);

All set, react i18next is enabled and ready to use. Now the next step is to incorporate our translations.

In this project, we will incorporate English and German.

For this, in our /public folder we will add the /locales folder that will have two subfolders, /en and /pt, both with a translation.json file that will contain the object with the translations

Importing the translation hook

To import the i18next hook we use the following code:

import React, { memo } from 'react';
import { Link } from 'react-router-dom';
import styled from 'styled-components';
import { useTranslation } from "react-i18next";

const AuthorListView = memo(({ user }) => {
  const { picture, firstName, lastName, id } = user;
  const { t: translation  } = useTranslation();
  return (
    <CardContainer>
      <CardCoverImage src={picture} ></CardCoverImage>
      <CardHeading>{truncate(`${firstName} ${lastName}`)}</CardHeading>
      <CardFooterContainer>
        <CardLink>
          <Link className='nav-link' to={`/profile/${id}`}>
            { truncate(translation("viewAllPosts")) }
          </Link>
        </CardLink>
        <CardLink>
        <Link className='nav-link' to={`/profile/${id}`}>
        { truncate(translation("viewFullProfile")) }
          </Link>
        </CardLink>
      </CardFooterContainer>
    </CardContainer>
  );
});

export default AuthorListView;

Magic happens

React Project: HashTags for Posts with Auth — Part #3

Selva kumar — Tue, 16 Mar 2021 11:57:38 +0000

This is Part-3. This blog post will explain how Data fetching using react query.

In case if you do not have any idea about the basics of React Query and how to start with it, you can refer to link

Quick links for our Part Series:

PART #1 - Introduction and Installation of ReactJS
PART #2 - ReactJS split the UI by components Components
PART #3 - React Query for remote data fetching instead of Redux thunk (This Post)
PART #4 - Internationalization with i18next
PART #5 - Basics to Advanced Usage of styled-components

Keep in mind that if you get stuck on any step, refer to the Github repo

To find the completed project, Demo link

Now, first things first. Why we need React Query instead of Redux and What is the pain point in Redux.

Although I have been using Redux to handle data fetching in many of my projects, I’ve always believed there must be a better way to do the same with React JS

Each fetch operation requires the developer to create:

three actions (fetch request, succeeded, failed)
three reducers (fetch request, succeeded, failed)
one middleware (usually redux-saga or redux-thunk)

Writing all this code takes a lot of time, even for a simple API call. Moreover, it’s not hard to end up with a big JS bundle.

Overview of Redux store

Every fetch operation performed by Redux has to save its loading and response statuses in the Redux store. Yet, most of the time, the component performing that operation doesn’t need to share its data with other components. Consequently, there is no need to store it in the Redux Store.

Let’s review a typical Redux Flow

It’s a long process for just a simple fetch, isn’t it?

I would like to take a step back end to rethink the whole thing from a high-level perspective, not including Redux. The basic idea is:

Let’s perform the fetch op from the Component and wait for the response
Once we get the response, we update the local state of the Component
Optionally, if we need to save the response (or part of it) in the Redux store, we can do so by dispatching a dedicated Action

Thanks to React Hooks, we can abstract the fetch operation into a custom and reusable useFetch hook

import axios from "axios";
import toast from "react-hot-toast";

import ErrorHandleResponses from "../../api-repositories/error-handler";
const REACT_APP_DUMMY_API_ENDPOINT = "https://dummyapi.io/data/api/";

axios.defaults.headers["app-id"] = "lTE5abbDxdjGplutvTuc";

export const getAuthors = async () => {
  try {
    const url = `${REACT_APP_DUMMY_API_ENDPOINT}user?limit=30`;
    const { data } = await axios.get(url);
    return data || [];
  } catch (err) {
    const errorCode = ErrorHandleResponses(err.response);
    if (errorCode.error) {
      toast.error(`${errorCode.error} Http Error code`);
    }
    return errorCode;
  }
};

export const getAuthorPosts = async (userId) => {
  const { data } = await axios.get(
    `${REACT_APP_DUMMY_API_ENDPOINT}user/${userId}/post?limit=10`
  );
  return data;
};

export const getAuthorDetail = async (userId) => {
  const { data } = await axios.get(
    `${REACT_APP_DUMMY_API_ENDPOINT}user/${userId}/`
  );
  return data;
};

With this approach, we don’t need to store any information about the fetch operation in Redux. If there is any need to share it, we can store the final result (or part of it ) anyway.

import React, { useEffect, lazy } from 'react';
import { useSelector, useDispatch } from 'react-redux';

import { useAuthors } from './authors-hooks';
import { authorSelector, authorsReceived } from './author-slice';

const AuthorListing = () => {

  const { authors, filters: authorFilter } = useSelector(authorSelector);
  const dispatch = useDispatch();

  const { data, isFetching } = useAuthors();
  const renderStatus = data && data.data;

  useEffect(() => {
    if (renderStatus) {
      dispatch(authorsReceived(data.data));
    }
  }, [renderStatus]); 
};

AuthorListing.displayName = 'AuthorsListing';
export default AuthorListing;

This solution is simpler, but obviously not good enough. There is no separation of concerns, there will be a lot of code duplication, verbose logic within the component, etc.

Simple and clean, thanks to the “magic” of Hooks and React Query.

React Query makes fetching, caching, synchronizing, and updating the server state in your React applications a breeze.

Tips & Tricks

Never use useQuery inside the Component. Instead, wrap it into a custom hook

To be continued Part-4

React Project: HashTags for Posts with Auth — Part #2

Selva kumar — Tue, 16 Mar 2021 11:51:51 +0000

This is Part-2. This blog post will explain how to split ReactJS Components.
In case if you do not have any idea about the basics of ReactJs and how to start with it, you can refer to link

Quick links for our Part Series:

PART #1 - Introduction and Installation of ReactJS (This Post)
PART #2 - ReactJS split the UI by components Components (This Post)
PART #3 - React Query for remote data fetching instead of Redux thunk
PART #4 - Internationalization with i18next
PART #5 - Basics to Advanced Usage of styled-components

Keep in mind that if you get stuck on any step, refer to the Github repo

To find the completed project, Demo link

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation

In React it's important to split the UI by components, so let's check how many components do we need :

As you can see, seven components are standing out:

Header
Filter
NavBar
Authors
Posts
Author Details
On-Boarding Forms | Details

A question to ask when creating a component:

What my component should do ?! 🤔

State management — The component subscribes to the store
Data fetching — It gets the state from the store
UI presentation — It renders
Business logic — It’s tied to the business logic of the application.

I Will explain one by one component.

Header Component

The header component is pretty simple, it contains the project title

import React from "react";

const Heading = ({ title }) => {
  return (
    <div className="col">
      <h1>{title}</h1>
    </div>
  );
};

export default Heading;

Filter Component

The Filter component should:

Filling input fields with a JSON Array
Apply Filter
Query the API with this filter

In order to save the state of our input, we will use in this component the custom hook.

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

import useFilterHook from '../../hooks/useFilterHooks';
import { authorsFiltering } from './author-slice';
import { useTranslation } from "react-i18next";


const filterTypes = [
  {
    type: 'Radio',
    default: 'mr',
    selected: 'Mr',
    list: [
      { label: 'All', value: 'All' },
      { label: 'Mr.', value: 'mr' },
      { label: 'Miss.', value: 'miss' },
    ],
    optional: false,
    queryParamKey: 'title',
    placeholder: null,
    title: 'title',
  },
  {
    type: 'Text',
    default: '',
    selected: '',
    list: [],
    optional: false,
    queryParamKey: 'firstName',
    placeholder: 'Search by FirstName',
    title: 'first_name',
  },
  {
    type: 'Text',
    default: '',
    selected: '',
    list: [],
    optional: false,
    queryParamKey: 'lastName',
    placeholder: 'Search by LastName',
    title: 'last_name',
  },
  {
    type: 'Text',
    default: '',
    selected: '',
    list: [],
    optional: false,
    queryParamKey: 'email',
    placeholder: 'Search by Email',
    title: 'Email',
  },
];



const Filter = () => {
  const dispatch = useDispatch();
  const { t: translation  } = useTranslation();

  const filtering = () => {
    dispatch(authorsFiltering({ search_keys: inputs }));
  }

  const {inputs, handleInputChange, handleSubmit} = useFilterHook({ }, filtering);
  return (
    <div>
      <h4> {translation('filters')} </h4>
      <form onSubmit={handleSubmit} autoComplete="off">
      {filterTypes.map((filter) => (
        <article className='card-group-item' key={`${filter.title}`}>
          <header className='card-header'>
            <h6 className='border-bottom border-3'>
              {translation(filter.title)}
            </h6>
          </header>
            <div className='card-body'>
              {filter.type === 'Radio' ? (
                filter.list.map((item) => (
                  <label className='form-check' key={`${item.label}`}>
                    <input
                      type='radio'
                      name={filter.queryParamKey}
                      value={item.value} 
                      onChange={ handleInputChange}

                    />
                    <span className='form-check-label'> {item.label}</span>
                  </label>
                ))
              ) : (
                <input
                  className='form-check-input'
                  type='text'
                  name={filter.queryParamKey}
                  onChange={handleInputChange}
                />
              )}
            </div>
        </article>
      ))}
      <br />
      <button type='submit' className='btn btn-primary left'>
        { translation('apply')}
      </button>
      </form>
    </div>
  );
};

Filter.displayName = 'Filter';
export default Filter;

Authors Component

The Authors component should:

get Authors from dummyAPi using react Query
Loop on this array and render list

import React, { useEffect, lazy } from 'react';
import { useSelector, useDispatch } from 'react-redux';

import { useAuthors } from './authors-hooks';
import { authorSelector, authorsReceived } from './author-slice';

const AuthorListView = lazy(() => import('./author-listing-view'));
const NoResult = lazy(() => import('../../components/empty-list'));
const Loader = lazy(() => import('../../components/loader'));

const AuthorListing = () => {

  const { authors, filters: authorFilter } = useSelector(authorSelector);
  const dispatch = useDispatch();

  const { data, isFetching } = useAuthors();
  const renderStatus = data && data.data;

  useEffect(() => {
    if (renderStatus) {
      dispatch(authorsReceived(data.data));
    }
  }, [renderStatus]); // eslint-disable-line react-hooks/exhaustive-deps

  const authorItemList = authors.map((authorDetails) => {
    return (
      <AuthorListView
        key={`${authorDetails.firstName}-${authorDetails.lastName}`}
        user={authorDetails}
      />
    );
  });

  const authorFilterView = Object.keys(authorFilter).map((filter) => {
    return (
      <button class="btn btn-secondary ml-4">{filter.toUpperCase()} <span class="badge">{ authorFilter[filter] } </span></button>
    );
  });

  if (isFetching) {
    return <Loader />;
  }
  return <div>
    <div>{ authorFilterView }</div>
    {authors.length ? authorItemList : <NoResult />}
    </div>;
};

AuthorListing.displayName = 'AuthorsListing';
export default AuthorListing;

Posts Component

The Posts component should:

get posts from dummyAPi using react Query
Loop on this array and render list

import React, { lazy } from 'react';
import { usePosts } from './posts-hooks';

const PostListView = lazy(() => import('./post-listing-view'));
const NoResult = lazy(() => import('../../components/empty-list'));
const Loader = lazy(() => import('../../components/loader'));

const PostsListing = () => {
  const { data, isFetching } = usePosts();
  const posts = (data && data.data) || [];

  const postItemList = posts.map((postDetails) => {
    return <PostListView key={`${postDetails.text}`} post={postDetails} />;
  });

  if (isFetching) {
    return <Loader />;
  }
  return <div>{posts.length ? postItemList : <NoResult />}</div>;
};

PostsListing.displayName = 'PostsListing';
export default PostsListing;

To be continued Part-3

React Project: HashTags for Posts with Auth — Part #1

Selva kumar — Tue, 16 Mar 2021 10:28:28 +0000

This blog post is about will give you complete knowledge about how to start with React Query, Redux toolkit, I18n, custom themes

Quick links for our Part Series:

PART #1 - Introduction and Installation of ReactJS (This Post)
PART #2 - ReactJS split the UI by components Components
PART #3 - React Query for remote data fetching instead of Redux thunk
PART #4 - Internationalization with i18next
PART #5 - Basics to Advanced Usage of styled-components

Keep in mind that if you get stuck on any step, refer to the Github repo

To find the completed project, Demo link

This is what we are going to create:

By starting from nothing, let's go over what we are going to cover in detail:

Set up a basic React SPA using create-react-app
Set up our own State management system using Redux toolkit
Learn about navigating our app using React Router
Learn about Custom multi Layout building
Learn how to use react-query for remote data
Learn how to use i18n
Get started with styling using Styled components
Learn how to build custom themes

Our project's structure:

Before we begin let's talk about how our project is going to be organized.

Our goal today is to:

Create a new React blog
Have Dummy Api account setup and generate API KEY
Using React Routing, be able to navigate our app

Generate project with CreateReactApp:

I often (to not say always 😁) use Create React App to initiate my React projects.

In order to generate our project run :

npx create-react-app my-app --template typescript

API :

The frontend will have to fetch the data from an API, I choose DAummyapi 🎬 : It's free, we just create an account to get your API key

Please use your API key as an environment variable, in .env file :

REACT_APP_ENV =“dev”

REACT_APP_DUMMY_API_ID = YOUR_API_KEY

REACT_APP_DUMMY_API_ENDPOINT = YOUR_API_URL

REACT_APP_MOCK_API_ENDPOINT = YOUR_API_URL

The configuration is done, let's start coding.

Building our React components

In this application, we are going to have fives pages for templates:

All Author details with Filter
All blog posts with Author details
Register Form with validation
Login Form with Validation
My account page

Let’s create those files. In the src/ folder, create the following folder: src/pages. Within that newly created folder.

Setting up React Router:

To get React Router going, we are going to need to install our dependency. In the project, run the following command:

npm install --save react-router-dom

create router.js file, copy and paste this code :

import AuthorListing from './pages/authors/author-listing-container';
import PostListing from './pages/posts/post-listing-container';
import LoginPage from './pages/onboarding/login-container';
import SignUp from './pages/onboarding/singup-container';
import AuthorDetail from './pages/authors/author-detail-container';
import MyAccount from './pages/onboarding/myaccount-container';
import AuthorFilters from './pages/authors/author-listing-filter-container';
import NotFound from './components/not-found';
const isLoggedIn = localStorage.getItem('token');

export const routes = [  
 { path: '/', label: 'Authors', layout_type: 1, component: {   sidebar: AuthorFilters,   main: AuthorListing, }, hide_on_auth: false,  }, 
 { path: '/posts', label: 'Posts', layout_type: 3, component: {   sidebar: '',   main: PostListing, }, hide_on_auth: false,  },  
 { path: '/my-account', label: 'My Account', layout_type: 3, component: {   sidebar: '',   main: MyAccount, }, hide_on_auth: !isLoggedIn,  },  
 { path: '/login', label: 'Login', layout_type: 3, component: {   sidebar: '',   main: LoginPage, }, hide_on_auth: isLoggedIn,  },  
 { path: '/sign-up', label: 'Sign Up', layout_type: 3, component: {   sidebar: '',   main: SignUp, }, hide_on_auth: isLoggedIn,  },  
 { path: '/profile/:id', layout_type: 2, component: {   sidebar: AuthorDetail,   main: PostListing, },  },  
 { path: '*', layout_type: 3, component: {   sidebar: '',   main: NotFound, } }
];

Layout Components:

Because the Layout component is so simple, it can be re-used in other parts of the application, where a developer wants to use the same page layout. Moreover, it's possible to create custom reusable layouts.

I have used three layout combinations in my application

Left-sidebar
Right-sidebar
No-sidebar

For this challenge, we are required to define a child component, define data to be received via props in the child component, and utilize this child component multiple times in a parent component.

This challenge will be solved in three steps:

Define parameters in the router as layout type sidebar and main like below

{ 
 layout_type: 1, 
  component: {   
     sidebar: AuthorFilters,   main: AuthorListing }, 
   },
   path: '/', 
   label: 'Authors'
}

layout_type => 1 = Left-sidebar 2 = Right-sidebar 3 = No-sidebar

Define the child component and provide props as parameters.
Use the child component in the parent component and provide data through props.

In the Layout folder we create Layout.js file and store the code of the layout component there:

import React from 'react';

const AppLayout = ({ main: Main, sidebar: Sidebar, type, ...rest }) => {
  const bodyTemplate = [];
  bodyTemplate[1] = (
    <>
      <div className='col-2 sidebar'>
        <Sidebar {...rest} />
      </div>
      <div className='col-10'>
        <Main {...rest} />
      </div>
    </>
  );
  bodyTemplate[2] = (
    <>
      <div className='col-10'>
        <Main {...rest} />
      </div>
      <div className='col-2 sidebar'>
        <Sidebar {...rest} />
      </div>
    </>
  );
  bodyTemplate[3] = (
    <>
      <div className='col-12'>
        <Main {...rest} />
      </div>
    </>
  );
  return (
      <div className='row'>{bodyTemplate[type]}</div>
  );
};
AppLayout.displayName = 'App Layout';
export default AppLayout;

Putting it all together

Now that we have our components set up, we can head on over to “localhost:3000” and see all pages get render.

To be continued Part-2 article

Multiple Layout In React Router

Selva kumar — Mon, 01 Mar 2021 09:00:32 +0000

I have come across several scenarios where I needed to create views/pages that had different layout structures in real-time applications like real estate, eCommerce. Recently I had the opportunity to create a multi-layout application and just want to share it.

Initial setup

Create a simple React app that changes depending on the current route:

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import Router from "components/router";

const MyApp = props => (
  <BrowserRouter>
      <Router />
  </BrowserRouter>
);

ReactDOM.render(<MyApp />, document.getElementById("app"));

javascript
The component defines all the possible routes of our app and their corresponding components:

import React from "react";
import { Route, Switch, Redirect } from "react-router-dom";
import { LoginPage, UserDetailsPage } from "pages";

const Router = () => (
  <Switch>
    <Redirect from="/" to="/layout1"/>
    <Route path="/layout1" component={LoginPage} />
    <Route path="/layout2" component={UserDetailsPage} />
  </Switch>
);

export default Router;

Next step, Create two different layout files(DashboardLayout.js, LoginLayoutRoute.js ) and their respective routes to implement multiple layouts.

LoginLayoutRoute.js

import React from 'react';  
import { Route } from 'react-router-dom';  

const LoginLayout = ({ children }) => (                         
    <div>  
      {children}                                       
    </div>  
  );  

  const LoginLayoutRoute = ({component: Component, ...rest}) => {  
    return (  
      <Route {...rest} render={props => (  
        <LoginLayout>  
            <Component {...props} />  
        </LoginLayout>  
      )} />  
    )  
  };  

export default LoginLayoutRoute;

DashboardLayout.js

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

const DashboardLayout = ({ children, ...rest }) => {
  return (
    <div className='page page-dashboard'>
      <header>
        <h1>Dashboard</h1>
        <p>The agent dashboard has 3 parts, a side menu, a top bar and content area to render components.</p>
      </header>
      <section>
        <nav>
          <p>
            DashboardLayout.js contains a higher order component (HOC) that
            takes a component as a prop and passes it into a `Route` from
            react-router-dom.
          </p>
          <p>
            The specific path for the component being passed to the HOC is
            passed to the Route in the spread ...rest .
          </p>
        </nav>
        <article>{children}</article>
      </section>
      <footer>
        <p>Footer</p>
      </footer>
    </div>
  );
};

const DashboardLayoutRoute = ({ component: Component, ...rest }) => {
  return (
    <Route
      {...rest}
      render={(props) => (
        <DashboardLayout>
          <Component {...props} />
        </DashboardLayout>
      )}
    />
  );
};

export default DashboardLayoutRoute;

Both Login & Dashboard Layout contains a higher-order component (HOC) that takes a component as a prop and passes it into a Route from react-router-dom. The specific path for the component being passed to the HOC is passed to the Route in the spread ...rest.

A child component will be rendered at {children} and the rest of the elements will remain the same for all the child components that are using this layout.

As we can see here, by changing the route, different master pages are rendered for different components in DOM.

Layout 1:

Layout 2:

The finished code can be found on github.

Happy coding!