Isolate client and refactor

README.md

@@ -1,4 +1,3 @@
-
 # 🔌 Guillotina Management Interface
 
 It's build around the idea of a framework to roll you own GMI.
@@ -16,7 +15,6 @@ layer that could be extended from outside.
 
 Alpha version. The app is usable, but still needs some love.
 
-
 ## Roll your own guillotina
 
 ### With create react app
@@ -31,22 +29,25 @@ yarn add @guillotinaweb/react-gmi
 ```
 
 App.js
+
 ```jsx
-import React from 'react';
-import {Layout} from '@guillotinaweb/react-gmi'
-import {Auth} from '@guillotinaweb/react-gmi'
-import {Guillotina} from '@guillotinaweb/react-gmi'
-import {Login} from '@guillotinaweb/react-gmi'
-import {useState} from 'react'
+import React from 'react'
+import { Layout } from '@guillotinaweb/react-gmi'
+import { Auth } from '@guillotinaweb/react-gmi'
+import { Guillotina } from '@guillotinaweb/react-gmi'
+import { Login } from '@guillotinaweb/react-gmi'
+import { getClient } from '@guillotinaweb/react-gmi'
+import { ClientProvider } from '@guillotinaweb/react-gmi'
+import { useState } from 'react'
 import '@guillotinaweb/react-gmi/dist/css/style.css'
 
 // guillotina url
 let url = 'http://localhost:8080/'
 
 const auth = new Auth(url)
+const client = getClient(url, auth)
 
 function App() {
-
   const [isLogged, setLogged] = useState(auth.isLogged)
 
   // You can do whatever you want on login, this includes,
@@ -60,27 +61,26 @@ function App() {
   auth.onLogout = onLogout
 
   return (
-
+    <ClientProvider client={client}>
       <Layout auth={auth} onLogout={onLogout}>
-        { isLogged && <Guillotina auth={auth} url={url} />}
-        { !isLogged && (
+        {isLogged && <Guillotina auth={auth} url={url} />}
+        {!isLogged && (
           <div className="columns is-centered">
             <div className="columns is-half">
               <Login onLogin={onLogin} auth={auth} />
             </div>
           </div>
         )}
       </Layout>
-  );
+    </ClientProvider>
+  )
 }
 
-
-export default App;
+export default App
 ```
 
 ### To add icons:
 
-
 Add the icons to the default public/index.html header
 
 ```diff
@@ -104,7 +104,6 @@ curl https://raw.githubusercontent.com/guillotinaweb/guillotina_react/master/pub
 - [Howto Extend Guillotina React form outside?](docs/extend.md)
 - [Narrative Docs](docs/api.md)
 
-
 ## Develop
 
 ```
@@ -120,7 +119,6 @@ yarn start
 ![](screenshots/screen1.png)
 ![](screenshots/screen3.png)
 
-
 ## Sponsors
 
 This project is sponsored by <a href="https://www.vinissimus.com">Vinissimus Wine Shop</a>

docs/api.md

@@ -69,7 +69,6 @@ import { useTraversal } from '@guillotinaweb/react-gmi'
 // ...
 const Ctx = useTraversal()
 // ...
-Ctx.setPath('/db/guillotina/') // will navigate tracersal to the container
 Ctx.doAction // show an action
 Ctx.cancelAction // hide (terminate) the latest action. Used, when the process completes
 Ctx.flash // Show a flash message on the main screen
@@ -102,17 +101,10 @@ const [location, setLocation] = useLocation()
 ### Guillotina
 
 ```jsx
-import {
-  Guillotina,
-  GuillotinaClient,
-  RestClient,
-} from '@guillotinaweb/react-gmi'
-// ...
-const client = new GuillotinaClient(new RestClient(url, auth))
+import { Guillotina } from '@guillotinaweb/react-gmi'
 // ...
 return (
   <Guillotina
-    client={client}
     config={{
       icons: {
         Banners: 'fas fa-image',

e2e/cypress/elements/user-form-selectors.js

@@ -0,0 +1,6 @@
+export const USER_FORM_SELECTORS = {
+  username: "[data-test='usernameTestInput']",
+  password: "[data-test='passwordTestInput']",
+  email: "[data-test='emailTestInput']",
+  name: "[data-test='nameTestInput']",
+}

e2e/cypress/integration/content.js

@@ -1,3 +1,5 @@
+import { USER_FORM_SELECTORS } from '../elements/user-form-selectors'
+
 describe('test content', function () {
   beforeEach('clear', function () {
     cy.clearLocalStorage()
@@ -50,27 +52,30 @@ describe('test content', function () {
     cy.get('.notification').should('contain', 'Items removed!')
   })
 
-  it.only('creates a User as Admin, modifies it and delete it', function () {
+  it('creates a User as Admin, modifies it and delete it', function () {
     cy.get('td:contains(UserManager)').click()
 
     // Create User
     cy.get('.level-right > .button').click()
-    cy.get('#id-0').type('Test User')
-    cy.get('#id-2').type('[email protected]')
-    cy.get('#id-4').type('Test Name')
-    cy.get('#id-6').type('TestPassword')
+    cy.get(USER_FORM_SELECTORS.username).type('test-user')
+    cy.get(USER_FORM_SELECTORS.email).type('[email protected]')
+    cy.get(USER_FORM_SELECTORS.name).type('Test Name')
+    cy.get(USER_FORM_SELECTORS.password).type('TestPassword')
     cy.get('p.control > .button').should('contain', 'Add User').click()
     cy.get('.notification').should('contain', 'Content created!')
 
     // Modify Item
-    cy.get('td:contains(Test User)').click()
-    cy.get('#id-81').clear().type('Test Modified User')
+    cy.get('td:contains(test-user)').click()
+    cy.get(USER_FORM_SELECTORS.username).type('Test Modified User', {
+      force: true,
+    })
+
     cy.get('p.control > .button').click()
     cy.get('.notification').should('contain', 'Data updated')
     cy.get('.breadcrumb a:contains(users)').click()
 
     // Delete Item
-    cy.get('tr:contains(Test User) .delete').click()
+    cy.get('tr:contains(test-user) .delete').click()
     cy.get('.level-right > .control > .button').click()
     cy.get('.notification').should('contain', 'Items removed!')
   })

e2e/cypress/integration/guillotina.js

@@ -10,17 +10,17 @@ describe('check guillotina', function () {
       method: 'GET',
       url: api_url,
       headers,
-    }).then((res) => {
+    }).then(() => {
       console.log('Container exists')
     })
   })
 
-  it('check root user is created', function () {
+  it('check default is created', function () {
     cy.request({
       method: 'GET',
-      url: `${api_url}/container/users/root`,
+      url: `${api_url}/container/users/default`,
       headers,
-    }).then((res) => {
+    }).then(() => {
       console.log('User exists')
     })
   })

e2e/cypress/support/guillotina.js

@@ -10,26 +10,26 @@ export function setupGuillotina() {
     url: api_url,
     headers,
     body: { '@type': 'Container', id: 'container' },
-  }).then((response) => console.log('container created'))
+  }).then(() => console.log('container created'))
 
   cy.request({
     method: 'POST',
     url: `${api_url}/container/@addons`,
     headers,
     body: { id: 'dbusers' },
-  }).then((response) => console.log('dbusers addon added'))
+  }).then(() => console.log('dbusers addon added'))
 
   cy.request({
     method: 'POST',
     url: `${api_url}/container/users`,
     headers,
     body: {
       '@type': 'User',
-      username: 'root',
-      password: 'root',
-      email: 'root@test.com',
+      username: 'default',
+      password: 'default',
+      email: 'default@test.com',
     },
-  }).then((response) => console.log('dbusers addon added'))
+  }).then(() => console.log('default user added'))
 }
 
 export function tearDownGuillotina() {
@@ -39,21 +39,27 @@ export function tearDownGuillotina() {
   }
   const api_url = 'http://localhost:8080/db'
 
+  cy.request({
+    method: 'DELETE',
+    url: `${api_url}/container/users/default`,
+    headers,
+  }).then(() => console.log('default user deleted'))
+
   cy.request({
     method: 'DELETE',
     url: `${api_url}/container/users`,
     headers,
-  }).then((response) => console.log('container deleted'))
+  }).then(() => console.log('users deleted'))
 
   cy.request({
     method: 'DELETE',
     url: `${api_url}/container/groups`,
     headers,
-  }).then((response) => console.log('container deleted'))
+  }).then(() => console.log('groups deleted'))
 
   cy.request({
     method: 'DELETE',
     url: `${api_url}/container`,
     headers,
-  }).then((response) => console.log('container deleted'))
+  }).then(() => console.log('container deleted'))
 }

e2e/example/components/guillotina.js

@@ -2,11 +2,14 @@ import React from 'react'
 import { Guillotina } from 'react-gmi'
 import { Auth } from 'react-gmi'
 import { Login } from 'react-gmi'
+import { getClient } from 'react-gmi'
+import { ClientProvider } from 'react-gmi'
 
 import '../node_modules/react-gmi/dist/css/style.css'
 
 const url = 'http://localhost:8080/'
 const auth = new Auth(url)
+const client = getClient(url, auth)
 
 export default function App() {
   const [isLogged, setLogged] = React.useState(auth.isLogged)
@@ -19,7 +22,7 @@ export default function App() {
   auth.onLogout = onLogout
 
   return (
-    <>
+    <ClientProvider client={client}>
       {isLogged && <Guillotina auth={auth} url={url} />}
       {!isLogged && (
         <div className="columns is-centered">
@@ -28,6 +31,6 @@ export default function App() {
           </div>
         </div>
       )}
-    </>
+    </ClientProvider>
   )
 }

e2e/example/pages/index.js

@@ -1,6 +1,4 @@
 import React from 'react'
-import { useState } from 'react'
-import { useRef, useEffect } from 'react'
 import dynamic from 'next/dynamic'
 
 const DynamicComponentWithNoSSR = dynamic(

e2e/g_conf/config.yaml

@@ -8,7 +8,7 @@ databases:
     dsn: postgres://guillotina:@postgres/guillotina
     read_only: false
     cache_strategy: redis
-    autovacuum: false
+    autovacuum: true
     db_schema: guillotina
     pool_size: 8
 host: 0.0.0.0

src/App.js

@@ -3,7 +3,10 @@ import { Layout } from './guillo-gmi'
 import { Auth } from './guillo-gmi'
 import { Guillotina } from './guillo-gmi'
 import { Login } from './guillo-gmi'
+import { getClient } from './guillo-gmi'
+import { ClientProvider } from './guillo-gmi'
 import { useState } from 'react'
+
 import './guillo-gmi/scss/styles.sass'
 
 /*
@@ -28,6 +31,7 @@ if (process.env.NODE_ENV === 'production') {
 }
 
 const auth = new Auth(url)
+const client = getClient(url, auth)
 
 function App() {
   const [isLogged, setLogged] = useState(auth.isLogged)
@@ -40,16 +44,18 @@ function App() {
   auth.onLogout = onLogout
 
   return (
-    <Layout auth={auth} onLogout={onLogout}>
-      {isLogged && <Guillotina auth={auth} url={url} />}
-      {!isLogged && (
-        <div className="columns is-centered">
-          <div className="columns is-half">
-            <Login onLogin={onLogin} auth={auth} />
+    <ClientProvider client={client}>
+      <Layout auth={auth} onLogout={onLogout}>
+        {isLogged && <Guillotina auth={auth} url={url} />}
+        {!isLogged && (
+          <div className="columns is-centered">
+            <div className="columns is-half">
+              <Login onLogin={onLogin} auth={auth} />
+            </div>
           </div>
-        </div>
-      )}
-    </Layout>
+        )}
+      </Layout>
+    </ClientProvider>
   )
 }
 

src/guillo-gmi/components/behaviors/iattachment.js

@@ -18,7 +18,7 @@ export function IAttachment(props) {
     ctx.refresh()
   }
 
-  const downloadFile = (file, content_type) => async (event) => {
+  const downloadFile = (file, content_type) => async () => {
     const endpoint = `${ctx.path}@download/file`
     const res = await ctx.client.download(endpoint)
     const text = await res.blob()

src/guillo-gmi/components/behaviors/imultiattachment.js

@@ -34,7 +34,7 @@ export function IMultiAttachment(props) {
     Ctx.refresh()
   }
 
-  const downloadFile = (file, content_type, fileName) => async (event) => {
+  const downloadFile = (file, content_type, fileName) => async () => {
     const endpoint = `${Ctx.path}@download/files/${file}`
     const res = await Ctx.client.download(endpoint)
     const text = await res.blob()