1+1 | Vite + User Inactivity

This combines two YouTube videos

1. Vite Crash Course | Faster Alternative To CRA
2. How to Detect User Inactivity in a React Application using Hooks | React JS Tutorial

Start with navigating to https://vitejs.dev/ & the 1st thing you do is “Toggle the Dark Mode ON” :)

Move to https://vitejs.dev/guide/ and pick the npm create command, to run in a folder on my local.

npm create vite@latest

If you look at the options — for selecting a variant, there are four of these, two of which have +SWC added.

What is SWC ?

Vite 4.0 also adds support for SWC, a Rust-based bundler that claims order-or-magnitude speed improvement over Babel. Vite 4.0 now uses Rollup 3.0 at build time. Rollup 3.0 was announced a few weeks before at ViteConf 2022

From Google

I will pick that.

The final selections being, and then I will just follow the instructions.

✔ Project name: … vite_user_inactivity_3e4450b6fb1f
✔ Select a framework: › React
✔ Select a variant: › TypeScript + SWC

Scaffolding project in /home/prathamos/.../learning/vite_user_inactivity_3e4450b6fb1f...

Done. Now run:

  cd vite_user_inactivity_3e4450b6fb1f
  npm install
  npm run dev

Before I do a npm run dev — we would check the vite.config.ts, & add an option for the port.

https://vitejs.dev/config/ — For the config options

I just added a server.port with 3250.

Adding the User Inactivity changes

Since this feature, should be across the entire application, i.e well the user did nothing for the past xx mins, and we would be logging them out.

So would add it to a separate component ( Inactivity.tsx ) & have it nest App.

Coding Inactivity.tsx

1. The first thing, that I got stuck on was — React 18 + Typescript, since

In React 18 the FunctionalComponent interface has changed. The PropsWithChildren type is omitted from the props type of a FunctionalComponent after React 18, this means that you have to include the children prop yourself

https://stackoverflow.com/questions/59106742/typescript-error-property-children-does-not-exist-on-type-reactnode

2. The other thing is showing the loggedInStatus, which does not show up just the true / false . Instead I used

IsLoggedIn : {!isLoggedIn ? “Not Logged In” : “Is Logged In”}

Looking at the code from Inactivity, there are a couple of values, that should be coming in from an env file — expiryTimeInterval, localStorageKeyName, checkInterval

and so these would be added to the .env file

https://vitejs.dev/guide/env-and-mode.html
To prevent accidentally leaking env variables to the client, only variables prefixed with VITE_ are exposed to your Vite-processed code

VITE_EXPIRY_TIME_INTERVAL=10000
VITE_LS_EXPIRY_KEY_NAME=expiryTime
VITE_CHECK_INTERVAL=5000

and using them via

const updateExpiryTime = () => {
    const expiryTime = Date.now() + parseInt(import.meta.env.VITE_EXPIRY_TIME_INTERVAL, 10);
    localStorage.setItem(import.meta.env.VITE_LS_EXPIRY_KEY_NAME, expiryTime.toString());
}

Next part would be to add some styling, probably add some Tailwind

Main Article — For Combo learning