Coding Tech Life: 2022

React: Preload Images

I had a situation that lot of time taken to load images, which are loaded dynamically. One solution was to preload the images whenever we get the URL so that images will be available in cache and it will load quickly.

Below solution worked

useEffect(()=>{
            images.forEach((image) => {
                const img = new Image();
                img.src = baseurl + image.fileName;
            });
    }, [])

References:

https://stackoverflow.com/questions/42615556/how-to-preload-images-in-react-js

Tailwind CSS: Dark and Light Theme

I am using Tailwindcss in my react app. One of the requirement was to provide light and dark theme for the web app. This can be achieved easily with Tailwind.

1. Specify colours and styles for light and dark theme. For light theme just use class-name as it is and for dark theme, use dark:class-name.

eg: bg-white dark:bg-gray-700

Switch between white and dark theme

To switch between the themes, there are many methods. I chose using class. Using class, need to mention darkMode: "class" in tailwind.config.js.

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: "class",
  theme: {
    extend: {},
  },
  plugins: [],
  content: ["./src/**/*.{js,jsx,ts,tsx,html}", "./public/index.html"],
};

Then we can add a button, on click add/remove class-name "dark" to/from <html> to toggle between dark between light theme.

document.documentElement.classList.toggle("dark");

document.documentElement.classList.add("dark");

document.documentElement.classList.remove("dark");

Note: To keep the theme selection, we can store the value to localstorage and retrieve it on load for better user experience.

Reference: https://tailwindcss.com/docs/dark-mode

Git: Pulling is not possible because you have unmerged files

Some times I receive this message because local file file changes conflict and requires merging. To revert local changes in this scenario, use below command

git reset --hard HEAD

If already committed to local branch and need to revert the last committed changes,

git reset --hard HEAD~1

React Router V6 (react-router-dom) Dynamic Routing

React Router V6(react-router-dom) Dynamic Routing

I was trying to implement dynamic routing with router v6 similar to that with v4 .

eg in v4

const routes = [
  { path: '/', key:"home", component: Home },
  { path: 'page1',key:"page1", component: Page1  },
  { path: 'page2', key:"page2" component: Pag2  }
];

<Route path={variable} component

<Router>
  <Switch>
     {routes.map(page => (<Route key={page.key} path={page.path} component={page.component} />))} 
  </Switch>
</Router>

This can be achieved in router v6 using useRoutes

Router.tsx

import { useRoutes } from "react-router-dom";

import Home from "../pages/Home";
import Page1 from "../pages/Page1";
import Page2 from "../pages/Page2";

export default function Router() {
  return useRoutes([
    { path: "/", element: <Home /> },
    { path: "/page1", element: <Page1 /> },
    { path: "/page2", element: <Page2 /> },
  ]);
}

App.tsx

import React from "react";
import { BrowserRouter } from "react-router-dom";
import Router from "./helpers/Router";
function App() {
  return (
    <div>
      <BrowserRouter>
        <Router />
      </BrowserRouter>
    </div>
  );
}

export default App;

References:

https://reactrouter.com/en/main/hooks/use-routes

React : Disable Browser Forward and Backward Button or Prevent Navigation

To prevent navigation to specific route, we need to use history.block() - https://github.com/remix-run/history/blob/dev/docs/blocking-transitions.md

The browser backward button click action will be pop() and the browser forward button click action will be push(). We need to listen and handle these actions to block navigation.

Format multi-line sql queries to single line

Format multi-line sql queries to single line queries

I had a requirement to change multi-line sql queries to single line queries.

UPDATE table_name

SET

column1=value

WHERE

condition=value1

AND condition2=value1;

UPDATE table_name

SET

column1=value2

WHERE

condition=value2

AND condition2=value2;

UPDATE table_name SET column1=value WHERE condition=value1 AND condition2=value2;

UPDATE table_name SET column1=value2 WHERE condition=value2 AND condition2=value2;

I have tried different sql formatter in VS Code and Notepad++, all formatting into multiple lines.

Then I came to below stackoverflow link and achieved single line format in in two steps.

Step 1: replace all (?:\h*\R\h*)+ with space

Step 2: replace all ; with ;\r\n

References

https://stackoverflow.com/questions/52003347/notepad-turn-big-query-from-sql-server-into-one-line