<commit_before>/* global CONFIG */
import { useCallback, useMemo, Suspense, useEffect } from 'react';
import { Link, browserHistory } from 'react-router';
import { Helmet } from 'react-helmet';
import cn from 'classnames';

import {
  faKey,
  faShieldAlt,
  faDesktop,
  faPuzzlePiece,
  faEnvelope,
  faUser,
} from '@fortawesome/free-solid-svg-icons';
import { useSelector } from 'react-redux';
import { useMediaQuery } from '../hooks/media-query';
import { Icon } from '../fontawesome-icons';
import { Delayed } from '../lazy-component';
import { Throbber } from '../throbber';
import styles from './settings.module.scss';

const settingsRoot = '/settings';

const settingsSection = (path) => settingsRoot + (path && `/${path}`);

const tabs = [
  { id: '', icon: faUser, title: 'Profile' },
  { id: 'sign-in', icon: faKey, title: 'Sign in' },
  { id: 'privacy', icon: faShieldAlt, title: 'Privacy' },
  { id: 'appearance', icon: faDesktop, title: 'Appearance' },
  { id: 'notifications', icon: faEnvelope, title: 'Notifications' },
  { id: 'app-tokens', icon: faPuzzlePiece, title: 'App tokens' },
];

const loadingPage = (
  <Delayed>
    <p>
      Loading page... <Throbber />
    </p>
  </Delayed>
);

export default function Layout({ children, router }) {
  // Do not allow anonymous access
  const authenticated = useSelector((state) => state.authenticated);
  useEffect(
    () => void (!authenticated && browserHistory.push(`/signin?back=${location.pathname}`)),
    [authenticated],
  );

  const narrowScreen = useMediaQuery('(max-width: 620px)');

  const activeTab = useMemo(() => {
    const { pathname } = router.location;
    if (pathname.indexOf(settingsRoot) !== 0) {
      return '';
    }
    return pathname.slice(settingsRoot.length).replace(/^\//, '').split('/')[0];
  }, [router.location]);

  const selectTab = useCallback(
    ({ target }) => {
      router.push(settingsSection(target.value));
      target.blur();
    },
    [router],
  );

  return (
    <div className="content">
      <Helmet
        titleTemplate={`%s - Settings - ${CONFIG.siteTitle}`}
        defaultTitle={`Settinge - ${CONFIG.siteTitle}`}
      />
      <div className="box">
        <div className="box-header-timeline" role="heading">
          Settings
        </div>
        <div className="box-body">
          {narrowScreen ? (
            <select value={activeTab} className={styles.tabSelect} onChange={selectTab}>
              {tabs.map((t) => (<commit_msg>Do not render child components of Settings page layout for anonymous<commit_after>/* global CONFIG */
import { useCallback, useMemo, Suspense, useEffect } from 'react';
import { Link, browserHistory } from 'react-router';
import { Helmet } from 'react-helmet';
import cn from 'classnames';

import {
  faKey,
  faShieldAlt,
  faDesktop,
  faPuzzlePiece,
  faEnvelope,
  faUser,
} from '@fortawesome/free-solid-svg-icons';
import { useSelector } from 'react-redux';
import { useMediaQuery } from '../hooks/media-query';
import { Icon } from '../fontawesome-icons';
import { Delayed } from '../lazy-component';
import { Throbber } from '../throbber';
import styles from './settings.module.scss';

const settingsRoot = '/settings';

const settingsSection = (path) => settingsRoot + (path && `/${path}`);

const tabs = [
  { id: '', icon: faUser, title: 'Profile' },
  { id: 'sign-in', icon: faKey, title: 'Sign in' },
  { id: 'privacy', icon: faShieldAlt, title: 'Privacy' },
  { id: 'appearance', icon: faDesktop, title: 'Appearance' },
  { id: 'notifications', icon: faEnvelope, title: 'Notifications' },
  { id: 'app-tokens', icon: faPuzzlePiece, title: 'App tokens' },
];

const loadingPage = (
  <Delayed>
    <p>
      Loading page... <Throbber />
    </p>
  </Delayed>
);

export default function Layout({ children, router }) {
  // Do not allow anonymous access
  const authenticated = useSelector((state) => state.authenticated);
  useEffect(
    () => void (!authenticated && browserHistory.push(`/signin?back=${location.pathname}`)),
    [authenticated],
  );

  const narrowScreen = useMediaQuery('(max-width: 620px)');

  const activeTab = useMemo(() => {
    const { pathname } = router.location;
    if (pathname.indexOf(settingsRoot) !== 0) {
      return '';
    }
    return pathname.slice(settingsRoot.length).replace(/^\//, '').split('/')[0];
  }, [router.location]);

  const selectTab = useCallback(
    ({ target }) => {
      router.push(settingsSection(target.value));
      target.blur();
    },
    [router],
  );

  if (!authenticated) {
    // Do not allow anonymous access
    return null;
  }

  return (
    <div className="content">
      <Helmet
        titleTemplate={`%s - Settings - ${CONFIG.siteTitle}`}
        defaultTitle={`Settinge - ${CONFIG.siteTitle}`}
      />
      <div className="box">
        <div className="box-header-timeline" role="heading">
          Settings
        </div>
        <div className="box-body">
          {narrowScreen ? (
            <select value={activeTab} className={styles.tabSelect} onChange={selectTab}>
              {tabs.map((t) => (
{'fraction_non_alphanumeric': 0.17151848937844216, 'fraction_numerical': 0.001966955153422502, 'mean_word_length': 3.3239795918367347, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 39, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6700277', 'n_tokens_mistral': 1621, 'n_tokens_neox': 1593, 'n_words': 383}