wip: typescript

src/guillo-gmi/components/guillotina.tsx

@@ -59,9 +59,12 @@ export function Guillotina({ auth, locale, ...props }: GuillotinaProps) {
     dispatch({ type: 'SET_PATH', payload: searchPath })
   }, [searchPath])
 
+  console.log('Guillotina component')
   useEffect(() => {
     ;(async () => {
+      console.log('Get context data', path)
       const data = await client.getContext(path)
+      console.log('Get context data', data)
       if (data.status === 401) {
         dispatch({ type: 'SET_ERROR', payload: 'notallowed' })
         return

src/guillo-gmi/components/item.tsx

@@ -10,7 +10,7 @@ import { IColumn } from '../reducers/guillotina'
 import { SearchItem } from '../types/guillotina'
 
 interface ItemProps {
-  item: ItemModel
+  item: { id: string; path: string }
   icon?: string
 }
 export function Item({ item, icon }: ItemProps) {

src/guillo-gmi/hooks/useInput.tsx

@@ -1,18 +1,18 @@
 import { useEffect, useState } from 'react'
 
 const applyValidators = (value, validators) => {
-  let validation = Array.isArray(validators) ? validators : [validators]
+  const validation = Array.isArray(validators) ? validators : [validators]
   let result = true
   validation.forEach((func) => {
-    if (func(value) === false) {
+    if (func && func(value) === false) {
       result = false
     }
   })
   return result
 }
 
 const useInput = (onChange, value, validator) => {
-  let [state, setState] = useState({ hasError: false, value: value })
+  const [state, setState] = useState({ hasError: false, value: value })
 
   const onUpdate = (ev) => {
     const value = ev && ev.target ? ev.target.value : ev ? ev : ''

src/guillo-gmi/lib/rest.ts

@@ -11,7 +11,7 @@ export class RestClient {
     this.container = container
   }
 
-  async request(path, data = undefined, headers = {}) {
+  async request(path, data = undefined, headers = undefined) {
     if (path.indexOf(this.url) !== -1) {
       path = path.replace(this.url, '')
     }

src/guillo-gmi/views/application.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { Item } from '../components/item'
 import { ItemTitle } from '../components/item'
 import { Button } from '../components/input/button'
@@ -10,14 +8,13 @@ import { Form } from '../components/input/form'
 import { Input } from '../components/input/input'
 import { defineMessages, useIntl } from 'react-intl'
 import { genericMessages } from '../locales/generic_messages'
-import { ItemModel } from '../models'
 
 export function ApplicationCtx() {
   const intl = useIntl()
   const context = useTraversal()
   const { databases } = context.state.context
   return (
-    <React.Fragment>
+    <>
       <h3>
         {intl.formatMessage({
           id: 'databases',
@@ -28,13 +25,13 @@ export function ApplicationCtx() {
         <ItemTitle title="Objects" />
         {databases.map((db) => (
           <Item
-            item={new ItemModel({ id: db, path: `/${db}/` })}
+            item={{ id: db, path: `/${db}/` }}
             key={db}
             icon={'fas fa-database'}
           />
         ))}
       </div>
-    </React.Fragment>
+    </>
   )
 }
 
@@ -43,22 +40,22 @@ export function DatabaseCtx() {
   const { containers } = context.state.context
   const { path } = context.state
   return (
-    <React.Fragment>
+    <>
       <div className="container">
         <ItemTitle title="Containers" actions={<CreateContainer />} />
         <table className="table is-fullwidth is-hoverable">
           <tbody>
             {containers.map((db) => (
               <Item
-                item={new ItemModel({ id: db, path: `${path}${db}/` })}
+                item={{ id: db, path: `${path}${db}/` }}
                 key={db}
                 icon={'fas fa-archive'}
               />
             ))}
           </tbody>
         </table>
       </div>
-    </React.Fragment>
+    </>
   )
 }
 
@@ -67,7 +64,7 @@ export function CreateContainer() {
   const [isActive, setActive] = useState(false)
 
   return (
-    <React.Fragment>
+    <>
       <ModalAddContainer isActive={isActive} setActive={setActive} />
       <button
         className="button is-warning is-pulled-right"
@@ -78,7 +75,7 @@ export function CreateContainer() {
         </span>
         <span>{intl.formatMessage(genericMessages.create)}</span>
       </button>
-    </React.Fragment>
+    </>
   )
 }