From 8d11d1c2a46220df1babbb6e5032ee165949f6da Mon Sep 17 00:00:00 2001
From: "Kalle (Sendou)" <38327916+Sendouc@users.noreply.github.com>
Date: Fri, 27 Nov 2020 15:50:26 +0200
Subject: [PATCH] build filters fix crash if main only ability

---
 TODO.md                            |  2 +-
 components/builds/BuildFilters.tsx | 15 +++---
 pages/builds/[[...slug]].tsx       | 86 +++++++++++++++---------------
 3 files changed, 52 insertions(+), 51 deletions(-)

diff --git a/TODO.md b/TODO.md
index b22aedb3c..0c08dd79b 100644
--- a/TODO.md
+++ b/TODO.md
@@ -3,7 +3,7 @@
 - [x] Can log in
 - [x] Can update builds
 - [ ] Build Analyzer
-  - [ ] Import /analyzer
+  - [x] Import /analyzer
   - [ ] Builds link to /analyzer
 - [ ] Builds mode icons
 - [ ] Script to parse data from Top 500 .json to the DB
diff --git a/components/builds/BuildFilters.tsx b/components/builds/BuildFilters.tsx
index 67e997c67..a723e7f6c 100644
--- a/components/builds/BuildFilters.tsx
+++ b/components/builds/BuildFilters.tsx
@@ -10,7 +10,7 @@ import {
   Radio,
   Select,
 } from "@chakra-ui/react";
-import { Trans } from "@lingui/macro";
+import { t, Trans } from "@lingui/macro";
 import { Ability } from "@prisma/client";
 import AbilityIcon from "components/common/AbilityIcon";
 import {
@@ -49,7 +49,8 @@ const BuildFilters: React.FC<Props> = ({ filters, dispatch }) => {
               mb="-1.2rem"
               fontSize="sm"
               color={
-                filter.abilityPoints!.min > filter.abilityPoints!.max
+                filter.abilityPoints &&
+                filter.abilityPoints.min > filter.abilityPoints.max
                   ? "red.500"
                   : gray
               }
@@ -65,7 +66,8 @@ const BuildFilters: React.FC<Props> = ({ filters, dispatch }) => {
               mb="-1.2rem"
               fontSize="sm"
               color={
-                filter.abilityPoints!.min > filter.abilityPoints!.max
+                filter.abilityPoints &&
+                filter.abilityPoints.min > filter.abilityPoints.max
                   ? "red.500"
                   : gray
               }
@@ -162,11 +164,7 @@ const BuildFilters: React.FC<Props> = ({ filters, dispatch }) => {
         ))}
       </Grid>
       <Box mt={4}>
-        <Box as="label" htmlFor="filterAdder" fontSize="sm" ml={2} color={gray}>
-          Add filter
-        </Box>
         <Select
-          name="filterAdder"
           onChange={(e) =>
             dispatch({
               type: "ADD_FILTER",
@@ -177,6 +175,9 @@ const BuildFilters: React.FC<Props> = ({ filters, dispatch }) => {
           width={48}
           m={2}
         >
+          <option hidden value="NO_VALUE">
+            {t`Filter by ability`}
+          </option>
           {abilities
             .filter(
               (ability) =>
diff --git a/pages/builds/[[...slug]].tsx b/pages/builds/[[...slug]].tsx
index 52b4a3144..1fbca6c6d 100644
--- a/pages/builds/[[...slug]].tsx
+++ b/pages/builds/[[...slug]].tsx
@@ -20,7 +20,7 @@ const BuildsPage = () => {
     dispatch,
     hiddenBuildCount,
   } = useBuildsByWeapon();
-  const { themeColorHex } = useMyTheme();
+  const { secondaryBgColor, themeColorShade } = useMyTheme();
   return (
     <>
       <Breadcrumbs pages={[{ name: t`Builds` }]} />
@@ -31,49 +31,49 @@ const BuildsPage = () => {
         isHeader
       />
       <>
-        <Box mt={4} pr={3} mb="-5rem">
-          {state.weapon ? (
-            <WeaponImage name={state.weapon} size={128} />
-          ) : (
-            <Box w="135px" h="135px" />
-          )}
-        </Box>
-        <Flex
-          justifyContent="flex-end"
-          p={2}
-          mb={8}
-          w="100%"
-          bg={themeColorHex}
-          rounded="lg"
-          fontSize="sm"
-          boxShadow="md"
-          color="black"
-        >
-          <Flex
-            justifyContent="space-between"
-            fontSize="xs"
-            textColor="black"
-            textTransform="uppercase"
-            letterSpacing="wider"
-            lineHeight="1rem"
-            fontWeight="medium"
-          >
-            <Box
-              visibility={
-                data.length === 0 && hiddenBuildCount === 0
-                  ? "hidden"
-                  : undefined
-              }
-            >
-              {data.length} <Trans>builds</Trans>{" "}
-              {hiddenBuildCount > 0 && (
-                <>
-                  (+ {hiddenBuildCount} <Trans>hidden</Trans>)
-                </>
-              )}
+        {state.weapon && (
+          <>
+            <Box mt={4} pr={3} mb="-5rem">
+              <WeaponImage name={state.weapon} size={128} />
             </Box>
-          </Flex>
-        </Flex>
+            <Flex
+              justifyContent="flex-end"
+              p={2}
+              mb={8}
+              w="100%"
+              bg={secondaryBgColor}
+              rounded="lg"
+              fontSize="sm"
+              boxShadow="md"
+            >
+              <Flex
+                justifyContent="space-between"
+                fontSize="xs"
+                textColor="black"
+                textTransform="uppercase"
+                letterSpacing="wider"
+                lineHeight="1rem"
+                fontWeight="medium"
+              >
+                <Box
+                  visibility={
+                    data.length === 0 && hiddenBuildCount === 0
+                      ? "hidden"
+                      : undefined
+                  }
+                  color={themeColorShade}
+                >
+                  {data.length} <Trans>builds</Trans>{" "}
+                  {hiddenBuildCount > 0 && (
+                    <>
+                      (+ {hiddenBuildCount} <Trans>hidden</Trans>)
+                    </>
+                  )}
+                </Box>
+              </Flex>
+            </Flex>
+          </>
+        )}
       </>
 
       {state.weapon && (