librz

<section className="h-full w-full flex justify-center items-center gap-8 p-6 flex-col md:flex-row">
  <div className="rounded-full w-36 h-36 bg-black font-semibold flex justify-center items-center text-6xl text-white">
    404
  </div>
  <div className="flex flex-col items-end">
    <div className="text-5xl">Oops</div>
    <div className="text-2xl mt-2 mb-6 text-end">This page doesn't exist</div>
    <span className="bg-black text-white px-4 py-2 rounded-md cursor-pointer">
      Home
    </span>

librz

import { FallbackProps } from "react-error-boundary";
import React, { CSSProperties } from "react";

const ErrorFallback: React.ComponentType<FallbackProps> = ({
  error,
  resetErrorBoundary,
}) => {
  const sectionStyle: CSSProperties = {
    display: "flex",
    flexDirection: "column",

librz

function check() {
  const minimalUserResponseInMiliseconds = 200;
  console.clear();
  let before = new Date().getTime();
  debugger;
  let after = new Date().getTime();
  if (after - before > minimalUserResponseInMiliseconds) {
    document.write(" Don't open Developer Tools.");
    window.location.reload();
  }

librz

const fs = require('fs');

fs.readFile('content.txt', 'utf-8', (err, data) => {
	if (err) {
		console.log(err)
		return;
	}
	let charsCount = 0;
	let totalBytes = 0
	Array.from(data).forEach(char => {

librz

direct use of /v1/rule/targets:

1. <AlarmSettingModal /> (Alarm Mute Settings)

only devices are used:

devices.map(device =>
  <Option key={device.mac}>
    <Icon type={getDeviceIcon(device)} />

librz

// this works but is quite messy and error prone
function getUrl(server: string, path: string, name: string, age: number): string {
  const trimmedServer = server.endsWith("/") ? server.slice(0, -1) : server; // remove trialing slash if any
  const origin = trimmedServer.startsWith("http") ? trimmedServer : `https://${trimmedServer}`; // add protocol if needed
  const trimmedPath = path.endsWith("/") ? path.slice(0, -1) : path; // remove trialing slash if any
  const realPath = trimmedPath.startsWith("/") ? trimmedPath : `/${trimmedPath}`; // add slash to begining if needed
  const params = new URLSearchParams({
    name: name,
    age: String(age)

librz

import { FC } from "react";

const Home: FC = () => {

  return (
    <div>
      <header>
        <img src="/images/site-logo.svg" alt="logo" />
      </header>
      <main 

librz

/**
 * example of a wrapper of browser's native fetch method
 * Assumptions:
 * 1. server uses JWT & bearer token for authorization
 * 2. client stores auth token in local storage
 * 3. response's content type
 *   a. "application/json" for normal response
 *   b. "application/octet-stream" for file download
 *   c. "text/plain" when error
 * 4. server returns 401 when auth token is invalid

librz

import { useState, FC } from "react";

const App: FC = () => {
  const [number, setNumber] = useState(1);

  const nextNumber = number + 1;

  function handleIncrease() {
    setNumber((num) => num + 1);
    console.log("current number is", number); // still the old number

librz

// ref: https://www.patterns.dev/posts/render-props-pattern/
// note: in many cases, render props can be replaced by hooks

import { FC, useState } from "react";

interface IContainerProps {
  children: (bg: "silver" | "gold") => React.ReactNode;
}

const Container: FC<IContainerProps> = ({ children }) => {