imanshu03

import React, { FC, ReactNode } from 'react';
import clsx from 'clsx';
import { useBtn } from './context';

type SlotProps = { children?: ReactNode; className?: string };

export const Icon: FC<SlotProps> = ({ children, className }) => {
  const { size } = useBtn();
  const icon = size === 'sm' ? 'size-4' : size === 'md' ? 'size-5' : 'size-5';
  return (

imanshu03

<button id="win-button">Win</button>
<button id="loose-button">Loose</button>
<script>
    const { promise, resolve, reject } = createDeferredExecution();

    document.getElementById("win-button").addEventListener("click", () => {
        resolve("You won! 🎉");
    });
    document.getElementById("loose-button").addEventListener("click", () => {
        reject("You loose 😔");

imanshu03

<button id="win-button">Win</button>
<button id="loose-button">Loose</button>
<script>
    function winButtonClickHandler() {
        return new Promise((resolve) => {
            document
            .getElementById("win-button")
            .addEventListener("click", () => {
                resolve("You won! 🎉");
            });

imanshu03

const createDeferredExecution = () => {
    let resolve, reject;
    const promise = new Promise((res,rej) => {
        resolve = res;
        reject = rej;
    });
    return {
        promise,
        resolve,
        reject

imanshu03

import React from "react";
import withUserPermission from "./withUserPermission";

const Component1: React.FC = (props) => {
  return (
    <p>Component only accessible if user has ACCESS_COMPONENT1 permission</p>
  );
};

export default withUserPermission(Component1, 'ACCESS_COMPONENT1');

imanshu03

import React, { useContext } from "react";
import { UserPermissionStore } from "./UserPermissionProvider";

const withUserPermission = (Component, requiredPermission) => (props) => {
  const { userPermission } = useContext(UserPermissionStore);

  if (!userPermission[requiredPermission]) return null;

  return <Component {...props} />;
};

imanshu03

import React from "react";
import Component1 from "./Component1";
import Component2 from "./Component2";
import Component3 from "./Component3";
import UserPermissionProvider from "./UserPermissionProvider";

const App = (props) => {
  return (
    <UserPermissionProvider>
      <div>

imanshu03

import React, { createContext, useState, useEffect } from "react";

export const UserPermissionStore = createContext({ userPermission: {} });

const UserPermissionProvider = (props) => {
  const { children } = props;
  const [userPermission, setUserPermission] = useState({});

  useEffect(() => {
    const permissions = {

imanshu03

import React from "react";

const Component2: React.FC = (props) => {
  return (
    <p>Component only accessible if user has ACCESS_COMPONENT2 permission</p>
  );
};

export default Component2;

imanshu03

import React from "react";

const Component1: React.FC = (props) => {
  return (
    <p>Component only accessible if user has ACCESS_COMPONENT1 permission</p>
  );
};

export default Component1;