AdGuardHome/client/src/components/ui/Guide/Guide.js

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { Trans, useTranslation } from 'react-i18next';
import i18next from 'i18next';
import { useSelector } from 'react-redux';

import { MOBILE_CONFIG_LINKS } from '../../../helpers/constants';

import Tabs from '../Tabs';
import Icons from '../Icons';
import MobileConfigForm from './MobileConfigForm';

const renderLi = ({ label, components }) => <li key={label}>
    <Trans components={components?.map((props) => {
        if (React.isValidElement(props)) {
            return props;
        }
        const {
            // eslint-disable-next-line react/prop-types
            href, target = '_blank', rel = 'noopener noreferrer', key = '0',
        } = props;

        return <a href={href} target={target} rel={rel} key={key}>link</a>;
    })}>
        {label}
    </Trans>
</li>;

const getDnsPrivacyList = () => [
    {
        title: 'Android',
        list: [
            {
                label: 'setup_dns_privacy_android_1',
            },
            {
                label: 'setup_dns_privacy_android_2',
                components: [
                    {
                        key: 0,
                        href: 'https://adguard.com/adguard-android/overview.html',
                    },
                    <code key="1">text</code>,
                ],
            },
            {
                label: 'setup_dns_privacy_android_3',
                components: [
                    {
                        key: 0,
                        href: 'https://getintra.org/',
                    },
                    <code key="1">text</code>,
                ],
            },
        ],
    },
    {
        title: 'iOS',
        list: [
            {
                label: 'setup_dns_privacy_ios_2',
                components: [
                    {
                        key: 0,
                        href: 'https://adguard.com/adguard-ios/overview.html',
                    },
                    <code key="1">text</code>,
                ],
            },
            {
                label: 'setup_dns_privacy_ios_1',
                components: [
                    {
                        key: 0,
                        href: 'https://itunes.apple.com/app/id1452162351',
                    },
                    <code key="1">text</code>,
                    {
                        key: 2,
                        href: 'https://dnscrypt.info/stamps',
                    },
                ],
            },
        ],
    },
    {
        title: 'setup_dns_privacy_other_title',
        list: [
            {
                label: 'setup_dns_privacy_other_1',
            },
            {
                label: 'setup_dns_privacy_other_2',
                components: [
                    {
                        key: 0,
                        href: 'https://github.com/AdguardTeam/dnsproxy',
                    },
                ],
            },
            {
                href: 'https://github.com/jedisct1/dnscrypt-proxy',
                label: 'setup_dns_privacy_other_3',
                components: [
                    {
                        key: 0,
                        href: 'https://github.com/jedisct1/dnscrypt-proxy',
                    },
                        <code key="1">text</code>,
                ],
            },
            {
                label: 'setup_dns_privacy_other_4',
                components: [
                    {
                        key: 0,
                        href: 'https://support.mozilla.org/kb/firefox-dns-over-https',
                    },
                        <code key="1">text</code>,
                ],
            },
            {
                label: 'setup_dns_privacy_other_5',
                components: [
                    {
                        key: 0,
                        href: 'https://dnscrypt.info/implementations',
                    },
                    {
                        key: 1,
                        href: 'https://dnsprivacy.org/wiki/display/DP/DNS+Privacy+Clients',
                    },
                ],
            },
        ],
    },
];

const renderDnsPrivacyList = ({ title, list }) => (
    <div className="tab__paragraph" key={title}>
        <strong>
            <Trans>{title}</Trans>
        </strong>
        <ul>
            {list.map(({ label, components, renderComponent = renderLi }) => (
                renderComponent({ label, components })
            ))}
        </ul>
    </div>
);

const getTabs = ({
    tlsAddress,
    httpsAddress,
    showDnsPrivacyNotice,
    serverName,
    portHttps,
    t,
}) => ({
    Router: {
        // eslint-disable-next-line react/display-name
        getTitle: () => <p>
            <Trans>install_devices_router_desc</Trans>
        </p>,
        title: 'Router',
        list: ['install_devices_router_list_1',
            'install_devices_router_list_2',
            'install_devices_router_list_3',
            // eslint-disable-next-line react/jsx-key
            <Trans components={[
                <a href="#dhcp" key="0">
                    link
                </a>,
            ]}>install_devices_router_list_4</Trans>,
        ],
    },
    Windows: {
        title: 'Windows',
        list: ['install_devices_windows_list_1',
            'install_devices_windows_list_2',
            'install_devices_windows_list_3',
            'install_devices_windows_list_4',
            'install_devices_windows_list_5',
            'install_devices_windows_list_6'],
    },
    macOS: {
        title: 'macOS',
        list: ['install_devices_macos_list_1',
            'install_devices_macos_list_2',
            'install_devices_macos_list_3',
            'install_devices_macos_list_4'],
    },
    Android: {
        title: 'Android',
        list: ['install_devices_android_list_1',
            'install_devices_android_list_2',
            'install_devices_android_list_3',
            'install_devices_android_list_4',
            'install_devices_android_list_5'],
    },
    iOS: {
        title: 'iOS',
        list: ['install_devices_ios_list_1',
            'install_devices_ios_list_2',
            'install_devices_ios_list_3',
            'install_devices_ios_list_4'],
    },
    dns_privacy: {
        title: 'dns_privacy',
        getTitle: function Title() {
            return <div label="dns_privacy" title={t('dns_privacy')}>
            <div className="tab__text">
                {tlsAddress?.length > 0 && (
                    <div className="tab__paragraph">
                        <Trans
                            values={{ address: tlsAddress[0] }}
                            components={[
                                <strong key="0">text</strong>,
                                <code key="1">text</code>,
                            ]}
                        >
                            setup_dns_privacy_1
                        </Trans>
                    </div>
                )}
                {httpsAddress?.length > 0 && (
                    <div className="tab__paragraph">
                        <Trans
                            values={{ address: httpsAddress[0] }}
                            components={[
                                <strong key="0">text</strong>,
                                <code key="1">text</code>,
                            ]}
                        >
                            setup_dns_privacy_2
                        </Trans>
                    </div>
                )}
                {showDnsPrivacyNotice ? (
                    <div className="tab__paragraph">
                        <Trans
                            components={[
                                <a
                                    href="https://github.com/AdguardTeam/AdguardHome/wiki/Encryption"
                                    target="_blank"
                                    rel="noopener noreferrer"
                                    key="0"
                                >
                                    link
                                </a>,
                                <code key="1">text</code>,
                            ]}
                        >
                            setup_dns_notice
                        </Trans>
                    </div>
                ) : (
                    <>
                        <div className="tab__paragraph">
                            <Trans components={[<p key="0">text</p>]}>
                                setup_dns_privacy_3
                            </Trans>
                        </div>
                        {getDnsPrivacyList().map(renderDnsPrivacyList)}
                        <div>
                            <strong>
                                <Trans>
                                    setup_dns_privacy_ioc_mac
                                </Trans>
                            </strong>
                        </div>
                        <div className="mb-3">
                            <Trans components={{ highlight: <code /> }}>
                                setup_dns_privacy_4
                            </Trans>
                        </div>
                        <MobileConfigForm
                            initialValues={{
                                host: serverName,
                                clientId: '',
                                protocol: MOBILE_CONFIG_LINKS.DOH,
                                port: portHttps,
                            }}
                        />
                    </>
                )}
            </div>
        </div>;
        },
    },
});

const renderContent = ({ title, list, getTitle }) => (
    <div key={title} label={i18next.t(title)}>
        <div className="tab__title">
            {i18next.t(title)}
        </div>
        <div className="tab__text">
            {getTitle?.()}
            {list && (
                <ol>
                    {list.map((item) => (
                        <li key={item}>
                            <Trans>{item}</Trans>
                        </li>
                    ))}
                </ol>
            )}
        </div>
    </div>
);

const Guide = ({ dnsAddresses }) => {
    const { t } = useTranslation();
    const serverName = useSelector((state) => state.encryption?.server_name);
    const portHttps = useSelector((state) => state.encryption?.port_https);
    const tlsAddress = dnsAddresses?.filter((item) => item.includes('tls://')) ?? '';
    const httpsAddress = dnsAddresses?.filter((item) => item.includes('https://')) ?? '';
    const showDnsPrivacyNotice = httpsAddress.length < 1 && tlsAddress.length < 1;

    const [activeTabLabel, setActiveTabLabel] = useState('Router');

    const tabs = getTabs({
        tlsAddress,
        httpsAddress,
        showDnsPrivacyNotice,
        serverName,
        portHttps,
        t,
    });

    const activeTab = renderContent(tabs[activeTabLabel]);

    return (
        <div>
            <Tabs
                tabs={tabs}
                activeTabLabel={activeTabLabel}
                setActiveTabLabel={setActiveTabLabel}
            >
                {activeTab}
            </Tabs>
            <Icons />
        </div>
    );
};

Guide.defaultProps = {
    dnsAddresses: [],
};

Guide.propTypes = {
    dnsAddresses: PropTypes.array,
};

renderDnsPrivacyList.propTypes = {
    title: PropTypes.string.isRequired,
    list: PropTypes.array.isRequired,
    renderList: PropTypes.func,
};

renderContent.propTypes = {
    title: PropTypes.string.isRequired,
    list: PropTypes.array.isRequired,
    getTitle: PropTypes.func,
};

renderLi.propTypes = {
    label: PropTypes.string,
    components: PropTypes.string,
};

export default Guide;