DEV Community: Vinay P

Accessing Custom Flags from Terminal

Vinay P — Wed, 21 Dec 2022 16:17:21 +0000

Prerequisites:

React app setup with webpack which can be found here.

Two pathways:

Terminal -> webpack -> application logic
One terminal command to another

1. Terminal -> webpack -> application logic

Overview:

Terminal flag is passed from terminal to webpack file using cross-env and is set as env variable using webpack.DefinePlugin() which is accessible via process.env.variableName while writing logic.

Syntax:

- Script command

"start": "cross-env variable_name_1=$npm_config_<flag_name_1> variable_name_2=$npm_config_<flag_name_2> webpack serve --config ./webpack/webpack.dev.js"

variable_name_1 - this is the variable that is accessible in the webpack config via process.env.variable_name_1. Same with variable_name_2.
flag_name_1 - this is the flag name that has to be entered in the terminal.

- Terminal command

npm run start --flag_name_1=flagvalue1 --flag_name_2=flagvalue2

Steps:

Install cross-env npm.
Add the following script under the package.json scripts.

"start": "cross-env clientVariable=$npm_config_client themeVariable=$npm_config_theme webpack serve --config ./webpack/webpack.dev.js"

In the webpack config file (webpack.common.js), the flag values will be accessible with process.env.clientVariable and process.env.themeVariable

const client = process.env.clientVariable;
const theme = process.env.themeVariable;
console.log("client in common webpack", client);
console.log("theme in common webpack", theme);

Now under the plugins, define the variables to be accessed in the application.

new webpack.DefinePlugin({
    "process.env.client": JSON.stringify(client),
    "process.env.theme": JSON.stringify(client),
}),

These flags can be accessed in the requried components using process.env.client and process.env.theme

const App = () => {
    return (
        <div className={styles.app}>
            <h2>App Component.</h2>
            <p>
                Environment value terminal flag, Client - <span className={styles.envValue}>{process.env.client}</span>
            </p>
            <p>
                Environment value terminal flag, Theme - <span className={styles.envValue}>{process.env.theme}</span>
            </p>
        </div>
    );
};

Now enter the following command in terminal and the values will be available. npm run start --client=clientA --theme=light

2. One terminal command to another

Overview:

Terminal flag is passed from one terminal command to another script call using cross-env-shell.

Steps:

With the cross-env npm package installed.
Add the following scripts under the package.json scripts.

"echoMessage": "cross-env-shell clientVariable=$npm_config_client themeVariable=$npm_config_theme echo \"Hello $clientVariable, theme is $themeVariable\""

"greet": "cross-env clientVariable=$npm_config_client themeVariable=$npm_config_theme npm run echoMessage"

The only difference would be the usage of cross-env-shell instead of cross-env to access the entered flag value from the parent command.
Now enter the following command in terminal. npm run greet --client=clientA --theme=light
You would see the following output in the terminal.

Hello clientA, theme is light
Once greet script is run, npm configs - client and theme will be set and those values can be accessed in other scripts.
When echoMessage is called from greet script, npm configs - client and theme will be assigned to the variables listed for them in the echoMessage script, i.e, clientVariable and themeVariable. These variables can be accessed in the script using $clientVariable and $themeVariable.
This can be used when certain actions needs to be taken based on the client name or anything similar.

Repo link: Github

Reference: cross-env

Drag n Drop Walkthrough in React

Vinay P — Tue, 20 Dec 2022 11:49:15 +0000

This project demonstrates the concepts to implement a drag and drop functionality.
It is a simple board with two columns and the cards can be to and from both the columns.

Prerequisites:

React project setup - npx create-react-app app_name

Elements:

Card.js - the item that is being dragged from one column to another. Element with green background.
Board.js - contains the states on which the card is being dropped. Element with blue-ish background

Steps:

In `Card.js`

Make the card draggable by setting draggable attribute on the card to true.
Store the data of the element in an attribute.
Set an onDragStart listener on the card and once it is started, take the card data (from the attribute) and set it to dataTransfer object of the event using setData function of dataTransfer.

const Card = ({ cardData = {} }) => {
    const [cardIsBeingDragged, setCardIsBeingDragged] = useState(false);

    const handleOnDragStart = (ev) => {
        let draggedItemData = ev.target.getAttribute("data_card_json") || "{}";
        ev.dataTransfer.setData("draggedItemData", draggedItemData);
        setCardIsBeingDragged(true); // For styling purpose.
    }

    const handleOnDragEnd = () => {
        setCardIsBeingDragged(false); // For styling purpose.
        // console.log("drag stopped");
    }

    return (
        <div
            className={`${styles.card} ${cardIsBeingDragged ? styles.reducedOpacity : ""}`}
            data_card_json={JSON.stringify(cardData)}
            draggable
            onDragStart={handleOnDragStart}
            onDragEnd={handleOnDragEnd}
        >
            <h3>{cardData.name}</h3>
            <h3>State - {cardData.state}</h3>
        </div>
    );
};

In `Board.js`

Set an onDrop listener on the element on which the drop happens.
- Pass a function that will take the card data from dataTransfer object using getData function of dataTransfer.
- Check the initial state of the card data and the newly dragged state and make appropriate changes and set new data.
By defult, browser prevents the drop events on elements. So onDragOver, prevent the default behavior using preventDefault() and stopPropagation().

<div className={`${styles.columns}`}>
    <div className={`dropTarget`} data_state="A" onDrop={handleOnDrop} onDragOver={handleOnDragOver} onDragEnter={handleOnDragEnter}>
        {cardItems.map((card, index) => {
            if (card.state === "A") {
                    return <Card key={index} cardData={card} />;
            }
            return null;
        })}
    </div>
    <div className={`${styles.state} dropTarget`} data_state="B" onDrop={handleOnDrop} onDragOver={handleOnDragOver} onDragEnter={handleOnDragEnter}>
        {cardItems.map((card, index) => {
            if (card.state === "B") {
                return <Card key={index} cardData={card} />;
            }
            return null;
        })} 
    </div>
</div>

Event handlers:

handleOnDrop

const handleOnDrop = (ev) => {
    const dropTarget = ev.target.closest(".dropTarget");
    const droppedState = dropTarget.getAttribute("data_state");
    const draggedItemData = JSON.parse(ev.dataTransfer.getData("draggedItemData"));
    const currentItemState = draggedItemData.state;

    if (droppedState !== null && currentItemState !== droppedState) {
        //  Update the state of the dragged item if its dropped on a different column.
        updateCardStatus(draggedItemData, droppedState);
    }
};

handleOnDragOver

const handleOnDragOver = (ev) => {
    ev.stopPropagation();
    ev.preventDefault();
};

handleOnDragEnter

const handleOnDragEnter = (ev) => {
    //  Modify the styles of the container if requried.
};

handleOnDragEnter

const updateCardStatus = (itemData, droppedState) => {
    const newCardItems = cardItems.map((eachCard) => {
        if (eachCard.id === itemData.id) {
            return { ...eachCard, state: droppedState };
        }
        return eachCard;
    });
    setCardItems(newCardItems);
};

Summary

Make an card draggable.
Once dragged, store the data about the card in dataTransfer object.
Once dropped on the target, check if the card is dropped on a new state (column) or not.
If it is new state (column), update the card's data in the state, which renders the UI with newly set data.

Repo link: Github

React Redux Walk-through

Vinay P — Mon, 23 May 2022 05:48:25 +0000

Redux is a state management tool that provides a way to have all the states of an application in one global place instead of having in each components.

Prerequisites:

React project setup - npx create-react-app app_name
Packages - npm i redux react-redux @reduxjs/toolkit

Methods used:

import { combineReducers, createStore, applyMiddleware } from "redux";
import { Provider, useSelector, useDispatch } from "react-redux";
import { configureStore } from "@reduxjs/toolkit";

1. combineReducers

Used to combine multiple reducers and make it one to send it to the store.

const reducer = combineReducers({
    userData: userReducer,
    ...
    <more here>
});

2. createStore (deprecated)/configureStore

Used to create a store (redux state) using the combined reducer and also apply any middlewares if required to perform before the actions reaches the reducers.

const store = createStore(reducer, applyMiddleware(thunk, middelware2, middleware3, etc..));    // this is deprecated.
(OR)
const store = configureStore({
    reducer,
    middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(middleware1, middleware2, etc...)
});

3. Provider

This component will wrap around the final component (in index.js) that is added to the DOM.
The store is made available to the entire application through this.

ReactDOM.render(
    <Provider store={store}>
        <App></App>
    </Provider>,
    document.getElementById("root")
);

4. useSelector

Used to access the state data from redux state.

const App = () => {
    const userData = useSelector((state) => state.userData);    //  where userData is the key name given in the combineReducers.
    const userId = userData.userId;

    return (
        <div>
            <h3>User id is {userId}</h3>
        </div>
    );
};

5. useDispatch

Used to dispatch the actions that will inturn modify the state data accordingly.

const App = () => {
    const dispatch = useDispatch();

    const updateUserId = (ev) => {
        dispatch(setUserId(ev.target.value));   //  action creator
        dispatch({type: "SET_USER_ID", payload: ev.target.value});  //  regular dispatch
    };

    return (
        <div>
            <input type="text" value={userId} onChange={updateUserId} />
        </div>
    );
};

Steps:

1. Declare the action type constants.

~/src/state/actionTypes.js

const actionTypes = {
    user: {
        SET_NEW_USER: "SET_NEW_USER",
        SET_USER_ID: "SET_USER_ID"
    },
    counter: {
        INCREASE_COUNT: "INCREASE_COUNT",
    },
};
export default actionTypes;

2. Declare the reducers.

~/src/state/reducers/counterReducer.js

import actionTypes from "../actionTypes";
const counterReducer = (state = 0, action = {}) => {
    switch (action.type) {
        case actionTypes.counter.INCREASE_COUNT:
            return state + action.payload.count;

        default:
            return state;
    }
};
export default counterReducer;

~/src/state/reducers/userReducer.js

import actionTypes from "../actionTypes";
const userReducer = (state = { userId: 1, userData: {} }, action = {}) => {
    switch (action.type) {
        case actionTypes.user.SET_NEW_USER:
            return {
                ...state,
                userData: { ...action.payload },
            };
        case actionTypes.user.SET_USER_ID:
            return {
                ...state,
                userId: action.payload,
            };
        default:
            return state;
    }
};
export default userReducer;

3. Combine the reducers.

~/src/state/reducers/index.js

    import { combineReducers } from "redux";
    import userReducer from "./userReducer";
    import counterReducer from "./counterReducer";

    const reducer = combineReducers({
        userData: userReducer,
        countData: counterReducer,
    });
    export default reducer;

4. Create the store by passing the combined reducer and the middlewares if any.

~/src/state/store.js

//  import { createStore, applyMiddleware } from "redux";
//  import thunk from "redux-thunk";
import { configureStore } from "@reduxjs/toolkit";
import reducer from "./reducers/index";

//  createStore is deprecated..
// const store = createStore(reducer, applyMiddleware(thunk));  

const store = configureStore({
    reducer,
    middleware: (getDefaultMiddleware) => getDefaultMiddleware(),
});

// To add additional middlewares,
// middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(middleware1, middleware2, etc...),  //  thunk is inbuilt in @reduxjs/toolkit

export default store;

5. Declare the actions as per requirment for the features.

~/src/state/actions/counterActions.js

import actionTypes from "../actionTypes";
const increaseCount = (countToIncrease) => {
    return {
        type: actionTypes.counter.INCREASE_COUNT,
        payload: { count: countToIncrease },
    };
};
export { increaseCount };

~/src/state/actions/userActions.js

import axios from "axios";
import actionTypes from "../actionTypes";
const getUser = (userId) => {
    return async (dispatchMethod, getState) => {
        const userResponse = await axios.get(`https://jsonplaceholder.typicode.com/users/${userId}`);
        const userData = await userResponse.data;
        dispatchMethod({ type: actionTypes.user.SET_NEW_USER, payload: userData });
        return userData;
    };
};

const setUserId = (userId) => {
    return {
        type: actionTypes.user.SET_USER_ID,
        payload: userId,
    };
};

export { getUser, setUserId };

6. Implement the features and dispatch the actions as required.

~/src/components/counter/Counter.js

import { useSelector, useDispatch } from "react-redux";
import { increaseCount } from "./../../state/actions/counterActions";

const Counter = () => {
    const counterData = useSelector((state) => state.counterData);
    const dispatch = useDispatch();
    const handleIncreaseCount = (count = 1) => {
        dispatch(increaseCount(count));
    };

    return (
        <div>
            <h2>Counter</h2>
            <h3>{counterData}</h3>
            <button
                onClick={() => {
                    handleIncreaseCount(1);
                }}
                style={{ marginRight: "10px" }}
            >
                Increase count by 1
            </button>
            <button
                onClick={() => {
                    handleIncreaseCount(5);
                }}
            >
                Increase count by 5
            </button>
        </div>
    );
};
export default Counter;

~/src/App.js

import { useState } from "react";
import { useDispatch, useSelector } from "react-redux";

import { getUser, setUserId } from "./state/actions/userActions";

import Profile from "./components/user/Profile";
import Counter from "./components/counter/Counter";

const App = () => {
    const userData = useSelector((state) => state.userData);
    const userId = userData.userId;
    const [showLoader, setShowLoader] = useState(false);
    const dispatch = useDispatch();

    const getUserInfo = () => {
        setShowLoader(true);
        dispatch(getUser(userId))
            .then((res) => {
                console.log(res);
            })
            .catch((err) => {
                console.log(err);
            })
            .finally(() => {
                setShowLoader(false);
            });
    };

    const updateUserId = (ev) => {
        dispatch(setUserId(ev.target.value));
    };

    return (
        <div>
            <input type="text" value={userId} onChange={updateUserId} />
            <h3>User id is {userId}</h3>
            <button onClick={getUserInfo}>Get user info</button>
            <br />
            {showLoader ? "loading..." : <Profile></Profile>}
            <hr />
            <Counter></Counter>
        </div>
    );
};

export default App;

7. Wrap the whole application with the provider and pass the store as a prop.

~/src/index.js

    import ReactDOM from "react-dom";
    import App from "./App";
    import { Provider } from "react-redux";
    import store from "./state/store";
    ReactDOM.render(
        <Provider store={store}>
            <App></App>
        </Provider>,
        document.getElementById("root")
    );

Persisting redux state on refresh

This requires changes in the following two files,
~/src/state/store.js
~/src/index.js

Steps:

1. `npm i redux-persist`

2. `~/src/state/store.js`

    //  NEW LINES START
    import { persistStore, persistReducer } from "redux-persist";
    import storage from "redux-persist/lib/storage";

    //  Setup persist config and persist reducer
    const persistConfig = {
        key: "persisted_state_data",
        storage,
    };
    const persistedReducer = persistReducer(persistConfig, reducer);
    //  NEW LINES END

    //  UPDATED LINE START
    //  Pass this persisted reducer to the store configurator and disable the serializableCheck.
    const store = configureStore({
        reducer: persistedReducer,
        middleware: (getDefaultMiddleware) => getDefaultMiddleware({
            serializableCheck: false,
        }),
    });
     //  UPDATED LINE END

    //  NEW LINE START
    // Create a persisted store along with the normal store and export both.
    const persistor = persistStore(store);
    //  NEW LINE END

    //  UPDATED LINE START
    export { persistor, store };
    //  UPDATED LINE END

3. `~/src/index.js`

//  Import persisted store and the regular store.
import { persistor, store } from "./state/store";
import { PersistGate } from "redux-persist/integration/react";

//  Within the redux provider wrap the app with the PersistGate component and pass the persistStore.
ReactDOM.render(
    <Provider store={store}>
        <PersistGate persistor={persistor}>
            <App></App>
        </PersistGate>
    </Provider>,
    document.getElementById("root")
);

Repo link: Github

P.S.

First post 🙏
Hopefully it saves someone a few hours of R&D.

DEV Community: Vinay P

Accessing Custom Flags from Terminal

Prerequisites:

Two pathways:

1. Terminal -> webpack -> application logic

Overview:

Syntax:

- Script command

- Terminal command

Steps:

2. One terminal command to another

Overview:

Steps:

Repo link: Github

Reference: cross-env

Drag n Drop Walkthrough in React

Prerequisites:

Elements:

Steps:

In Card.js

In Board.js

Event handlers:

Summary

Repo link: Github

React Redux Walk-through

Prerequisites:

Methods used:

1. combineReducers

2. createStore (deprecated)/configureStore

3. Provider

4. useSelector

5. useDispatch

Steps:

1. Declare the action type constants.

2. Declare the reducers.

3. Combine the reducers.

4. Create the store by passing the combined reducer and the middlewares if any.

5. Declare the actions as per requirment for the features.

6. Implement the features and dispatch the actions as required.

7. Wrap the whole application with the provider and pass the store as a prop.

Persisting redux state on refresh

Steps:

1. npm i redux-persist

2. ~/src/state/store.js

3. ~/src/index.js

P.S.

In `Card.js`

In `Board.js`

1. `npm i redux-persist`

2. `~/src/state/store.js`

3. `~/src/index.js`