show player search errors

src/pages/player/index.css

@@ -50,3 +50,7 @@ ul.favorite-item-list li {
 .legendary {
     color: #ffe084;
 }
+
+.banned {
+    color: #cd1e2f;
+}

src/pages/player/index.js

@@ -12,7 +12,8 @@ import {
     mdiBagPersonal,
     mdiArmFlex,
     mdiStarBox,
-    mdiTrophyAward
+    mdiTrophyAward,
+    mdiAccountSearch,
 } from '@mdi/js';
 import { TreeView, TreeItem } from '@mui/x-tree-view';
 
@@ -119,14 +120,14 @@ function Player() {
             }
             try {
                 const response = await fetch('https://player.tarkov.dev/account/'+accountId);
-                if (response.status !== 200) {
-                    return;
-                }
                 const profileResponse = await response.json();
                 if (profileResponse.err) {
                     setProfileError(profileResponse.errmsg);
                     return;
                 }
+                if (response.status !== 200) {
+                    return;
+                }
                 setPlayerData(profileResponse);
             } catch (error) {
                 console.log('Error retrieving player profile', error);
@@ -165,6 +166,16 @@ function Player() {
         });
     }, [playerData, playerLevel, t]);
 
+    const bannedMessage = useMemo(() => {
+        if (!playerData?.info?.bannedState) {
+            return false;
+        }
+        if (playerData.info.bannedUntil < 0) {
+            return t('Banned Permanently');
+        }
+        return t('Banned until {{banLiftDate}}', {banLiftDate: new Date(playerData.info.bannedUntil * 1000).toLocaleString()});
+    }, [playerData, t]);
+
     const achievementColumns = useMemo(
         () => [
             {
@@ -645,6 +656,23 @@ function Player() {
         ])
     }, [playerData, getItemDisplay, getLoadoutContents, t]);
 
+    const playerSearchDiv = (
+        <div>
+            <p>
+                <Link to="/players"><Icon path={mdiAccountSearch} size={1} className="icon-with-text"/>{t('Search different player')}</Link>
+            </p>
+        </div>
+    );
+
+    if (profileError) {
+        return (
+            <div className={'page-wrapper'} key="player-page-wrapper">
+                <h2>{profileError}</h2>
+                {playerSearchDiv}
+            </div>
+        );
+    }
+
     return [
         <SEO 
             title={`${t('Player Profile')} - ${t('Escape from Tarkov')} - ${t('Tarkov.dev')}`}
@@ -658,15 +686,13 @@ function Player() {
                     {pageTitle}
                 </h1>
             </div>
+            {playerSearchDiv}
             <div>
-                {profileError && (
-                    <p>{profileError}</p>
-                )}
                 {playerData.info.registrationDate !== 0 && (
                     <p>{`${t('Started current wipe')}: ${new Date(playerData.info.registrationDate * 1000).toLocaleString()}`}</p>
                 )}
-                {playerData.info.bannedState && (
-                    <p>{t('Banned')}</p>
+                {!!bannedMessage && (
+                    <p className="banned">{bannedMessage}</p>
                 )}
                 {totalSecondsInGame > 0 && (
                     <p>{`${t('Total account time in game')}: ${(() => {

src/pages/players/index.js

@@ -1,10 +1,12 @@
-import { useState, useCallback, useMemo } from 'react';
+import { useState, useCallback, useMemo, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import { Trans, useTranslation } from 'react-i18next';
 
 import { Icon } from '@mdi/react';
 import { mdiAccountSearch } from '@mdi/js';
 
+import useKeyPress from '../../hooks/useKeyPress.jsx';
+
 import SEO from '../../components/SEO.jsx';
 import { InputFilter } from '../../components/filter/index.js';
 
@@ -13,11 +15,14 @@ import './index.css';
 function Players() {
     const { t } = useTranslation();
 
+    const enterPress = useKeyPress('Enter');
+
     const defaultQuery = new URLSearchParams(window.location.search).get(
         'search',
     );
     const [nameFilter, setNameFilter] = useState(defaultQuery || '');
     const [nameResults, setNameResults] = useState([]);
+    const [nameResultsError, setNameResultsError] = useState(false);
 
     const [isButtonDisabled, setButtonDisabled] = useState(true);
     const [searched, setSearched] = useState(false);
@@ -27,25 +32,37 @@ function Players() {
             return;
         }
         try {
+            setNameResultsError(false);
             setButtonDisabled(true);
             const response = await fetch('https://player.tarkov.dev/name/'+nameFilter);
             if (response.status !== 200) {
-                return;
+                let errorMessage = await response.text();
+                try {
+                    const json = JSON.parse(errorMessage);
+                    errorMessage = json.errmsg;
+                } catch {}
+                throw new Error(errorMessage);
             }
-            setButtonDisabled(false);
             setSearched(true);
             setNameResults(await response.json());
         } catch (error) {
-            setNameResults(['Error searching player profile: ' + error]);
+            let message = error.message;
+            if (message.includes('Malformed')) {
+                message = 'Error searching player profile; try removing one character from the end until the search works.'
+            }
+            setSearched(false);
+            setNameResults([]);
+            setNameResultsError(message);
         }
-    }, [nameFilter, setNameResults]);
+        setButtonDisabled(false);
+    }, [nameFilter, setNameResults, setNameResultsError]);
 
     const searchResults = useMemo(() => {
         if (!searched) {
             return '';
         }
         if (nameResults.length < 1) {
-            return 'No players with this name';
+            return 'No players with this name. Note: banned players do not show up in name searches.';
         }
         let morePlayers = '';
         if (nameResults.length >= 5) {
@@ -71,6 +88,12 @@ function Players() {
         searchForName();
     }
 
+    useEffect(() => {
+        if (enterPress) {
+            searchForName();
+        }
+    }, [enterPress, searchForName]);
+
     return [
         <SEO 
             title={`${t('Players')} - ${t('Escape from Tarkov')} - ${t('Tarkov.dev')}`}
@@ -105,7 +128,12 @@ function Players() {
                 />
                 <button className="search-button" onClick={searchForName} disabled={isButtonDisabled}>{t('Search')}</button>
             </div>
-            {searchResults}
+            {!!nameResultsError && (
+                <div>
+                    <p>{`${t('Search error')}: ${nameResultsError}`}</p>
+                </div>
+            )}
+            {!nameResultsError && searchResults}
         </div>,
     ];
 }