<commit_before>/*
 @author <NAME>
 @component AppWorkshop
 */

screens.app.workshop = function AppWorkshop(me, { core, ui, widget, db, lib, react }) {
    const {
        DropDown,
        Item,
        Bar,
        Field,
        Element,
        Direction,
        Language,
        Text,
        List,
        Clone,
        Separator
    } = react;

    const AppToolbar = ({ meetingState, languageState, filterState, sortState, sortDirectionState }) => {
        const languageItems = (me.languages || []).map(language => {
            const name = core.string.title(language.name);
            return (<Item key={language.id} id={language.id}>{name}</Item>);
        });
        const sortItems = (me.sort || []).map(sort => {
            return (<Item key={sort.id} id={sort.id}>{sort.name}</Item>);
        });
        const sortDirectionItems = (me.sortDirection || []).map(sort => {
            return (<Item key={sort.id} id={sort.id}>{sort.name}</Item>);
        });
        const filterItems = (me.filters || []).map(filter => {
            return (<Item key={filter.id} id={filter.id}>{filter.name}</Item>);
        });
        const meetingItems = (me.meetings || []).map(meeting => {
            return (<Item key={meeting.name} id={meeting.id}>{meeting.name}</Item>);
        });
        const noneItem = (<Item id="none" multiple={false}>
            <Text language="eng">None</Text>
            <Text language="heb">אין</Text>
        </Item>);
        return (
            <Bar>
                <Field label={
                    <>
                        <Text language="eng">Language</Text>
                        <Text language="heb">שפה</Text>
                    </>
                }>
                    <DropDown state={languageState}>
                        {languageItems}
                    </DropDown>
                </Field>
                <Field label={
                    <>
                        <Text language="eng">Sort</Text>
                        <Text language="heb">מיון</Text>
                    </>
                }>
                    <DropDown state={sortState}>
                        {sortItems}
                        <Separator />
                        <Clone state={sortDirectionState} hideCurrent={true}>
                            {sortDirectionItems}
                        </Clone>
                    </DropDown>
                </Field>
                <Field label={
                    <>
                        <Text language="eng">Filter</Text>
                        <Text language="heb">סינון</Text>
                    </>
                }>
                    <DropDown state={filterState}>
                        {noneItem}
                        {filterItems}
                    </DropDown>
                </Field>
                <Field label={
                    <>
                        <Text language="eng">Meeting</Text>
                        <Text language="heb">פגישה</Text>
                    </>
                }>
                    <DropDown state={meetingState}>
                        <Item id={0} hideInList={true}>
                            <Text language="eng">None</Text>
                            <Text language="heb">בלי</Text>
                        </Item>
                        {meetingItems}
                    </DropDown>
                </Field>
            </Bar>
        );
    };

    const Participant = ({ user_name, count, active, select }) => {
        const disabled = count <= 0;
        if (disabled) {
            select = null;
        }
        return (<Element className={{ "app-workshop-participant": true, active: active && !disabled, disabled }} onClick={select}>
            <Element className="app-workshop-participant-name">{user_name}</Element>
        </Element>);
    };

    const AppHub = ({ meetingState, participantState, filterState, sortState, sortDirectionState, updateState, users }) => {
        const [meeting] = meetingState;
        const [participant, setParticipant] = participantState;
        const [sort] = sortState;
        const [filter] = filterState;
        const [direction] = sortDirectionState;
        react.util.useSubscribe(meetingState);
        react.util.useSubscribe(participantState);
        react.util.useSubscribe(sortState);
        react.util.useSubscribe(updateState);
        react.util.useSubscribe(filterState);
        const items = react.util.useData(() => {
            let items = me.participants;
            items = items.filter(item => item.meetingId === meeting);
            me.filters.forEach(filterItem => {
                if (filter.includes(filterItem.id)) {
                    items = filterItem.filter(items);
                }
            });
            items = me.sort.find(item => item.id === sort).sort(items);
            if (direction === "asc") {
                items = items.reverse();
            }
            items = items.map(item => {
                const selectParticipant = () => {
                    setParticipant(item.user_id);
                }
                return (
                    <Participant key={item.user_id} {...item} active={participant === item.user_id} select={selectParticipant} />
                );
            });
            return items;
        }, [users, meeting, sort, filter]);
        return (<Element className="app-workshop-participants">
            {items}
        </Element>);
    };

    const Main = () => {
        const firstMeetingId = me.meetings && me.meetings.length && me.meetings[0].id;
        const delayState = react.util.useState(0);
        const meetingState = react.util.useState(firstMeetingId);
        const participantState = react.util.useState(0);
        const languageState = react.util.useState("eng");
        const sortState = react.util.useState("date");
        const filterState = react.util.useState(["current"]);
        const sortDirectionState = react.util.useState("desc");
        const updateState = react.util.useState(0);
        const [meetingId, setMeetingId] = meetingState;
        const [language] = languageState;
        const [delay] = delayState;
        const direction = me.languages.find(item => item.id === language).direction;
        React.useEffect(() => {
            if (delay) {
                me.timerHandle = setInterval(me.loadParticipants, delay);
            }
            else if (me.timerHandle) {
                clearInterval(me.timerHandle);
                me.timerHandle = null;
            }
            me.loadMeetings();
            if (!meetingId) {
                setMeetingId(firstMeetingId);
            }
            return () => {
                if (me.timerHandle) {
                    clearInterval(me.timerHandle);
                    me.timerHandle = null;
                }
            };
        }, [delay]);
        me.redraw = () => {
            const [counter, setCounter] = updateState;
            if (!meetingId) {
                setMeetingId(firstMeetingId);
            }
            setCounter(counter + 1);
        };
        const state = {
            meetingState,
            participantState,
            languageState,
            sortState,
            filterState,
            sortDirectionState,
            updateState,
            delayState
        };
        return (
            <Direction direction={direction}>
                <Language language={language}>
                    <AppToolbar {...state} />
                    <AppHub {...state} />
                </Language>
            </Direction>
        );<commit_msg>bug fixes<commit_after>/*
 @author <NAME>
 @component AppWorkshop
 */

screens.app.workshop = function AppWorkshop(me, { core, ui, widget, db, lib, react }) {
    const {
        DropDown,
        Item,
        Bar,
        Field,
        Element,
        Direction,
        Language,
        Text,
        List,
        Clone,
        Separator
    } = react;

    const AppToolbar = ({ meetingState, languageState, filterState, sortState, sortDirectionState }) => {
        const languageItems = (me.languages || []).map(language => {
            const name = core.string.title(language.name);
            return (<Item key={language.id} id={language.id}>{name}</Item>);
        });
        const sortItems = (me.sort || []).map(sort => {
            return (<Item key={sort.id} id={sort.id}>{sort.name}</Item>);
        });
        const sortDirectionItems = (me.sortDirection || []).map(sort => {
            return (<Item key={sort.id} id={sort.id}>{sort.name}</Item>);
        });
        const filterItems = (me.filters || []).map(filter => {
            return (<Item key={filter.id} id={filter.id}>{filter.name}</Item>);
        });
        const meetingItems = (me.meetings || []).map(meeting => {
            return (<Item key={meeting.name} id={meeting.id}>{meeting.name}</Item>);
        });
        const noneItem = (<Item id="none" multiple={false}>
            <Text language="eng">None</Text>
            <Text language="heb">אין</Text>
        </Item>);
        return (
            <Bar>
                <Field label={
                    <>
                        <Text language="eng">Language</Text>
                        <Text language="heb">שפה</Text>
                    </>
                }>
                    <DropDown state={languageState}>
                        {languageItems}
                    </DropDown>
                </Field>
                <Field label={
                    <>
                        <Text language="eng">Sort</Text>
                        <Text language="heb">מיון</Text>
                    </>
                }>
                    <DropDown state={sortState}>
                        {sortItems}
                        <Separator />
                        <Clone state={sortDirectionState} hideCurrent={true}>
                            {sortDirectionItems}
                        </Clone>
                    </DropDown>
                </Field>
                <Field label={
                    <>
                        <Text language="eng">Filter</Text>
                        <Text language="heb">סינון</Text>
                    </>
                }>
                    <DropDown state={filterState}>
                        {noneItem}
                        {filterItems}
                    </DropDown>
                </Field>
                <Field label={
                    <>
                        <Text language="eng">Meeting</Text>
                        <Text language="heb">פגישה</Text>
                    </>
                }>
                    <DropDown state={meetingState}>
                        <Item id={0} hideInList={true}>
                            <Text language="eng">None</Text>
                            <Text language="heb">בלי</Text>
                        </Item>
                        {meetingItems}
                    </DropDown>
                </Field>
            </Bar>
        );
    };

    const Participant = ({ user_name, count, active, select }) => {
        const disabled = count <= 0;
        if (disabled) {
            select = null;
        }
        return (<Element className={{ "app-workshop-participant": true, active: active && !disabled, disabled }} onClick={select}>
            <Element title={user_name} className="app-workshop-participant-name">{user_name}</Element>
        </Element>);
    };

    const AppHub = ({ meetingState, participantState, filterState, sortState, sortDirectionState, updateState, users }) => {
        const [meeting] = meetingState;
        const [participant, setParticipant] = participantState;
        const [sort] = sortState;
        const [filter] = filterState;
        const [direction] = sortDirectionState;
        react.util.useSubscribe(meetingState);
        react.util.useSubscribe(participantState);
        react.util.useSubscribe(sortState);
        react.util.useSubscribe(updateState);
        react.util.useSubscribe(filterState);
        const items = react.util.useData(() => {
            let items = me.participants;
            items = items.filter(item => item.meetingId === meeting);
            me.filters.forEach(filterItem => {
                if (filter.includes(filterItem.id)) {
                    items = filterItem.filter(items);
                }
            });
            items = me.sort.find(item => item.id === sort).sort(items);
            if (direction === "asc") {
                items = items.reverse();
            }
            items = items.map(item => {
                const selectParticipant = () => {
                    setParticipant(item.user_id);
                }
                return (
                    <Participant key={item.user_id} {...item} active={participant === item.user_id} select={selectParticipant} />
                );
            });
            return items;
        }, [users, meeting, sort, filter]);
        return (<Element className="app-workshop-participants">
            {items}
        </Element>);
    };

    const Main = () => {
        const firstMeetingId = me.meetings && me.meetings.length && me.meetings[0].id;
        const delayState = react.util.useState(3000);
        const meetingState = react.util.useState(firstMeetingId);
        const participantState = react.util.useState(0);
        const languageState = react.util.useState("eng");
        const sortState = react.util.useState("date");
        const filterState = react.util.useState(["current"]);
        const sortDirectionState = react.util.useState("desc");
        const updateState = react.util.useState(0);
        const [meetingId, setMeetingId] = meetingState;
        const [language] = languageState;
        const [delay] = delayState;
        const direction = me.languages.find(item => item.id === language).direction;
        React.useEffect(() => {
            if (delay) {
                me.timerHandle = setInterval(me.loadParticipants, delay);
            }
            else if (me.timerHandle) {
                clearInterval(me.timerHandle);
                me.timerHandle = null;
            }
            me.loadMeetings();
            if (!meetingId) {
                setMeetingId(firstMeetingId);
            }
            return () => {
                if (me.timerHandle) {
                    clearInterval(me.timerHandle);
                    me.timerHandle = null;
                }
            };
        }, [delay]);
        React.useEffect(() => {
            if (!meetingId) {
                setMeetingId(firstMeetingId);
            }
        }, [firstMeetingId]);
        me.redraw = () => {
            const [counter, setCounter] = updateState;
            if (!meetingId) {
                setMeetingId(firstMeetingId);
            }
            setCounter(counter + 1);
        };
        const state = {
            meetingState,
            participantState,
            languageState,
            sortState,
            filterState,
            sortDirectionState,
            updateState,
            delayState
        };
        return (
            <Direction direction={direction}>
                <Language language={language}>
                    <AppToolbar {...state} />
                    <AppHub {...state} />
                </Language>
            </Direction>
        );
{'fraction_non_alphanumeric': 0.129522572263722, 'fraction_numerical': 0.001104254628126015, 'mean_word_length': 1.3686153846153846, 'pattern_counts': {'":': 2, '<': 167, '<?xml version=': 0, '>': 204, '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': '6433588', 'n_tokens_mistral': 4031, 'n_tokens_neox': 3814, 'n_words': 713}