Adminjs adding custom reactjs components to my resource on adminjs

Question

I am using adminjs for the first time and I have written my own custom component, but adding it to the resource keeps producing an error that says "You have to implement action component for your Action" Here is my resource:

const {Patient}  = require('./../models/Patient')
const Components = require('./../components/components')

const { Patient } = require('./../models/Patient')
const Components = require('./../components/components')

const PatientResource = {
  resource: Patient,
  options: {
    actions: {
      consultation: {
        actionType: 'record',
        component: Components.MyCustomAction,
        handler: (request, response, context) => {
          const { record, currentAdmin } = context
          return {
            record: record.toJSON(currentAdmin),
            msg: 'Hello world',
          }
        },
      },

      isAccessible: ({ currentAdmin }) => {
        action: if (currentAdmin.role_id === 5) {
          return false
        } else {
          return true
        }
      },
    },

    navigation: 'Manage Patients',
    listProperties: [
      'id',
      'last_name',
      'first_name',
      'sex',
      'marital_status',
      'blood_group',
      'genotype',
      'existing_health_condition',
    ],
  },
}
module.exports = { PatientResource }

And this is my custom component:

import React from 'react'
import { Box, H3 } from '@adminjs/design-system'
import { ActionProps } from 'adminjs'

const MyCustomActionComponent = (props: ActionProps) => {
  const { record } = props

  return (
    <Box flex>
      <Box
        variant='white'
        width={1 / 2}
        boxShadow='card'
        mr='xxl'
        flexShrink={0}
      >
        <H3>Example of a simple page</H3>
        <p>Where you can put almost everything</p>
        <p>like this: </p>
        <p>
          <img
            src='https://i.redd.it/rd39yuiy9ns21.jpg'
            alt='stupid cat'
            width={300}
          />
        </p>
      </Box>
      <p> Or (more likely), operate on a returned record:</p>
      <Box overflowX='auto'> {JSON.stringify(record)}</Box>
    </Box>
  )
}
module.exports = { MyCustomActionComponent }

I tried to add the component to my custom defined action "Consultation", Hence I expected to see a custom page which i have designed using react as in "mycustomAction" above

Adminjs adding custom reactjs components to my resource on adminjs

0 Answers0