diff --git a/frontend-react/src/components/home/HomePage.tsx b/frontend-react/src/components/home/HomePage.tsx index 29bf4d9cc..1dce1a715 100644 --- a/frontend-react/src/components/home/HomePage.tsx +++ b/frontend-react/src/components/home/HomePage.tsx @@ -1,6 +1,6 @@ import React from "react" import { RouteComponentProps } from "@reach/router" -import { Image, Heading, Flex } from "@chakra-ui/core" +import { Image, Heading, Flex, Box } from "@chakra-ui/core" import { posterGirl } from "../../assets/imageImports" import { useContext } from "react" import MyThemeContext from "../../themeContext" @@ -36,7 +36,9 @@ const HomePage: React.FC = () => { - + + + ) } diff --git a/frontend-react/src/components/home/Stats.tsx b/frontend-react/src/components/home/Stats.tsx index 4bce60560..33763efdb 100644 --- a/frontend-react/src/components/home/Stats.tsx +++ b/frontend-react/src/components/home/Stats.tsx @@ -1,11 +1,10 @@ -import React, { useContext } from "react" import { useQuery } from "@apollo/react-hooks" -import { STATS } from "../../graphql/queries/stats" -import Error from "../common/Error" -import Loading from "../common/Loading" -import { Flex, Box } from "@chakra-ui/core" -import MyThemeContext from "../../themeContext" +import { Box, Flex, Skeleton } from "@chakra-ui/core" import { Link } from "@reach/router" +import React, { useContext } from "react" +import { STATS } from "../../graphql/queries/stats" +import MyThemeContext from "../../themeContext" +import Error from "../common/Error" interface StatsData { stats: { @@ -16,14 +15,6 @@ interface StatsData { } } -const getStatString = (value: number) => { - if (value < 100) return value - - const evenNumber = Math.floor(value / 100) * 100 - - return `Over ${evenNumber}` -} - const xRankMonths = () => { const date = new Date() const fullYears = date.getFullYear() - 2019 @@ -32,12 +23,26 @@ const xRankMonths = () => { const Stats: React.FC = () => { const { grayWithShade, themeColorWithShade } = useContext(MyThemeContext) - const { data, error, loading } = useQuery(STATS) + const { data, error } = useQuery(STATS) if (error) return - if (loading || !data) return - const { stats } = data + const stats = data?.stats + + const getStatString = (value?: number) => { + if (!value) { + return ( + + ) + } + return value + } + return ( <> @@ -60,7 +65,7 @@ const Stats: React.FC = () => { - {getStatString(stats.build_count)}{" "} + {getStatString(stats?.build_count)}{" "} builds @@ -68,7 +73,7 @@ const Stats: React.FC = () => { - {getStatString(stats.user_count)}{" "} + {getStatString(stats?.user_count)}{" "} users @@ -76,7 +81,7 @@ const Stats: React.FC = () => { {" "} - {getStatString(stats.fa_count)}{" "} + {getStatString(stats?.fa_count)}{" "} free agents @@ -84,7 +89,7 @@ const Stats: React.FC = () => { - {getStatString(stats.tournament_count)}{" "} + {getStatString(stats?.tournament_count)}{" "} tournament results