From 7dd6efb832494c14a365a2cd2e9f687957145e20 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Fri, 10 Jun 2022 00:36:06 +0300
Subject: [PATCH] Replace Array.at with error throwing function

---
 app/components/Avatar.tsx                     |  1 +
 .../suggestions/comment.$tier.$userId.tsx     |  3 ++-
 app/utils/arrays.ts                           | 22 +++++++++++++++++++
 3 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/app/components/Avatar.tsx b/app/components/Avatar.tsx
index 0b4573a82..1e07e5557 100644
--- a/app/components/Avatar.tsx
+++ b/app/components/Avatar.tsx
@@ -25,6 +25,7 @@ export function Avatar({
     <img
       className={clsx("avatar", className)}
       src={
+        // xxx: picture src offer png fallback
         discordAvatar
           ? `https://cdn.discordapp.com/avatars/${discordId}/${discordAvatar}.webp${
               size === "lg" ? "" : "?size=80"
diff --git a/app/routes/plus/suggestions/comment.$tier.$userId.tsx b/app/routes/plus/suggestions/comment.$tier.$userId.tsx
index f88ba0f93..529179c7b 100644
--- a/app/routes/plus/suggestions/comment.$tier.$userId.tsx
+++ b/app/routes/plus/suggestions/comment.$tier.$userId.tsx
@@ -13,6 +13,7 @@ import {
   canAddCommentToSuggestionBE,
   canAddCommentToSuggestionFE,
 } from "~/permissions";
+import { atOrError } from "~/utils/arrays";
 import { parseRequestFormData, requireUser, validate } from "~/utils/remix";
 import { PLUS_SUGGESTIONS_PAGE } from "~/utils/urls";
 import { actualNumber } from "~/utils/zod";
@@ -60,7 +61,7 @@ export default function PlusCommentModalPage() {
   const user = useUser();
   const matches = useMatches();
   const params = useParams();
-  const data = matches.at(-2)!.data as PlusSuggestionsLoaderData;
+  const data = atOrError(matches, -2).data as PlusSuggestionsLoaderData;
 
   const targetUserId = Number(params.userId);
   const tierSuggestedTo = String(params.tier);
diff --git a/app/utils/arrays.ts b/app/utils/arrays.ts
index c57bc7a48..5fd1591ec 100644
--- a/app/utils/arrays.ts
+++ b/app/utils/arrays.ts
@@ -2,3 +2,25 @@
 export function allTruthy(arr: unknown[]) {
   return arr.every(Boolean);
 }
+
+/** Mimics Array.prototype.at except throws an error if index out of bounds */
+export function atOrError<T>(arr: T[], n: number) {
+  const result = at(arr, n);
+  if (result === undefined) {
+    throw new Error(`Index ${n} out of bounds. Array length is ${arr.length}`);
+  }
+  return result;
+}
+
+// https://github.com/tc39/proposal-relative-indexing-method#polyfill
+/** Array.at polyfill */
+function at<T>(arr: T[], n: number) {
+  // ToInteger() abstract op
+  n = Math.trunc(n) || 0;
+  // Allow negative indexing from the end
+  if (n < 0) n += arr.length;
+  // OOB access is guaranteed to return undefined
+  if (n < 0 || n >= arr.length) return undefined;
+  // Otherwise, this is just normal property access
+  return arr[n];
+}