updated ErrorHandler with new flags, component Invalid now supports typeByCode, also refactor dependents components and fix some methods, like returning and CustomInvalid when nothing to return render

config/handlers/errToFlag.js

@@ -4,6 +4,7 @@ module.exports = {
     INTERNAL_PROCESS_FAILED: "CRITICAL",
     INVALID_DATA: "DISRUPT",
     INVALID_PROPS: "IGNORE",
-    MISSING_REQUIRED_PAYLOAD: "IGNORE"
+    INVALID_INDEX: "IGNORE",
+    MISSING_REQUIRED_PAYLOAD: "IGNORE",
 }
   

config/handlers/errToStrings.js

@@ -1,9 +1,10 @@
 module.exports = {
-    SESSION_INVALID: `Your session is invalid`,
+    SESSION_INVALID: `This session is not valid`,
     OVERLAY_BADPOSITION: `Invalid overlay position! Was expected "primary" or "secondary"`,
     INTERNAL_PROCESS_FAILED: `An internal error has occurred! `,
     INVALID_DATA: `A function has been executed with invalid data and has caused an error!`,
     INVALID_PROPS: `Some props failed!`,
+    INVALID_INDEX: "This request could not be indexed",
     MISSING_REQUIRED_PAYLOAD: "Error has occurred because the function needed data that does not exist"
 }
   

config/handlers/flagToBehavior.js

@@ -0,0 +1,34 @@
+import { notification, message } from 'antd'
+import * as Icons from 'components/Icons'
+import errStrings from 'config/handlers/errToStrings.js'
+import errNumbers from 'config/handlers/numToError.js'
+import errFlags from  'config/handlers/errToFlag.js'
+
+export default {
+    SESSION_INVALID: (payload) => {
+        notification.error({
+          message: payload.msg ?? 'Hey',
+          icon: <Icons.FieldTimeOutlined />,
+          description: errStrings[payload.out] ?? "This session is not valid",
+          placement: 'bottomLeft',
+        })
+    },
+    OVERLAY_BADPOSITION: () => {
+        
+    },
+    INTERNAL_PROCESS_FAILED: () =>{
+
+    },
+    INVALID_DATA: () => {
+
+    },
+    INVALID_PROPS: () => {
+
+    },
+    MISSING_REQUIRED_PAYLOAD: () => {
+
+    },
+    INVALID_INDEX: () => {
+
+    }
+}

config/handlers/numToError.js

@@ -1,9 +1,10 @@
 module.exports = {
-    400: "SESSION_INVALID",
+    403: "SESSION_INVALID",
     210: "OVERLAY_BADPOSITION",
     110: "INTERNAL_PROCESS_FAILED",
     120: "INVALID_DATA",
     130: "INVALID_PROPS",
-    140: "MISSING_REQUIRED_PAYLOAD"
+    140: "INVALID_INDEX",
+    150: "MISSING_REQUIRED_PAYLOAD"
 }
   

src/components/Invalid/index.js

@@ -1,6 +1,8 @@
 import React from 'react'
 import * as antd from 'antd'
 import styles from './index.less'
+import errNumbers from 'config/handlers/numToError.js'
+import { Icons } from 'components'
 
 const InvalidSkeleton = (props) => {
     return(
@@ -19,6 +21,14 @@ const InvalidSkeleton = (props) => {
     )
 }
 
+const InvalidSession = (props) => {
+    return(
+        <div className={styles.floatCardWrapper} bordered="false">
+            <antd.Result status="403" title="You need to login for view this!" />
+        </div>
+    )
+}
+
 const InvalidIndex = (props) => {
     return(
         <div className={styles.floatCardWrapper} bordered="false">
@@ -32,7 +42,7 @@ const InvalidIndex = (props) => {
 const Custom = (props) => {
     return(
         <div className={styles.floatCardWrapper} style={props.style ?? null} >
-            <antd.Result status={props.status ?? "info"} title={props.title ?? ""}>
+            <antd.Result icon={props.icon ?? null} status={props.status ?? "info"} title={props.title ?? ""}>
                 {props.message}
             </antd.Result>
         </div>
@@ -42,14 +52,27 @@ const Custom = (props) => {
 export default class Invalid extends React.Component{
     render(){
         const Components = {
+            SESSION_INVALID: <InvalidSession />,
+            INVALID_INDEX: <InvalidIndex {...this.props} />,
             skeleton: <InvalidSkeleton {...this.props} />,
-            index: <InvalidIndex {...this.props} />,
             custom: <Custom {...this.props} />
         }
-        const type = this.props.type
+        const { type, typeByCode } = this.props
-        if (!type) {
+        if (type != null || typeByCode != null) {
-            return null
+            let tmpType = null
+
+            type? tmpType = type : null
+            typeByCode? tmpType = errNumbers[typeByCode] : null
+
+            if (Components[tmpType] != null) {
+                return Components[tmpType]
             }
-        return Components[type]
+
+        }
+        return <Custom
+            icon={<Icons.Meh style={{ fontSize: "100px" }} />} 
+            title="A function called this component due to an error, but apparently it also caused an error when configuring these parameters."
+            message="it seems that someone is not having a good day"
+        />
     }
 }

src/core/libs/errorhandler/index.js

@@ -3,18 +3,33 @@ import verbosity from 'core/libs/verbosity'
 import errStrings from 'config/handlers/errToStrings.js'
 import errNumbers from 'config/handlers/numToError.js'
 import errFlags from  'config/handlers/errToFlag.js'
+import flagToBehavior from 'config/handlers/flagToBehavior.js'
+
+const flagToString = {
+    CRITICAL: "An critical exception",
+    DISRUPT: "An wild error appears!",
+    IGNORE: "Warning"
+}
+
+export function notifyErrorHandler(params) {
+    if (!params) {
+        return false
+    }
+    appInterface.notify.open({
+      message: flagToString[params.flag] ?? "Unexpected Error",
+      description:
+      <div style={{ display: 'flex', flexDirection: 'column', margin: 'auto', height: "auto" }}>
+          <div style={{ margin: '10px 0' }}> {params.msg ?? "No exception message"} </div>
+          <div> => {errStrings[params.out] ?? "Unhandled Exception"} | { params.out?? "UNDEFINED_KEY" } </div>
+      </div>,
+    })
+}
 
 export function ErrorHandler(payload, callback){
     if (!payload) {
         return false
     }
 
-    const flagToString = {
-        CRITICAL: "An critical exception",
-        DISRUPT: "An wild error appears!",
-        IGNORE: "Warning"
-    }
-
     const flags = ["CRITICAL", "DISRUPT", "IGNORE"]
     let flag = null
     let out = null
@@ -37,24 +52,16 @@ export function ErrorHandler(payload, callback){
         return false
     }
 
-    appInterface.notify.open({
-      message: flagToString[flag] ?? "Unexpected Error",
-      description:
-      <div style={{ display: 'flex', flexDirection: 'column', margin: 'auto', height: "auto" }}>
-          <div style={{ margin: '10px 0' }}> {msg ?? "No exception message"} </div>
-          <div> => {errStrings[out] ?? "Unhandled Exception"} | { out?? "UNDEFINED_KEY" } </div>
-      </div>,
-    })
-
     switch (flag) {
         case flags[0]:
-            console.log("FLAG => ", flags[0])
+            notifyErrorHandler({ msg, out, flag })
+            flagToBehavior[out]({ msg, out, flag, code })
             return false
         case flags[1]:
-            console.log("FLAG => ", flags[1])
+            flagToBehavior[out]({ msg, out, flag, code })
             return false
         case flags[2]:
-            console.log("FLAG => ", flags[2])
+            flagToBehavior[out]({ msg, out, flag, code })
             return false
         default:
             console.log('Invalid FLAG')

src/pages/explore/index.js

@@ -4,7 +4,7 @@ import endpoints from 'config/endpoints'
 import { v3_model } from 'core/libs'
 import { connect } from 'umi'
 import settings from 'core/libs/settings'
-import { PostCard, PostCreator } from 'components'
+import { PostCard, PostCreator, Invalid } from 'components'
 import * as antd from 'antd'
 import styles from './index.less'
 
@@ -44,7 +44,7 @@ export default class Explore extends React.Component {
   render() {
  
     if(!this.props.app.session_valid){
-      return (<antd.Result status="403" title="You need to login for view this!" />)
+      return <Invalid type="SESSION_INVALIsssD" />
     }
 
     if (!this.state.feed){