Middleware Hostname
- {resolvedMiddleware?.source != "asset" && (
-
-
-
- Middleware hostname sourced from asset{" "}
- {resolvedMiddleware?.source}
-
-
- )}
}
+ message={
+ resolvedMiddleware?.source != "asset"
+ ? `Middleware hostname sourced from asset ${resolvedMiddleware?.source}`
+ : undefined
+ }
placeholder={resolvedMiddleware?.hostname}
value={middlewareHostname}
onChange={(e) => setMiddlewareHostname(e.value)}
diff --git a/src/components/CameraFeed/ConfigureCamera.tsx b/src/components/CameraFeed/ConfigureCamera.tsx
index 6a43740adb2..2c592ff1ba5 100644
--- a/src/components/CameraFeed/ConfigureCamera.tsx
+++ b/src/components/CameraFeed/ConfigureCamera.tsx
@@ -152,22 +152,16 @@ export default function ConfigureCamera(props: Props) {
label={
{t("middleware_hostname")}
- {!!props.asset.resolved_middleware &&
- props.asset.resolved_middleware.source != "asset" && (
-
-
-
- {t("middleware_hostname_sourced_from", {
- source: props.asset.resolved_middleware?.source,
- })}
-
-
- )}
}
+ message={
+ !!props.asset.resolved_middleware &&
+ props.asset.resolved_middleware.source != "asset"
+ ? t("middleware_hostname_sourced_from", {
+ source: props.asset.resolved_middleware?.source,
+ })
+ : undefined
+ }
placeholder={
props.asset.resolved_middleware?.hostname ??
t("middleware_hostname_example")
diff --git a/src/components/Facility/AddLocationForm.tsx b/src/components/Facility/AddLocationForm.tsx
index 71ae8bf7dc1..52f4dbc182c 100644
--- a/src/components/Facility/AddLocationForm.tsx
+++ b/src/components/Facility/AddLocationForm.tsx
@@ -212,6 +212,7 @@ export const AddLocationForm = ({ facilityId, locationId }: Props) => {
name="Location Middleware Address"
type="text"
label="Location Middleware Address"
+ message="Leave blank to apply facility middleware to assets"
value={middlewareAddress}
onChange={(e) => setMiddlewareAddress(e.value)}
error={errors.middlewareAddress}
diff --git a/src/components/Facility/FacilityConfigure.tsx b/src/components/Facility/FacilityConfigure.tsx
index 4579c450584..d6bab357bfd 100644
--- a/src/components/Facility/FacilityConfigure.tsx
+++ b/src/components/Facility/FacilityConfigure.tsx
@@ -1,112 +1,74 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useQuery } from "@tanstack/react-query";
import { t } from "i18next";
import { navigate } from "raviger";
-import { useReducer, useState } from "react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import {
+ Form,
+ FormControl,
+ FormDescription,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
-import { Submit } from "@/components/Common/ButtonV2";
import Loading from "@/components/Common/Loading";
import Page from "@/components/Common/Page";
-import TextFormField from "@/components/Form/FormFields/TextFormField";
-import { FieldChangeEvent } from "@/components/Form/FormFields/Utils";
import { PLUGIN_Component } from "@/PluginEngine";
import * as Notification from "@/Utils/Notifications";
import routes from "@/Utils/request/api";
+import query from "@/Utils/request/query";
import request from "@/Utils/request/request";
-import useTanStackQueryInstead from "@/Utils/request/useQuery";
-
-const initForm = {
- name: "",
- state: 0,
- district: 0,
- localbody: 0,
- ward: 0,
- middleware_address: "",
-};
-const initialState = {
- form: { ...initForm },
- errors: {},
-};
-
-const FormReducer = (state = initialState, action: any) => {
- switch (action.type) {
- case "set_form": {
- return {
- ...state,
- form: action.form,
- };
- }
- case "set_error": {
- return {
- ...state,
- errors: action.errors,
- };
- }
- default:
- return state;
- }
-};
+import { Submit } from "../Common/ButtonV2";
interface IProps {
facilityId: string;
}
+const formSchema = z.object({
+ middleware_address: z
+ .string()
+ .nonempty({ message: "Middleware Address is required" })
+ .regex(/^(?!https?:\/\/)[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)*\.[a-zA-Z]{2,}$/, {
+ message: "Invalid Middleware Address",
+ }),
+});
+
export const FacilityConfigure = (props: IProps) => {
- const [state, dispatch] = useReducer(FormReducer, initialState);
const { facilityId } = props;
const [isLoading, setIsLoading] = useState(false);
- const { loading } = useTanStackQueryInstead(routes.getPermittedFacility, {
- pathParams: { id: facilityId },
- onResponse: (res) => {
- if (res.data) {
- const formData = {
- name: res.data.name,
- state: res.data.state,
- district: res.data.district,
- local_body: res.data.local_body,
- ward: res.data.ward,
- middleware_address: res.data.middleware_address,
- };
- dispatch({ type: "set_form", form: formData });
- }
- },
+ const { isPending: loading, data } = useQuery({
+ queryKey: [routes.getPermittedFacility.path, facilityId],
+ queryFn: query(routes.getPermittedFacility, {
+ pathParams: { id: facilityId },
+ }),
});
- const handleSubmit = async (e: React.FormEvent) => {
- e.preventDefault();
- setIsLoading(true);
- if (!state.form.middleware_address) {
- dispatch({
- type: "set_error",
- errors: { middleware_address: ["Middleware Address is required"] },
- });
- setIsLoading(false);
- return;
- }
- if (
- state.form.middleware_address.match(
- /^(?!https?:\/\/)[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)*\.[a-zA-Z]{2,}$/,
- ) === null
- ) {
- dispatch({
- type: "set_error",
- errors: {
- middleware_address: ["Invalid Middleware Address"],
- },
- });
- setIsLoading(false);
- return;
- }
+ const onSubmit = async (values: z.infer