DEV Community: taiseen

how to pass dynamically text at pseudo class in tailwind css - after:content-[?] in react js inside .map

taiseen — Mon, 27 Mar 2023 20:51:36 +0000

const data = [
    "Web Design",
    "Development",
    "Illustration",
    "Product Design",
    "Social Media",
];

<ul className='flex flex-col gap-5 text-[85px]'>
{
  data.map(item =>
    <li
      key={item}
      after-dynamic-value={item}                <-- for linking...
      className={`cursor-pointer relative
      after:content-[attr(after-dynamic-value)] <-- linking here...
      after:absolute
      after:right-0
      after:text-red-200 `}
    >

      {item}

    </li>
  )
}
</ul>

detect user ⬅️ back button click, when background task is 🔄️ running...

taiseen — Sat, 25 Mar 2023 14:19:56 +0000

We accomplish this behavioral need by the help of 3 things...
1. ParentComponent .jsx
2. ModalComponent .jsx || ChildComponent .jsx
3. useBackButtonClick .js <-- custom hook

[NOTE: ~~CSS Missing...~~]

1. ParentComponent.jsx

import useBackButtonClick from '../utils/useBackButtonClick';
import ModalComponent from '../utils/ModalComponent';
import { useState } from 'react';

const ParentComponent = () => {

  const [isAiTaskDialog, setIsAiTaskDialog] = useState(false);

  // custom hook call for back button click...
  const handleCloseAiRequest = useBackButtonClick(setIsAiTaskDialog);

  return (
    <div>
      ... ... 
      <ModalComponent
        visible={isAiTaskDialog}
        onClose={() => setIsAiTaskDialog(false)}
        onOk={handleCloseAiRequest}
      />

    </div>
  );
};

export default ParentComponent;

2. ModalComponent.jsx

const ModalComponent = ({ onClose, onLeave, visible = false }) => {

  return (
    <div style={{ display: visible ? 'block' : 'none' }}>
      <div>

        <h3>Background operation is in progress!</h3>
        <p> Are sure that you want to leave? </p>
        <div>
          <button onClick={onLeave}> Leave </button>
          <button onClick={onClose}> Stay </button>
        </div>

      </div>
    </div>
  );
};

export default ModalComponent;

3. useBackButtonClick.js

import { useCallback, useEffect, useState } from 'react';
import { taskInProgress } from '../../services/memory';
import { useHistory } from 'react-router-dom';

// this hook is created only for Back-Button-Click.
function useBackButtonClick(callback) {

  const history = useHistory();
  const [triggerExit, setTriggerExit] = useState(
        { onLeave: false, path: '' }
  );

  const handleBackButton = useCallback(
        (location) => history.push(location), [history]
  );

  const handleCloseAiRequest = () => {
    setTriggerExit((obj) => ({ ...obj, onLeave: true }));
    callback(false);
  };

  useEffect(() => {

    if (triggerExit.onLeave) handleBackButton(triggerExit.path);

    const unblock = history.block((location) => {

      // if task is running at background...
      if (taskInProgress.status) {

        if (location?.pathname !== '') callback(true);

        setTriggerExit(obj => ({...obj, path: location?.pathname}));

        return triggerExit.onLeave;
      }
    });

    return () => unblock();
  }, [
      triggerExit.onLeave, 
      triggerExit.path, 
      handleBackButton, 
      callback,
      history,
     ]
 );

  return handleCloseAiRequest;
}

export default useBackButtonClick;

Hope these code blocks are helpful for your project...
Thank You! 🤗

custom cancel component call with react-toastify

taiseen — Wed, 22 Mar 2023 21:35:44 +0000

By project behavioral need requirements are vary on situation demand, so that for custom toast component with additional functionality with the help of react-toastify...

File ==> Service.js

import { apiCancelToast } from '../components/utils/ApiCancelBtn';
import { taskInProgress } from './memory';
import { toast } from 'react-toastify';

export class Service {

  constructor( ... ... ) {
    this. ... ...
  }

  async handleApiCall( callBack ) {

    ... ...

    taskInProgress.status = true;

    try {
      toast.dismiss(); // 1st toast cancel
      const data = await callBack();
      if (data.id !== '') apiCancelToast(data.id);
      return data;
    } catch (e) {
      ... ...
    }

  }

  ... ...
}

File ==> ApiCancelBtn.jsx [custom cancel component]

import { taskInfoMap, taskInProgress } from '../../../memory';
import { taskTokenCalculation } from '../../../actions/dropdown';
import { useDispatch } from 'react-redux';
import { toast } from 'react-toastify';
import loading from '../../../assets/loading.gif';
import api from '../../../api';
import 'react-toastify/dist/ReactToastify.css';


function ApiCancelBtn({ taskId }) {

  const dispatch = useDispatch();

  const handleTaskCancel = async (taskId) => {

    toast.dismiss();  // 2nd toast cancel
    taskInProgress.status = false;

    try {
      if (taskId) {
        const { consumed } = await api.ai.cancelTask(taskId);
        if (consumed) dispatch(taskTokenCalculation(consumed);
        taskInfoMap.delete(taskId);
      }
    } catch (error) {
      // console.log(error);
    }
  };

  return (
    <div className="toast-custom-cancel-button">
      <img src={loading} alt="loading" />
      <div>
        <p> Processing your request... </p>
        <button onClick={() => handleTaskCancel(taskId)}> 
           Abort 
        </button>
      </div>
    </div>
  );

}


export function apiCancelToast(taskId) {
  toast.info('', {
    icon: false,
    pauseOnHover: true,
    toastId: taskId,
    autoClose: false,
    draggable: false,
    closeOnClick: false,
    closeButton: <ApiCancelBtn taskId={taskId} />,
  });
}

File ==> app.css

.toast-custom-cancel-button {
  user-select: none;
  display: flex;
  gap: 10px;
  padding: 8px 0;
}

.toast-custom-cancel-button img {
  width: 20px;
  height: 20px;
}

.toast-custom-cancel-button p {
  font-size: 16px;
}

.toast-custom-cancel-button button {
  border-radius: 10px;
  padding: 10px 18px;
  outline: none;
  border: none;
  cursor: pointer;
  transition: 0.3s;
}

.toast-custom-cancel-button button:hover {
  background: #e86a54 !important;
  color: white;
}

radio toggle button in react

taiseen — Sat, 18 Mar 2023 01:38:55 +0000

this small component consist by data, jsx & css...

Data:-

// data.js

import girl from '../assets/girl.webp';
import boy from '../assets/boy.webp';

export const gender = [
    {
        data: "Boy",
        icon: boy,
    },
    {
        data: "Girl",
        icon: girl,
    }
]

Jsx:-

// App.jsx

import { gender } from './constants/data';
import { useState } from 'react';

const App = () => {

  const [switchToggle, setSwitchToggle] = useState(true);

  const handleClick = (data) => {
    setSwitchToggle(pre => !pre);
    console.log(data);
  }

  return (
    <div className="radioBtnContainer">
      {
        gender.map(({ data, icon }) => (
          <label htmlFor={data} >
            <input
              id={data}
              type="radio"
              value={data}
              name="value"
              onChange={() => handleClick(data)}
            />
            <img src={icon} alt={data} /> {data}
          </label>
        ))
      }
      <span 
        className={`switch ${switchToggle ? 'activeSwitch' : ''}`}
      >
      </span>
    </div>
  )
}

export default App;

CSS:-

/* style.css */

* {
    margin : 0;
    padding: 0;
}

body {
    width          : 100%;
    height         : 100vh;
    display        : flex;
    align-items    : center;
    justify-content: center;
}

.radioBtnContainer{
    background-color: white;
    width           : 500px;
    display         : flex;
    align-items     : center;
    border-radius   : 25px;
    border          : 1px solid skyblue;
    position        : relative;
}

label {
    cursor       : pointer;
    display      : flex;
    align-items  : center;
    width        : 50%;
    height       : 30px;
    border-radius: 25px;
    position     : relative;
    z-index      : 1;
}

.switch {
    position        : absolute;
    top             : 0;
    left            : 0;
    bottom          : 0;
    background-color: rgb(194, 222, 255, .5);
    border          : 1px solid skyblue;
    width           : 50%;
    border-radius   : 25px;
    transition      : left .3s;
}

.activeSwitch {
    left: 50%;
}

input {
    margin    : 0 8px;
    appearance: none;
    outline   : none;
}

img {
    margin-right: 10px;
    width       : 16px;
}

custom cancel button call inside react-toastify

taiseen — Thu, 16 Mar 2023 21:02:14 +0000

At development time code context/pattern is going to different for project to project... so bellow coding pattern is one of them...

Custom button component call inside "react-toastify"

import ApiCancelBtn from '../components/ApiCancelBtn';
import { toast } from 'react-toastify';

export class Service {
    ...     
    async handleApiCall(callerId) {
        ...
        toast.info(`🙂 We are thinking...`, {
          icon: false,
          autoClose: 30000,
          pauseOnHover: false,
          // custom button component call...
          closeButton: <ApiCancelBtn taskId={'taskId'} />,
        });
        ...
    }
    ...
}

import { toast } from 'react-toastify';
import api from '../api';

const ApiCancelBtn = ({ taskId }) => {

  const handleTaskCancel = async (taskId) => {
    if (taskId !== undefined) {
      await api.ai.cancelTask(taskId);
      toast.dismiss();
    }
  };

  return (
    <button 
       className="toast-custom-cancel-button" 
       onClick={()=> handleTaskCancel(taskId)}
    >
      Cancel API Call
    </button>
  );
};

export default ApiCancelBtn;

Convert Monthly income into Hourly in JS

taiseen — Tue, 07 Feb 2023 04:48:14 +0000

JS code snippet...

const governmentTax = .20; // 20% Tax 
const monthlyIncome = 500; // put your amount here...

const weeksInMonth = 4;
const workingHours = 8;
const workingDays = 5;

const weeklyHours = workingHours * workingDays;
const monthlyHours = weeklyHours * weeksInMonth;

const afterTaxPay = monthlyIncome - (monthlyIncome * governmentTax);

const hourlyIncome = afterTaxPay / monthlyHours;

console.log('Your hourly income is: $' + hourlyIncome);

// Your hourly income is: $2.5

Debouncing & Throttling

taiseen — Sun, 05 Feb 2023 19:53:50 +0000

What is debouncing?

It is limit the execution of a function call & waits for a certain amount of time, before running it again.

So, debouncing allows us to - discard all the same functionCall's(), but except just 1 functionCall() from them, after a certain amount of time.

So, debouncing guarantees us - that a function will be run after "x" amount of time, just once...

What is throttling?

It is a limit the execution of function call when this function call triggers continuously due to user actions.

So, throttling allows us to - pass all the same functionCall's(), but pass just 1 functionCall() - one by one from them, under a certain amount of time.

So, throttle guarantees us - that a function will be run after "x" amount of time, one by one...

For both example - that time can be 500 or 800 milliseconds, as per your requirement.

Display the same category products, but exclude the selected one

taiseen — Fri, 27 Jan 2023 20:18:09 +0000

Building a website like e-commerce, inside it has lots of behavioral needs to fulfill & one of those is, to display all same category products but except that user already selected or opened at UI...

then this piece of logic is useful...

const allProducts = [
  { id: 1, category: "mobile", product: 'Sammung S20' },
  { id: 2, category: "cloth", product: 'T-Shirt' },
  { id: 3, category: "mobile", product: 'OnePlus 7T' },
  { id: 4, category: "cloth", product: 'Formal Pant' },
  { id: 5, category: "mobile", product: 'IPhone-14 Max Pro' },
]

const selectedProduct = { category: "mobile", id: 5 };

const result = allProducts
  .filter(item => item.category === selectedProduct.category)
  .filter(product => product.id !== selectedProduct.id);

console.log(result);

/*
  { id: 1, category: "mobile", product: 'Samsung S20' },
  { id: 3, category: "mobile", product: 'OnePlus 7T' },
*/

convert [array] into {object} with needful value

taiseen — Thu, 26 Jan 2023 20:33:01 +0000

Sometimes it is the requirement that, data come from an flat [array] & based on some needful condition, we need that [array] data into the {object} data-structure format, with some requirement values (as per your need), then this pieces of logic work good:-

array of data...

const basicControlKeys = ['tl', 'tr', 'bl', 'br'];

converter function for [array] into {object}

// convert array data into object key with assign needful value...
const convertArrayIntoObject = (arrayData) => {

  const obj = {}; // empty object declaration...

  // iterate through every data inside array by for-of loop...
  for (let data of arrayData) 
  {
    obj[data] = true; // object value initialization...
  }

  return obj;
};

calling the function & pass [array] into its parameter...

const result = convertArrayIntoObject(basicControlKeys);

console.log(result);

/*
{
  tl: true,
  tr: true,
  bl: true,
  br: true,
}
*/

Default image load, while error happen at image loading time

taiseen — Wed, 25 Jan 2023 22:25:33 +0000

It's common to load static/dynamic images at our wed application. But if some time images are fail to load for several reason as like:-

a) Broken image link,
b) Missing from our assets folder,
c) Wrong naming of image file - etc...

So, by default catch these kind of image loading fail case, we can add some little set of logic that prevent our UI to display annoying placeholder that come with default browser behavior.

Note: this implementation is base on ReactJS, you can extract this logic as per your development environment.

Its become good, if you keep you default image file under "/public" folder if you are working on React project. Then you can directedly access this image from your source code.

const YourComponent = () => {


  const handleImgLoadingError = (e) => {

    // default image add, if associated image is not available...
    e.target.src = '/images/YOUR-DEFAULT-IMAGE-FILE-NAME.jpg';

  };


  return (

    <div>
      <img
        src={`YOUR-IMAGE-SOURCE`}
        alt={`YOUR-IMAGE-FILE-NAME`}
        onError={(e) => handleImgLoadingError(e)}
      />
    </div>

  );
};

export default YourComponent;

Hope its will be little helpful for your project beatification.

Thank You :)

filter [array] base on other [array]

taiseen — Tue, 24 Jan 2023 08:47:05 +0000

assume we have an [array of {objects}] & we want to filter these {objects} base on any other [array values]...

to fulfill this requirement, we can implement our code by this approach:-

const ids = [1, 2, 3, 4];

const userObj = [
  {
    id: 1,
    name: 'Jon',
  },
  {
    id: 20,
    name: 'Sam',
  },
  {
    id: 30,
    name: 'Tom',
  },
  {
    id: 4,
    name: 'Zen',
  },
];

const result = userObj.filter(user => ids.includes(user.id));

console.log(result);

// console output...

(2) [{...}, {...}]
0: {id: 1, name: "Jon"}
1: {id: 4, name: "Zen"}

Toggling inside [array] in React

taiseen — Sun, 22 Jan 2023 00:58:59 +0000

When we focus on much complex logic to solve, then sometimes some simple logic is fade away from our mind... (because we pressure our brain to lode over cognitive bandwidth) & in that situation, we are just stuck at that moment...

So it's helpful to identify reusable logic of code and keep a reference somewhere else, so when needed we can easily reuse that code snippet...

So, this is simple reusable little code snippet for data toggling inside [array]...

const [inputIds, setInputIds] = useState([]);

const handleBtnToggling = (e) => {

    const id = e.target.id;

    setInputIds((pre) => !pre.includes(id) 
       ? [...pre, id] 
       : pre.filter((data) => data !== id)
    );

};