<commit_before>import {Link, useNavigate} from "react-router-dom";
import {useEffect, useState} from "react";

import {deleteTeam, getMyTeams} from "../api";
import I18n from "i18n-js";
import {ROLES} from "../utils/roles";
import {Page} from "../components/Page";
import {DropDownMenu} from "../components/DropDownMenu";
import {ReactComponent as SearchIcon} from "../icons/search.svg";
import {ReactComponent as BinIcon} from "../icons/bin-1.svg";
import blockedIcon from "../icons/allowances-no-talking.svg";

import "./MyTeams.scss"
import {Button} from "../components/Button";
import {SortButton} from "../components/SortButton";
import ConfirmationDialog from "../components/ConfirmationDialog";
import {Tab, Tabs} from "../components/Tabs";


export const MyTeams = () => {
    const navigate = useNavigate();
    const [teams, setTeams] = useState({teamSummaries: []});

    const [searchQuery, setSearchQuery] = useState("");
    const [teamsFilter, setTeamsFilter] = useState({value: "ALL", label: ""});
    const [sort, setSort] = useState({field: "membershipCount", direction: "ascending"});
    const [displayedTeams, setDisplayedTeams] = useState([]);

    const [confirmation, setConfirmation] = useState({});
    const [confirmationOpen, setConfirmationOpen] = useState(false);

    useEffect(() => {
        getMyTeams().then(teams => {
            setTeams(teams);
            setTeamsFilter({value: "ALL", label: `${I18n.t(`myteams.filters.all`)} (${teams.teamSummaries.length})`});
        })
    }, []);

    useEffect(() => {
        updateDisplayedTeams()
    }, [teams, searchQuery, teamsFilter, sort])

    const processDelete = (team, showConfirmation) => {
        if (showConfirmation) {
            setConfirmation({
                cancel: () => setConfirmationOpen(false),
                action: () => processDelete(team, false),
                warning: false,
                question: I18n.t("myteams.confirmations.delete")
            });
            setConfirmationOpen(true);
            return;
        }
        deleteTeam(team.id).then(() => {
            getMyTeams().then(teams => {
                setTeams(teams);
            })
        })
        setConfirmationOpen(false);
    }

    const updateDisplayedTeams = () => {
        const toDisplay = teams.teamSummaries.filter(team => {
            if (teamsFilter.value !== team.role && teamsFilter.value !== 'ALL') {
                return
            }

            if (searchQuery === "") {
                return team;
            } else if (team.name.toLowerCase().includes(searchQuery.toLowerCase())) {
                return team
            }
        })
        toDisplay.sort((a, b) => (a[sort.field] > b[sort.field]) ? 1 : -1);
        if (sort.direction !== "ascending") {
            toDisplay.reverse()
        }
        setDisplayedTeams(toDisplay)
    }

    const renderFilterDropdown = () => {
        class FilterCount {
            constructor(value) {
                this.action = () => {
                    setTeamsFilter({value: this.value, label: this.name})
                }
                this.value = value
                if (value === 'ALL') {
                    this.count = teams.teamSummaries.length;<commit_msg>Cleared up the  warning so we can enjoy a green build...<commit_after>import {Link, useNavigate} from "react-router-dom";
import {useEffect, useState} from "react";

import {deleteTeam, getMyTeams} from "../api";
import I18n from "i18n-js";
import {ROLES} from "../utils/roles";
import {Page} from "../components/Page";
import {DropDownMenu} from "../components/DropDownMenu";
import {ReactComponent as SearchIcon} from "../icons/search.svg";
import {ReactComponent as BinIcon} from "../icons/bin-1.svg";
import blockedIcon from "../icons/allowances-no-talking.svg";

import "./MyTeams.scss"
import {Button} from "../components/Button";
import {SortButton} from "../components/SortButton";
import ConfirmationDialog from "../components/ConfirmationDialog";
import {Tab, Tabs} from "../components/Tabs";


export const MyTeams = () => {
    const navigate = useNavigate();
    const [teams, setTeams] = useState({teamSummaries: []});

    const [searchQuery, setSearchQuery] = useState("");
    const [teamsFilter, setTeamsFilter] = useState({value: "ALL", label: ""});
    const [sort, setSort] = useState({field: "membershipCount", direction: "ascending"});
    const [displayedTeams, setDisplayedTeams] = useState([]);

    const [confirmation, setConfirmation] = useState({});
    const [confirmationOpen, setConfirmationOpen] = useState(false);

    useEffect(() => {
        getMyTeams().then(teams => {
            setTeams(teams);
            setTeamsFilter({value: "ALL", label: `${I18n.t(`myteams.filters.all`)} (${teams.teamSummaries.length})`});
        })
    }, []);

    useEffect(() => {
        const updateDisplayedTeams = () => {
            const toDisplay = teams.teamSummaries.filter(team => {
                if (teamsFilter.value !== team.role && teamsFilter.value !== 'ALL') {
                    return false;
                }
                return searchQuery === "" || team.name.toLowerCase().includes(searchQuery.toLowerCase());
            })
            toDisplay.sort((a, b) => (a[sort.field] > b[sort.field]) ? 1 : -1);
            if (sort.direction !== "ascending") {
                toDisplay.reverse()
            }
            setDisplayedTeams(toDisplay)
        }
        updateDisplayedTeams();
    }, [teams, searchQuery, teamsFilter, sort])

    const processDelete = (team, showConfirmation) => {
        if (showConfirmation) {
            setConfirmation({
                cancel: () => setConfirmationOpen(false),
                action: () => processDelete(team, false),
                warning: false,
                question: I18n.t("myteams.confirmations.delete")
            });
            setConfirmationOpen(true);
            return;
        }
        deleteTeam(team.id).then(() => {
            getMyTeams().then(teams => {
                setTeams(teams);
            })
        })
        setConfirmationOpen(false);
    }

    const renderFilterDropdown = () => {
        class FilterCount {
            constructor(value) {
                this.action = () => {
                    setTeamsFilter({value: this.value, label: this.name})
                }
                this.value = value
                if (value === 'ALL') {
                    this.count = teams.teamSummaries.length;
{'fraction_non_alphanumeric': 0.1522475369458128, 'fraction_numerical': 0.0033866995073891628, 'mean_word_length': 2.3403598971722364, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 33, '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': '1768523', 'n_tokens_mistral': 1859, 'n_tokens_neox': 1832, 'n_words': 382}