@mikezimm/fps-library-v2/lib/components/molecules/HTTP/HttpApiBox/component.js

Library of reusable typescript/javascript functions, interfaces and constants

import * as React from 'react';
import { useState, useEffect } from 'react';
import { TextField } from '@fluentui/react/lib/TextField';
import ReactJson from '@microlink/react-json-view';
import { fetchAPI } from '../HttpFetch/functions';
import { HTTPApiPerformanceSettings } from '../HttpFetch/HTTPApiPerformanceSettings';
require('@mikezimm/fps-styles/dist/WebInputBox.css');
export const HTTPApiIsValidMessage = `API is valid`;
const HTTPApiHook = (props) => {
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    const { showComponent, textInput, updateInputCallback, httpClient, description, callBackOnError, headers } = props; //appLinks, news , debugMode, wpID,
    const [currentUrl, setCurrentUrl] = useState(textInput);
    const [currentUser, setCurrentUser] = useState(textInput);
    const [currentPass, setCurrentPass] = useState(textInput);
    const [webURLStatus, setWebURLStatus] = useState('Untested');
    // const [ validUrl, setValidUrl ] = useState<string>( '' );
    const [response, setResponse] = useState(null);
    // const [ lastBubble, setLastBubble ] = useState<number>( 0 );
    // useEffect(() => {
    //   setExpandedState( easyPagesExpanded )
    // }, [ debugMode ] );
    // const closeTour = ( ): void => {
    //   const saveBubble = teachBubble + 0;
    //   setLastBubble( saveBubble );
    //   setTeachBubble( null );
    // }
    const delayOnHTTPApiChange = (input, forceRun) => {
        const NewValue = typeof input === 'string' ? input : input && input.target && input.target.value ? input.target.value : '';
        setTimeout(async () => {
            if (currentUrl !== NewValue || forceRun === true) {
                const responseInfo = await fetchAPI(NewValue, httpClient, description, HTTPApiPerformanceSettings, headers);
                if (responseInfo.status === 'Success') {
                    // setValidUrl( NewValue );
                    setCurrentUrl(NewValue);
                    if (updateInputCallback)
                        updateInputCallback(NewValue, responseInfo);
                    setWebURLStatus(HTTPApiIsValidMessage);
                    setResponse(responseInfo);
                }
                else {
                    // setValidUrl( '' );
                    setCurrentUrl(NewValue);
                    if (callBackOnError === true && updateInputCallback)
                        updateInputCallback(NewValue, responseInfo);
                    setWebURLStatus(responseInfo.errorInfo ? responseInfo.errorInfo.friendly : 'Error');
                    setResponse(responseInfo);
                }
            }
        }, 1000);
        // }
    };
    useEffect(() => {
        delayOnHTTPApiChange(textInput, true);
    }, []); // Only trigger on first load
    useEffect(() => {
        delayOnHTTPApiChange(textInput, false);
    }, [textInput]); // When textInput changes
    // const MainContent: JSX.Element = <div style={{ cursor: 'default' }}>
    //   <ul>
    //     <li>These are NOT google maps {`:)`}</li>
    //     <li style={{ padding: '10px 0px', fontSize: 'x-large', color: 'red', fontWeight: 600 }}>Terri to provide further description here</li>
    //   </ul>
    // </div>
    // const InfoElement: JSX.Element = <Accordion
    //   title = { 'More information about this tab'}
    //   defaultIcon = 'Help'
    //   showAccordion = { true }
    //   content = { MainContent }
    //   contentStyles = { { height: '100px' } }
    // />;
    const { fetch } = response.unifiedPerformanceOps;
    const performanceRow = !response || !fetch ? undefined : React.createElement("div", null,
        React.createElement("tr", null,
            React.createElement("td", null, fetch.label),
            React.createElement("td", null, fetch.mode === 1 ? 'View' : 'Edit'),
            React.createElement("td", null,
                fetch.startStr,
                " - "),
            React.createElement("td", null, fetch.ms)));
    const InputLabel = props.inputLabel ? props.inputLabel : `API Endpoint`;
    const HTTPApiElement = showComponent !== true ? null :
        React.createElement("div", null,
            React.createElement("div", { style: { display: 'inline-table', paddingBottom: '20px', paddingTop: '20px', width: '100%' } },
                React.createElement("span", { style: { paddingLeft: '20px', paddingRight: '20px', fontSize: 'larger', fontWeight: 600, whiteSpace: 'nowrap', cursor: 'default' } }, InputLabel),
                React.createElement(TextField, { className: 'web-input', styles: { fieldGroup: [{ width: '75%', maxWidth: '700px' },] }, 
                    // defaultValue={ textInput }
                    value: currentUrl, label: null, autoComplete: 'off', type: 'NOTpassword', canRevealPassword: true, 
                    // onChange={ this._onHTTPApiChange.bind(this) }
                    onChange: delayOnHTTPApiChange.bind(this), onGetErrorMessage: (value) => { return ""; }, validateOnFocusIn: true, validateOnFocusOut: true, multiline: false, autoAdjustHeight: true }),
                React.createElement("span", { style: { color: webURLStatus === HTTPApiIsValidMessage ? 'green' : 'red', whiteSpace: 'nowrap', marginRight: '40px', fontSize: 'larger', fontWeight: 'bolder', cursor: 'default' } }, webURLStatus)),
            performanceRow,
            !response ? React.createElement("div", null, webURLStatus) :
                React.createElement(ReactJson, { src: response, name: 'Response Details', collapsed: false, displayDataTypes: false, displayObjectSize: false, enableClipboard: true, style: { padding: '20px 0px' }, theme: 'rjv-default', indentWidth: 2 }));
    return (HTTPApiElement);
};
export default HTTPApiHook;
//# sourceMappingURL=component.js.map