diff --git a/frontend-react/public/locales/en/translation.json b/frontend-react/public/locales/en/translation.json index 8229f8019..e42b7b1e9 100644 --- a/frontend-react/public/locales/en/translation.json +++ b/frontend-react/public/locales/en/translation.json @@ -1398,6 +1398,7 @@ "Custom URL can be at most 32 characters long": "Custom URL can be at most 32 characters long", "Custom URL has to contain at least one letter": "Custom URL has to contain at least one letter", "Custom URL can only contain letters and numbers": "Custom URL can only contain letters and numbers", + "Filter builds by title or weapon": "Filter builds by title or weapon", "Weapon pool's max size is 5": "Weapon pool's max size is 5", "Bio's max length is 10000": "Bio's max length is 10000", "Profile updated": "Profile updated", diff --git a/frontend-react/src/components/builds/BuildsPage.tsx b/frontend-react/src/components/builds/BuildsPage.tsx index 239dfd2a3..7ee8a1b13 100644 --- a/frontend-react/src/components/builds/BuildsPage.tsx +++ b/frontend-react/src/components/builds/BuildsPage.tsx @@ -114,7 +114,16 @@ const BuildsPage: React.FC = () => { loadMore={(page) => setBuildsToShow(page * 10)} hasMore={buildsToShow < data.searchForBuilds.length} > - + {buildsOnePerUserUnlessExpanded .filter((_, index) => index < buildsToShow) .reduce((buildElementsArray: JSX.Element[], build) => { diff --git a/frontend-react/src/components/user/BuildTab.tsx b/frontend-react/src/components/user/BuildTab.tsx index c334391e8..36efe3635 100644 --- a/frontend-react/src/components/user/BuildTab.tsx +++ b/frontend-react/src/components/user/BuildTab.tsx @@ -1,14 +1,13 @@ -import React from "react" -import { Build } from "../../types" -import useLocalStorage from "@rehooks/local-storage" -import { useState } from "react" -import { HeadGear, ClothingGear, ShoesGear, Ability } from "../../types" -import BuildFormModal from "./BuildFormModal" -import Button from "../elements/Button" -import Alert from "../elements/Alert" -import BuildCard from "../builds/BuildCard" import { Box } from "@chakra-ui/core" +import useLocalStorage from "@rehooks/local-storage" +import React, { useState } from "react" import { useTranslation } from "react-i18next" +import { Ability, Build, ClothingGear, HeadGear, ShoesGear } from "../../types" +import BuildCard from "../builds/BuildCard" +import Alert from "../elements/Alert" +import Button from "../elements/Button" +import Input from "../elements/Input" +import BuildFormModal from "./BuildFormModal" interface BuildTabProps { builds: Build[] @@ -42,6 +41,7 @@ const BuildTab: React.FC = ({ const [APView] = useLocalStorage("prefersAPView") const [formOpen, setFormOpen] = useState(false) const [buildBeingEdited, setBuildBeingEdited] = useState(null) + const [buildFilter, setBuildFilter] = useState("") const { t } = useTranslation() const existingGear = builds @@ -50,6 +50,15 @@ const BuildTab: React.FC = ({ const canAddBuilds = builds.length < 100 || unlimitedBuilds + const filterLower = buildFilter.toLowerCase() + const filteredBuilds = !buildFilter + ? builds + : builds.filter( + (build) => + build.title?.toLowerCase().includes(filterLower) || + build.weapon.toLowerCase().includes(filterLower) + ) + return ( <> {formOpen && ( @@ -70,8 +79,27 @@ const BuildTab: React.FC = ({ {canModifyBuilds && !canAddBuilds && ( {t("users;tooManyBuilds")} )} - - {builds.map((build) => ( + {builds.length > 10 && ( + + + + )} + + {filteredBuilds.map((build) => ( {