fixes #109

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",

frontend-react/src/components/builds/BuildsPage.tsx

@@ -114,7 +114,16 @@ const BuildsPage: React.FC<RouteComponentProps> = () => {
             loadMore={(page) => setBuildsToShow(page * 10)}
             hasMore={buildsToShow < data.searchForBuilds.length}
           >
-            <Flex flexWrap="wrap" pt="2em">
+            <Flex
+              flexWrap="wrap"
+              pt="2em"
+              width="100vw"
+              position="relative"
+              left="50%"
+              right="50%"
+              mx="-50vw"
+              justifyContent="center"
+            >
               {buildsOnePerUserUnlessExpanded
                 .filter((_, index) => index < buildsToShow)
                 .reduce((buildElementsArray: JSX.Element[], build) => {

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<BuildTabProps> = ({
   const [APView] = useLocalStorage<boolean>("prefersAPView")
   const [formOpen, setFormOpen] = useState(false)
   const [buildBeingEdited, setBuildBeingEdited] = useState<Build | null>(null)
+  const [buildFilter, setBuildFilter] = useState("")
   const { t } = useTranslation()
 
   const existingGear = builds
@@ -50,6 +50,15 @@ const BuildTab: React.FC<BuildTabProps> = ({
 
   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<BuildTabProps> = ({
       {canModifyBuilds && !canAddBuilds && (
         <Alert status="info">{t("users;tooManyBuilds")}</Alert>
       )}
-      <Box display="flex" flexWrap="wrap" mt="1em">
-        {builds.map((build) => (
+      {builds.length > 10 && (
+        <Box>
+          <Input
+            label={t("users;Filter builds by title or weapon")}
+            value={buildFilter}
+            setValue={setBuildFilter}
+          />
+        </Box>
+      )}
+      <Box
+        display="flex"
+        flexWrap="wrap"
+        mt="1em"
+        width="100vw"
+        position="relative"
+        left="50%"
+        right="50%"
+        mx="-50vw"
+        justifyContent="center"
+      >
+        {filteredBuilds.map((build) => (
           <BuildCard
             canModify={canModifyBuilds}
             setBuildBeingEdited={(build: Build) => {