Add validation for Steam ID and region before fetching account name

deadlock-api · Feb 17, 2025 · 9a063b0 · 9a063b0
1 parent 8c5111a
commit 9a063b0
Showing 1 changed file with 41 additions and 37 deletions.
diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
@@ -43,6 +43,8 @@ export default function Index() {
   };
 
   const fetchSteamName = async (region: string, steamId: string) => {
+    if (!steamId) return null;
+    if (!region) return null;
     const url = new URL(`https://data.deadlock-api.com/v1/commands/${region}/${steamId}/resolve-variables`);
     url.searchParams.append("variables", "steam_account_name");
     const res = await fetch(url);
@@ -106,44 +108,46 @@ export default function Index() {
           </select>
         </div>
 
-        <div className="max-w-[700px] mx-auto">
-          {steamAccountLoading ? (
-            <div
-              className="flex items-center bg-blue-500 text-white text-sm font-bold px-4 py-3 max-w-lg ml-auto mr-auto rounded"
-              role="alert"
-            >
-              <svg className="fill-current w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
-                <title>Loading</title>
-                <path
-                  fillRule="evenodd"
-                  clipRule="evenodd"
-                  d="M10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0zm1 15H9v-2h2v2zm0-4H9V5h2v6z"
-                />
-              </svg>
-              <p className="block sm:inline">Fetching Steam account...</p>
-            </div>
-          ) : steamAccountError || !steamAccountName ? (
-            <div
-              className="flex items-center bg-orange-500 text-white text-sm font-bold px-4 py-3 max-w-lg ml-auto mr-auto rounded "
-              role="alert"
-            >
-              <svg className="fill-current w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
-                <title>Warn</title>
-                <path d="M10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0zm1 15H9v-2h2v2zm0-4H9V5h2v6z" />
-              </svg>
-              <p className="block sm:inline text-white">
-                Failed to fetch Steam account name. Please make sure you entered a valid Steam ID3 and region.
+        {steamId && region && (
+          <div className="max-w-[700px] mx-auto">
+            {steamAccountLoading ? (
+              <div
+                className="flex items-center bg-blue-500 text-white text-sm font-bold px-4 py-3 max-w-lg ml-auto mr-auto rounded"
+                role="alert"
+              >
+                <svg className="fill-current w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+                  <title>Loading</title>
+                  <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0zm1 15H9v-2h2v2zm0-4H9V5h2v6z"
+                  />
+                </svg>
+                <p className="block sm:inline">Fetching Steam account...</p>
+              </div>
+            ) : steamAccountError || !steamAccountName ? (
+              <div
+                className="flex items-center bg-orange-500 text-white text-sm font-bold px-4 py-3 max-w-lg ml-auto mr-auto rounded "
+                role="alert"
+              >
+                <svg className="fill-current w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+                  <title>Warn</title>
+                  <path d="M10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0zm1 15H9v-2h2v2zm0-4H9V5h2v6z" />
+                </svg>
+                <p className="block sm:inline text-white">
+                  Failed to fetch Steam account name. Please make sure you entered a valid Steam ID3 and region.
+                </p>
+              </div>
+            ) : (
+              <p className="text-sm text-gray-500">
+                Found Steam account:{" "}
+                <span className="font-bold text-gray-900">
+                  {steamAccountName} ({steamId})
+                </span>
               </p>
-            </div>
-          ) : (
-            <p className="text-sm text-gray-500">
-              Found Steam account:{" "}
-              <span className="font-bold text-gray-900">
-                {steamAccountName} ({steamId})
-              </span>
-            </p>
-          )}
-        </div>
+            )}
+          </div>
+        )}
 
         <div className="flex flex-wrap gap-x-6">
           <div className="flex-1 max-w-[700px] mx-auto mt-6">