<commit_before>import React, {useState, useEffect, useMemo} from 'react';

import {useSubscriber} from './Subscribe';
import {File} from './File';
import {Output} from './Output';

import API from './api';


export const Page: React.FC<void> = () =>   {
  const {iterators, subscribe, unsubscribe} = useSubscriber();
  const [count, setCount] = useState<number>(0);
  const [iterables, setIterables] = useState<Iterable<number>[]>([]);


  useEffect(() => {
      const fetchData =   async (): void => {
          const result: number = await API.get('/count');
          setCount(result.data);
      }
      fetchData();
  }, []);

  useEffect(() => {
      const fetchData =   async (): void => {
          for await (const fileId of [...Array(count).keys()]) {
              API.get(`/file/${fileId}`).then((result) => {
                  setIterables(iterables => {
                      const newIterables = [...iterables];
                      newIterables[fileId] = result.data;
                      return newIterables;
                  });
              });
          }
      }
      fetchData();
  }, [count]);


  const files = useMemo(() => {
      return iterables.map((iterable, index) => {
        return <File key={index} index={index} iterable={iterable} subscribe={subscribe} unsubscribe={unsubscribe} />;
        });
  }, [iterables, subscribe, unsubscribe]);

  return (
    <div className="Page">
      {[...files]}
      <Output iterators={iterators}/>
    </div>
  );
}<commit_msg>fix types<commit_after>import React, {useState, useEffect, useMemo} from 'react';

import {useSubscriber} from './Subscribe';
import {File} from './File';
import {Output} from './Output';

import API from './api';


export const Page: React.FC = () =>   {
  const {iterators, subscribe, unsubscribe} = useSubscriber();
  const [count, setCount] = useState<number>(0);
  const [iterables, setIterables] = useState<Iterable<number>[]>([]);


  useEffect(() => {
      const fetchData = async (): Promise<void> => {
          const result = await API.get('/count');
          setCount(result.data);
      }
      fetchData();
  }, []);

  useEffect(() => {
      const fetchData = async (): Promise<void> => {
          for await (const fileId of [...Array(count).keys()]) {
              API.get(`/file/${fileId}`).then((result) => {
                  setIterables(iterables => {
                      const newIterables = [...iterables];
                      newIterables[fileId] = result.data;
                      return newIterables;
                  });
              });
          }
      }
      fetchData();
  }, [count]);


  const files = useMemo(() => {
      return iterables.map((iterable, index) => {
        return <File key={index} index={index} iterable={iterable} subscribe={subscribe} unsubscribe={unsubscribe} />;
        });
  }, [iterables, subscribe, unsubscribe]);

  return (
    <div className="Page">
      {[...files]}
      <Output iterators={iterators}/>
    </div>
  );
}
{'fraction_non_alphanumeric': 0.1744186046511628, 'fraction_numerical': 0.000664451827242525, 'mean_word_length': 2.290710382513661, 'pattern_counts': {'":': 0, '<': 20, '<?xml version=': 0, '>': 38, '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': '4081363', 'n_tokens_mistral': 887, 'n_tokens_neox': 863, 'n_words': 194}