Refactor pages and add achievements stats page (#271)

* Refactor and achievements.tsx page

* Achievement component

* Correct path

README.md

@@ -48,6 +48,9 @@ Development conventions:
 - Try not to add any more eslint warnings (Don't worry if you don't know how to solve it though, we can solve on MR)
 - Prettier and eslint should cover the rest (Don't forget to run it)
 - We are using [Mantine](https://mantine.dev/) component library
+- You can find the routing for pages in the folder `pages` (includes SSR code, data fetching, etc)
+- You can find the implementation of the React code for each page in the folder `screens` (includes the UI code)
+- You can find the components in the folder `components` (includes the UI code which is reused across the app)
 
 ## Development approach
 

pages/about.tsx

@@ -1,3 +1,3 @@
-import About from "../components/screens/about";
+import About from "../screens/about";
 
 export default About;

pages/index.tsx

@@ -1,6 +1,6 @@
 import { getTwitchStreams } from "../src/coh3stats-api";
 import { Top1v1LeaderboardsData, TwitchStream } from "../src/coh3/coh3-types";
-import Home from "../components/screens/home";
+import Home from "../screens/home";
 import { getTop1v1LeaderBoards } from "../src/leaderboards/top-leaderboards";
 import { getLatestCOH3RedditPosts, RedditPostType } from "../src/reddit-api";
 import { GetServerSideProps } from "next";

pages/leaderboards.tsx

@@ -2,7 +2,7 @@ import { getLeaderBoardData } from "../src/coh3/coh3-api";
 import { findAndMergeStatGroups } from "../src/coh3/helpers";
 import { raceType, leaderBoardType, platformType } from "../src/coh3/coh3-types";
 import { GetServerSideProps } from "next";
-import Leaderboards from "../components/screens/leaderboards/leaderboards";
+import Leaderboards from "../screens/leaderboards/leaderboards";
 
 const sortById = {
   wins: 0,

pages/players/[...playerID].tsx

@@ -1,7 +1,8 @@
 import { processPlayerInfoAPIResponse } from "../../src/players/standings";
 import { getPlayerCardInfo, getPlayerRecentMatches } from "../../src/coh3stats-api";
 import { GetServerSideProps } from "next";
-import PlayerCard from "../../components/screens/players";
+
+import PlayerCard from "../../screens/players";
 
 export const getServerSideProps: GetServerSideProps<any, { playerID: string }> = async ({
   params,

pages/stats/achievements.tsx

@@ -0,0 +1,29 @@
+import { GetServerSideProps } from "next";
+import { getGlobalAchievements } from "../../src/coh3stats-api";
+import GlobalAchievements from "../../screens/stats/achievements";
+
+export const getServerSideProps: GetServerSideProps<any, { playerID: string }> = async ({
+  req,
+}) => {
+  const xff = `${req.headers["x-forwarded-for"]}`;
+
+  let error = null;
+  let globalAchievements = null;
+
+  try {
+    globalAchievements = await getGlobalAchievements(xff);
+  } catch (e: any) {
+    console.error(`Error calculating all the leaderboard stats`);
+    console.error(e);
+    error = e.message;
+  }
+
+  return {
+    props: {
+      error,
+      globalAchievements,
+    },
+  };
+};
+
+export default GlobalAchievements;

pages/stats/games.tsx

@@ -1,3 +1,3 @@
-import GameStats from "../../components/screens/stats/game";
+import GameStats from "../../screens/stats/game";
 
 export default GameStats;

pages/stats/maps.tsx

@@ -1,3 +1,3 @@
-import MapStats from "../../components/screens/stats/maps";
+import MapStats from "../../screens/stats/maps";
 
 export default MapStats;

components/screens/about/DataSection.tsx → screens/about/DataSection.tsx

@@ -1,5 +1,5 @@
 import { Anchor, Space, Text, Title } from "@mantine/core";
-import { getOpenDataRoute } from "../../../src/routes";
+import { getOpenDataRoute } from "../../src/routes";
 
 const DataSection = () => {
   return (

components/screens/about/DonateSection.tsx → screens/about/DonateSection.tsx

@@ -1,7 +1,7 @@
 import { Group, Anchor, Text } from "@mantine/core";
-import config from "../../../config";
-import { Donate } from "../../icon/donate";
-import { PayPalDonation } from "../../other/paypal-donations";
+import config from "../../config";
+import { Donate } from "../../components/icon/donate";
+import { PayPalDonation } from "../../components/other/paypal-donations";
 
 const DonateSection = () => {
   return (

components/screens/about/index.tsx → screens/about/index.tsx

@@ -12,12 +12,12 @@ import {
   createStyles,
 } from "@mantine/core";
 import React, { useEffect } from "react";
-import { AnalyticsAboutAppPageView } from "../../../src/firebase/analytics";
-import { generateKeywordsString } from "../../../src/head-utils";
+import { AnalyticsAboutAppPageView } from "../../src/firebase/analytics";
+import { generateKeywordsString } from "../../src/head-utils";
 import AboutUs from "./AboutUs";
 import DonateSection from "./DonateSection";
 import Link from "next/link";
-import config from "../../../config";
+import config from "../../config";
 import DataSection from "./DataSection";
 
 const BugReports = () => {

components/screens/home/index.tsx → screens/home/index.tsx

@@ -1,12 +1,12 @@
-import { Top1v1LeaderboardsData, TwitchStream } from "../../../src/coh3/coh3-types";
+import { Top1v1LeaderboardsData, TwitchStream } from "../../src/coh3/coh3-types";
 import { NextPage } from "next";
 import { Container, Grid, Image, Paper, Stack } from "@mantine/core";
 import { DPSCalculatorCard, UnitBrowserCard } from "./info-cards";
 import React from "react";
 import TwitchContainer from "./twitch-panel";
 import Head from "next/head";
 import TopLeaderboardsSection from "./leaderboards-section/top-leaderboards-section";
-import { RedditPostType } from "../../../src/reddit-api";
+import { RedditPostType } from "../../src/reddit-api";
 import RedditPanel from "./reddit-panel";
 
 type Props = {

components/screens/home/info-cards.tsx → screens/home/info-cards.tsx

@@ -1,7 +1,7 @@
 import { Anchor, Card, createStyles, Group, Image, Stack, Text, Title } from "@mantine/core";
-import LinkWithOutPrefetch from "../../LinkWithOutPrefetch";
-import { getDPSCalculatorRoute, getUnitBrowserRoute } from "../../../src/routes";
-import { getIconsPathOnCDN } from "../../../src/utils";
+import LinkWithOutPrefetch from "../../components/LinkWithOutPrefetch";
+import { getDPSCalculatorRoute, getUnitBrowserRoute } from "../../src/routes";
+import { getIconsPathOnCDN } from "../../src/utils";
 
 const useStyles = createStyles((theme) => ({
   card: {

components/screens/home/leaderboards-section/top-leaderboards-section.tsx → screens/home/leaderboards-section/top-leaderboards-section.tsx

@@ -1,10 +1,10 @@
 import { Flex, Paper, Tabs, Title, Space, Anchor, createStyles } from "@mantine/core";
 import { IconArrowRight, IconTrophy } from "@tabler/icons-react";
-import TopLeaderboardsTable from "../../../leaderboards/top-leaderboards-table";
-import { raceType, Top1v1LeaderboardsData } from "../../../../src/coh3/coh3-types";
+import TopLeaderboardsTable from "../../../components/leaderboards/top-leaderboards-table";
+import { raceType, Top1v1LeaderboardsData } from "../../../src/coh3/coh3-types";
 import { useEffect, useState } from "react";
 import Link from "next/link";
-import { getLeaderBoardRoute } from "../../../../src/routes";
+import { getLeaderBoardRoute } from "../../../src/routes";
 
 const useStyles = createStyles((theme) => ({
   link: {

components/screens/home/reddit-panel/index.tsx → screens/home/reddit-panel/index.tsx

@@ -1,4 +1,4 @@
-import { RedditPostType } from "../../../../src/reddit-api";
+import { RedditPostType } from "../../../src/reddit-api";
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const RedditPanel = ({ redditPostsData }: { redditPostsData: RedditPostType[] | null }) => {

components/screens/home/twitch-panel/channel-list.tsx → screens/home/twitch-panel/channel-list.tsx

@@ -1,8 +1,8 @@
 import { BackgroundImage, Text, Box, Flex } from "@mantine/core";
 import { IconCircle } from "@tabler/icons-react";
 import { useState } from "react";
-import { TwitchStream } from "../../../../src/coh3/coh3-types";
-import { isMobileCheck } from "../../../../src/utils";
+import { TwitchStream } from "../../../src/coh3/coh3-types";
+import { isMobileCheck } from "../../../src/utils";
 
 type Props = {
   twitchStreams: TwitchStream[];

components/screens/home/twitch-panel/index.tsx → screens/home/twitch-panel/index.tsx

@@ -1,6 +1,6 @@
 import { Box, Center, Container, Flex, Grid, Title, Text } from "@mantine/core";
 import { IconBrandTwitch } from "@tabler/icons-react";
-import { TwitchStream } from "../../../../src/coh3/coh3-types";
+import { TwitchStream } from "../../../src/coh3/coh3-types";
 import dynamic from "next/dynamic";
 
 // This needs to be client side only due to some weird errors during SSR

components/screens/home/twitch-panel/twitch-panel.tsx → screens/home/twitch-panel/twitch-panel.tsx

@@ -1,10 +1,10 @@
 import { useEffect, useMemo, useState } from "react";
 import { Grid, Group, MediaQuery, Stack, Text, useMantineColorScheme } from "@mantine/core";
 import { IconCircle } from "@tabler/icons-react";
-import { TwitchStream } from "../../../../src/coh3/coh3-types";
+import { TwitchStream } from "../../../src/coh3/coh3-types";
 import ChannelList from "./channel-list";
-import { isMobileCheck } from "../../../../src/utils";
-import config from "../../../../config";
+import { isMobileCheck } from "../../../src/utils";
+import config from "../../../config";
 
 declare global {
   interface Window {

components/screens/leaderboards/leaderboards.tsx → screens/leaderboards/leaderboards.tsx

@@ -1,18 +1,18 @@
 import { useRouter } from "next/router";
 import React, { useEffect } from "react";
-import { AnalyticsLeaderBoardsPageView } from "../../../src/firebase/analytics";
-import { calculatePageNumber, calculatePositionNumber } from "../../../src/utils";
-import ErrorCard from "../../error-card";
+import { AnalyticsLeaderBoardsPageView } from "../../src/firebase/analytics";
+import { calculatePageNumber, calculatePositionNumber } from "../../src/utils";
+import ErrorCard from "../../components/error-card";
 import { DataTable } from "mantine-datatable";
-import RankIcon from "../../rank-icon";
+import RankIcon from "../../components/rank-icon";
 import { Anchor, Container, Group, Select, Space, Text, Title } from "@mantine/core";
 import Link from "next/link";
-import CountryFlag from "../../country-flag";
-import DynamicTimeAgo from "../../other/dynamic-timeago";
-import { localizedGameTypes, localizedNames } from "../../../src/coh3/coh3-data";
-import { leaderBoardType, raceType } from "../../../src/coh3/coh3-types";
+import CountryFlag from "../../components/country-flag";
+import DynamicTimeAgo from "../../components/other/dynamic-timeago";
+import { localizedGameTypes, localizedNames } from "../../src/coh3/coh3-data";
+import { leaderBoardType, raceType } from "../../src/coh3/coh3-types";
 import Head from "next/head";
-import FactionIcon from "../../faction-icon";
+import FactionIcon from "../../components/faction-icon";
 
 const RECORD_PER_PAGE = 100;
 

components/screens/players/components/player-id-icon.tsx → screens/players/components/player-id-icon.tsx

@@ -1,7 +1,7 @@
 import { ActionIcon, Code, Group, HoverCard, Text } from "@mantine/core";
 import { IconBrandSteam, IconInfoCircle } from "@tabler/icons-react";
 import React from "react";
-import RelicIcon from "../../../icon/relic-icon";
+import RelicIcon from "../../../components/icon/relic-icon";
 
 const PlayerIdIcon = ({ relicID, steamID }: { relicID: number; steamID?: string }) => {
   return (

components/screens/players/components/player-recent-matches.tsx → screens/players/components/player-recent-matches.tsx

@@ -1,19 +1,19 @@
 import { Badge, Text, Group, Button, Switch, Stack, Space, Tooltip } from "@mantine/core";
 import { DataTable, DataTableSortStatus } from "mantine-datatable";
 import React from "react";
-import { maps, matchTypesAsObject, raceIDs } from "../../../../src/coh3/coh3-data";
-import { ProcessedMatch, raceID } from "../../../../src/coh3/coh3-types";
-import { getMatchDuration, getMatchPlayersByFaction } from "../../../../src/coh3/helpers";
-import ErrorCard from "../../../error-card";
-import FactionIcon from "../../../faction-icon";
+import { maps, matchTypesAsObject, raceIDs } from "../../../src/coh3/coh3-data";
+import { ProcessedMatch, raceID } from "../../../src/coh3/coh3-types";
+import { getMatchDuration, getMatchPlayersByFaction } from "../../../src/coh3/helpers";
+import ErrorCard from "../../../components/error-card";
+import FactionIcon from "../../../components/faction-icon";
 import { IconInfoCircle } from "@tabler/icons-react";
 import sortBy from "lodash/sortBy";
 import cloneDeep from "lodash/cloneDeep";
 import FilterableHeader from "./filterable-header";
-import RenderPlayers from "../../../matches-table/render-players";
-import RenderMap from "../../../matches-table/render-map";
-import DynamicTimeAgo from "../../../other/dynamic-timeago";
-import { getPlayerMatchHistoryResult, isPlayerVictorious } from "../../../../src/players/utils";
+import RenderPlayers from "../../../components/matches-table/render-players";
+import RenderMap from "../../../components/matches-table/render-map";
+import DynamicTimeAgo from "../../../components/other/dynamic-timeago";
+import { getPlayerMatchHistoryResult, isPlayerVictorious } from "../../../src/players/utils";
 
 /**
  * Timeago is causing issues with SSR, move to client side

components/screens/players/components/player-standings.tsx → screens/players/components/player-standings.tsx

@@ -1,4 +1,4 @@
-import { InternalStandings, platformType } from "../../../../src/coh3/coh3-types";
+import { InternalStandings, platformType } from "../../../src/coh3/coh3-types";
 import { Container, Space } from "@mantine/core";
 import React from "react";
 import PlayerStandingsFaction from "./standings/player-standings-faction";

components/screens/players/components/player-summary.tsx → screens/players/components/player-summary.tsx

@@ -1,9 +1,9 @@
 import { Group, Paper, Text, Tooltip } from "@mantine/core";
 
-import DynamicTimeAgo from "../../../other/dynamic-timeago";
+import DynamicTimeAgo from "../../../components/other/dynamic-timeago";
 import React from "react";
-import { localizedNames } from "../../../../src/coh3/coh3-data";
-import { PlayerSummaryType } from "../../../../src/players/utils";
+import { localizedNames } from "../../../src/coh3/coh3-data";
+import { PlayerSummaryType } from "../../../src/players/utils";
 
 const PlayerSummary = ({
   playerSummary: { bestAlliesElo, bestAxisElo, totalGames, lastMatchDate, winRate },

components/screens/players/components/standings/faction-summary.tsx → screens/players/components/standings/faction-summary.tsx

@@ -1,17 +1,13 @@
-import {
-  leaderBoardType,
-  raceType,
-  RawLeaderboardStat,
-} from "../../../../../src/coh3/coh3-types";
+import { leaderBoardType, raceType, RawLeaderboardStat } from "../../../../src/coh3/coh3-types";
 import React from "react";
 import { Group, Space, Title, Card, createStyles, Stack } from "@mantine/core";
-import { localizedNames } from "../../../../../src/coh3/coh3-data";
+import { localizedNames } from "../../../../src/coh3/coh3-data";
 import { Text } from "@mantine/core";
 import {
   findBestRankLeaderboardStat,
   findBestValueOnLeaderboardStat,
-} from "../../../../../src/players/utils";
-import DynamicTimeAgo from "../../../../other/dynamic-timeago";
+} from "../../../../src/players/utils";
+import DynamicTimeAgo from "../../../../components/other/dynamic-timeago";
 
 const useStyles = createStyles((theme, { faction }: { faction: string }) => ({
   mainCard:

components/screens/players/components/standings/player-standings-faction.tsx → screens/players/components/standings/player-standings-faction.tsx

@@ -3,12 +3,12 @@ import {
   platformType,
   raceType,
   RawLeaderboardStat,
-} from "../../../../../src/coh3/coh3-types";
+} from "../../../../src/coh3/coh3-types";
 import PlayerStandingsTable from "./player-standings-table";
 import React from "react";
 import { Group, Space, Title } from "@mantine/core";
-import FactionIcon from "../../../../faction-icon";
-import { localizedNames } from "../../../../../src/coh3/coh3-data";
+import FactionIcon from "../../../../components/faction-icon";
+import { localizedNames } from "../../../../src/coh3/coh3-data";
 import PlayerStandingsFactionInfo from "./faction-summary";
 
 const PlayerStandingsFaction = ({

components/screens/players/components/standings/player-standings-table.tsx → screens/players/components/standings/player-standings-table.tsx

@@ -3,15 +3,15 @@ import {
   platformType,
   raceType,
   RawLeaderboardStat,
-} from "../../../../../src/coh3/coh3-types";
+} from "../../../../src/coh3/coh3-types";
 import { DataTable } from "mantine-datatable";
 import { Text, Anchor } from "@mantine/core";
 
 import React from "react";
 import Link from "next/link";
-import { getLeaderBoardRoute } from "../../../../../src/routes";
-import DynamicTimeAgo from "../../../../other/dynamic-timeago";
-import RankIcon from "../../../../rank-icon";
+import { getLeaderBoardRoute } from "../../../../src/routes";
+import DynamicTimeAgo from "../../../../components/other/dynamic-timeago";
+import RankIcon from "../../../../components/rank-icon";
 
 const PlayerStandingsTable = ({
   faction,

components/screens/players/index.tsx → screens/players/index.tsx

@@ -1,13 +1,13 @@
-import { PlayerCardDataType, ProcessedMatch } from "../../../src/coh3/coh3-types";
-import { calculatePlayerSummary, PlayerSummaryType } from "../../../src/players/utils";
-import { localizedNames } from "../../../src/coh3/coh3-data";
+import { PlayerCardDataType, ProcessedMatch } from "../../src/coh3/coh3-types";
+import { calculatePlayerSummary, PlayerSummaryType } from "../../src/players/utils";
+import { localizedNames } from "../../src/coh3/coh3-data";
 import { format } from "timeago.js";
 import { useRouter } from "next/router";
 import React, { useEffect } from "react";
 import {
   AnalyticsPlayerCardMatchView,
   AnalyticsPlayerCardView,
-} from "../../../src/firebase/analytics";
+} from "../../src/firebase/analytics";
 import {
   Anchor,
   Avatar,
@@ -19,16 +19,16 @@ import {
   Tabs,
   Title,
 } from "@mantine/core";
-import { generateKeywordsString } from "../../../src/head-utils";
+import { generateKeywordsString } from "../../src/head-utils";
 import Head from "next/head";
 import Link from "next/link";
-import { Steam } from "../../icon/steam";
-import { PSNIcon } from "../../icon/psn";
-import { XboxIcon } from "../../icon/xbox";
+import { Steam } from "../../components/icon/steam";
+import { PSNIcon } from "../../components/icon/psn";
+import { XboxIcon } from "../../components/icon/xbox";
 import PlayerSummary from "./components/player-summary";
 import PlayerStandings from "./components/player-standings";
 import PlayerRecentMatches from "./components/player-recent-matches";
-import ErrorCard from "../../error-card";
+import ErrorCard from "../../components/error-card";
 import PlayerIdIcon from "./components/player-id-icon";
 
 const createPlayerHeadDescription = (

screens/stats/achievements/achievement.tsx

@@ -0,0 +1,6 @@
+// we will have to pass some props here
+const Achievement = () => {
+  return <div>THIS IS EXAMPLE ACHIVEMNT</div>;
+};
+
+export default Achievement;