vizality/src/core/builtins/settings/components/Advanced.jsx

import { SwitchItem } from '@vizality/components/settings';
import React, { memo, useEffect } from 'react';
import { useFilter } from '@vizality/hooks';
import { Messages } from '@vizality/i18n';

export default memo(({ builtin, search = '' }) => {
  const [ smoothScrolling, setSmoothScrolling ] = vizality.api.settings.useSetting('smoothScrolling', true);
  const [ debugLogs, setDebugLogs ] = vizality.api.settings.useSetting('debugLogs', false);
  const [ hideToken, setHideToken ] = vizality.api.settings.useSetting('hideToken', true);
  const [ experimentalWebPlatform, setExperimentalWebPlatform ] = vizality.api.settings.useSetting('experimentalWebPlatform', false);

  const items = [
    {
      search: [
        Messages.VIZALITY_SETTINGS_SMOOTH_SCROLLING,
        Messages.VIZALITY_SETTINGS_SMOOTH_SCROLLING_DESC,
        'pie'
      ],
      render: query =>
        <SwitchItem
          description={Messages.VIZALITY_SETTINGS_SMOOTH_SCROLLING_DESC}
          value={smoothScrolling}
          onChange={() => setSmoothScrolling(!smoothScrolling)}
          help={Messages.VIZALITY_SETTINGS_SMOOTH_SCROLLING_HELP}
          requiresRestart
        >
          {Messages.VIZALITY_SETTINGS_SMOOTH_SCROLLING}
        </SwitchItem>
    },
    {
      search: [
        Messages.VIZALITY_SETTINGS_DEBUG_LOGS_DESC,
        Messages.VIZALITY_SETTINGS_DEBUG_LOGS,
        'pie'
      ],
      render: query =>
        <SwitchItem
          description={Messages.VIZALITY_SETTINGS_DEBUG_LOGS_DESC}
          value={debugLogs}
          onChange={() => setDebugLogs(!debugLogs)}
          requiresRestart
        >
          {Messages.VIZALITY_SETTINGS_DEBUG_LOGS}
        </SwitchItem>
    },
    {
      search: [
        Messages.VIZALITY_SETTINGS_KEEP_TOKEN_DESC,
        Messages.VIZALITY_SETTINGS_KEEP_TOKEN,
        'pie'
      ],
      render: query =>
        <SwitchItem
          description={Messages.VIZALITY_SETTINGS_KEEP_TOKEN_DESC}
          value={hideToken}
          onChange={() => setHideToken(!hideToken)}
        >
          {Messages.VIZALITY_SETTINGS_KEEP_TOKEN}
        </SwitchItem>
    },
    {
      search: [
        Messages.VIZALITY_SETTINGS_EXP_WEB_PLATFORM_DESC,
        Messages.VIZALITY_SETTINGS_EXP_WEB_PLATFORM,
        'pie'
      ],
      render: query =>
        <SwitchItem
          description={Messages.VIZALITY_SETTINGS_EXP_WEB_PLATFORM_DESC}
          value={experimentalWebPlatform}
          onChange={() => setExperimentalWebPlatform(!experimentalWebPlatform)}
          requiresRestart
        >
          {Messages.VIZALITY_SETTINGS_EXP_WEB_PLATFORM}
        </SwitchItem>
    }
  ];

  const [ query, setQuery, filteredResults ] = useFilter({
    keys: [ 'search' ],
    data: items
  });

  useEffect(() => {
    setQuery(search);
  }, [ search ]);

  return filteredResults.map(result => result.render(query));
});