muffin-admin 1.28.1 → 1.30.0

package/.babelrc

@@ -0,0 +1,5 @@
+{
+  "presets": [
+    "@babel/preset-react"
+  ]
+}

package/.eslintrc.json

@@ -0,0 +1,44 @@
+{
+  "root": true,
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "prettier"
+  ],
+  "parser": "@babel/eslint-parser",
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true,
+      "experimentalObjectRestSpread": true
+    },
+    "ecmaVersion": 2020,
+    "sourceType": "module",
+    "babelOptions": {
+      "presets": [
+        "@babel/preset-react"
+      ],
+      "rootMode": "upward"
+    }
+  },
+  "plugins": [
+    "prettier",
+    "react"
+  ],
+  "env": {
+    "browser": true,
+    "es6": true,
+    "jest": true,
+    "node": true
+  },
+  "rules": {
+    "no-console": "warn",
+    "no-debugger": "warn",
+    "prettier/prettier": "warn",
+    "react/prop-types": "off"
+  }
+}

package/admin.jsx

@@ -1,56 +1,60 @@
-import React from "react"
+import React from 'react'
 
-import { Admin, AppBar, Layout, Login } from "react-admin"
-import { IconButton, SvgIcon, Tooltip, Typography } from "@material-ui/core"
-import * as icons from "@material-ui/icons"
+import { Admin, AppBar, Layout, Login } from 'react-admin'
+import { IconButton, SvgIcon, Tooltip, Typography } from '@mui/material'
+import * as icons from '@mui/icons-material'
 
-import authProvider from "./authprovider"
-import dataProvider from "./dataprovider"
+import authProvider from './authprovider'
+import dataProvider from './dataprovider'
 import { processAdmin, setupAdmin } from './utils'
 
-import './dashboard.jsx';
-import './resources.jsx';
-
+import './dashboard.jsx'
+import './resources.jsx'
 
 // Initialize the admin
-setupAdmin('admin', props => {
-    const { apiUrl, auth, adminProps, appBarLinks, dashboard, resources } = props;
-
-    let appBar = props => (
-        <AppBar {...props}>
-            <Typography
-                variant="h6"
-                color="inherit"
-                id="react-admin-title"
-                style={{
-                  flex: 1,
-                  textOverflow: 'ellipsis',
-                  whiteSpace: 'nowrap',
-                  overflow: 'hidden',
-                }}
-            />
-          { appBarLinks.map( info => (
-            <Tooltip key={ info.url } title={ info.title }>
-              <IconButton color="inherit" href={ info.url }>
-                <SvgIcon component={ icons[info.icon] }/>
-              </IconButton>
-            </Tooltip>
-          ))}
-        </AppBar>
-    )
-
-    return <Admin authProvider={ processAdmin('auth', auth) }
-                  dataProvider={ processAdmin('data', apiUrl) }
-                  dashboard={ processAdmin('dashboard', dashboard) }
-                  loginPage={ processAdmin('login', auth) }
-                  layout={ props => <Layout appBar={appBar} {...props} /> }
-                  children={ processAdmin('resources', resources) }
-                  { ...adminProps } />
-});
+setupAdmin('admin', (props) => {
+  const { apiUrl, auth, adminProps, appBarLinks, dashboard, resources } = props
+
+  let appBar = (props) => (
+    <AppBar {...props}>
+      <Typography
+        variant='h6'
+        color='inherit'
+        id='react-admin-title'
+        style={{
+          flex: 1,
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+          overflow: 'hidden',
+        }}
+      />
+      {appBarLinks.map((info) => (
+        <Tooltip key={info.url} title={info.title}>
+          <IconButton color='inherit' href={info.url}>
+            <SvgIcon component={icons[info.icon]} />
+          </IconButton>
+        </Tooltip>
+      ))}
+    </AppBar>
+  )
+
+  return (
+    <Admin
+      authProvider={processAdmin('auth', auth)}
+      dataProvider={processAdmin('data', apiUrl)}
+      dashboard={processAdmin('dashboard', dashboard)}
+      loginPage={processAdmin('login', auth)}
+      layout={(props) => <Layout appBar={appBar} {...props} />}
+      {...adminProps}
+    >
+      {processAdmin('resources', resources)}
+    </Admin>
+  )
+})
 
 // Initialize authentication and data providers
-setupAdmin('auth', authProvider);
-setupAdmin('data', dataProvider);
+setupAdmin('auth', authProvider)
+setupAdmin('data', dataProvider)
 
 // Initialize login page
-setupAdmin('login', (params, res) => (props) => <Login {...props}  />);
+setupAdmin('login', () => Login)

package/authprovider.js

@@ -1,79 +1,84 @@
 import Cookies from 'js-cookie'
-import { makeRequest, requestHeaders } from './utils';
-
+import { makeRequest, processAdmin, requestHeaders, setupAdmin } from './utils'
+
+setupAdmin(
+  'auth-get',
+  ({ storage }) =>
+    (name) =>
+      storage == 'localstorage' ? localStorage.getItem(name) : Cookies.get(name)
+)
+
+setupAdmin('auth-set', ({ storage }) => (name, value) => {
+  if (storage == 'localstorage') {
+    localStorage.setItem(name, value)
+    requestHeaders['Authorization'] = value
+  } else Cookies.set(name, value)
+})
 
 export default (props) => {
+  const { identityURL, authorizeURL, logoutURL, required, storage_name } = props
 
-  const { identityURL, authorizeURL, logoutURL, required, storage, storage_name } = props;
-
-  const authorize = (name, value) => {
-    if (value === undefined) {
-      return storage == 'localstorage' ?  localStorage.getItem(name) : Cookies.get(name);
-    }
-
-    if (storage == 'localstorage') requestHeaders['Authorization'] = value;
-    storage == 'localstorage' ?  localStorage.setItem(name, value) : Cookies.set(name, value);
-    return value;
-  }
+  const authGet = processAdmin('auth-get', props)
+  const authSet = processAdmin('auth-set', props)
 
   // Initialize request headers
-  authorize(storage_name, authorize(storage_name));
+  authSet(storage_name, authGet(storage_name))
 
   let getIdentity = async () => {
-      if (identityURL) {
-        let {json} = await makeRequest(identityURL);
-        return json;
-      }
+    if (identityURL) {
+      let { json } = await makeRequest(identityURL)
+      return json
+    }
   }
 
-  if (required) return {
-
-      getIdentity,
-
-      checkAuth: async (data) => {
-        const auth = authorize(storage_name);
-        if (!auth) throw {message: 'Authorization required'}
-
-        if (!identityURL) return auth;
-
-        let user = await getIdentity();
-        if (!user)  throw {message: 'Authorization required'};
+  if (required)
+    return {
+      login: async (data) => {
+        if (!authorizeURL) throw { message: 'Authorization is not supported' }
 
-        return user;
+        let { json } = await makeRequest(authorizeURL, { data, method: 'POST' })
+        authSet(storage_name, json)
       },
 
       checkError: async (error) => {
-        const {message, status, body} = error;
+        const { status } = error
 
         if (status == 401 || status == 403) {
           // Clean storage
-          authorize(storage_name, '');
+          authSet(storage_name, '')
 
-          throw {message: 'Invalid authorization', redirectTo: logoutURL, logoutUser: !logoutURL};
+          throw {
+            message: 'Invalid authorization',
+            redirectTo: logoutURL,
+            logoutUser: !logoutURL,
+          }
         }
-
       },
 
-      login: async (data) => {
-        if (!authorizeURL) throw {message: 'Authorization is not supported'}
+      checkAuth: async (data) => {
+        const auth = authGet(storage_name)
+        if (!auth) throw { message: 'Authorization required' }
+
+        if (!identityURL) return auth
 
-        let {json} = await makeRequest(authorizeURL, {data, method: 'POST'})
-        authorize(storage_name, json);
+        let user = await getIdentity()
+        if (!user) throw { message: 'Authorization required' }
+
+        return user
       },
 
       logout: async () => {
+        // Clean storage
+        authSet(storage_name, '')
 
-          // Clean storage
-        authorize(storage_name, '');
-
-        if (logoutURL) window.location = logoutURL;
+        if (logoutURL) window.location = logoutURL
       },
 
+      getIdentity,
+
       getPermissions: (data) => {
-        const role = authorize(storage_name + '_role');
-        return role ? Promise.resolve(role) : Promise.reject();
+        const role = authGet(storage_name + '_role')
+        return role ? Promise.resolve(role) : Promise.reject()
       },
-
-  }
-
+    }
 }

package/buttons/ActionButton.jsx

@@ -1,68 +1,99 @@
-import React from 'react';
+import React, { useEffect } from 'react'
 
-import { Button, CreateButton, useRefresh, useUnselectAll, useMutation, useNotify } from 'react-admin';
-import * as icons from "@material-ui/icons"
+import useAction from '../hooks/useAction'
 
+import {
+  Button,
+  useRefresh,
+  useUnselectAll,
+  useNotify,
+  useRecordContext,
+} from 'react-admin'
+import * as icons from '@mui/icons-material'
 
-export const BulkActionButton = ({label, icon, title, action, resource, selectedIds, ...props}) => {
-  const refresh = useRefresh(), unselectAll = useUnselectAll(),
-        notify = useNotify(), [mutate, { loading }] = useMutation(),
-        Icon = icons[icon];
+export const BulkActionButton = ({
+  label,
+  icon,
+  title,
+  action,
+  resource,
+  selectedIds,
+}) => {
+  const refresh = useRefresh(),
+    unselectAll = useUnselectAll(resource),
+    notify = useNotify(),
+    Icon = icons[icon]
 
-  let onClick = event => {
-      mutate({
-        resource,
-        type: 'runAction',
-        payload: {action, ids: selectedIds},
-      }, {
-        onSuccess: res => {
-            if (res && res.data && res.data.message) notify(res.data.message, 'success');
-            refresh();
-            unselectAll(resource);
+  const mutation = useAction(resource, action)
+
+  let onClick = () => {
+    mutation.mutate(
+      {
+        action,
+        ids: selectedIds,
+      },
+      {
+        onSuccess: ({ data }) => {
+          if (data && data.message) notify(data.message, { type: 'success' })
+          refresh()
+          unselectAll()
+        },
+        onError: (err) => {
+          notify(typeof err === 'string' ? err : err.message, { type: 'error' })
         },
-        onFailure: err => {
-          notify(typeof err === 'string' ? err : err.message, 'error')
-        }
-      })
+      }
+    )
   }
 
   return (
-    <Button label={ label } title={ title } onClick={ onClick } disabled={ loading }>
-      { Icon && <Icon /> }
+    <Button
+      label={label}
+      title={title}
+      onClick={onClick}
+      disabled={mutation.isLoading}
+    >
+      {Icon && <Icon />}
     </Button>
   )
 }
 
-export const ActionButton = ({icon, label, title, record, resource, action}) => {
-  const refresh = useRefresh(), notify = useNotify(),
-        [mutate, { loading }] = useMutation(), Icon = icons[icon];
-
-  let onClick = event => {
-      mutate({
-        resource,
-        type: 'runAction',
-        payload: {action, record},
-      }, {
-        onSuccess: res => {
-            let data = res && res.data;
+export const ActionButton = (props) => {
+  const { icon, label, title, resource, action } = props
+  const record = useRecordContext()
+  const mutation = useAction(resource, action)
 
-            if (data && data.redirectTo) window.location = data.redirectTo;
-            if (data && data.message) notify(data.message, 'success');
+  const refresh = useRefresh(),
+    notify = useNotify(),
+    Icon = icons[icon]
 
-            refresh();
+  let onClick = () => {
+    mutation.mutate(
+      { record },
+      {
+        onSuccess: ({ data }) => {
+          refresh()
+          if (data && data.redirectTo) window.location = data.redirectTo
+          if (data && data.message) notify(data.message, { type: 'success' })
         },
-        onFailure: err => {
-          notify(typeof err === 'string' ? err : err.message, 'error')
-        }
-      })
+        onError: (error) => {
+          notify(typeof error === 'string' ? error : error.message, {
+            type: 'error',
+          })
+        },
+      }
+    )
   }
 
   return (
-    <Button label={ label } title={ title } onClick={ onClick } disabled={ loading }>
-      { Icon && <Icon /> }
+    <Button
+      label={label}
+      title={title}
+      onClick={onClick}
+      disabled={mutation.isLoading}
+    >
+      {Icon && <Icon />}
     </Button>
   )
-
 }
 
 export default ActionButton

package/buttons/LinkButton.jsx

@@ -1,19 +1,19 @@
-import React from 'react';
+import React from 'react'
 
-import { Button } from 'react-admin';
-import { Link } from 'react-router-dom';
-import * as icons from "@material-ui/icons"
+import { Button } from 'react-admin'
+import { Link } from 'react-router-dom'
+import * as icons from '@mui/icons-material'
 
-// import LinkButton from '../buttons/LinkButton'
-// <LinkButton label="Messages" icon="Message" resource="message" filters={{ user: data.id }} />
-//
-const LinkButton = ({label, icon, title, resource, filters, ...props}) => {
-  let Icon = icons[icon] || icon, linkParams = {pathname: `/${resource}`};
-  if (filters) linkParams.search = `filter=${JSON.stringify(filters)}`;
+const LinkButton = ({ label, icon, title, resource, filters }) => {
+  const Icon = icons[icon] || icon
+  let linkParams = {
+    pathname: `/${resource}`,
+    search: filters ? `filter=${JSON.stringify(filters)}` : undefined,
+  }
 
   return (
-    <Button label={ label } title={ title } component={ Link } to={ linkParams }>
-      { Icon && <Icon /> }
+    <Button label={label} title={title} component={Link} to={linkParams}>
+      {Icon && <Icon />}
     </Button>
   )
 }

package/dashboard.jsx

@@ -1,45 +1,61 @@
-import React from "react";
+import React from 'react'
 
-import { Grid, Card, CardContent, Typography, Table, TableBody, TableRow, TableCell } from "@material-ui/core";
-import ReactJSON from "react-json-view";
+import {
+  Grid,
+  Card,
+  CardContent,
+  Typography,
+  Table,
+  TableBody,
+  TableRow,
+  TableCell,
+} from '@mui/material'
+// import ReactJSON from "react-json-view";
 
-import { setupAdmin } from './utils';
+import { setupAdmin } from './utils'
 
-
-const AdminTableView = ({src}) => (
+const AdminTableView = ({ src }) => (
   <Table>
-    <TableBody>{
-      src.map((row, idx) =>
-        <TableRow key={ idx } hover>{
-          row.map((cell, idx) =>
-            <TableCell key={ idx }>{ cell }</TableCell>
-          )
-        }</TableRow>
-      )
-    }</TableBody>
+    <TableBody>
+      {src.map((row, idx) => (
+        <TableRow key={idx} hover>
+          {row.map((cell, idx) => (
+            <TableCell key={idx}>{cell}</TableCell>
+          ))}
+        </TableRow>
+      ))}
+    </TableBody>
   </Table>
-
 )
 
 const AdminCard = ({ src }) => {
   if (Array.isArray(src)) {
     return (
-      <Grid container item spacing={ 2 }>
-        { src.map((card, idx) => <AdminCard key={ idx } src={ card } />) }
+      <Grid container item spacing={2}>
+        {src.map((card, idx) => (
+          <AdminCard key={idx} src={card} />
+        ))}
       </Grid>
     )
   }
 
-  let {title, value} = src;
+  let { title, value } = src
 
   return (
     <Grid item xs>
       <Card>
         <CardContent>
-          <Typography variant="h5" component="h2" m={ 2 } style={{ textAlign: 'center' }}>{title}</Typography>
-          {
-            Array.isArray(value) && <AdminTableView src={ value } /> || <ReactJSON src={ value } />
-          }
+          <Typography
+            variant='h5'
+            component='h2'
+            m={2}
+            style={{ textAlign: 'center' }}
+          >
+            {title}
+          </Typography>
+          {(Array.isArray(value) && <AdminTableView src={value} />) || (
+            <pre>{JSON.stringify(value, null, 2)}</pre>
+          )}
         </CardContent>
       </Card>
     </Grid>
@@ -47,11 +63,12 @@ const AdminCard = ({ src }) => {
 }
 
 // Process dashboard
-setupAdmin('dashboard', props => {
-    if (!props) return;
+setupAdmin('dashboard', (props) => {
+  if (!props) return
 
-    return () => 
-      <Grid container spacing={ 1 }>
-        <AdminCard src={ props } />
-      </Grid>
+  return () => (
+    <Grid container spacing={1}>
+      <AdminCard src={props} />
+    </Grid>
+  )
 })