From c4af8bba1efea3f2cc8ae1ad86f7e2b737dfa8d8 Mon Sep 17 00:00:00 2001
From: Keith Stevens <fozziethebeat@gmail.com>
Date: Mon, 16 Jan 2023 14:44:38 +0900
Subject: [PATCH] Switch back to useEffect in FlaggableElement to ensure valid
 labels are present

---
 website/src/components/FlaggableElement.tsx | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/website/src/components/FlaggableElement.tsx b/website/src/components/FlaggableElement.tsx
index 4cd55293..b9e41a32 100644
--- a/website/src/components/FlaggableElement.tsx
+++ b/website/src/components/FlaggableElement.tsx
@@ -22,7 +22,7 @@ import {
 } from "@chakra-ui/react";
 import { QuestionMarkCircleIcon } from "@heroicons/react/20/solid";
 import clsx from "clsx";
-import { useReducer } from "react";
+import { useEffect, useReducer } from "react";
 import { FiAlertCircle } from "react-icons/fi";
 import { get, post } from "src/lib/api";
 import { Message } from "src/types/Conversation";
@@ -100,12 +100,14 @@ export const FlaggableElement = (props: FlaggableElementProps) => {
   );
   const [isEditing, setIsEditing] = useBoolean();
 
-  useSWR("/api/valid_labels", get, {
-    onSuccess: (data) => {
-      const { valid_labels } = data;
-      updateReport({ type: "load_labels", labels: valid_labels });
-    },
-  });
+  const { data, isLoading } = useSWR("/api/valid_labels", get);
+  useEffect(() => {
+    if (isLoading) {
+      return;
+    }
+    const { valid_labels } = data;
+    updateReport({ type: "load_labels", labels: valid_labels });
+  }, [data, isLoading]);
 
   const { trigger } = useSWRMutation("/api/set_label", post, {
     onSuccess: () => {