feat: form fields fix and logout handle on api error

* feat: 120 show form fields descriptions * feat: 120 form fields fix and logout handle on api error
krateoplatformops · Oct 16, 2024 · ec57cc5 · ec57cc5
1 parent 418878c
commit ec57cc5
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 48 deletions.
diff --git a/src/components/Widgets/FormGenerator/FormGenerator.tsx b/src/components/Widgets/FormGenerator/FormGenerator.tsx
@@ -49,17 +49,21 @@ const FormGenerator = ({title, description, descriptionTooltip = false, fieldsEn
  }, [data, isSuccess])
 
  const parseData = (node, name) => {
- return Object.keys(node.properties).map(k => {
- const currentName = name ? `${name}.${k}` : k;
- if (node.properties[k].type === "object") {
- return parseData(node.properties[k], currentName)
- } else {
- // return field
- const required = Array.isArray(node?.required) && node.required.indexOf(k) > -1;
- fieldsData.push({type: node.properties[k].type, name: currentName});
- return renderField(k, currentName, node.properties[k], required);
- }
- })
+ if (node.properties) {
+ return Object.keys(node.properties).map(k => {
+ const currentName = name ? `${name}.${k}` : k;
+ if (node.properties[k].type === "object") {
+ return parseData(node.properties[k], currentName)
+ } else {
+ // return field
+ const required = Array.isArray(node?.required) && node.required.indexOf(k) > -1;
+ fieldsData.push({type: node.properties[k].type, name: currentName});
+ return renderField(k, currentName, node.properties[k], required);
+ }
+ })
+ } else {
+ return []
+ }
  }
 
  const renderMetadataFields = () => {
@@ -78,17 +82,21 @@ const FormGenerator = ({title, description, descriptionTooltip = false, fieldsEn
 
  const generateInitialValues = () => {
  const parseData = (node, name) => {
- return Object.keys(node.properties).map(k => {
- const currentName = name ? `${name}.${k}` : k;
- if (node.properties[k].type === "object") {
- return parseData(node.properties[k], currentName)
- } else {
- // set default value
- if (node.properties[k].default) {
- form.setFieldValue(currentName.split("."), node.properties[k].default);
+ if (node.properties) {
+ return Object.keys(node.properties).map(k => {
+ const currentName = name ? `${name}.${k}` : k;
+ if (node.properties[k].type === "object") {
+ return parseData(node.properties[k], currentName)
+ } else {
+ // set default value
+ if (node.properties[k].default) {
+ form.setFieldValue(currentName.split("."), node.properties[k].default);
+ }
  }
- }
- })
+ })
+ } else {
+ return []
+ }
  }
  if (formData.spec) parseData(formData.spec, "");
  }
@@ -238,26 +246,30 @@ const FormGenerator = ({title, description, descriptionTooltip = false, fieldsEn
 
  const getAnchorList = () => {
  const parseData = (node, name) => {
- return Object.keys(node.properties).map(k => {
- const currentName = name ? `${name}.${k}` : k;
- if (node.properties[k].type === "object") {
- // create children
- return {
- key: currentName,
- title: <span className={styles.anchorObjectLabel}>{k}</span>,
- children: parseData(node.properties[k], currentName),
- }
- } else {
- // return obj
- return {
- key: currentName,
- href: `#${currentName}`,
- title: k
+ if (node.properties) {
+ return Object.keys(node.properties).map(k => {
+ const currentName = name ? `${name}.${k}` : k;
+ if (node.properties[k].type === "object") {
+ // create children
+ return {
+ key: currentName,
+ title: <span className={styles.anchorObjectLabel}>{k}</span>,
+ children: parseData(node.properties[k], currentName),
+ }
+ } else {
+ // return obj
+ return {
+ key: currentName,
+ href: `#${currentName}`,
+ title: k
+ }
  }
- }
- })
+ })
+ } else {
+ return []
+ }
  }
- return [...parseData(formData.spec, "")];
+ if (formData.spec) return [...parseData(formData.spec, "")];
  }
 
  const onSubmit = async (values: object) => {
@@ -343,12 +355,6 @@ const FormGenerator = ({title, description, descriptionTooltip = false, fieldsEn
  }
  }, [message, isPostSuccess, postData]);
 
- useEffect(() => {
- if (isLoading) {
- message.loading('Receiving data...');
- }
- }, [isLoading, message]);
-
  useEffect(() => {
  if (postLoading) {
  disableButtons(true)

diff --git a/src/utils/useCatchError.tsx b/src/utils/useCatchError.tsx
@@ -1,6 +1,8 @@
 import { SerializedError } from "@reduxjs/toolkit";
 import { FetchBaseQueryError } from "@reduxjs/toolkit/dist/query";
 import { App, Result } from "antd";
+import { useAppDispatch } from "../redux/hooks";
+import { logout } from "../features/auth/authSlice";
 
 const useCatchError = () => {
  const { notification } = App.useApp();
@@ -11,6 +13,7 @@ const useCatchError = () => {
  // Adjust to account for potentially nested error structure
  let actualErrorCode: number;
  let actualErrorMessage: string = "";
+ const dispatch = useAppDispatch();
 
  if (error?.message && JSON.parse(error.message).data?.code) {
  // error from API with status 200
@@ -19,8 +22,15 @@ const useCatchError = () => {
 
  const clientErrorRegex = /^4\d{2}$/; // Regex for 4xx client errors
  if (clientErrorRegex.test(String(actualErrorCode))) {
- message = actualErrorMessage;
- description = "There was an error processing your request. Please check your input or permissions.";
+ if (actualErrorCode === 401) {
+ // not authorized
+ dispatch(logout());
+ message = "Your session has expired";
+ description = "Sign in again"
+ } else {
+ message = actualErrorMessage;
+ description = "There was an error processing your request. Please check your input or permissions.";
+ }
  } else {
  switch (actualErrorCode) {
  // Handle other specific codes if necessary
@@ -47,7 +57,7 @@ const useCatchError = () => {
  notification.error({
  description: description,
  message: message,
- duration: 2,
+ duration: 4,
  });
  }
  }