okapidemo/his/app/src/ManageServiceProvider.js

import React from "react";
import { useEffect, useState } from "react";
import { Link, Outlet, useNavigate, useParams, useLocation } from "react-router-dom";
import "./Index.css";

export const policy = (x ) => {
    if (x.subscriptionPolicy == 1 || x.SubscriptionPolicy == 1) {
        return 'opt-in'
    }

    if (x.subscriptionPolicy == 2 || x.SubscriptionPolicy == 2) {
        return 'opt-out'
    }

    return 'onbekend'
}

export const needConsent = (x ) => {
    if (x.consentPolicy == 1 || x.ConsentPolicy == 1) {
        return true
    }

    if (x.consentPolicy == 2 || x.ConsentPolicy == 2) {
        return false
    }

    return true
}

const ManageServiceProvider = () => {
    const location = useLocation()
    const {connId} = useParams()
    const [loading, setLoading] = useState(false)
    const [connection, setServiceProvider] = useState(null)
    const [services, setServices] = useState([])
    useEffect(() => {
        fetch(`/api/serviceProviders/${connId}`).then(x => x.json()).then(({connection, meta}) => {
            setServiceProvider(connection)
            setServices(meta)
        })
    }, [location])

    const isActive = (connection, service) => {
        return connection.Services.map(x => x.ServiceID).includes(service.id)
    }

    const modService = async (activate, connection, service) => {
        setLoading(true)
        await fetch(`/api/serviceProviders/${connection.ID}/services`, {
            method: "POST",
            headers: {
            'Content-Type': 'application/json'
            },
            body: JSON.stringify({active: activate, service: service.id})
        })

        await fetch(`/api/serviceProviders/${connId}`).then(x => x.json()).then(({connection, meta}) => {
            setServiceProvider(connection)
            setServices(meta)
        })

        setLoading(false)
    }

    return (
        <div>
            <Outlet/>
            <h1 className="t-page-header">Dienstverlener</h1>
            <table className="c-table">
                <thead>
                    <tr>
                        <th>Adres</th>
                        <th>Leverancier</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>{connection && connection.Addr}</td>
                        <td>{connection && (connection.Supplier ? connection.Supplier : 'Onbekend')}</td>
                    </tr>
                </tbody>
            </table>
            <table className="c-table">
                <thead>
                    <tr>
                        <th>Naam</th>
                        <th>Omschrijving</th>
                        <th>Aanmeldpolicy</th>
                        <th>Toestemmingspolicy</th>
                        {!connection || connection.State == "pending" ? null : <th>Status</th>}
                        {!connection || connection.State == "pending" ? null : <th>Acties</th>}
                    </tr>
                </thead>
                <tbody>
                    {
                        services.map((x) => {
                            return (<tr key={x.id}>
                                <td>{x.name}</td>
                                <td>{x.description}</td>
                                <td>{policy(x)}</td>
                                <td>{needConsent(x) ? 'expliciet' : 'verondersteld'}</td>
                                {!connection || connection.State == "pending" ? null : (<td>{isActive(connection, x) ? 'actief' : 'inactief'}</td>)}
                                {!connection || connection.State == "pending" ? null : (<td>{
                                    isActive(connection, x) ? (
                                        <button
                                            onClick={e => modService(false, connection, x)}
                                            disabled={loading}
                                            className="c-button c-button--sm"
                                        >
                                            Deactiveer
                                        </button>
                                    ) : (
                                        <button
                                            onClick={e => modService(true, connection, x)}
                                            disabled={loading}
                                            className="c-button c-button--sm"
                                        >
                                            Activeer
                                        </button>
                                    )
                                }</td>)}
                            </tr>)
                        })
                    }
                </tbody>
            </table>
        </div>
    );
};

export default ManageServiceProvider;