All files / src/apps/dictionaries/pages AddBulkConceptsPage.tsx

20% Statements 3/15
100% Branches 0/0
0% Functions 0/5
20% Lines 3/15

Press n or j to go to the next uncovered block, b, p or k for the previous block.

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 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137                                    1x                                   1x                                                                                                                                                                                             1x          
import React, { useState } from "react";
import {
  Button,
  Grid,
  Menu,
  MenuItem,
  TextField,
  Theme,
  Typography
} from "@mui/material";
import { recursivelyAddConceptsToDictionaryAction } from "../redux";
import { useLocation } from "react-router";
import { connect } from "react-redux";
import { PREFERRED_SOURCES, useAnchor, useQueryParams } from "../../../utils";
import Header from "../../../components/Header";
import { Link } from "react-router-dom";
import { createStyles, makeStyles } from "@mui/styles";
 
const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    buttonWrapper: {
      textAlign: "center",
      marginTop: "2vh"
    },
    lightColour: {
      color: theme.palette.background.default
    }
  })
);
 
interface Props {
  addConceptsToDictionary: (
    ...args: Parameters<typeof recursivelyAddConceptsToDictionaryAction>
  ) => void;
}
 
const AddBulkConceptsPage: React.FC<Props> = ({ addConceptsToDictionary }) => {
  const classes = useStyles();
  const { pathname: url } = useLocation();
  const { fromSource } = useQueryParams();
 
  const [
    switchSourceAnchor,
    handleSwitchSourceClick,
    handleSwitchSourceClose
  ] = useAnchor();
 
  const dictionaryUrl = url.replace("/add", "");
  const [conceptsToAdd, setConceptsToAdd] = useState<string[]>([]);
 
  return (
    <Header
      allowImplicitNavigation
      title={`Add concepts in bulk from ${fromSource}`}
      headerComponent={
        <>
          <Button
            className={classes.lightColour}
            variant="text"
            size="large"
            aria-haspopup="true"
            onClick={handleSwitchSourceClick}
          >
            Switch source (Currently {fromSource})
          </Button>
          <Menu
            anchorEl={switchSourceAnchor}
            keepMounted
            open={Boolean(switchSourceAnchor)}
            onClose={handleSwitchSourceClose}
          >
            {Object.entries(PREFERRED_SOURCES).map(
              ([sourceName, sourceUrl]) => (
                <MenuItem onClick={handleSwitchSourceClose}>
                  <Link
                    replace
                    className="link"
                    to={`${url}?fromSource=${sourceName}`}
                  >
                    {sourceName}
                  </Link>
                </MenuItem>
              )
            )}
          </Menu>
        </>
      }
    >
      <Grid item xs={6}>
        <Typography align="center">
          Please provide IDs for the {fromSource} concepts to add. IDs should be
          separated with a space, comma or new lines. For example, you can copy
          and paste from a spreadsheet column. e.g 1000, 1001, 1002.
        </Typography>
        <br />
        <TextField
          data-testid="bulkImportTextArea"
          placeholder="1000, 1001, 1002, 1003, 1004, 1005, 1006, 1007"
          onChange={e => setConceptsToAdd(e.target.value.split(/[\s,\r\n]+/))}
          fullWidth
          multiline
          rows={20}
          variant="outlined"
        />
        <br />
        <div className={classes.buttonWrapper}>
          <Button
            to={{ pathname: `/actions` }}
            component={Link}
            variant="outlined"
            color="primary"
            size="medium"
            disabled={conceptsToAdd.length < 1}
            onClick={() => {
              setConceptsToAdd([]);
              addConceptsToDictionary(
                dictionaryUrl,
                conceptsToAdd,
                true,
                PREFERRED_SOURCES[fromSource]
              );
            }}
          >
            Add concepts
          </Button>
        </div>
      </Grid>
    </Header>
  );
};
 
const mapActionsToProps = {
  addConceptsToDictionary: recursivelyAddConceptsToDictionaryAction
};
 
export default connect(undefined, mapActionsToProps)(AddBulkConceptsPage);