diff --git a/admin/server/controllers/systems.js b/admin/server/controllers/systems.js index 3d19819..9a13f4f 100644 --- a/admin/server/controllers/systems.js +++ b/admin/server/controllers/systems.js @@ -174,6 +174,7 @@ exports.ownSystem = async function (req, res, next) { if (!system) { console.error("ERROR: OwnSystem - system does not exist: " + req.body.shortName.toLowerCase()); + res.status(500) res.json({ success: false, message: "That System does not exist." @@ -182,7 +183,7 @@ exports.ownSystem = async function (req, res, next) { } if (!system.userId.equals(req.user._id)) { console.error("ERROR: OwnSystem - not users system " + req.body.shortName.toLowerCase()); - + res.status(500) res.json({ success: false, message: "You are not the user associated with this system." @@ -195,6 +196,7 @@ exports.ownSystem = async function (req, res, next) { } catch (err) { console.error("ERROR: ownSystem - caught: " + err); + res.status(500) res.json({ success: false, message: err @@ -215,6 +217,7 @@ exports.uniqueShortName = async function (req, res, next) { } if (typeof shortName == 'undefined') { console.error("ShortName is not in req.body instead") + res.status(500) res.json({ success: false, message: "Short Name not provided in form" @@ -228,6 +231,7 @@ exports.uniqueShortName = async function (req, res, next) { if (system) { console.error("ERROR: Unique Shortname already in use: " + req.body.shortName.toLowerCase()); + res.status(500) res.json({ success: false, message: "Short Name already in use" @@ -240,10 +244,8 @@ exports.uniqueShortName = async function (req, res, next) { } catch (err) { console.error("ERROR: Unique ShortName - caught: " + err); - res.json({ - success: false, - message: err - }); + res.status(500); + res.json({ message: "ERROR: Unique ShortName - caught: " + err}); return; } @@ -300,10 +302,7 @@ exports.updateSystem = async function (req, res, next) { ignoreUnknownTalkgroup }))(res.locals.system); returnSys.id = res.locals.system._id; - res.json({ - success: true, - system: returnSys - }); + res.json(returnSys); return; } }); @@ -317,6 +316,7 @@ exports.validateSystem = async function (req, res, next) { res.locals.ignoreUnknownTalkgroup = req.body.ignoreUnknownTalkgroup; if (!req.body.name || (req.body.name.length < 2)) { console.error("ERROR: Validate System - req.body.name"); + res.status(500) res.json({ success: false, message: "System Name is Required" @@ -327,6 +327,7 @@ exports.validateSystem = async function (req, res, next) { if (!req.body.description || (req.body.description.length < 2)) { console.error("ERROR: Validate System - req.body.description"); + res.status(500) res.json({ success: false, message: "System Description is Required" @@ -337,6 +338,7 @@ exports.validateSystem = async function (req, res, next) { if (!req.body.shortName || (req.body.shortName.length < 2)) { console.error("ERROR: Validate System - req.body.shortName"); + res.status(500) res.json({ success: false, message: "System ShortName is Required" @@ -352,6 +354,7 @@ exports.validateSystem = async function (req, res, next) { // make sure it is one of the expected types if ((req.body.systemType != "state") && (req.body.systemType != "city") && (req.body.systemType != "county") && (req.body.systemType != "international")) { console.error("ERROR: Validate System - req.body.systemType: " + req.body.systemType); + res.status(500) res.json({ success: false, message: "Select system location" @@ -368,6 +371,7 @@ exports.validateSystem = async function (req, res, next) { req.body.systemType === "county") { if (!req.body.state || (req.body.state === "") || (req.body.state.length < 2)) { console.error("ERROR: Validate System - req.body.state: " + req.body.state); + res.status(500) res.json({ success: false, message: "Select the State for the System" @@ -380,6 +384,7 @@ exports.validateSystem = async function (req, res, next) { if (req.body.systemType === "city") { if (!req.body.city || (req.body.city === "") || (req.body.city.length < 2)) { console.error("ERROR: Validate System - req.body.systemType: " + req.body.systemType); + res.status(500) res.json({ success: false, message: "Enter the city for the System" @@ -392,6 +397,7 @@ exports.validateSystem = async function (req, res, next) { if (req.body.systemType === "county") { if (!req.body.county || (req.body.county === "") || (req.body.county.length < 2)) { console.error("ERROR: Validate System - req.body.county: " + req.body.county); + res.status(500) res.json({ success: false, message: "Enter the county for the System" @@ -404,6 +410,7 @@ exports.validateSystem = async function (req, res, next) { if (req.body.systemType === "international") { if (!req.body.country || (req.body.country === "") || (req.body.country.length < 2)) { console.error("ERROR: Validate System - req.body.country: " + req.body.country); + res.status(500) res.json({ success: false, message: "Enter the country for the System" @@ -416,6 +423,7 @@ exports.validateSystem = async function (req, res, next) { } catch (err) { console.error("ERROR: Validate System - caught: " + err); + res.status(500) res.json({ success: false, message: err @@ -457,15 +465,17 @@ exports.createSystem = async function (req, res, next) { }))(res.locals); system.key = key; system.userId = new mongoose.Types.ObjectId(req.user._id); - System.create(system, function (err, newSys) { - if (err) { + const newSys = await System.create(system).catch( err => { + console.error(err); + res.status(500) res.json({ success: false, message: err }); return; - } + }); + var returnSys = (({ name, shortName, @@ -494,10 +504,7 @@ exports.createSystem = async function (req, res, next) { key }))(newSys); returnSys.id = newSys._id; - res.json({ - success: true, - system: returnSys - }); + res.json( returnSys); return; - }); + } \ No newline at end of file diff --git a/admin/src/App/App.js b/admin/src/App/App.js index b4fcbd3..b35a3d9 100644 --- a/admin/src/App/App.js +++ b/admin/src/App/App.js @@ -8,7 +8,7 @@ import About from "../Components/About" import System from "../System/System" import ListSystems from "../System/ListSystems" import UpdateSystemContainer from "../System/UpdateSystemContainer" -import CreateSystemContainer from "../System/CreateSystemContainer" +import CreateSystem from "../System/CreateSystem" const App = (params) => { @@ -20,7 +20,7 @@ const App = (params) => { } /> } /> - + } /> } /> } /> (
Miss
)} /> diff --git a/admin/src/System/CreateSystem.js b/admin/src/System/CreateSystem.js index ff773bb..9470973 100644 --- a/admin/src/System/CreateSystem.js +++ b/admin/src/System/CreateSystem.js @@ -1,5 +1,5 @@ -import React, { Component } from "react"; -import ReactDOM from "react-dom"; +import React, { useState } from "react"; + import { Container, Header, @@ -12,7 +12,9 @@ import { Message, Icon } from "semantic-ui-react"; - +import { useCreateSystemMutation} from '../features/api/apiSlice' +import { useSelector, useDispatch } from 'react-redux' +import { useLocation, useNavigate, useParams } from 'react-router-dom'; import SystemForm from "./SystemForm"; // ---------------------------------------------------- @@ -21,35 +23,26 @@ const requestMessageStyle = { }; // ---------------------------------------------------- -class CreateSystem extends Component { - constructor(props) { - super(props); - this.handleSubmit = this.handleSubmit.bind(this); +const CreateSystem = (props) => { + const navigate = useNavigate(); + const [createSystem, { error }] = useCreateSystemMutation(); + const { screenName } = useSelector((state) => state.user); + + const [requestMessage, setRequestMessage] = useState(""); + + const handleSubmit = async (system) => { + try { + const originalPromiseResult = await createSystem(system).unwrap(); + navigate("/list-systems") + } catch (error) { + const message = error.data.message; + console.log(message); + setRequestMessage(message); + } + } - state = { - requestMessage: "" - } - - - - handleSubmit(system) { - this.props - .createSystem(system) - .then(requestMessage => { - if (requestMessage) { - // report to the user is there was a problem during registration - this.setState({ - requestMessage - }); - } else { - this.props.changeUrl("/list-systems") - } - }); - } - - render() { return (
@@ -72,11 +65,11 @@ class CreateSystem extends Component {
Create System
- +
); - } + } export default CreateSystem; diff --git a/admin/src/System/SystemForm.js b/admin/src/System/SystemForm.js index 7fbd8e0..20f79a7 100644 --- a/admin/src/System/SystemForm.js +++ b/admin/src/System/SystemForm.js @@ -1,4 +1,4 @@ -import React, { Component } from "react"; +import React, { useEffect, useState } from "react"; import { Divider, Form, @@ -9,421 +9,387 @@ import { } from "semantic-ui-react"; // ---------------------------------------------------- -class SystemForm extends Component { - constructor(props) { - super(props); - this.handleInputChange = this.handleInputChange.bind(this); - this.handleScreenNameCheckboxChange = this.handleScreenNameCheckboxChange.bind(this); - this.handleTalkgroupCheckboxChange = this.handleTalkgroupCheckboxChange.bind(this); - this.handleSubmit = this.handleSubmit.bind(this); - this.checkInputs = this.checkInputs.bind(this); - this.render = this.render.bind(this); +const SystemForm = (props) => { - this.state = { - checkInputMessages: [], - name: "", - shortName: "", - description: "", - systemType: "state", - state: "", - city: "", - county: "", - country: "", - showScreenName: false, - ignoreUnknownTalkgroup: false, - nameError: false, - shortNameError: false, - descriptionError: false, - emailError: false, - systemTypeError: false, - stateError: false, - cityErorr: false, - countyError: false, - countryError: false, - isEditing: this.props.isEditing - }; - if (this.props.isEditing && this.props.system) { - this.state.name = this.props.system.name; - this.state.shortName = this.props.system.shortName; - this.state.description = this.props.system.description; - this.state.systemType = this.props.system.systemType; - this.state.city = this.props.system.city; - this.state.state = this.props.system.state; - this.state.county = this.props.system.county; - this.state.country = this.props.system.country; - this.state.showScreenName = this.props.system.showScreenName; - this.state.ignoreUnknownTalkgroup = this.props.system.ignoreUnknownTalkgroup; + + + const [checkInputMessages, setCheckInputMessage] = useState([]); + const [name, setName] = useState(""); + const [shortName, setShortName] = useState(""); + const [description, setDescription] = useState(""); + const [systemType, setSystemType] = useState("state"); + const [systemState, setSystemState] = useState(""); + const [city, setCity] = useState(""); + const [county, setCounty] = useState(""); + const [country, setCountry] = useState(""); + const [showScreenName, setShowScreenName] = useState(false); + const [ignoreUnknownTalkgroup, setIgnoreUnknownTalkgroup] = useState(false); + const [nameError, setNameError] = useState(false); + const [shortNameError, setShortNameError] = useState(false); + const [descriptionError, setDescriptionError] = useState(false); + const [emailError, setEmailError] = useState(false); + const [systemTypeError, setSystemTypeError] = useState(false); + const [systemStateError, setSystemStateError] = useState(false); + const [cityError, setCityError] = useState(false); + const [countyError, setCountyError] = useState(false); + const [countryError, setCountryError] = useState(false); + const [isEditing, setIsEditing] = useState(props.isEditing); + + useEffect(() => { + if (props.isEditing && props.system) { + setName(props.system.name); + setShortName(props.system.shortName); + setDescription(props.system.description); + setSystemType(props.system.systemType); + setCity(props.system.city); + setSystemState(props.system.state) + setCounty(props.system.county); + setCountry(props.system.country); + setShowScreenName(props.system.showScreenName); + setIgnoreUnknownTalkgroup(props.system.ignoreUnknownTalkgroup); } - } - // If we directly to an updating url, the system fetch will come back after the constructer, so we need to catch this and update the values - componentDidUpdate(prevProps) { - if (this.props.isEditing && this.props.system && !prevProps.system) { - this.setState({ - name: this.props.system.name, - shortName: this.props.system.shortName, - description: this.props.system.description, - systemType: this.props.system.systemType, - city: this.props.system.city, - state: this.props.system.state, - county: this.props.system.county, - country: this.props.system.country, - showScreenName: this.props.system.showScreenName, - ignoreUnknownTalkgroup: this.props.system.ignoreUnknownTalkgroup, - }); - } - } - checkInputs() { + }, [props.system]); + + + const checkInputs = () => { let error = false; - var checkInputMessages = []; + var messages = []; - if (this.state.name === "") { - this.setState({ nameError: true }); - checkInputMessages.push("System Name is required"); + if (name === "") { + setNameError(true); + messages.push("System Name is required"); error = true; } else { - this.setState({ nameError: false }); + setNameError(false); } - if (this.state.shortName.length === 0 || this.state.shortName.length > 10) { - this.setState({ shortNameError: true }); - checkInputMessages.push( + if (shortName.length < 4 || shortName.length > 10) { + setShortNameError(true) + messages.push( "Short Name for the system has to be 4-10 charecters" ); error = true; } else { - this.setState({ shortNameError: false }); + setShortNameError(false); } - if (this.state.description === "") { - this.setState({ descriptionError: true }); - checkInputMessages.push("System description is required"); + if (description === "") { + setDescriptionError(true); + messages.push("System description is required"); error = true; } else { - this.setState({ descriptionError: false }); + setDescriptionError(false); } if ( - this.state.systemType === "state" || - this.state.systemType === "city" || - this.state.systemType === "county" + systemType === "state" || + systemType === "city" || + systemType === "county" ) { - if (this.state.state === "") { - this.setState({ stateError: true }); - checkInputMessages.push("Select a state"); + if (systemState === "") { + setSystemStateError(true); + messages.push("Select a state"); error = true; } else { - this.setState({ stateError: false }); + setSystemStateError(false); } } - if (this.state.systemType === "city") { - if (this.state.city === "") { - this.setState({ cityError: true }); - checkInputMessages.push("Enter a city"); + if (systemType === "city") { + if (city === "") { + setCityError(true); + messages.push("Enter a city"); error = true; } else { - this.setState({ cityError: false }); + setCityError(false); } } - if (this.state.systemType === "county") { - if (this.state.county === "") { - this.setState({ countyError: true }); - checkInputMessages.push("Enter a city"); + if (systemType === "county") { + if (county === "") { + setCountyError(true) + messages.push("Enter a county"); error = true; } else { - this.setState({ countyError: false }); + setCountyError(false); } } - if (this.state.systemType === "international") { - if (this.state.country === "") { - this.setState({ countryError: true }); - checkInputMessages.push("Enter a city"); + if (systemType === "international") { + if (country === "") { + setCountryError(true); + messages.push("Enter a country"); error = true; } else { - this.setState({ countryError: false }); + setCountryError(false); } } - this.setState({ checkInputMessages: checkInputMessages }); + setCheckInputMessage(messages); return error; } - handleInputChange = (e, { name, value }) => this.setState({ [name]: value }); - handleScreenNameCheckboxChange() { - this.setState({ showScreenName: !this.state.showScreenName }); + const handleScreenNameCheckboxChange = () => { + setShowScreenName((current) => !current); } - handleTalkgroupCheckboxChange() { - this.setState({ ignoreUnknownTalkgroup: !this.state.ignoreUnknownTalkgroup }); + const handleTalkgroupCheckboxChange = () => { + setIgnoreUnknownTalkgroup((current) => !current); } - handleSubmit(event) { + const handleSubmit = (event) => { event.preventDefault(); - let inputError = this.checkInputs(); + let inputError = checkInputs(); if (!inputError) { - const system = (({ + const system = { name, shortName, description, systemType, city, - state, + state: systemState, county, country, showScreenName, ignoreUnknownTalkgroup - }) => ({ - name, - shortName, - description, - systemType, - city, - state, - county, - country, - showScreenName, - ignoreUnknownTalkgroup - }))(this.state); - this.props.onSubmit(system); + }; + props.onSubmit(system); } } - render() { - var requestMessage = ""; - var floatStyle = { - overflow: "auto" - }; - const { isEditing } = this.props; - const stateOptions = [ - { value: "AL", text: "Alabama" }, - { value: "AK", text: "Alaska" }, - { value: "AZ", text: "Arizona" }, - { value: "AR", text: "Arkansas" }, - { value: "CA", text: "California" }, - { value: "CO", text: "Colorado" }, - { value: "CT", text: "Connecticut" }, - { value: "DE", text: "Delaware" }, - { value: "DC", text: "District Of Columbia" }, - { value: "FL", text: "Florida" }, - { value: "GA", text: "Georgia" }, - { value: "HI", text: "Hawaii" }, - { value: "ID", text: "Idaho" }, - { value: "IL", text: "Illinois" }, - { value: "IN", text: "Indiana" }, - { value: "IA", text: "Iowa" }, - { value: "KS", text: "Kansas" }, - { value: "KY", text: "Kentucky" }, - { value: "LA", text: "Louisiana" }, - { value: "ME", text: "Maine" }, - { value: "MD", text: "Maryland" }, - { value: "MA", text: "Massachusetts" }, - { value: "MI", text: "Michigan" }, - { value: "MN", text: "Minnesota" }, - { value: "MS", text: "Mississippi" }, - { value: "MO", text: "Missouri" }, - { value: "MT", text: "Montana" }, - { value: "NE", text: "Nebraska" }, - { value: "NV", text: "Nevada" }, - { value: "NH", text: "New Hampshire" }, - { value: "NJ", text: "New Jersey" }, - { value: "NM", text: "New Mexico" }, - { value: "NY", text: "New York" }, - { value: "NC", text: "North Carolina" }, - { value: "ND", text: "North Dakota" }, - { value: "OH", text: "Ohio" }, - { value: "OK", text: "Oklahoma" }, - { value: "OR", text: "Oregon" }, - { value: "PA", text: "Pennsylvania" }, - { value: "RI", text: "Rhode Island" }, - { value: "SC", text: "South Carolina" }, - { value: "SD", text: "South Dakota" }, - { value: "TN", text: "Tennessee" }, - { value: "TX", text: "Texas" }, - { value: "UT", text: "Utah" }, - { value: "VT", text: "Vermont" }, - { value: "VA", text: "Virginia" }, - { value: "WA", text: "Washington" }, - { value: "WV", text: "West Virginia" }, - { value: "WI", text: "Wisconsin" }, - { value: "WY", text: "Wyoming" } - ]; - if ( - this.state.checkInputMessages.length || - this.props.requestMessage.length - ) { - var counter = 0; - requestMessage = ( - - - - Problems... -
    - {this.state.checkInputMessages.map(function (listValue) { - return
  • {listValue}
    • ; - })} - {this.props.requestMessage.length > 0 && ( -
  • {this.props.requestMessage}
    • - )} -
- - - ); - } - return ( -
-
- - - - - - - - - - - - - - - - - + var requestMessage = ""; + var floatStyle = { + overflow: "auto" + }; - Location - - - - - - - - - - {this.state.systemType === "city" && ( - - - + const stateOptions = [ + { value: "AL", text: "Alabama" }, + { value: "AK", text: "Alaska" }, + { value: "AZ", text: "Arizona" }, + { value: "AR", text: "Arkansas" }, + { value: "CA", text: "California" }, + { value: "CO", text: "Colorado" }, + { value: "CT", text: "Connecticut" }, + { value: "DE", text: "Delaware" }, + { value: "DC", text: "District Of Columbia" }, + { value: "FL", text: "Florida" }, + { value: "GA", text: "Georgia" }, + { value: "HI", text: "Hawaii" }, + { value: "ID", text: "Idaho" }, + { value: "IL", text: "Illinois" }, + { value: "IN", text: "Indiana" }, + { value: "IA", text: "Iowa" }, + { value: "KS", text: "Kansas" }, + { value: "KY", text: "Kentucky" }, + { value: "LA", text: "Louisiana" }, + { value: "ME", text: "Maine" }, + { value: "MD", text: "Maryland" }, + { value: "MA", text: "Massachusetts" }, + { value: "MI", text: "Michigan" }, + { value: "MN", text: "Minnesota" }, + { value: "MS", text: "Mississippi" }, + { value: "MO", text: "Missouri" }, + { value: "MT", text: "Montana" }, + { value: "NE", text: "Nebraska" }, + { value: "NV", text: "Nevada" }, + { value: "NH", text: "New Hampshire" }, + { value: "NJ", text: "New Jersey" }, + { value: "NM", text: "New Mexico" }, + { value: "NY", text: "New York" }, + { value: "NC", text: "North Carolina" }, + { value: "ND", text: "North Dakota" }, + { value: "OH", text: "Ohio" }, + { value: "OK", text: "Oklahoma" }, + { value: "OR", text: "Oregon" }, + { value: "PA", text: "Pennsylvania" }, + { value: "RI", text: "Rhode Island" }, + { value: "SC", text: "South Carolina" }, + { value: "SD", text: "South Dakota" }, + { value: "TN", text: "Tennessee" }, + { value: "TX", text: "Texas" }, + { value: "UT", text: "Utah" }, + { value: "VT", text: "Vermont" }, + { value: "VA", text: "Virginia" }, + { value: "WA", text: "Washington" }, + { value: "WV", text: "West Virginia" }, + { value: "WI", text: "Wisconsin" }, + { value: "WY", text: "Wyoming" } + ]; + if ( + checkInputMessages.length || + props.requestMessage.length + ) { + var counter = 0; + requestMessage = ( + + + + Problems... +
    + {checkInputMessages.map(function (listValue) { + return
  • {listValue}
    • ; + })} + {props.requestMessage.length > 0 && ( +
  • {props.requestMessage}
    • )} - {this.state.systemType === "county" && ( - - - - )} - {this.state.systemType === "international" ? ( - - - - ) : ( - - - - )} - - - -
    - -
    - - {requestMessage} -
+ + + ); } + return ( +
+
+ + + setName(e.target.value)} + error={nameError} + value={name} + label="System name" + placeholder="System Name..." + /> + + + setShortName(e.target.value)} + error={shortNameError} + value={shortName} + disabled={isEditing} + label="System Short Name (4-10 characters)" + placeholder="Short Name..." + /> + + + + + + + + + + + setDescription(e.target.value)} + error={descriptionError} + value={description} + rows={2} + placeholder="Description of system..." + /> + + Location + + + setSystemType("state")} + /> + setSystemType("county")} + /> + setSystemType("city")} + /> + setSystemType("international")} + /> + + + + {systemType === "city" && ( + + setCity(e.target.value)} + error={cityError} + value={city} + label="City" + placeholder="City..." + /> + + )} + {systemType === "county" && ( + + setCounty(e.target.value)} + error={countyError} + value={county} + label="County" + placeholder="County..." + /> + + )} + {systemType === "international" ? ( + + setCountry(e.target.value)} + error={countryError} + value={country} + label="Country" + placeholder="Country..." + /> + + ) : ( + + {setSystemState(data.value); console.log(data.value)}} + error={systemStateError} + value={systemState} + options={stateOptions} + scrolling + label="State" + placeholder="Select State..." + /> + + )} + + + +
+ +
+ + {requestMessage} +
+ ); } + export default SystemForm; diff --git a/admin/src/features/api/apiSlice.js b/admin/src/features/api/apiSlice.js index 289c928..217c0bc 100644 --- a/admin/src/features/api/apiSlice.js +++ b/admin/src/features/api/apiSlice.js @@ -2,6 +2,23 @@ import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react' import { createSelector } from '@reduxjs/toolkit' +/* +const axiosBaseQuery = + ({ baseUrl } = { baseUrl: '' }) => + async ({ url, method, data, params }) => { + try { + const result = await axios({ url: baseUrl + url, method, data, params }) + return { data: result.data } + } catch (axiosError) { + let err = axiosError + return { + error: { + status: err.response?.status, + data: err.response?.data || err.message, + }, + } + } + }*/ // Define our single API slice object export const apiSlice = createApi({ @@ -109,10 +126,28 @@ export const apiSlice = createApi({ getSystems: builder.query({ // The URL for the request is '/fakeApi/posts' query: () => ({ url: `/systems`, credentials: "include" }) - }) + }), + createSystem: builder.mutation({ + query: (system) => ({ + url: `/systems`, + method: 'POST', + credentials: "include", + body: system, + }), + async onQueryStarted(system, { dispatch, queryFulfilled }) { + try { + const { data: newSystem } = await queryFulfilled + const patchResult = dispatch( + apiSlice.util.updateQueryData('getSystems', system.shortName, (systems) => { + systems.push(newSystem); + }) + ) + } catch {} + }, + }), }) }) // Export the auto-generated hook for the `getPosts` query endpoint -export const { useGetGroupsQuery, useGetSystemsQuery, useGetTalkgroupsQuery, useGetErrorsQuery, useDeleteGroupMutation, useCreateGroupMutation, useSaveGroupOrderMutation, useUpdateGroupMutation, useImportTalkgroupsMutation } = apiSlice +export const { useGetGroupsQuery, useGetSystemsQuery, useGetTalkgroupsQuery, useGetErrorsQuery, useDeleteGroupMutation, useCreateGroupMutation, useCreateSystemMutation, useSaveGroupOrderMutation, useUpdateGroupMutation, useImportTalkgroupsMutation } = apiSlice