francois-roget

import {useContext, useState} from 'react';
import PermissionContext from "./PermissionContext";
import {Permission} from "../Types";

const usePermission = (permission: Permission) => {
    const [loading, setLoading] = useState(true);
    const [allowed, setAllowed] = useState<boolean>();

    const {isAllowedTo} = useContext(PermissionContext);

francois-roget

type Props = {
    to: Permission;
    fallback?: JSX.Element | string;
    loadingComponent?: JSX.Element | string;
};

// This component is meant to be used everywhere a restriction based on user permission is needed
const Restricted: React.FunctionComponent<Props> = ({to, fallback, loadingComponent, children}) => {

    // We "connect" to the provider thanks to the PermissionContext

francois-roget

import React from 'react';
import {Permission} from "../Types";
import PermissionContext from "./PermissionContext";

type Props = {
    fetchPermission: (p: Permission) => Promise<boolean>
}

type PermissionCache = {
    [key:string]: boolean;

francois-roget

import React from 'react';
import {Permission} from "../Types";
import usePermission from "./usePermission";

type Props = {
    to: Permission;
    fallback?: JSX.Element | string;
};

// This component is meant to be used everywhere a restriction based on user permission is needed

francois-roget

import {useContext} from 'react';
import PermissionContext from "./PermissionContext";
import {Permission} from "../Types";

const usePermission = (permission: Permission) => {
    const {isAllowedTo} = useContext(PermissionContext);
    return isAllowedTo(permission);
}

export default usePermission;

francois-roget

import React, {useContext} from 'react';
import PermissionContext from "./PermissionContext";
import {Permission} from "../Types";

type Props = {
    to: Permission;
    fallback?: JSX.Element | string;
};

// This component is meant to be used everywhere a restriction based on user permission is needed

francois-roget

<PermissionProvider permissions={currentUser.permissions}>
   . . .
    <Restricted to="list.elements">
        <ElementList elements={elements} addElement={addElement} removeElement={removeElement}/>
    </Restricted>

   <div className="container">
       <table className="table table-sm table-hover">
           <thead className="thead-light">
           <tr>

francois-roget

import React, {useContext} from 'react';
import PermissionContext from "./PermissionContext";
import {Permission} from "../Types";

type Props = {
    to: Permission;
};

// This component is meant to be used everywhere a restriction based on user permission is needed
const Restricted: React.FunctionComponent<Props> = ({to, children}) => {

francois-roget

import React from 'react';
import {Permission} from "../Types";
import PermissionContext from "./PermissionContext";

type Props = {
    permissions: Permission[]
}

// This provider is intended to be surrounding the whole application.
// It should receive the users permissions as parameter

francois-roget

import React from 'react';
import {Permission} from "../Types";

type PermissionContextType = {
    isAllowedTo: (permission: Permission) => boolean;
}

// Default behaviour for the Permission Provider Context
// i.e. if for whatever reason the consumer is used outside of a provider.
// The permission will not be granted unless a provider says otherwise