+
+
diff --git a/src/components/CANFilter/Update/index.jsx b/src/components/CANFilter/Update/index.jsx
index 5e3226b..7681424 100644
--- a/src/components/CANFilter/Update/index.jsx
+++ b/src/components/CANFilter/Update/index.jsx
@@ -1,7 +1,6 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useState } from "react";
import { Redirect } from "react-router";
import { useLocation } from "react-router-dom";
-import { Button, TextField } from "@material-ui/core";
import {
CANFiltersProvider,
@@ -11,6 +10,7 @@ import { useUserContext } from "../../Contexts/UserContext";
import { useStatusContext } from "../../Contexts/StatusContext";
import useStyles from "../../useStyles";
import { logger } from "../../../services/monitoring";
+import {CANFilterFragment} from "../../CANFilterEditFragment";
const MainForm = () => {
@@ -19,12 +19,12 @@ const MainForm = () => {
const { setMessage, setTitle, setSitePath } = useStatusContext();
const [redirect, setRedirect] = useState(null);
const classes = useStyles();
- const intervalEl = useRef(null);
const queries = new URLSearchParams(useLocation().search);
const vin = queries.get("vin") ?? ""
const canID = queries.get("can_id") ?? ""
- const interval = queries.get("interval") ?? ""
- // const edge_mask = queries.get("edge_mask") ?? ""
+
+ const [interval, setInterval] = useState(queries.get("interval") ?? "");
+ const [edgeMask, setEdgeMask] = useState(queries.get("edge_mask") ?? "");
useEffect(() => {
setTitle("Update CAN Filter");
@@ -45,7 +45,8 @@ const MainForm = () => {
event.preventDefault();
const formData = {
can_id: canID,
- interval: parseInt(intervalEl.current.value)
+ interval: interval,
+ edge_mask: edgeMask,
};
const result = await updateFilter(vin, canID, formData, token);
if (!result || result.error) return;
@@ -65,59 +66,16 @@ const MainForm = () => {
return (
);
diff --git a/src/components/CANFilterEditFragment/index.jsx b/src/components/CANFilterEditFragment/index.jsx
new file mode 100644
index 0000000..288de79
--- /dev/null
+++ b/src/components/CANFilterEditFragment/index.jsx
@@ -0,0 +1,122 @@
+import React from 'react';
+import {Button, TextField} from "@material-ui/core";
+import useStyles from "../useStyles";
+
+export const CANFilterFragment = (
+ {
+ vin,
+ fleet,
+ canId,
+ setCanId,
+ edgeMask,
+ setEdgeMask,
+ interval,
+ setInterval,
+ busy,
+ onSubmit,
+ }) => {
+
+ const classes = useStyles();
+
+ const FirstField = () => {
+ if (vin) {
+ return
+ }
+ if (fleet) {
+ return
+ }
+ }
+
+ const canProps = setCanId ? {
+ value: canId,
+ onChange: (event) => setCanId(event.target.value)
+ } : {
+ value: canId,
+ disabled: true,
+ }
+
+ return (
+
+ {FirstField()}
+
+ setInterval(event.target.value)}
+ />
+ setEdgeMask(event.target.value)}
+ />
+
+
+ )
+}
+
diff --git a/src/components/Contexts/CANFiltersContext.jsx b/src/components/Contexts/CANFiltersContext.jsx
index fc64d6b..b751827 100644
--- a/src/components/Contexts/CANFiltersContext.jsx
+++ b/src/components/Contexts/CANFiltersContext.jsx
@@ -1,5 +1,6 @@
import React, { useContext, useState } from "react";
import api from "../../services/CANFiltersAPI";
+import { validateCANID, validateFilter } from "../../utils/validationSupplier";
const CANFiltersContext = React.createContext();
@@ -50,7 +51,6 @@ export const CANFiltersProvider = ({ children }) => {
setBusy(true);
validateVIN(vin);
- validateID(canID);
validateFilter(filter);
const result = await api.updateFilter(vin, canID, filter, token);
@@ -68,7 +68,7 @@ export const CANFiltersProvider = ({ children }) => {
setBusy(true);
validateVIN(vin);
- validateID(canID);
+ validateCANID(canID);
const result = await api.deleteFilter(vin, canID, token);
if (result.error) {
@@ -104,24 +104,6 @@ const validateVIN = (vin) => {
if (vin == null || vin.length !== 17) {
throw new Error("Invalid VIN");
}
-}
-
-const validateID = (can_id) => {
- if (can_id == null || can_id === "") {
- throw new Error("CAN ID required");
- }
-}
-
-const validateFilter = (filter) => {
- if (filter == null) {
- throw new Error("No filter data");
- }
-
- validateID(filter.can_id)
-
- if (filter.interval == null) {
- throw new Error("Interval required");
- }
};
export const useCANFiltersContext = () => useContext(CANFiltersContext);
diff --git a/src/components/Contexts/CANFiltersContext.test.jsx b/src/components/Contexts/CANFiltersContext.test.jsx
index dcb3e57..77ab9fd 100644
--- a/src/components/Contexts/CANFiltersContext.test.jsx
+++ b/src/components/Contexts/CANFiltersContext.test.jsx
@@ -118,7 +118,7 @@ describe("CANFiltersContext", () => {
await waitFor(() =>
expect(screen.getByTestId("busy").innerHTML).toEqual("false")
);
- checkBaseResults("CAN ID required", "false");
+ checkBaseResults("Invalid CAN ID", "false");
});
it("addFilter", async () => {
@@ -195,7 +195,7 @@ describe("CANFiltersContext", () => {
await waitFor(() =>
expect(screen.getByTestId("busy").innerHTML).toEqual("false")
);
- checkBaseResults("CAN ID required", "false");
+ checkBaseResults("Invalid CAN ID", "false");
});
it("updateFilter", async () => {
@@ -228,10 +228,6 @@ describe("CANFiltersContext", () => {
data-testid="deleteFilterNull"
onClick={() => deleteF(null)}
/>
-