import { capitalize, isArray, isBoolean } from "lodash"; import React, { FunctionComponent, useCallback, useEffect, useMemo, useState, } from "react"; import { Button, Col, Container, Row } from "react-bootstrap"; import { components } from "react-select"; import { SelectComponents } from "react-select/dist/declarations/src/components"; import { BaseModal, Selector, useModalInformation, useOnModalShow, useShowModal, } from "../../components"; import { BuildKey, isReactText } from "../../utilities"; import { Check, ColCard, Message, StagedChangesContext, Text, useLatest, useMultiUpdate, } from "../components"; import { ProviderInfo, ProviderList } from "./list"; const ModalKey = "provider-modal"; const ProviderKey = "settings-general-enabled_providers"; export const ProviderView: FunctionComponent = () => { const providers = useLatest(ProviderKey, isArray); const showModal = useShowModal(); const select = useCallback( (v?: ProviderInfo) => { showModal(ModalKey, v ?? null); }, [showModal] ); const cards = useMemo(() => { if (providers) { return providers .flatMap((v) => { const item = ProviderList.find((inn) => inn.key === v); if (item) { return item; } else { return []; } }) .map((v, idx) => ( select(v)} > )); } else { return []; } }, [providers, select]); return ( {cards} ); }; export const ProviderModal: FunctionComponent = () => { const { payload, closeModal } = useModalInformation(ModalKey); const [staged, setChange] = useState({}); useEffect(() => { setInfo(payload); }, [payload]); const [info, setInfo] = useState>(payload); useOnModalShow((p) => setInfo(p), ModalKey); const providers = useLatest(ProviderKey, isArray); const updateGlobal = useMultiUpdate(); const deletePayload = useCallback(() => { if (payload && providers) { const idx = providers.findIndex((v) => v === payload.key); if (idx !== -1) { const newProviders = [...providers]; newProviders.splice(idx, 1); updateGlobal({ [ProviderKey]: newProviders }); closeModal(); } } }, [payload, providers, updateGlobal, closeModal]); const addProvider = useCallback(() => { if (info && providers) { const changes = { ...staged }; // Add this provider if not exist if (providers.find((v) => v === info.key) === undefined) { const newProviders = [...providers, info.key]; changes[ProviderKey] = newProviders; } updateGlobal(changes); closeModal(); } }, [info, providers, staged, closeModal, updateGlobal]); const canSave = info !== null; const footer = useMemo( () => ( ), [canSave, payload, deletePayload, addProvider] ); const onSelect = useCallback((item: Nullable) => { if (item) { setInfo(item); } else { setInfo({ key: "", description: "Unknown Provider", }); } }, []); const options = useMemo[]>( () => ProviderList.filter( (v) => providers?.find((p) => p === v.key) === undefined ).map((v) => ({ label: v.name ?? capitalize(v.key), value: v, })), [providers] ); const modification = useMemo(() => { if (info === null) { return null; } const defaultKey = info.defaultKey; const override = info.keyNameOverride ?? {}; if (defaultKey === undefined) { return null; } const itemKey = info.key; const elements: JSX.Element[] = []; const checks: JSX.Element[] = []; for (const key in defaultKey) { const value = defaultKey[key]; let visibleKey = key; if (visibleKey in override) { visibleKey = override[visibleKey]; } else { visibleKey = capitalize(key); } if (isReactText(value)) { elements.push( ); } else if (isBoolean(value)) { checks.push( ); } } return ( {elements} {checks} ); }, [info]); const selectorComponents = useMemo< Partial> >( () => ({ Option: ({ data, ...other }) => { const { label, value } = data as unknown as SelectorOption; return ( {label}

{value.description}

); }, }), [] ); const getLabel = useCallback( (v: ProviderInfo) => v.name ?? capitalize(v.key), [] ); return ( {info?.description} {modification} ); };