Function AddQuestionModal

components/approval/addQuestionModal.tsx:12–217

(props: {
  groupId: string | null;
  setGroupId: (actionGroupId: string | null) => void;
  groups: { name: string; id: string }[];
  setQuestions: React.Dispatch<React.SetStateAction<UIQuestionMessageData[]>>;
  variableData: ApprovalVariable[];
})

import { UIQuestionMessageData } from "../../pages/approval";

export function AddQuestionModal(props: {
  groupId: string | null;
  setGroupId: (actionGroupId: string | null) => void;
  groups: { name: string; id: string }[];
  setQuestions: React.Dispatch<React.SetStateAction<UIQuestionMessageData[]>>;
  variableData: ApprovalVariable[];
}) {
  const { profile } = useProfile();
  const supabase = useSupabaseClient<Database>();
  const [questionText, setQuestionText] = useState<string>("");
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState<boolean>(false);
  const [chosenGroupId, setChosenGroupId] = useState<string | null>(null);
  useEffect(() => {
    if (props.groupId) {
      setChosenGroupId(props.groupId);
    }
    setQuestionText("");
  }, [props.groupId]);

  return (
    <ClarifyCloseModal
      open={props.groupId !== null}
      setOpen={() => props.setGroupId(null)}
      classNames={"max-w-2xl overflow-visible"}
      shouldClarify={Boolean(questionText)}
    >
      <div className="w-full flex flex-col">
        <h1 className={"text-lg text-gray-200 mb-2"}>Add Question</h1>
        <input
          value={questionText}
          onChange={(e) => setQuestionText(e.target.value)}
          className="rounded-md bg-gray-700 border-gray-400 text-gray-100 px-2 py-1 placeholder:text-gray-400"
          placeholder={"Question - include parameters like {parameter}"}
        />
        {error && <div className="text-red-500 text-sm mt-1">{error}</div>}
        <div className="flex flex-row place-items-center gap-x-4 w-1/2 mt-4">
          <div className={"text-gray-300"}>Group:</div>
          <SelectBox
            options={props.groups}
            selected={chosenGroupId}
            setSelected={async (selected: string) => {
              setChosenGroupId(selected);
            }}
            theme={"dark"}
            includeNull={true}
          />
        </div>

        <div className={"flex flex-row justify-end gap-x-2 mt-2"}>
          <button
            className={"bg-gray-500 rounded px-2 py-1 text-gray-50"}
            onClick={() => props.setGroupId(null)}
          >
            Cancel
          </button>
          <button
            className={classNames(