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); |