From 1ac586cf1db4b7dbb27ace7bf48e32f88db0c7ea Mon Sep 17 00:00:00 2001
From: marcelovicentegc <marcelovicentegc@gmail.com>
Date: Sun, 3 Mar 2024 20:06:45 -0300
Subject: [PATCH] feat: display review instruction during review

---
 app/completions/pending/page.js | 28 +++++++++++-
 containers/completions.js       | 81 ++++++++++++++++-----------------
 lib/db/reads.js                 | 17 +++++++
 3 files changed, 83 insertions(+), 43 deletions(-)

diff --git a/app/completions/pending/page.js b/app/completions/pending/page.js
index 462c885..6fda0a5 100644
--- a/app/completions/pending/page.js
+++ b/app/completions/pending/page.js
@@ -1,7 +1,10 @@
 import Empty from "@/components/empty";
 import { CompletionsContainer } from "@/containers/completions";
 import { CHIRON_FOREIGN_KEY, CHIRON_VENDOR_ID } from "@/lib/config";
-import { getCompletionsPendingReview } from "@/lib/db/reads";
+import {
+  getCompletionsPendingReview,
+  getReviewInstructions,
+} from "@/lib/db/reads";
 
 export default async function PendingCompletionsReviewPage() {
   const pendingReviews = await getCompletionsPendingReview();
@@ -27,5 +30,26 @@ export default async function PendingCompletionsReviewPage() {
     },
   );
 
-  return <CompletionsContainer completions={completions} />;
+  const uniqueVendors = new Set(
+    completions.map(([, { [CHIRON_VENDOR_ID]: vendorId }]) => vendorId),
+  );
+
+  const reviewInstructions = (
+    await Promise.all(
+      Array.from(uniqueVendors)?.map((vendorId) =>
+        getReviewInstructions(vendorId),
+      ),
+    )
+  ).reduce((acc, instructions) => {
+    acc[instructions.vendorId] = instructions.instruction;
+
+    return acc;
+  }, {});
+
+  return (
+    <CompletionsContainer
+      completions={completions}
+      reviewInstructions={reviewInstructions}
+    />
+  );
 }
diff --git a/containers/completions.js b/containers/completions.js
index a2bebbc..3e60017 100644
--- a/containers/completions.js
+++ b/containers/completions.js
@@ -8,11 +8,12 @@ import {
   Heading,
   Layer,
   List,
+  Notification,
   Tag,
   Text,
 } from "grommet";
-import { useEffect, useRef, useState } from "react";
-import { Like, Dislike, Close } from "grommet-icons";
+import { useRef, useState } from "react";
+import { Like, Dislike, Close, CircleInformation } from "grommet-icons";
 import ScriptEditor from "@/components/editor";
 import {
   CHIRON_PREFIX,
@@ -30,10 +31,9 @@ const chironIdxKey = CHIRON_PREFIX + "idx";
  * @param {{ completions }} props
  */
 export function CompletionsContainer(props) {
-  const { completions } = props;
+  const { completions, reviewInstructions } = props;
   const [selected, setSelected] = useState();
   const [reviewing, setReviewing] = useState(false);
-  const [focusOnContent, setFocusOnContent] = useState(false);
   const monacoEditorRef = useRef(null);
   const editorRef = useRef(null);
   const pathname = usePathname();
@@ -90,22 +90,6 @@ export function CompletionsContainer(props) {
     setReviewing(false);
   };
 
-  useEffect(() => {
-    if (!selected && focusOnContent) {
-      setFocusOnContent(false);
-    }
-  }, [selected]);
-
-  useEffect(() => {
-    if (selected && focusOnContent === true) {
-      const content = selected.item?.completion?.choices?.[0]?.message?.content;
-
-      if (content) {
-        setFocusOnContent(content);
-      }
-    }
-  }, [focusOnContent]);
-
   return (
     <Box gap="medium">
       <List
@@ -145,32 +129,47 @@ export function CompletionsContainer(props) {
       />
       {selected?.item ? (
         <Layer full animation="fadeIn">
-          <Box justify="between" align="center" pad="small" direction="row">
-            <Heading level={3} margin="none">
-              Review {JSON.parse(selected.item)._id}
-            </Heading>
-            <Box justify="center" align="center" direction="row" pad="xsmall">
-              <CheckBox
-                label="Focus on content"
-                checked={focusOnContent}
-                onChange={() => {
-                  setFocusOnContent(!focusOnContent);
+          <Box direction="column">
+            <Box justify="between" align="center" pad="small" direction="row">
+              <Heading level={3} margin="none">
+                Review {JSON.parse(selected.item)._id}
+              </Heading>
+              <Box justify="center" align="center" direction="row" pad="xsmall">
+                <Button
+                  icon={<Close />}
+                  hoverIndicator
+                  onClick={() => setSelected(undefined)}
+                />
+              </Box>
+            </Box>
+            {!readOnly && (
+              <Notification
+                style={{
+                  padding: "0.5rem",
                 }}
+                icon={<CircleInformation />}
+                status="normal"
+                title="Review instructions"
+                global
+                message={(() => {
+                  const completionWithForeignKey = getCompletionWithForeignKey(
+                    JSON.parse(selected.item)._id,
+                  );
+
+                  const vendorId = completionWithForeignKey?.[CHIRON_VENDOR_ID];
+
+                  if (reviewInstructions[vendorId]) {
+                    return reviewInstructions[vendorId];
+                  }
+
+                  return "No review instructions available";
+                })()}
               />
-              <Button
-                icon={<Close />}
-                hoverIndicator
-                onClick={() => setSelected(undefined)}
-              />
-            </Box>
+            )}
           </Box>
           <Box fill align="center" justify="center" pad="small">
             <ScriptEditor
-              code={
-                typeof focusOnContent === "string"
-                  ? focusOnContent
-                  : selected.item
-              }
+              code={selected.item}
               originalCode={selected.item}
               onInitializePane={onInitializePane}
               editorRef={editorRef}
diff --git a/lib/db/reads.js b/lib/db/reads.js
index d687089..74dd4b6 100644
--- a/lib/db/reads.js
+++ b/lib/db/reads.js
@@ -63,6 +63,23 @@ export async function getApiKey(vendorId) {
   return result;
 }
 
+/**
+ * Gets the review instructions for the given vendor ID.
+ *
+ * @param {string} vendorId The vendor ID to get the review instructions for.
+ * @returns
+ */
+export async function getReviewInstructions(vendorId) {
+  const collection = await getApiKeysCollection();
+
+  const result =
+    (await collection.findOne({
+      vendorId,
+    })) || {};
+
+  return { vendorId, instruction: result?.reviewInstructions };
+}
+
 /**
  * Gets a shallow version of all API keys.
  *