feature: Added last 20 queue bans for profile

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-player-profile-ban.js

@@ -0,0 +1,58 @@
+/** @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 banElement = select('profile-overview-bans', parentElement)
+
+  if (banElement === null) {
+    return
+  }
+
+  if (hasFeatureAttribute(FEATURE_ATTRIBUTE, banElement)) {
+    return
+  }
+
+  setFeatureAttribute(FEATURE_ATTRIBUTE, banElement)
+
+  const headerElement = (
+    <h3 className="heading-border">
+      <span translate="BANS">Bans</span>
+    </h3>
+  )
+
+  const noBanElement = <div>No match bans yet</div>
+
+  const nickname = getPlayerProfileNickname()
+  const { guid } = await getPlayer(nickname)
+
+  const playerBans = await getPlayerBans(guid)
+
+  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)
+  })
+
+  const headerElementMissing = select('h3.heading-border', parentElement)
+  if (headerElementMissing === null) {
+    banElement.insertBefore(headerElement, banElement.firstChild)
+  }
+}

src/content/helpers/faceit-api.js

@@ -124,3 +124,12 @@ export const getPlayerHistory = async (userId, page = 0) => {
 
 export const getMatchmakingQueue = queueId =>
   fetchApiMemoized(`/queue/v1/queue/matchmaking/${queueId}`)
+
+export const getPlayerBans = async userId => {
+  const limit = 20
+  const offset = 0
+
+  return fetchApiMemoized(
+    `/queue/v1/ban?userId=${userId}&organizerId=faceit&offset=${offset}&limit=${limit}`
+  )
+}

src/content/index.js

@@ -21,6 +21,7 @@ import addPlayerProfileLevelProgress from './features/add-player-profile-level-p
 import addPlayerProfileMatchesDemo from './features/add-player-profile-matches-demo'
 import addPlayerProfileExtendedStats from './features/add-player-profile-extended-stats'
 import addPlayerProfileBadge from './features/add-player-profile-badge'
+import addPlayerProfileBan from './features/add-player-profile-ban'
 import clickModalClose from './features/click-modal-close'
 import getBannedUser from './helpers/get-banned-user'
 import stopToxicity from './features/stop-toxicity'
@@ -91,6 +92,7 @@ function observeBody() {
       } else if (modals.isPlayerProfile()) {
         addPlayerProfileBadge(modalElement)
         addPlayerProfileLinks(modalElement)
+        addPlayerProfileBan(modalElement)
 
         if (modals.isPlayerProfileStats()) {
           debouncedPlayerProfileStatsFeatures(modalElement)
@@ -139,6 +141,7 @@ function observeBody() {
       } else if (pages.isPlayerProfile()) {
         addPlayerProfileBadge(mainContentElement)
         addPlayerProfileLinks(mainContentElement)
+        addPlayerProfileBan(mainContentElement)
 
         if (pages.isPlayerProfileStats()) {
           debouncedPlayerProfileStatsFeatures(mainContentElement)