random

lib/components/Breadcrumbs.tsx

@@ -22,7 +22,7 @@ const Breadcrumbs: React.FC<Props> = ({ pages }) => {
     <>
       <MyHead title={pages[pages.length - 1].name} />
       <Breadcrumb
-        mt={4}
+        mt={2}
         mb={8}
         fontWeight="bold"
         separator={

lib/components/PageHeader.tsx

@@ -1,26 +0,0 @@
-import { Heading } from "@chakra-ui/core";
-import { useMyTheme } from "lib/useMyTheme";
-
-interface PageHeaderProps {
-  title: string;
-}
-
-const PageHeader: React.FC<PageHeaderProps> = ({ title }) => {
-  const { themeColor } = useMyTheme();
-  return (
-    <>
-      <Heading
-        className="shadow"
-        borderBottomColor={themeColor}
-        borderBottomWidth="5px"
-        mb="0.5em"
-        fontFamily="'Rubik', sans-serif"
-        fontWeight="bold"
-      >
-        {title}
-      </Heading>
-    </>
-  );
-};
-
-export default PageHeader;

lib/getLocalizedMontYearString.ts

@@ -7,10 +7,8 @@ export const getLocalizedMonthYearString = (
   dateForLocalization.setDate(1);
   dateForLocalization.setMonth(month - 1);
   dateForLocalization.setFullYear(year);
-  const localizedString = dateForLocalization.toLocaleString(locale, {
+  return dateForLocalization.toLocaleString(locale, {
     month: "long",
     year: "numeric",
   });
-
-  return localizedString.charAt(0).toUpperCase() + localizedString.slice(1);
 };

pages/top500.tsx

@@ -1,4 +1,5 @@
 import { Radio, RadioGroup, Select, Stack } from "@chakra-ui/core";
+import { t } from "@lingui/macro";
 import { PrismaClient } from "@prisma/client";
 import {
   GetXRankPlacementsDocument,
@@ -7,10 +8,9 @@ import {
   useGetXRankPlacementsQuery,
 } from "generated/graphql";
 import { initializeApollo } from "lib/apollo";
+import Breadcrumbs from "lib/components/Breadcrumbs";
 import LoadingBoundary from "lib/components/LoadingBoundary";
-import PageHeader from "lib/components/PageHeader";
 import { getLocalizedMonthYearString } from "lib/getLocalizedMontYearString";
-import { useTranslation } from "lib/useMockT";
 import { GetStaticProps } from "next";
 import { useState } from "react";
 import XSearch from "scenes/Top500";
@@ -23,6 +23,7 @@ const getMonthOptions = (latestMonth: number, latestYear: number) => {
   let year = 2018;
 
   while (true) {
+    // FIXME: set language
     const monthString = getLocalizedMonthYearString(month, year, "en");
     monthChoices.push({ label: monthString, value: `${month},${year}` });
 
@@ -74,8 +75,6 @@ const XSearchPage = ({
 }: {
   monthOptions: { label: string; value: string }[];
 }) => {
-  const { t } = useTranslation();
-
   const [variables, setVariables] = useState<GetXRankPlacementsQueryVariables>({
     month: Number(monthOptions[0].value.split(",")[0]),
     year: Number(monthOptions[0].value.split(",")[1]),
@@ -85,9 +84,10 @@ const XSearchPage = ({
     variables,
   });
 
+  //FIXME: should return imported component
   return (
     <>
-      <PageHeader title="Top 500" />
+      <Breadcrumbs pages={[{ name: t`Top 500 Browser` }]} />
       <Select
         value={`${variables.month},${variables.year}`}
         onChange={(e) => {
@@ -118,10 +118,10 @@ const XSearchPage = ({
         mb={8}
       >
         <Stack direction="row">
-          <Radio value="SZ">{t("plans;splatZonesShort")}</Radio>
-          <Radio value="TC">{t("plans;towerControlShort")}</Radio>
-          <Radio value="RM">{t("plans;rainMakerShort")}</Radio>
-          <Radio value="CB">{t("plans;clamBlitzShort")}</Radio>
+          <Radio value="SZ">{t`SZ`}</Radio>
+          <Radio value="TC">{t`TC`}</Radio>
+          <Radio value="RM">{t`RM`}</Radio>
+          <Radio value="CB">{t`CB`}</Radio>
         </Stack>
       </RadioGroup>
       <LoadingBoundary loading={loading} error={error}>

prisma/seed.ts

@@ -86,7 +86,7 @@ const main = async () => {
                 switchAccountId: "" + i,
                 name: playerName,
                 user:
-                  i === 0
+                  i < 5
                     ? {
                         connect: {
                           id: testUser.id,

scenes/Top500/index.tsx

@@ -1,6 +1,6 @@
 import { Avatar, Text } from "@chakra-ui/core";
+import { Trans } from "@lingui/macro";
 import { GetXRankPlacementsQuery } from "generated/graphql";
-import MyHead from "lib/components/MyHead";
 import {
   Table,
   TableBody,
@@ -11,7 +11,6 @@ import {
 } from "lib/components/Table";
 import WeaponImage from "lib/components/WeaponImage";
 import { getRankingString } from "lib/getRankingString";
-import { useTranslation } from "lib/useMockT";
 import { useMyTheme } from "lib/useMyTheme";
 import Link from "next/link";
 
@@ -20,28 +19,24 @@ interface Props {
 }
 
 const XSearch: React.FC<Props> = ({ placements }) => {
-  const { t } = useTranslation();
   const { gray } = useMyTheme();
 
   return (
     <>
-      <MyHead title="Top 500 Browser" />
-      {/* <PageHeader title="Top 500 Browser" />
-      <Top500Filters
-        filter={filter}
-        handleChange={(newFilter) => {
-          setFilter({ ...filter, ...newFilter });
-          setPage(1);
-        }}
-      /> */}
       <Table maxW="50rem">
         <TableHead>
           <TableRow>
             <TableHeader width={4} />
             <TableHeader width={4} />
-            <TableHeader>{t("xsearch;Name")}</TableHeader>
-            <TableHeader>{t("xsearch;X Power")}</TableHeader>
-            <TableHeader>{t("freeagents;Weapon")}</TableHeader>
+            <TableHeader>
+              <Trans>Name</Trans>
+            </TableHeader>
+            <TableHeader>
+              <Trans>X Power</Trans>
+            </TableHeader>
+            <TableHeader>
+              <Trans>Weapon</Trans>
+            </TableHeader>
           </TableRow>
         </TableHead>
         <TableBody>