<commit_before>/** @jsx jsx **/
import { jsx, css } from "@emotion/core";

import Grid from "@material-ui/core/Grid";
import React = require("react");
import "BooksOfCollection.less";
import { BloomApi } from "../utils/bloomApi";
import { BookButton, bookButtonHeight, bookButtonWidth } from "./BookButton";
import { BookSelectionManager } from "./bookSelectionManager";
import LazyLoad from "react-lazyload";
import { Link } from "../react_components/link";

export interface IBookInfo {
    id: string;
    title: string;
    collectionId: string;
    folderName: string;
    isFactory: boolean;
}

// A very minimal set of collection properties for now
export interface ICollection {
    isEditableCollection: boolean;
    isFactoryInstalled: boolean;
    containsDownloadedBooks: boolean;
    id: string;
}

export const BooksOfCollection: React.FunctionComponent<{
    collectionId: string;
    isEditableCollection: boolean;
    manager: BookSelectionManager;
    isSpreadsheetFeatureActive: boolean;
    // If true, the collection will be wrapped in a LazyLoad so that most of its rendering
    // isn't done until it is visible on screen.
    lazyLoadCollection?: boolean;
}> = props => {
    if (!props.collectionId) {
        window.alert("null collectionId");
    }
    const collectionQuery = `collection-id=${encodeURIComponent(
        props.collectionId
    )}`;

    const books = BloomApi.useWatchApiData<Array<IBookInfo>>(
        `collections/books?${collectionQuery}`,
        [],
        "editableCollectionList",
        "reload:" + props.collectionId
    );

    //const selectedBookInfo = useMonitorBookSelection();
    const collection: ICollection = BloomApi.useApiData(
        `collections/collectionProps?${collectionQuery}`,
        {
            isEditableCollection: props.isEditableCollection,
            isFactoryInstalled: true,
            containsDownloadedBooks: false,
            id: props.collectionId
        }
    );
    // not getting these from the api currently, and I'm not sure the initial defaults will carry over
    // when we get data from the API.
    collection.isEditableCollection = props.isEditableCollection;
    collection.id = props.collectionId;

    // This is an approximation. 5 buttons per line is about what we get in a default
    // layout on a fairly typical screen. We'd get a better approximation if we used
    // the width of a button and knew the width of the container. But I think this is good
    // enough. Worst case, we expand a bit more than we need.
    const collectionHeight = bookButtonHeight * Math.ceil(books.length / 5);

    const content = (
        <div
            key={"BookCollection-" + props.collectionId}
            className="bookButtonPane"
            style={{ cursor: "context-menu" }}
        >
            {books.length > 0 && (
                <Grid
                    container={true}
                    spacing={0}
                    direction="row"
                    justify="flex-start"
                    alignItems="flex-start"
                >
                    {books?.map(book => {
                        return (
                            <Grid item={true} className="book-wrapper">
                                <LazyLoad
                                    height={bookButtonHeight}
                                    // Tells lazy loader to look for the parent element that has overflowY set to scroll or
                                    // auto. This requires a patch to react-lazyload (as of 3.2.0) because currently it looks for
                                    // a parent that has overflow:scroll or auto in BOTH directions, which is not what we're getting
                                    // from our splitter.
                                    // Note: using this is better than using splitContainer, because that has multiple bugs
                                    // that are not as easy to patch. See https://github.com/twobin/react-lazyload/issues/371.
                                    overflow={true}
                                    resize={true} // expand lazy elements as needed when container resizes
                                    // We need to specify a placeholder because the default one has zero width,
                                    // and therefore the parent grid thinks they will all fit on one line,
                                    // and then they're all visible so we get no laziness.
                                    placeholder={
                                        <div
                                            className="placeholder"
                                            style={{
                                                height:
                                                    bookButtonHeight.toString(
                                                        10
                                                    ) + "px",
                                                width:
                                                    bookButtonWidth.toString(
                                                        10
                                                    ) + "px"
                                            }}
                                        ></div>
                                    }
                                >
                                    <BookButton<commit_msg>Make thumbnail update more reliable (BL-11017)<commit_after>/** @jsx jsx **/
import { jsx, css } from "@emotion/core";

import Grid from "@material-ui/core/Grid";
import React = require("react");
import "BooksOfCollection.less";
import { BloomApi } from "../utils/bloomApi";
import { BookButton, bookButtonHeight, bookButtonWidth } from "./BookButton";
import { BookSelectionManager } from "./bookSelectionManager";
import LazyLoad from "react-lazyload";
import { Link } from "../react_components/link";

export interface IBookInfo {
    id: string;
    title: string;
    collectionId: string;
    folderName: string;
    isFactory: boolean;
}

// A very minimal set of collection properties for now
export interface ICollection {
    isEditableCollection: boolean;
    isFactoryInstalled: boolean;
    containsDownloadedBooks: boolean;
    id: string;
}

export const BooksOfCollection: React.FunctionComponent<{
    collectionId: string;
    isEditableCollection: boolean;
    manager: BookSelectionManager;
    isSpreadsheetFeatureActive: boolean;
    // If true, the collection will be wrapped in a LazyLoad so that most of its rendering
    // isn't done until it is visible on screen.
    lazyLoadCollection?: boolean;
}> = props => {
    if (!props.collectionId) {
        window.alert("null collectionId");
    }
    const collectionQuery = `collection-id=${encodeURIComponent(
        props.collectionId
    )}`;

    const books = BloomApi.useWatchApiData<Array<IBookInfo>>(
        `collections/books?${collectionQuery}`,
        [],
        "editableCollectionList",
        "reload:" + props.collectionId
    );

    //const selectedBookInfo = useMonitorBookSelection();
    const collection: ICollection = BloomApi.useApiData(
        `collections/collectionProps?${collectionQuery}`,
        {
            isEditableCollection: props.isEditableCollection,
            isFactoryInstalled: true,
            containsDownloadedBooks: false,
            id: props.collectionId
        }
    );
    // not getting these from the api currently, and I'm not sure the initial defaults will carry over
    // when we get data from the API.
    collection.isEditableCollection = props.isEditableCollection;
    collection.id = props.collectionId;

    // This is an approximation. 5 buttons per line is about what we get in a default
    // layout on a fairly typical screen. We'd get a better approximation if we used
    // the width of a button and knew the width of the container. But I think this is good
    // enough. Worst case, we expand a bit more than we need.
    const collectionHeight = bookButtonHeight * Math.ceil(books.length / 5);

    const content = (
        <div
            key={"BookCollection-" + props.collectionId}
            className="bookButtonPane"
            style={{ cursor: "context-menu" }}
        >
            {books.length > 0 && (
                <Grid
                    container={true}
                    spacing={0}
                    direction="row"
                    justify="flex-start"
                    alignItems="flex-start"
                >
                    {books?.map(book => {
                        return (
                            <Grid
                                item={true}
                                key={book.id}
                                className="book-wrapper"
                            >
                                <LazyLoad
                                    height={bookButtonHeight}
                                    // Tells lazy loader to look for the parent element that has overflowY set to scroll or
                                    // auto. This requires a patch to react-lazyload (as of 3.2.0) because currently it looks for
                                    // a parent that has overflow:scroll or auto in BOTH directions, which is not what we're getting
                                    // from our splitter.
                                    // Note: using this is better than using splitContainer, because that has multiple bugs
                                    // that are not as easy to patch. See https://github.com/twobin/react-lazyload/issues/371.
                                    overflow={true}
                                    resize={true} // expand lazy elements as needed when container resizes
                                    // We need to specify a placeholder because the default one has zero width,
                                    // and therefore the parent grid thinks they will all fit on one line,
                                    // and then they're all visible so we get no laziness.
                                    placeholder={
                                        <div
                                            className="placeholder"
                                            style={{
                                                height:
                                                    bookButtonHeight.toString(
                                                        10
                                                    ) + "px",
                                                width:
                                                    bookButtonWidth.toString(
                                                        10
                                                    ) + "px"
                                            }}
                                        ></div>
                                    }
                                >
                                    <BookButton
{'fraction_non_alphanumeric': 0.07350009062896502, 'fraction_numerical': 0.002990755845568244, 'mean_word_length': 1.2865727310401989, 'pattern_counts': {'":': 0, '<': 23, '<?xml version=': 0, '>': 27, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 88, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '932765', 'n_tokens_mistral': 2377, 'n_tokens_neox': 2283, 'n_words': 785}