<commit_before>// @flow

import React, { Component } from 'react';
import { Icon, Menu, Segment, Sidebar } from 'semantic-ui-react';

import TopBar from './TopBar.js';
import Shelf from './Shelf';
import { getAll } from '../utils/BooksAPI';
import type { BookType } from '../common/flowTypes';

class App extends Component {
	state = {
		filterQuery: '',
		menuVisible: false,
		shelves: [],
		shelvedBooks: {}
	};

	toggleMenu = () => {
		this.setState(state => ({ menuVisible: !state.menuVisible }));
	};

	updateQuery = (query: string) => {
		this.setState({ filterQuery: query.trim() });
	};

	clearQuery = () => {
		this.setState({ filterQuery: '' });
	};

	componentDidMount() {
		getAll().then((books: Array<BookType>) => {
			const shelves = Array.from(new Set(books.map(book => book.shelf)));
			const shelvedBooks = shelves.reduce((map, shelf) => {
				map[shelf] = books.filter(book => book.shelf === shelf);
				return map;
			}, {});
			this.setState({
				shelves,
				shelvedBooks
			});
		});
	}

	render() {
		const { shelves, shelvedBooks } = this.state;

		const showingShelves = shelves
			.filter((shelf: string) => shelvedBooks[shelf])
			.map(shelf => {
				return (
					<Shelf
						key={shelf + '-id'}
						title={shelf}
						books={this.state.shelvedBooks[shelf]}
						filterQuery={this.state.filterQuery}
						clearQuery={this.clearQuery}
					/>
				);
			});

		return (
			<div className="App">
				<TopBar
					filterQuery={this.state.filterQuery}
					toggleMenu={this.toggleMenu}
					updateQuery={this.updateQuery}
				/>

				<Sidebar.Pushable as={Segment} attached="bottom">
					<Sidebar
						width="thin"
						as={Menu}
						animation="uncover"
						visible={this.state.menuVisible}
						icon="labeled"
						vertical
						inverted
					>
						<Menu.Item>
							<Icon name="home" />Home
						</Menu.Item>
						<Menu.Item>
							<Icon name="search" />Search
						</Menu.Item>
					</Sidebar>
					<Sidebar.Pusher>
						{showingShelves}
					</Sidebar.Pusher>
				</Sidebar.Pushable>
			</div>
		);
	}
}

export default App;<commit_msg>add search and main routes to App<commit_after>// @flow

import React, { Component } from 'react';
import { Icon, Menu, Segment, Sidebar } from 'semantic-ui-react';
import { Route } from 'react-router-dom';

import TopBar from './TopBar.js';
import Shelf from './Shelf';
import { getAll } from '../utils/BooksAPI';
import type { BookType } from '../common/flowTypes';

class App extends Component {
	state = {
		filterQuery: '',
		menuVisible: false,
		shelves: [],
		shelvedBooks: {}
	};

	toggleMenu = () => {
		this.setState(state => ({ menuVisible: !state.menuVisible }));
	};

	updateQuery = (query: string) => {
		this.setState({ filterQuery: query.trim() });
	};

	clearQuery = () => {
		this.setState({ filterQuery: '' });
	};

	componentDidMount() {
		getAll().then((books: Array<BookType>) => {
			const shelves = Array.from(new Set(books.map(book => book.shelf)));
			const shelvedBooks = shelves.reduce((map, shelf) => {
				map[shelf] = books.filter(book => book.shelf === shelf);
				return map;
			}, {});
			this.setState({
				shelves,
				shelvedBooks
			});
		});
	}

	render() {
		const { shelves, shelvedBooks } = this.state;

		const showingShelves = shelves
			.filter((shelf: string) => shelvedBooks[shelf])
			.map(shelf => {
				return (
					<Shelf
						key={shelf + '-id'}
						title={shelf}
						books={this.state.shelvedBooks[shelf]}
						filterQuery={this.state.filterQuery}
						clearQuery={this.clearQuery}
					/>
				);
			});

		return (
			<div className="App">
				<TopBar
					filterQuery={this.state.filterQuery}
					toggleMenu={this.toggleMenu}
					updateQuery={this.updateQuery}
				/>

				<Sidebar.Pushable as={Segment} attached="bottom">
					<Sidebar
						width="thin"
						as={Menu}
						animation="uncover"
						visible={this.state.menuVisible}
						icon="labeled"
						vertical
						inverted
					>
						<Menu.Item>
							<Icon name="home" />Home
						</Menu.Item>
						<Menu.Item>
							<Icon name="search" />Search
						</Menu.Item>
					</Sidebar>

					<Route
						exact
						path="/"
						render={() =>
							<Sidebar.Pusher>
								{showingShelves}
							</Sidebar.Pusher>}
					/>
					<Route
						exact
						path="/search"
						render={() =>
							<Sidebar.Pusher>
								<div>welcome to the search screen.</div>
							</Sidebar.Pusher>}
					/>
				</Sidebar.Pushable>
			</div>
		);
	}
}

export default App;
{'fraction_non_alphanumeric': 0.16841167297839163, 'fraction_numerical': 0.0, 'mean_word_length': 2.6563517915309447, 'pattern_counts': {'":': 0, '<': 43, '<?xml version=': 0, '>': 65, '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': '1511282', 'n_tokens_mistral': 2013, 'n_tokens_neox': 1499, 'n_words': 288}