feat(cms): fix double fetching of data on administration panel settings

examples/blog/resources/Comment.js

@@ -7,11 +7,12 @@ const {
     hasOne,
     hasMany,
 } = require('@tensei/core')
+const { markdown } = require('@tensei/mde')
 
 module.exports = resource('Comment')
     .fields([
         text('Title').rules('required').searchable().sortable(),
-        textarea('Body').rules('required').hideOnIndex(),
+        markdown('Body').rules('required').hideOnIndex(),
         textarea('Reply')
             .rules('required', 'max:255')
             .hideOnIndex()

packages/cms/core.ts

@@ -1,15 +1,7 @@
 import Qs from 'qs'
 import Axios from 'axios'
 import Toasted from 'toastedjs'
-import {
-    Tensei,
-    TenseiState,
-    ToastOptions,
-    ResourceContract,
-    TenseiCtxInterface,
-    TenseiRegisterFunction,
-    CmsRoute
-} from '@tensei/components'
+import * as Lib from '@tensei/components'
 
 // Form
 import IndexID from './index/ID'
@@ -43,7 +35,7 @@ class Core {
             [key: string]: boolean
         } = {}
         let resourcesMap: {
-            [key: string]: ResourceContract
+            [key: string]: Lib.ResourceContract
         } = {}
         let registered = false
 
@@ -72,7 +64,7 @@ class Core {
             permissions,
             registered,
             resourcesMap
-        } as TenseiState
+        } as Lib.TenseiState
     })()
 
     constructor() {
@@ -89,9 +81,11 @@ class Core {
         theme: 'tensei'
     })
 
-    private hooks: TenseiRegisterFunction[] = []
+    private hooks: Lib.TenseiRegisterFunction[] = []
 
-    components: Tensei['components'] = {
+    lib: Lib.Tensei['lib'] = Lib
+
+    components: Lib.Tensei['components'] = {
         form: {
             Text: FormText,
             Date: FormDate,
@@ -127,9 +121,9 @@ class Core {
         }
     }
 
-    routes: CmsRoute[] = []
+    routes: Lib.CmsRoute[] = []
 
-    route = (route: CmsRoute) => {
+    route = (route: Lib.CmsRoute) => {
         this.routes.push({
             ...route,
             settings: route.settings || false,
@@ -138,7 +132,7 @@ class Core {
         })
     }
 
-    ctx: TenseiCtxInterface = {} as any
+    ctx: Lib.TenseiCtxInterface = {} as any
 
     client = Axios.create({
         baseURL: this.state.config.apiPath,
@@ -147,7 +141,7 @@ class Core {
 
     getPath = (path: string) => `/${this.state.config.dashboardPath}/${path}`
 
-    register = (fn: TenseiRegisterFunction) => {
+    register = (fn: Lib.TenseiRegisterFunction) => {
         this.hooks.push(fn)
     }
 
@@ -179,34 +173,34 @@ class Core {
         this.ctx.setBooted(true)
     }
 
-    success = (message: string, options: ToastOptions = {}) => {
+    success = (message: string, options: Lib.ToastOptions = {}) => {
         this.toast.success(message, {
             type: 'success',
             ...options
         })
     }
 
-    show = (message: string, options: ToastOptions = {}) => {
+    show = (message: string, options: Lib.ToastOptions = {}) => {
         this.toast.success(message, {
             ...options
         })
     }
 
-    error = (message: string, options: ToastOptions = {}) => {
+    error = (message: string, options: Lib.ToastOptions = {}) => {
         this.toast.error(message, {
             type: 'error',
             ...options
         })
     }
 
-    info = (message: string, options: ToastOptions = {}) => {
+    info = (message: string, options: Lib.ToastOptions = {}) => {
         this.toast.info(message, {
             type: 'info',
             ...options
         })
     }
 
-    warning = (message: string, options: ToastOptions = {}) => {
+    warning = (message: string, options: Lib.ToastOptions = {}) => {
         this.toast.info(message, {
             type: 'warning',
             ...options

packages/cms/detail/Textarea/Textarea.tsx

@@ -5,7 +5,12 @@ export interface TextareaProps extends DetailComponentProps {
     className?: string
 }
 
-const Textarea: React.FC<TextareaProps> = ({ value, className, field }) => {
+const Textarea: React.FC<TextareaProps> = ({
+    value,
+    className,
+    field,
+    children
+}) => {
     const [hide, setHide] = useState<boolean>(field.toggleEnabled)
 
     return (
@@ -30,10 +35,14 @@ const Textarea: React.FC<TextareaProps> = ({ value, className, field }) => {
                     leaveFrom="opacity-100"
                     leaveTo="opacity-0"
                 >
-                    <Paragraph className={className}>{value}</Paragraph>
+                    {children || (
+                        <Paragraph className={className}>{children}</Paragraph>
+                    )}
                 </Transition>
             ) : (
-                <Paragraph className={className}>{value}</Paragraph>
+                children || (
+                    <Paragraph className={className}>{children}</Paragraph>
+                )
             )}
         </div>
     )

packages/cms/pages/Settings/Roles.tsx

@@ -123,10 +123,6 @@ const Roles: React.FC<RolesProps> = ({
         []
     )
 
-    useEffect(() => {
-        setData(getDefaultData())
-    }, [resource.slug])
-
     useEffect(() => {
         fetchData(data, resource.slug, getQuery())
     }, [data.meta.per_page, data.meta.page, data.sort, search])

packages/cms/pages/Settings/Users.tsx

@@ -106,10 +106,6 @@ const Users: React.FC<ResourceProps> = ({
         []
     )
 
-    useEffect(() => {
-        setData(getDefaultData())
-    }, [resource.slug])
-
     useEffect(() => {
         fetchData(data, resource.slug, getQuery())
     }, [data.meta.per_page, data.meta.page, data.sort, search])

packages/cms/plugin/routes.ts

@@ -1,11 +1,6 @@
+import * as formatter from 'express-response-formatter'
 import { FindOptions, ReferenceType } from '@mikro-orm/core'
-import {
-    route,
-    ResourceContract,
-    RouteContract,
-    Utils,
-    Config
-} from '@tensei/common'
+import { route, RouteContract, Utils, Config } from '@tensei/common'
 
 const getPageMetaFromFindOptions = (
     total: number,

packages/common/typings/fields.d.ts

@@ -199,6 +199,9 @@ declare module '@tensei/common/fields' {
         shadow(): this
         removeFromSidebarOnForms(): this
         dockToSidebarOnForms(): this
+        formComponent(component: string): this
+        indexComponent(component: string): this
+        detailComponent(component: string): this
         /**
          *
          * The name of the field. Will be used to display table columns,

packages/components/src/Typography/Paragraph.tsx

@@ -2,24 +2,32 @@ import React, { EventHandler, SyntheticEvent } from 'react'
 
 export interface ParagraphProps {
     className?: string
+    as?: string
     onClick?: EventHandler<SyntheticEvent<HTMLParagraphElement>>
 }
 
 const Paragraph: React.FC<ParagraphProps> = ({
     children,
     className,
-    onClick
+    onClick,
+    as = 'p'
 }) => {
     const props: any = {}
 
     if (onClick) {
         props.tabIndex = 0
     }
 
+    const Component = as
+
     return (
-        <p onClick={onClick} className={`text-base ${className}`} {...props}>
+        <Component
+            onClick={onClick}
+            className={`text-base ${className}`}
+            {...props}
+        >
             {children}
-        </p>
+        </Component>
     )
 }
 

packages/components/src/types/index.ts

@@ -248,6 +248,9 @@ export interface Tensei {
     }
     toast: ToastInterface
     clear: () => void
+    lib: {
+        [key: string]: React.FunctionComponent<any>
+    }
     route: (route: Partial<CmsRoute>) => void
     show: (message: string, options?: ToastOptions) => void
     success: (message: string, options?: ToastOptions) => void

packages/express-session-mikro-orm/tests/session.spec.ts

@@ -359,15 +359,21 @@ it('The SessionStore.clearExpiredSessions() deletes all expired sessions', done
                             orm
                         })
 
-                        store.clearExpiredSessions().then(() => {
-                            orm.em.find('Session', {}).then(foundSessions => {
-                                expect(foundSessions.length).to.eq(1)
-
-                                orm.close().then(() => {
-                                    done()
-                                })
-                            }).catch(console.error)
-                        }).catch(console.error)
+                        store
+                            .clearExpiredSessions()
+                            .then(() => {
+                                orm.em
+                                    .find('Session', {})
+                                    .then(foundSessions => {
+                                        expect(foundSessions.length).to.eq(1)
+
+                                        orm.close().then(() => {
+                                            done()
+                                        })
+                                    })
+                                    .catch(console.error)
+                            })
+                            .catch(console.error)
                     })
                     .catch(console.log)
             )

packages/mde/src/Mde.ts

@@ -1,12 +1,4 @@
-import { Textarea } from '@tensei/common'
-
-export class Mde extends Textarea {
-    public component = {
-        form: 'Mde',
-        index: 'Mde',
-        detail: 'Mde'
-    }
-}
+import { textarea } from '@tensei/common'
 
 export const mde = (name: string, databaseField?: string) =>
-    new Mde(name, databaseField)
+    textarea(name, databaseField).formComponent('Mde').detailComponent('Mde')

packages/mde/src/components/Mde.tsx

@@ -2,36 +2,33 @@ import React, { useState } from 'react'
 import ReactMarkdown from 'react-markdown'
 import ReactMde, { ReactMdeProps } from 'react-mde'
 
+import { FormComponentProps, DetailComponentProps } from '@tensei/components'
+
 import './mde.css'
 import 'react-mde/lib/styles/css/react-mde-all.css'
 
-export interface MdeProps {
-    label: string
-    id?: string
-    name?: string
-}
+export interface MdeProps extends FormComponentProps {}
 
-const Mde: React.FC<MdeProps> = ({ label, id, name }: MdeProps) => {
-    const [value, setValue] = useState<string>('')
+const Mde: React.FC<MdeProps> = ({ field, id, name, onChange, value }) => {
     const [tab, setTab] = useState<ReactMdeProps['selectedTab']>('write')
 
     return (
         <div>
-            {label && (
+            {field.name && (
                 <label
                     htmlFor={id}
                     className={
                         'font-semibold text-tensei-darkest inline-block mb-2'
                     }
                 >
-                    {label}
+                    {field.name}
                 </label>
             )}
 
             <ReactMde
                 value={value}
                 selectedTab={tab}
-                onChange={setValue}
+                onChange={onChange}
                 onTabChange={setTab}
                 classes={{
                     textArea:
@@ -57,10 +54,17 @@ const Mde: React.FC<MdeProps> = ({ label, id, name }: MdeProps) => {
     )
 }
 
+const DetailMde: React.FC<DetailComponentProps> = ({ value, ...rest }) => {
+    return (
+        <window.Tensei.components.detail.Textarea {...rest}>
+            <ReactMarkdown source={value} />
+        </window.Tensei.components.detail.Textarea>
+    )
+}
+
 export default Mde
 
-window.Tensei.register(({ formComponent, indexComponent, detailComponent }) => {
+window.Tensei.register(({ formComponent, detailComponent }) => {
     formComponent('Mde', Mde)
-    indexComponent('Mde', Mde)
-    detailComponent('Mde', Mde)
+    detailComponent('Mde', DetailMde)
 })

packages/mde/src/index.ts

@@ -1,7 +1,7 @@
 import Path from 'path'
 import { plugin } from '@tensei/common'
 
-export { mde as markdown, Mde } from './Mde'
+export { mde as markdown } from './Mde'
 
 export class MdePlugin {
     private config = {