Merge pull request #14 from lolocompany/bug-accountid

extracted react-admin store and added on top of RAdmin
lolocompany · Sep 3, 2021 · 05eda5c · 05eda5c
2 parents 2b8f0bd + 7d8da38
commit 05eda5c
Show file tree

Hide file tree

Showing 11 changed files with 258 additions and 183 deletions.
diff --git a/README.md b/README.md
@@ -1,54 +1,61 @@
 # react-admin-lolo
+
 A Library for schema-driven web apps using [Lolo](https://lolo.company), [React Admin](https://github.com/marmelab/react-admin) and [RJSF](https://github.com/rjsf-team/react-jsonschema-form) at core.
 
-From **Create, Read, Update, Delete** operations to more complex implementations such as Graphs, Autocomplete widgets and Map Integrations are **schema driven**. 
+From **Create, Read, Update, Delete** operations to more complex implementations such as Graphs, Autocomplete widgets and Map Integrations are **schema driven**.
 
-That is, *As Schema changes, the View, Components, Widgets change and operate accordingly.* 
+That is, _As Schema changes, the View, Components, Widgets change and operate accordingly._
 
 ## Installation
+
 Create a new React app using custom configurations or create-react-app
+
 ```
 npx create-react-app my-example-app
 ```
 
-react-admin-lolo is available via npm as [Lolo](https://lolo.company) Org scoped publicly  available package. You can install it using:
+react-admin-lolo is available via npm as [Lolo](https://lolo.company) Org scoped publicly available package. You can install it using:
+
 ```
 npm install --save @lolocompany/react-admin-lolo
 ```
+
 ### Note:
+
 react-admin-lolo requires a few dependencies to be installed along with it to operate as expected.
- - @aws-amplify/ui-react:  >=1.0.0
- - aws-amplify:  >=3.0.0
- - react-admin:  >=3.0.0
- - react-admin-import-csv:  >=1.0.0
+
+- @aws-amplify/ui-react: >=1.0.0
+- aws-amplify: >=3.0.0
+- react-admin: >=3.0.0
+- react-admin-import-csv: >=1.0.0
+
 ```
 npm install --save @aws-amplify/ui-react aws-amplify react-admin react-admin-import-csv
 ```
+
 ## Documentation
 
 ### Implementation
-To generate base Layout, Menu, AppBar and Dashboard view out of the box, include the following code in your React App, `App.js` file. 
+
+To generate base Layout, Menu, AppBar and Dashboard view out of the box, include the following code in your React App, `App.js` file.
+
 ```javascript
 // in App.js
 
-import React from  'react';
-import  {  LoloAdmin,  LoloResource  }  from  '@lolocompany/react-admin-lolo';
-import { Layout } from './Layout'
+import React from 'react';
+import { LoloAdmin, LoloResource } from '@lolocompany/react-admin-lolo';
+import { Layout } from './Layout';
 
 function App() {
   return (
     <LoloAdmin
       apiUrl={process.env.REACT_APP_API_URL}
-      title='My Admin'
+      title="My Admin"
       dashboard={() => <h1>Dashboard Panel!</h1>}
       layout={Layout}
     >
-      <LoloResource
-        name='directors'
-      />
-      <LoloResource
-        name='movies'
-      />
+      <LoloResource name="directors" />
+      <LoloResource name="movies" />
     </LoloAdmin>
   );
 }
@@ -62,56 +69,58 @@ export default App;
 
 LoloResource supports the same override props as react-admin [Resource](https://marmelab.com/react-admin/Resource.html#the-resource-component). So for example, to customize the side menu icon and list view for directors:
 
-
 ```javascript
-import UserIcon from  '@material-ui/icons/People';
-import MyList from  './MyList';
-
-<LoloResource  name='directors'  icon={UserIcon} list={MyList} />;
+import UserIcon from '@material-ui/icons/People';
+import MyList from './MyList';
 
+<LoloResource name="directors" icon={UserIcon} list={MyList} />;
 ```
 
 #### Schema Transforms
 
 Schema transform functions help you manipulate the schema that is fetched from the respective resource's schema API. Each function recieves following values as arguments `transform(writableSchema, pristineSchema, selectedAccount)` where in:
 
--  `writableSchema`: Manipulated schema with updated/removed properties
-
--  `pristineSchema`: Original schema recieved from the resource's schema API
+- `writableSchema`: Manipulated schema with updated/removed properties
 
--  `selectedAccount`: Current account selected for the panel
+- `pristineSchema`: Original schema recieved from the resource's schema API
 
+- `selectedAccount`: Current account selected for the panel
 
 The `LoloResource` component accepts the following schema tranform functions as props:
 
--  `listSchemaTransform`: Manipulates the `List` component schema. It helps in displaying selected fields on the table list. For Example, the following will only display _ID_ and _Name_ on the enterprise table:
+- `listSchemaTransform`: Manipulates the `List` component schema. It helps in displaying selected fields on the table list. For Example, the following will only display _ID_ and _Name_ on the enterprise table:
 
 ```javascript
 <LoloResource
   name="enterprises"
-  listSchemaTransform={({ properties,  ...rest }, pristineSchema, selectedAccount)  =>  {
-    const  {  id,  name  }  =  properties;
-    return  {
+  listSchemaTransform={({ properties, ...rest }, pristineSchema, selectedAccount) => {
+    const { id, name } = properties;
+    return {
       ...rest,
-      properties:  {  id,  name  },
+      properties: { id, name },
     };
   }}
 />
 ```
 
--  `createSchemaTransform`: Manipulates the `Create` component schema. For Example, the following will add an extra field _customId_ on the create form with a read only property:
-  
+- `createSchemaTransform`: Manipulates the `Create` component schema. For Example, the following will add an extra field _customId_ on the create form with a read only property:
+
 ```javascript
 <LoloResource
-  createSchemaTransform={(writableSchema, pristineSchema, selectedAccount)  => ({
+  createSchemaTransform={(writableSchema, pristineSchema, selectedAccount) => ({
     ...writableSchema,
-    customId:  {  type:  'string',  readOnly:  true  },
+    customId: { type: 'string', readOnly: true },
   })}
 />
-```  
+```
 
--  `editSchemaTransform`: Manipulates the `Edit` component schema. For Example, the following will add an extra field _customId_ on the edit form:
+- `editSchemaTransform`: Manipulates the `Edit` component schema. For Example, the following will add an extra field _customId_ on the edit form:
 
 ```javascript
-<LoloResource  editSchemaTransform={(writableSchema, pristineSchema, selectedAccount)  => ({...writableSchema, customId:  {type:  'string'}})} />
-```
+<LoloResource
+  editSchemaTransform={(writableSchema, pristineSchema, selectedAccount) => ({
+    ...writableSchema,
+    customId: { type: 'string' },
+  })}
+/>
+```