/** @module containers/completions */
"use client";
import { Box, Button, List, Tag, Text } from "grommet";
import { useRef, useState } from "react";
import { Like, Dislike } from "grommet-icons";
import ScriptEditor from "@/components/editor";
import {
CHIRON_PREFIX,
CHIRON_FOREIGN_KEY,
CHIRON_VENDOR_ID,
} from "@/lib/config";
import { usePathname } from "next/navigation";
import { useRefreshData } from "@/lib/hooks";
const chironIdxKey = CHIRON_PREFIX + "idx";
/**
* CompletionsContainer contains all logic for managing completions reviews
*
* @param {{ completions }} props
*/
export function CompletionsContainer(props) {
const { completions } = props;
const [selected, setSelected] = useState();
const [reviewing, setReviewing] = useState(false);
const monacoEditorRef = useRef(null);
const editorRef = useRef(null);
const pathname = usePathname();
const { refresh } = useRefreshData();
const readOnly = pathname !== "/completions/pending";
const onInitializePane = (_, __, model) => {
editorRef.current.focus();
monacoEditorRef.current.setModelMarkers(model[0], "owner", null);
};
const getCompletionWithForeignKey = (completionId) => {
return completions.find((completion) => {
return completion[0]._id === completionId;
})[1];
};
const onReview = async (direction) => {
setReviewing(true);
const data = editorRef.current.getModifiedEditor().getValue();
const completionWithForeignKey = getCompletionWithForeignKey(
JSON.parse(selected.item)._id,
);
const vendorId = completionWithForeignKey?.[CHIRON_VENDOR_ID];
const foreignKey = completionWithForeignKey?.[CHIRON_FOREIGN_KEY];
if (!vendorId || !foreignKey) {
setReviewing(false);
return alert("Missing data");
}
const res = await fetch("/api/data/completions/review", {
method: "POST",
body: JSON.stringify({
direction,
data: {
...JSON.parse(data),
[CHIRON_VENDOR_ID]: vendorId,
[CHIRON_FOREIGN_KEY]: foreignKey,
},
}),
});
if (res.status !== 200) {
alert(res.statusText);
} else {
alert("Sucess");
refresh();
}
setReviewing(false);
};
return (
<Box gap="medium">
<List
primaryKey={(completion) => (
<Text key={completion._id} size="medium" weight="bold">
{completion._id}
</Text>
)}
secondaryKey={(completion) => (
<Box direction="row" gap="xsmall">
{completions
.map((c) => c[0]._id === completion._id)
?.filter(Boolean)?.length > 1 ? (
<Tag
key={completion._id + "duplicate"}
size="xsmall"
value={"Duplicate"}
/>
) : null}
<Tag
key={completion._id + "vendorId"}
size="xsmall"
value={
getCompletionWithForeignKey(completion._id)?.[CHIRON_VENDOR_ID]
}
/>
</Box>
)}
data={completions.map((completion) => completion[0])}
itemProps={
selected?.[chironIdxKey] >= 0
? { [selected?.[chironIdxKey]]: { background: "brand" } }
: undefined
}
onClickItem={(event) => {
const currentlySelected =
selected?.[chironIdxKey] === event.index
? undefined
: {
[chironIdxKey]: event.index,
item: JSON.stringify(event.item, null, 2),
};
setSelected(currentlySelected);
}}
pad={{ left: "small", right: "none", top: "small", bottom: "small" }}
/>
{selected?.item ? (
<Box
height={{
min: "42.9rem",
}}
>
<ScriptEditor
code={selected.item}
originalCode={selected.item}
onInitializePane={onInitializePane}
editorRef={editorRef}
monacoEditorRef={monacoEditorRef}
readOnly={readOnly}
/>
{readOnly ? null : (
<Box
align="center"
justify="center"
direction="row"
pad="large"
gap="medium"
>
<Button
label="Approve"
icon={<Like />}
disabled={reviewing}
primary
color="neutral-1"
onClick={() => onReview("pending2approve")}
/>
<Button
label="Reject"
icon={<Dislike />}
disabled={reviewing}
primary
color="neutral-4"
onClick={() => onReview("pending2reject")}
/>
</Box>
)}
</Box>
) : null}
</Box>
);
}