Move faction icon to components (#59)

* Move faction icon to components

* Remove img from PayPal donations

* Cleanup

* Fix README

* Add more notes

* Fix prettier

* Fix the space

* Clean up the footer

.github/workflows/preview.yml

@@ -43,12 +43,14 @@ jobs:
         run: yarn --prefer-offline --frozen-lockfile install
       - name: Disable Vercel telemetry
         run: yarn next telemetry disable
+      - name: Run the build
+        run: yarn build
       - name: Deploy to Edgio hosting
         env:
           DEPLOY_TOKEN: ${{ secrets.EDGIO_DEPLOY_TOKEN}}
         # Deploy command automatically runs the build
         run: |
-          npx edgio deploy --site=coh3-stats --team=coh-stats  --environment=$EDGIO_ENV --token $DEPLOY_TOKEN --branch=$BRANCH_NAME
+          npx edgio deploy --skip-build --site=coh3-stats --team=coh-stats  --environment=$EDGIO_ENV --token $DEPLOY_TOKEN --branch=$BRANCH_NAME
       - uses: jwalton/gh-find-current-pr@v1
         id: finder
       - name: Publish Preview Link

README.md

@@ -33,6 +33,14 @@ You can start editing the page by modifying `pages/index.tsx`. The page auto-upd
 Before making an MR please create an issue describing what you want to change / how you want to change it.
 So we can have some discussion, also it avoids multiple people working on the same thing.
 
+Feel free to create fork and make MR. Before PR you can test your code with `yarn build` to make sure it can be build.
+
+Development conventions:
+
+- Name the files with `-` instead of camelCase. Eg `color-scheme-toggle.tsx`
+- Try not to add anymore eslint warnings if possible (Don't worry if you don't know how to solve it though)
+- Prettier and eslint should cover the rest
+
 ## Development aproach
 
 ### High level architecture

components/Footer/Footer.tsx

@@ -1,8 +1,9 @@
-import { Container, createStyles, Group, Text } from "@mantine/core";
+import { Container, createStyles, Group, Space, Text, Anchor } from "@mantine/core";
 import React from "react";
 import { Discord } from "../icon/discord";
 import { Donate } from "../icon/donate";
 import { Github } from "../icon/github";
+import Link from "next/link";
 
 const useStyles = createStyles((theme) => ({
   footer: {
@@ -39,9 +40,16 @@ export const Footer: React.FC = () => {
           <br />
         </Container>
         <Text color="dimmed" size="xs" style={{ textAlign: "center" }}>
-          The Company of Heroes is registered trademark of SEGA Holdings. Co
+          The Company of Heroes is registered trademark of SEGA&nbsp;Holdings.&nbsp;Co
           <br />
-          The COH Images and other assets are owned by Relic Entertainment and/or SEGA
+          The COH Images and other assets are owned by
+          Relic&nbsp;Entertainment&nbsp;and/or&nbsp;SEGA
+          <Space h="xs" />
+          Visit{" "}
+          <Anchor component={Link} href={"https://coh2stats.com"} target={"_blank"}>
+            coh2stats.com{" "}
+          </Anchor>{" "}
+          for Company of Heroes 2 stats and analytics
         </Text>
       </footer>
     </>

components/Header/Header.tsx

@@ -13,7 +13,6 @@ import {
   SimpleGrid,
   createStyles,
   Stack,
-  Indicator,
   ActionIcon,
   Tooltip,
   Anchor,

components/SearchPlayerEntry.tsx

@@ -5,11 +5,9 @@ import {
   Center,
   Image,
   Text,
-  Badge,
   Avatar,
   Indicator,
 } from "@mantine/core";
-import Link from "next/link";
 
 const useStyles = createStyles((theme) => ({
   action: {

components/paypal-donations.tsx

@@ -9,7 +9,6 @@ export const PayPalDonation = () => {
         title="PayPal"
         alt="Donate with PayPal button"
       />
-      <img alt="" src="https://www.paypal.com/en_CZ/i/scr/pixel.gif" width="1" height="1" />
     </form>
   );
 };

components/player-card/player-recent-matches.tsx

@@ -7,7 +7,7 @@ import { maps, matchTypesAsObject, raceIDs } from "../../src/coh3/coh3-data";
 import { raceID } from "../../src/coh3/coh3-types";
 import { getMatchDuration, getMatchPlayersByFaction } from "../../src/coh3/helpers";
 import ErrorCard from "../error-card";
-import FactionIcon from "../../pages/faction-icon";
+import FactionIcon from "../faction-icon";
 import { formatMatchTime } from "../../src/utils";
 import { IconInfoCircle } from "@tabler/icons";
 import sortBy from "lodash/sortBy";

components/player-card/player-standings-table.tsx

@@ -1,6 +1,6 @@
 import { leaderBoardType, raceType, RawLeaderboardStat } from "../../src/coh3/coh3-types";
 import { DataTable } from "mantine-datatable";
-import FactionIcon from "../../pages/faction-icon";
+import FactionIcon from "../faction-icon";
 import { localizedNames } from "../../src/coh3/coh3-data";
 import { Space, Group, Text, Title, Anchor } from "@mantine/core";
 

components/search-button/search-button.tsx

@@ -1,4 +1,4 @@
-import { Button, createStyles, Group, Text } from "@mantine/core";
+import { Button, Group, Text } from "@mantine/core";
 import { IconSearch } from "@tabler/icons";
 import React from "react";
 import { openSpotlight } from "@mantine/spotlight";
@@ -8,10 +8,10 @@ interface SearchButtonProps {
   onClick?: React.MouseEventHandler<HTMLButtonElement>;
 }
 
-const useStyles = createStyles((theme) => ({}));
+// const useStyles = createStyles((theme) => ({}));
 
 export const SearchButton: React.FC<SearchButtonProps> = ({ mobile, onClick }) => {
-  const { classes } = useStyles();
+  // const { classes } = useStyles();
 
   const handleClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     openSpotlight();

jest.config.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const nextJest = require("next/jest");
 
 const createJestConfig = nextJest({

next.config.js

@@ -1,5 +1,6 @@
 // This file was automatically added by edgio init.
 // You should commit this file to source control.
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const { withEdgio, withServiceWorker } = require("@edgio/next/config");
 
 /** @type {import('next').NextConfig} */

package.json

@@ -11,16 +11,14 @@
     "npm": "please-use-yarn"
   },
   "scripts": {
-    "start": "yarn edgio:dev",
-    "edgio:dev": "edgio dev",
-    "edgio:build": "edgio build",
-    "edgio:deploy": "edgio deploy",
+    "start": "edgio dev",
     "dev": "edgio dev",
     "build": "edgio build",
     "next:dev": "next dev",
     "next:build": "next build",
-    "lint": "next lint",
     "test": "jest",
+    "lint": "next lint",
+    "lint:eslint": "eslint **/*.{ts,tsx,js}",
     "lint:prettier": "prettier --check .",
     "fix": "prettier --loglevel warn --write .",
     "fix:prettier": "prettier --loglevel warn --write .",
@@ -29,7 +27,8 @@
   },
   "lint-staged": {
     "*.{js,ts,jsx,tsx}": [
-      "prettier --loglevel warn --write"
+      "prettier --loglevel warn --write",
+      "eslint --config .eslintrc.js"
     ]
   },
   "dependencies": {

pages/_app.tsx

@@ -58,7 +58,7 @@ export default function App(props: AppProps & { colorScheme: ColorScheme }) {
     console.log("SEARCH", query);
 
     let data = null;
-    let error = null;
+    // let error = null;
 
     try {
       const res = await fetch(
@@ -91,7 +91,7 @@ export default function App(props: AppProps & { colorScheme: ColorScheme }) {
     } catch (e: any) {
       console.error(`Failed getting data for player id ${query}`);
       console.error(e);
-      error = e.message;
+      // error = e.message;
     }
   };
   // when debounced query entry changes fetch player results

pages/index.tsx

@@ -7,7 +7,12 @@ import { Discord } from "../components/icon/discord";
 const Home: NextPage = () => {
   return (
     <Container size={"lg"}>
-      <Image src="/coming-soon/coh3-background.jpg" radius="md" height={400} />
+      <Image
+        src="/coming-soon/coh3-background.jpg"
+        alt={"coh3-background"}
+        radius="md"
+        height={400}
+      />
       <Paper shadow="xs" radius="md" mt="md" p="lg" color="gray">
         <Title order={1}>Company of Heroes 3 is out🎉</Title>
         <Title order={2} size="h4" pt="md">

pages/leaderboards.tsx

@@ -13,7 +13,7 @@ import CountryFlag from "../components/country-flag";
 import Head from "next/head";
 import { localizedGameTypes, localizedNames } from "../src/coh3/coh3-data";
 import { raceType, leaderBoardType } from "../src/coh3/coh3-types";
-import FactionIcon from "./faction-icon";
+import FactionIcon from "../components/faction-icon";
 
 /**
  * Timeago is causing issues with SSR, move to clinet side

src/firebase/web-firebase.ts

@@ -22,7 +22,6 @@ const init = (): void => {
   if (app.name && typeof window !== "undefined") {
     analytics = getAnalytics(app);
     // This is OK we just need to "getPerf" to initialize it
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     performance = getPerformance(app);
     setUserProperties(analytics, { custom_platform: "web_app" });
   }