PlayerPage and TribePage - add new backgrounds

src/features/ServerPage/common/PageLayout/components/Sidebar/components/Nav/ListItem.tsx

@@ -1,5 +1,5 @@
 import React, { Fragment, useState } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation, generatePath } from 'react-router-dom';
 import { Route } from './types';
 
 import { makeStyles } from '@material-ui/core/styles';
@@ -25,6 +25,12 @@ function ListItem({ route, nestedLevel }: Props) {
   const classes = useStyles();
   const { pathname } = useLocation();
   const hasNested = Array.isArray(route.nested) && route.nested.length > 0;
+  const generatedPath =
+    route.to && route.params
+      ? generatePath(route.to, route.params)
+      : route.to
+      ? route.to
+      : '';
 
   const getItem = () => {
     return (
@@ -36,7 +42,9 @@ function ListItem({ route, nestedLevel }: Props) {
         pl={nestedLevel}
       >
         <ListItemIcon
-          className={clsx({ [classes.activeLink]: route.to === pathname })}
+          className={clsx({
+            [classes.activeLink]: generatedPath === pathname,
+          })}
         >
           {route.Icon}
         </ListItemIcon>
@@ -54,8 +62,10 @@ function ListItem({ route, nestedLevel }: Props) {
         <Link
           to={route.to}
           params={route.params}
-          className={classes.link}
-          color={pathname === route.to ? 'secondary' : 'inherit'}
+          className={clsx(classes.link, {
+            [classes.activeLink]: generatedPath === pathname,
+          })}
+          color="inherit"
         >
           {getItem()}
         </Link>

src/features/ServerPage/features/PlayerPage/common/PageLayout/PageLayout.tsx

@@ -1,8 +1,10 @@
 import React, { Fragment, useMemo } from 'react';
-import { matchPath, useLocation } from 'react-router-dom';
+import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import useServer from '@features/ServerPage/libs/ServerContext/useServer';
 import usePlayer from '../../libs/PlayerPageContext/usePlayer';
+import useTabs from './useTabs';
+import randomInteger from '@utils/randomInteger';
 import * as NAMESPACES from '@config/namespaces';
 import * as ROUTES from '@config/routes';
 
@@ -19,7 +21,9 @@ import {
 import Link from '@common/Link/Link';
 import ServerPageLayout from '@features/ServerPage/common/PageLayout/PageLayout';
 
-import background from './profile-background-dark.png';
+import background1 from './backgrounds/bg-1-dark.png';
+import background2 from './backgrounds/bg-2-dark.jpg';
+import background3 from './backgrounds/bg-3-dark.jpg';
 
 export interface Props {
   children: React.ReactNode;
@@ -29,42 +33,18 @@ function PageLayout({ children }: Props) {
   const classes = useStyles();
   const player = usePlayer();
   const server = useServer();
-  const loc = useLocation();
   const { t } = useTranslation(NAMESPACES.SERVER_PAGE.PLAYER_PAGE.COMMON);
-  const tabs = useMemo(() => {
-    return [
-      {
-        to: ROUTES.SERVER_PAGE.PLAYER_PAGE.INDEX_PAGE,
-        label: t('pageLayout.tabs.indexPage'),
-      },
-      {
-        to: ROUTES.SERVER_PAGE.PLAYER_PAGE.HISTORY_PAGE,
-        label: t('pageLayout.tabs.historyPage'),
-      },
-      {
-        to: ROUTES.SERVER_PAGE.PLAYER_PAGE.TRIBE_CHANGES_PAGE,
-        label: t('pageLayout.tabs.tribeChanges'),
-      },
-      {
-        to: ROUTES.SERVER_PAGE.PLAYER_PAGE.ENNOBLEMENTS_PAGE,
-        label: t('pageLayout.tabs.ennoblementsPage'),
-      },
-    ];
-  }, [t]);
-  const currentTab = useMemo(
-    () =>
-      tabs.findIndex(({ to }) => {
-        return matchPath(loc.pathname, { exact: true, path: to });
-      }),
-    [loc.pathname, tabs]
-  );
+  const { currentTab, tabs } = useTabs(t);
+  const bg = useMemo(() => {
+    return randomInteger(1, 3);
+  }, []);
   const chipProps: ChipProps = {
     color: 'secondary',
     size: 'small',
   };
   return (
     <ServerPageLayout noPadding>
-      <header className={classes.header}>
+      <header className={clsx(classes.header, 'bg-' + bg)}>
         <Toolbar className={classes.toolbar}>
           <div style={{ width: '100%' }}>
             <div className={classes.playerNameContainer}>
@@ -164,13 +144,22 @@ const useStyles = makeStyles(theme => ({
     width: '100%',
     minHeight: theme.spacing(30),
     backgroundPosition: 'center',
-    backgroundImage: `url(${background})`,
     backgroundSize: 'cover',
     backgroundRepeat: 'no-repeat',
     display: 'flex',
     justifyContent: 'flex-end',
     flexDirection: 'column',
     boxShadow: theme.shadows[4],
+    '&.bg-1': {
+      backgroundImage: `url(${background1})`,
+    },
+    '&.bg-2': {
+      backgroundImage: `url(${background2})`,
+    },
+    '&.bg-3': {
+      backgroundPosition: '50% 80%',
+      backgroundImage: `url(${background3})`,
+    },
   },
   playerNameContainer: {
     display: 'flex',

src/features/ServerPage/features/PlayerPage/common/PageLayout/useTabs.ts

@@ -0,0 +1,42 @@
+import { useMemo } from 'react';
+import { matchPath, useLocation } from 'react-router-dom';
+import * as ROUTES from '@config/routes';
+
+import { TFunction } from 'i18next';
+
+const useTabs = (t: TFunction) => {
+  const loc = useLocation();
+  const tabs = useMemo(() => {
+    return [
+      {
+        to: ROUTES.SERVER_PAGE.PLAYER_PAGE.INDEX_PAGE,
+        label: t('pageLayout.tabs.indexPage'),
+      },
+      {
+        to: ROUTES.SERVER_PAGE.PLAYER_PAGE.HISTORY_PAGE,
+        label: t('pageLayout.tabs.historyPage'),
+      },
+      {
+        to: ROUTES.SERVER_PAGE.PLAYER_PAGE.TRIBE_CHANGES_PAGE,
+        label: t('pageLayout.tabs.tribeChanges'),
+      },
+      {
+        to: ROUTES.SERVER_PAGE.PLAYER_PAGE.ENNOBLEMENTS_PAGE,
+        label: t('pageLayout.tabs.ennoblementsPage'),
+      },
+    ];
+  }, [t]);
+  const currentTab = useMemo(
+    () =>
+      tabs.findIndex(({ to }) => {
+        return matchPath(loc.pathname, { exact: true, path: to });
+      }),
+    [loc.pathname, tabs]
+  );
+  return {
+    tabs,
+    currentTab,
+  };
+};
+
+export default useTabs;

src/features/ServerPage/features/TribePage/common/PageLayout/PageLayout.tsx

@@ -1,10 +1,11 @@
 import React, { Fragment, useMemo } from 'react';
-import { matchPath, useLocation } from 'react-router-dom';
+import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import useServer from '@features/ServerPage/libs/ServerContext/useServer';
 import useTribe from '../../libs/TribePageContext/useTribe';
+import useTabs from './useTabs';
+import randomInteger from '@utils/randomInteger';
 import * as NAMESPACES from '@config/namespaces';
-import * as ROUTES from '@config/routes';
 
 import { makeStyles } from '@material-ui/core/styles';
 
@@ -19,7 +20,9 @@ import {
 import Link from '@common/Link/Link';
 import ServerPageLayout from '@features/ServerPage/common/PageLayout/PageLayout';
 
-import background from './profile-background-dark.png';
+import background1 from './backgrounds/bg-1-dark.jpg';
+import background2 from './backgrounds/bg-2-dark.jpg';
+import background3 from './backgrounds/bg-3-dark.jpg';
 
 export interface Props {
   children: React.ReactNode;
@@ -29,49 +32,21 @@ function PageLayout({ children }: Props) {
   const classes = useStyles();
   const tribe = useTribe();
   const server = useServer();
-  const loc = useLocation();
   const { t } = useTranslation(NAMESPACES.SERVER_PAGE.TRIBE_PAGE.COMMON);
-  const tabs = useMemo(() => {
-    return [
-      {
-        to: ROUTES.SERVER_PAGE.TRIBE_PAGE.INDEX_PAGE,
-        label: t('pageLayout.tabs.indexPage'),
-      },
-      {
-        to: ROUTES.SERVER_PAGE.TRIBE_PAGE.MEMBERS_PAGE,
-        label: t('pageLayout.tabs.membersPage'),
-      },
-      {
-        to: ROUTES.SERVER_PAGE.TRIBE_PAGE.HISTORY_PAGE,
-        label: t('pageLayout.tabs.historyPage'),
-      },
-      {
-        to: ROUTES.SERVER_PAGE.TRIBE_PAGE.TRIBE_CHANGES_PAGE,
-        label: t('pageLayout.tabs.tribeChanges'),
-      },
-      {
-        to: ROUTES.SERVER_PAGE.TRIBE_PAGE.ENNOBLEMENTS_PAGE,
-        label: t('pageLayout.tabs.ennoblementsPage'),
-      },
-    ];
-  }, [t]);
-  const currentTab = useMemo(
-    () =>
-      tabs.findIndex(({ to }) => {
-        return matchPath(loc.pathname, { exact: true, path: to });
-      }),
-    [loc.pathname, tabs]
-  );
+  const { tabs, currentTab } = useTabs(t);
+  const bg = useMemo(() => {
+    return randomInteger(1, 3);
+  }, []);
   const chipProps: ChipProps = {
     color: 'secondary',
     size: 'small',
   };
   return (
     <ServerPageLayout noPadding>
-      <header className={classes.header}>
+      <header className={clsx(classes.header, 'bg-' + bg)}>
         <Toolbar className={classes.toolbar}>
           <div style={{ width: '100%' }}>
-            <div className={classes.tribeNameContainer}>
+            <div className={classes.tribeTagContainer}>
               <Typography variant="h3">{tribe.tag}</Typography>
               <div className={classes.chipContainer}>
                 {!tribe.exists ? (
@@ -150,15 +125,23 @@ const useStyles = makeStyles(theme => ({
     width: '100%',
     minHeight: theme.spacing(30),
     backgroundPosition: 'center',
-    backgroundImage: `url(${background})`,
     backgroundSize: 'cover',
     backgroundRepeat: 'no-repeat',
     display: 'flex',
     justifyContent: 'flex-end',
     flexDirection: 'column',
     boxShadow: theme.shadows[4],
+    '&.bg-1': {
+      backgroundImage: `url(${background1})`,
+    },
+    '&.bg-2': {
+      backgroundImage: `url(${background2})`,
+    },
+    '&.bg-3': {
+      backgroundImage: `url(${background3})`,
+    },
   },
-  tribeNameContainer: {
+  tribeTagContainer: {
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',

src/features/ServerPage/features/TribePage/common/PageLayout/useTabs.ts

@@ -0,0 +1,46 @@
+import { useMemo } from 'react';
+import { matchPath, useLocation } from 'react-router-dom';
+import * as ROUTES from '@config/routes';
+
+import { TFunction } from 'i18next';
+
+const useTabs = (t: TFunction) => {
+  const loc = useLocation();
+  const tabs = useMemo(() => {
+    return [
+      {
+        to: ROUTES.SERVER_PAGE.TRIBE_PAGE.INDEX_PAGE,
+        label: t('pageLayout.tabs.indexPage'),
+      },
+      {
+        to: ROUTES.SERVER_PAGE.TRIBE_PAGE.MEMBERS_PAGE,
+        label: t('pageLayout.tabs.membersPage'),
+      },
+      {
+        to: ROUTES.SERVER_PAGE.TRIBE_PAGE.HISTORY_PAGE,
+        label: t('pageLayout.tabs.historyPage'),
+      },
+      {
+        to: ROUTES.SERVER_PAGE.TRIBE_PAGE.TRIBE_CHANGES_PAGE,
+        label: t('pageLayout.tabs.tribeChanges'),
+      },
+      {
+        to: ROUTES.SERVER_PAGE.TRIBE_PAGE.ENNOBLEMENTS_PAGE,
+        label: t('pageLayout.tabs.ennoblementsPage'),
+      },
+    ];
+  }, [t]);
+  const currentTab = useMemo(
+    () =>
+      tabs.findIndex(({ to }) => {
+        return matchPath(loc.pathname, { exact: true, path: to });
+      }),
+    [loc.pathname, tabs]
+  );
+  return {
+    tabs,
+    currentTab,
+  };
+};
+
+export default useTabs;

src/features/ServerPage/features/TribePage/features/MembersPage/components/Members/useMembers.ts

@@ -5,14 +5,22 @@ import { PLAYERS_AND_DAILY_PLAYER_STATS } from './queries';
 import {
   PlayersAndDailyPlayerStatsQueryResult,
   PlayersAndDailyPlayerStatsQueryVariables,
+  Player,
+  DailyPlayerStatsRecord,
 } from './types';
 import { subDays } from 'date-fns';
 
+export type QueryResult = {
+  members: Player[];
+  dailyPlayerStats: DailyPlayerStatsRecord[];
+  loading: boolean;
+};
+
 const useMembers = (
   tribeID: number,
   server: string,
   howManyDaysBack: number
-) => {
+): QueryResult => {
   const createDateGTE = useRef(subDays(new Date(), howManyDaysBack));
   const { data: queryData, loading: queryLoading } = useQuery<
     PlayersAndDailyPlayerStatsQueryResult,

src/utils/randomInteger.ts

@@ -0,0 +1,5 @@
+const randomInteger = (min: number, max: number): number => {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+};
+
+export default randomInteger;