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

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

export default memo(({ builtin, search = '' }) => {
  const [ reactDeveloperTools, setReactDeveloperTools ] = vizality.api.settings.useSetting('reactDeveloperTools', false);
  const [ hotReload, setHotReload ] = vizality.api.settings.useSetting('hotReload', false);
  const [ openOverlayDevTools, setOpenOverlayDevTools ] = vizality.api.settings.useSetting('openOverlayDevTools', false);
  const [ discordExperiments, setDiscordExperiments ] = vizality.api.settings.useSetting('discordExperiments', false);

  const items = [
    {
      search: [
        Messages.VIZALITY_SETTINGS_REACT_DEVELOPER_TOOLS,
        Messages.VIZALITY_SETTINGS_REACT_DEVELOPER_TOOLS_DESC
      ],
      render: query =>
        <SwitchItem
          description={Messages.VIZALITY_SETTINGS_REACT_DEVELOPER_TOOLS_DESC}
          value={reactDeveloperTools}
          onChange={() => setReactDeveloperTools(!reactDeveloperTools)}
          info={Messages.VIZALITY_SETTINGS_REACT_DEVELOPER_TOOLS_WARNING}
          requiresRestart
        >
          {Messages.VIZALITY_SETTINGS_REACT_DEVELOPER_TOOLS}
        </SwitchItem>
    },
    {
      search: [
        Messages.VIZALITY_SETTINGS_PLUGIN_HOT_RELOAD,
        Messages.VIZALITY_SETTINGS_PLUGIN_HOT_RELOAD_DESC
      ],
      render: query =>
        <SwitchItem
          description={Messages.VIZALITY_SETTINGS_PLUGIN_HOT_RELOAD_DESC}
          value={hotReload}
          onChange={async () => {
            setHotReload(!hotReload);
            await vizality.manager.plugins.remountAll();
          }}
        >
          {Messages.VIZALITY_SETTINGS_PLUGIN_HOT_RELOAD}
        </SwitchItem>
    },
    {
      search: [
        Messages.VIZALITY_SETTINGS_OVERLAY,
        Messages.VIZALITY_SETTINGS_OVERLAY_DESC
      ],
      render: query =>
        <SwitchItem
          description={Messages.VIZALITY_SETTINGS_OVERLAY_DESC}
          value={openOverlayDevTools}
          onChange={() => setOpenOverlayDevTools(!openOverlayDevTools)}
        >
          {Messages.VIZALITY_SETTINGS_OVERLAY}
        </SwitchItem>
    },
    {
      search: [
        Messages.VIZALITY_SETTINGS_DISCORD_EXPERIMENTS,
        Messages.VIZALITY_SETTINGS_DISCORD_EXPERIMENTS_DESC.format()
      ],
      render: query =>
        <SwitchItem
          description={Messages.VIZALITY_SETTINGS_DISCORD_EXPERIMENTS_DESC.format()}
          value={discordExperiments}
          onChange={() => {
            setDiscordExperiments(!discordExperiments);
            const experimentsModule = getModule(r => r.isDeveloper !== void 0);
            experimentsModule._changeCallbacks.forEach(cb => cb());
          }}
        >
          {Messages.VIZALITY_SETTINGS_DISCORD_EXPERIMENTS}
        </SwitchItem>
    }
  ];

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

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

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