Added user profile bans feature (#152)

src/content/components/player-bans.js

@@ -0,0 +1,21 @@
+/** @jsx h */
+import { h } from 'dom-chef'
+import { formatDistance, parseISO } from 'date-fns'
+
+export default ({ banStart, banEnd, expired, reason }) => {
+    const isActive = !expired
+    const className = isActive ? 'text-success' : 'text-danger'
+
+    return (
+        <span
+            className={className}
+            style={{
+                cursor: 'help'
+            }}
+            title={banStart}
+        >
+      <span style={{ float: 'right' }}>[{reason}]</span>
+            {formatDistance(parseISO(banEnd), new Date(), { addSuffix: true })}
+    </span>
+    )
+}

src/content/features/add-header-level-progress.js

@@ -22,8 +22,7 @@ export default async () => {
 
   const rightHeaderElement = IS_FACEIT_BETA
     ? parasiteMainHeaderContainerElement
-    : parasiteMainHeaderContainerElement?.firstChild?.firstChild?.lastChild
-        ?.lastChild?.firstChild?.firstChild.lastChild
+    : parasiteMainHeaderContainerElement?.firstChild?.firstChild?.lastChild?.lastChild?.firstChild?.firstChild?.lastChild
 
   if (rightHeaderElement?.parentNode?.childNodes.length !== 3) {
     return

src/content/features/add-player-profile-ban.js

@@ -0,0 +1,74 @@
+/** @jsx h */
+import { h } from 'dom-chef'
+import select from 'select-dom'
+
+import {
+    hasFeatureAttribute,
+    setFeatureAttribute
+} from '../helpers/dom-element'
+
+import createPlayerBansElement from '../components/player-bans'
+import { getPlayerProfileNickname } from '../helpers/player-profile'
+import { getPlayer, getPlayerBans } from '../helpers/faceit-api'
+
+const FEATURE_ATTRIBUTE = 'profile-bans'
+
+export default async (parentElement) => {
+
+    const gridElement = select('#content-grid-element-6', parentElement);
+    const parentOfGrid = gridElement.parentElement;
+
+    if(select('#user-ban-info', parentOfGrid)){
+        return;
+    }
+
+    const grids = select.all('div.content-secondary', parentOfGrid);
+
+    // copying the grid node with every react classname
+    // in order not to break everything
+    const banElement = grids[0].cloneNode(false);
+
+    banElement.setAttribute('id', 'user-ban-info');
+    grids[0].append(banElement);
+
+    if (banElement === null || banElement === undefined) {
+        return
+    }
+
+    if (hasFeatureAttribute(FEATURE_ATTRIBUTE, banElement)) {
+        return
+    }
+
+    setFeatureAttribute(FEATURE_ATTRIBUTE, banElement)
+
+    const headerElement = (
+        <h3 className="heading-border">
+            <span translate="BANS">Bans</span>
+        </h3>
+    )
+
+    const headerElementMissing = select('#content-grid-element-6', banElement)
+
+    if (headerElementMissing === null || headerElementMissing === undefined) {
+        banElement.append(headerElement)
+    }
+
+    const noBanElement = <div>No match bans yet</div>
+
+    const nickname = getPlayerProfileNickname()
+    const player = await getPlayer(nickname)
+
+    const playerBans = await getPlayerBans(player.id)
+
+    if (playerBans.length === 0) {
+        banElement.append(noBanElement)
+    }
+
+    playerBans.forEach(async (ban) => {
+        const playerBansElement = createPlayerBansElement(ban)
+
+        const banWrapper = <div className="mb-sm">{playerBansElement}</div>
+
+        banElement.append(banWrapper)
+    })
+}

src/content/helpers/faceit-api.js

@@ -48,6 +48,15 @@ async function faceitApi(path, options) {
 
 export const CACHE_TIME = 600000
 
+export const getPlayerBans = async (userId) => {
+  const limit = 20
+  const offset = 0
+
+  return fetchApiMemoized(
+      `/queue/v1/ban?userId=${userId}&organizerId=faceit&offset=${offset}&limit=${limit}`
+  )
+}
+
 async function fetchApi(path, fetchOptions = {}, camelcaseKeysOptions = {}) {
   if (typeof path !== 'string') {
     throw new TypeError(`Expected \`path\` to be a string, got ${typeof path}`)

src/content/index.js

@@ -28,6 +28,7 @@ import notifications from './features/notifications'
 import * as modals from './helpers/modals'
 import * as pages from './helpers/pages'
 import { runFeatureIf } from './helpers/user-settings'
+import addPlayerProfileBan from "./features/add-player-profile-ban";
 
 function addPlayerProfileStatsFeatures(isPlayerProfileModal) {
   let statsContentElement
@@ -110,9 +111,11 @@ function observeBody() {
           legacyModalElement,
         )
       } else if (modals.isPlayerProfile()) {
+        addPlayerProfileBan(legacyModalElement)
         addPlayerProfileBadge(true)
 
         if (modals.isPlayerProfileOverview()) {
+          addPlayerProfileBan(legacyModalElement)
           addPlayerProfileSkins()
         }
 
@@ -167,9 +170,19 @@ function observeBody() {
           mainContentElement,
         )
       } else if (pages.isPlayerProfile()) {
+        runFeatureIf(
+            'profilePageUserBans',
+            addPlayerProfileBan,
+            select('#parasite-container'),
+        )
         addPlayerProfileBadge()
 
         if (pages.isPlayerProfileOverview()) {
+          runFeatureIf(
+              'profilePageUserBans',
+              addPlayerProfileBan,
+              select('#parasite-container'),
+          )
           addPlayerProfileSkins()
         }
 

src/shared/settings.js

@@ -50,6 +50,7 @@ export const DEFAULTS = {
   notifyMatchRoomAutoCopyServerData: true,
   notifyMatchRoomAutoConnectToServer: true,
   notifyMatchRoomAutoVetoLocations: true,
+  profilePageUserBans: true,
   notifyMatchRoomAutoVetoMaps: true,
   teamRosterPlayersInfo: true,
   repeekNotificationClosed: false,