fix: do not use array index for key / use void for onSubmit (#409)

oaknational · Nov 28, 2024 · 44b5961 · 44b5961
1 parent 65f4a4a
commit 44b5961
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 12 deletions.
diff --git a/apps/nextjs/src/app/admin/aila/[chatId]/view.tsx b/apps/nextjs/src/app/admin/aila/[chatId]/view.tsx
@@ -7,7 +7,11 @@ import { OakAccordion, OakPrimaryButton } from "@oaknational/oak-components";
 
 import { trpc } from "@/utils/trpc";
 
-function ModerationListItem({ moderation }: { readonly moderation: Moderation }) {
+function ModerationListItem({
+  moderation,
+}: {
+  readonly moderation: Moderation;
+}) {
   const { id, invalidatedAt } = moderation;
   const [invalidated, setInvalidated] = useState(Boolean(invalidatedAt));
   const invalidateModeration = trpc.admin.invalidateModeration.useMutation({
@@ -28,7 +32,7 @@ function ModerationListItem({ moderation }: { readonly moderation: Moderation })
               iconName="cross"
               className="ml-auto"
               onClick={() =>
-                invalidateModeration.mutateAsync({ moderationId: id })
+                void invalidateModeration.mutateAsync({ moderationId: id })
               }
               isLoading={invalidateModeration.isLoading}
               disabled={!!invalidated}
@@ -41,14 +45,16 @@ function ModerationListItem({ moderation }: { readonly moderation: Moderation })
             {moderation.justification}
           </blockquote>
           <div className="mt-2 space-x-2">
-            {moderation.categories.map((category, index) => (
-              <span
-                key={index}
-                className="inline-block rounded-md bg-zinc-300 px-8 py-4 text-xs font-semibold text-zinc-800"
-              >
-                {String(category)}
-              </span>
-            ))}
+            {Array.from(new Set(moderation.categories))
+              .map((c) => String(c))
+              .map((category) => (
+                <span
+                  key={category}
+                  className="inline-block rounded-md bg-zinc-300 px-8 py-4 text-xs font-semibold text-zinc-800"
+                >
+                  {category}
+                </span>
+              ))}
           </div>
         </div>
       </div>

diff --git a/apps/nextjs/src/components/AppComponents/FeedbackForms/ModerationFeedbackForm.tsx b/apps/nextjs/src/components/AppComponents/FeedbackForms/ModerationFeedbackForm.tsx
@@ -59,7 +59,12 @@ export const ModerationFeedbackForm = ({
           </span>
         </Dialog.Description>
       </div>
-      <form onSubmit={onSubmit}>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          void onSubmit();
+        }}
+      >
         <Textarea
           className="min-h-30 w-full resize-none rounded border border-gray-600 bg-transparent px-10 py-[0.6rem] text-base placeholder-gray-700 focus-within:outline-none"
           onChange={(e) => setComment(e.target.value)}
@@ -71,7 +76,13 @@ export const ModerationFeedbackForm = ({
         <ChatButton variant="text-link" onClick={closeModal}>
           Back to lesson
         </ChatButton>
-        <ChatButton variant="primary" onClick={onSubmit} disabled={!isValid}>
+        <ChatButton
+          variant="primary"
+          onClick={() => {
+            void onSubmit();
+          }}
+          disabled={!isValid}
+        >
           Submit feedback
         </ChatButton>
       </div>