extension/react-app/src/components/dialogs/AddContextGroupDialog.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

import { useContext } from "react";
import { Button, TextInput } from "..";
import { GUIClientContext } from "../../App";
import { useDispatch } from "react-redux";
import {
  setDialogMessage,
  setShowDialog,
} from "../../redux/slices/uiStateSlice";
import { ContextItem } from "../../../../schema/FullState";

function AddContextGroupDialog({
  selectedContextItems,
}: {
  selectedContextItems: ContextItem[];
}) {
  const dispatch = useDispatch();
  const client = useContext(GUIClientContext);

  let inputElement: HTMLInputElement | null = null;

  const handleCreate = () => {
    dispatch(setDialogMessage(undefined));
    dispatch(setShowDialog(false));
    const title = inputElement ? inputElement.value : "My Context Group";
    client?.saveContextGroup(title, selectedContextItems);
  };

  return (
    <div className="p-4">
      <TextInput
        defaultValue="My Context Group"
        type="text"
        ref={(input) => {
          inputElement = input;
        }}
        onKeyDown={(e) => {
          if (e.key === "Enter") {
            handleCreate();
          }
        }}
      />
      <br />
      <Button className="ml-auto" onClick={handleCreate}>
        Create
      </Button>
    </div>
  );
}

export default AddContextGroupDialog;