Strict mode

CHANGELOG.md

@@ -1,3 +1,7 @@
+0.30.0
+------
+- chore: Typescript strict mode
+
 0.29.2
 ------
 - fix: Email input

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.29.2",
+  "version": "0.30.0",
   "repository": {
     "type": "git",
     "url": "[email protected]:guillotinaweb/guillotina_react.git"
@@ -37,6 +37,7 @@
     "@testing-library/user-event": "12.6.0",
     "@typescript-eslint/eslint-plugin": "^6.18.1",
     "@typescript-eslint/parser": "^6.18.1",
+    "@types/uuid":"9.0.8",
     "babel-plugin-formatjs": "^10.5.10",
     "eslint": "^8.56.0",
     "eslint-plugin-react": "^7.33.2",
@@ -45,7 +46,7 @@
     "prettier": "2.2.1",
     "sass": "1.69.5",
     "serialize-javascript": "5.0.1",
-    "typescript": "^5.3.3",
+    "typescript": "5.4.2",
     "vitest": "^0.34.6",
     "@types/react-beautiful-dnd": "13.1.8"
   },

src/guillo-gmi/actions/add_item.tsx

@@ -1,6 +1,7 @@
 import { useTraversal } from '../contexts'
 import { Modal } from '../components/modal'
 import { useCrudContext } from '../hooks/useCrudContext'
+import { IndexSignature } from '../types/global'
 
 interface Props {
   type: string
@@ -18,7 +19,7 @@ export function AddItem(props: Props) {
     Ctx.cancelAction()
   }
 
-  async function doSubmit(data) {
+  async function doSubmit(data: IndexSignature) {
     const form = Object.assign(
       {},
       { '@type': type },
@@ -41,7 +42,6 @@ export function AddItem(props: Props) {
       <Form
         loading={loading}
         onSubmit={doSubmit}
-        onError={(err) => console.log(err)}
         actionName={'Add ' + type}
         title={'Add ' + type}
         type={type}

src/guillo-gmi/actions/change_pass.tsx

@@ -5,6 +5,7 @@ import { Input } from '../components/input/input'
 import { Button } from '../components/input/button'
 import { Form } from '../components/input/form'
 import { useState } from 'react'
+import { IndexSignature } from '../types/global'
 
 const initial = {
   pass1: '',
@@ -13,7 +14,7 @@ const initial = {
 
 export function ChangePassword() {
   const [state, setState] = useState(initial)
-  const [perror, setPerror] = useState(undefined)
+  const [perror, setPerror] = useState<string | undefined>(undefined)
 
   const Ctx = useTraversal()
   const { patch } = useCrudContext()
@@ -50,8 +51,8 @@ export function ChangePassword() {
     Ctx.refresh()
   }
 
-  const setPass = (field) => (val) => {
-    const n = {}
+  const setPass = (field: string) => (val: string) => {
+    const n: IndexSignature = {}
     n[field] = val
     setState((state) => ({ ...state, ...n }))
     setPerror(undefined)

src/guillo-gmi/actions/copy_item.tsx

@@ -3,18 +3,19 @@ import { PathTree } from '../components/modal'
 import { useTraversal } from '../contexts'
 import { useCrudContext } from '../hooks/useCrudContext'
 import { getNewId } from '../lib/utils'
-import { ItemModel } from '../models'
+import { IndexSignature } from '../types/global'
+import { GuillotinaCommonObject } from '../types/guillotina'
 
 interface Props {
-  item: ItemModel
+  item: GuillotinaCommonObject
 }
 
 export function CopyItem(props: Props) {
   const Ctx = useTraversal()
   const { post } = useCrudContext()
   const { item } = props
 
-  async function copyItem(path, form) {
+  async function copyItem(path: string, form: IndexSignature) {
     const input = form[1] || {}
     const { isError, errorMessage } = await post(
       {

src/guillo-gmi/actions/copy_items.tsx

@@ -3,8 +3,9 @@ import { PathTree } from '../components/modal'
 import { useTraversal } from '../contexts'
 import { getNewId } from '../lib/utils'
 import { ItemModel } from '../models'
+import { IndexSignature } from '../types/global'
 
-const withError = (res) => res.status >= 300
+const withError = (res: Response) => res.status >= 300
 
 interface Props {
   items: Array<ItemModel>
@@ -13,11 +14,11 @@ export function CopyItems(props: Props) {
   const Ctx = useTraversal()
   const { items = [] } = props
 
-  async function copyItems(path, form) {
+  async function copyItems(path: string, form: IndexSignature) {
     const responses = await Promise.all(
       items.map((item, i) => {
         const input = form[i + 1] || {}
-        return Ctx.client.post(`${Ctx.path}${item['@name']}/@duplicate`, {
+        return Ctx.client.post(`${Ctx.path}${item.id}/@duplicate`, {
           destination: path,
           new_id: input.value || getNewId(item.id),
         })
@@ -55,7 +56,7 @@ export function CopyItems(props: Props) {
           <input
             type="text"
             className="input"
-            data-test={`inputCopyIdTest-${item['@name']}`}
+            data-test={`inputCopyIdTest-${item.id}`}
             defaultValue={getNewId(item.id)}
           />
         </Fragment>

src/guillo-gmi/actions/move_item.tsx

@@ -2,20 +2,20 @@ import { PathTree } from '../components/modal'
 import { useGuillotinaClient, useTraversal } from '../contexts'
 import { useCrudContext } from '../hooks/useCrudContext'
 import { useLocation } from '../hooks/useLocation'
-import { ItemModel } from '../models'
+import { GuillotinaCommonObject } from '../types/guillotina'
 
 interface Props {
-  item: ItemModel
+  item: GuillotinaCommonObject
 }
 
 export function MoveItem(props: Props) {
   const Ctx = useTraversal()
-  const { post } = useCrudContext()
+  const { post } = useCrudContext<{ '@url': string }>()
   const [, navigate] = useLocation()
   const client = useGuillotinaClient()
   const { item } = props
 
-  async function moveItem(path) {
+  async function moveItem(path: string) {
     const { isError, errorMessage, result } = await post(
       {
         destination: path,
@@ -26,7 +26,7 @@ export function MoveItem(props: Props) {
 
     if (!isError) {
       navigate({
-        path: `/${client.cleanPath(result['@url'])}/`,
+        path: `/${client.cleanPath(result!['@url'])}/`,
         tab: '',
       })
       Ctx.flash(`Field moved!`, 'success')

src/guillo-gmi/actions/move_items.tsx

@@ -2,7 +2,7 @@ import { PathTree } from '../components/modal'
 import { useTraversal } from '../contexts'
 import { ItemModel } from '../models'
 
-const withError = (res) => res.status >= 300
+const withError = (res: Response) => res.status >= 300
 
 interface Props {
   items: ItemModel[]
@@ -11,12 +11,12 @@ export function MoveItems(props: Props) {
   const Ctx = useTraversal()
   const { items = [] } = props
 
-  async function moveItems(path) {
+  async function moveItems(path: string) {
     const responses = await Promise.all(
       items.map((item) => {
-        return Ctx.client.post(`${Ctx.path}${item['@name']}/@move`, {
+        return Ctx.client.post(`${Ctx.path}${item.id}/@move`, {
           destination: path,
-          new_id: item['@name'],
+          new_id: item.id,
         })
       })
     )

src/guillo-gmi/actions/remove_item.tsx

@@ -2,10 +2,10 @@ import { Confirm } from '../components/modal'
 import { useGuillotinaClient, useTraversal } from '../contexts'
 import { useCrudContext } from '../hooks/useCrudContext'
 import { useLocation } from '../hooks/useLocation'
-import { ItemModel } from '../models'
+import { GuillotinaCommonObject } from '../types/guillotina'
 
 interface Props {
-  item: ItemModel
+  item: GuillotinaCommonObject
 }
 
 export function RemoveItem(props: Props) {

src/guillo-gmi/actions/remove_items.tsx

@@ -13,18 +13,18 @@ export function RemoveItems(props: Props) {
   const cfg = useConfig()
   const [loading, setLoading] = useState(false)
   const { items = [] } = props
-  const last = items[items.length - 1]['@name']
+  const last = items[items.length - 1].id
   const itemsNames = items
-    .map((item) => item['@name'])
+    .map((item) => item.id)
     .join(', ')
     .replace(`, ${last}`, ` and ${last}`)
 
   async function removeItems() {
-    const errors = []
+    const errors: unknown[] = []
     setLoading(true)
 
     const actions = items.map(async (item) => {
-      const res = await Ctx.client.delete(`${Ctx.path}${item['@name']}`)
+      const res = await Ctx.client.delete(`${Ctx.path}${item.id}`, {})
       if (!res.ok) {
         const err = await res.json()
         errors.push(err)

src/guillo-gmi/components/Link.tsx

@@ -12,7 +12,7 @@ export function Link({ aRef, model, children, ...props }: Props) {
   const [path, navigate] = useLocation()
   const aStyle = { textDecoration: 'none', color: 'currentColor' }
 
-  function onClick(e) {
+  function onClick(e: React.MouseEvent<HTMLAnchorElement>) {
     e.stopPropagation()
     if (actAsLink(e)) return
     e.preventDefault()
@@ -32,6 +32,6 @@ export function Link({ aRef, model, children, ...props }: Props) {
   )
 }
 
-function actAsLink(e) {
+function actAsLink(e: React.MouseEvent<HTMLAnchorElement>) {
   return e.ctrlKey || e.metaKey || e.altKey || e.shiftKey || e.button !== 0
 }

src/guillo-gmi/components/TdLink.tsx

@@ -9,7 +9,7 @@ interface Props {
   style?: IndexSignature
 }
 export function TdLink({ model, children, style = {} }: Props) {
-  const link = useRef<HTMLAnchorElement>()
+  const link = useRef<HTMLAnchorElement>(null)
 
   function onClick() {
     if (link && link.current) {

src/guillo-gmi/components/behavior_view.tsx

@@ -12,16 +12,21 @@ export function BehaviorsView({ context, schema }: Props) {
   const Ctx = useTraversal()
   const { getBehavior } = Ctx.registry
 
-  const behaviors = [].concat(
-    context.__behaviors__,
-    context['@static_behaviors']
-  )
-  const GetBehavior = (b) => {
-    const Cls = getBehavior(b, BehaviorNotImplemented)
+  const behaviors: string[] = [
+    ...(context.__behaviors__ ?? []),
+    ...Object(context['@static_behaviors']),
+  ]
+
+  const GetBehavior = (behaviorName: string) => {
+    const Cls = getBehavior(behaviorName, BehaviorNotImplemented)
     return (
       <Cls
-        values={context[b]}
-        properties={get(schema, ['definitions', b, 'properties'], {})}
+        values={context[behaviorName as keyof GuillotinaCommonObject]}
+        properties={get(
+          schema,
+          ['definitions', behaviorName, 'properties'],
+          {}
+        )}
       />
     )
   }

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

@@ -7,11 +7,13 @@ import { useIntl } from 'react-intl'
 import { genericMessages } from '../../locales/generic_messages'
 import {
   GuillotinaFile,
-  GuillotinaSchemaProperties,
+  GuillotinaSchemaProperty,
 } from '../../types/guillotina'
 
 interface Props {
-  properties: GuillotinaSchemaProperties
+  properties: {
+    file: GuillotinaSchemaProperty
+  }
   values: {
     file: GuillotinaFile
   }
@@ -38,9 +40,9 @@ export function IAttachment({ properties, values }: Props) {
           <td key={2}>
             <EditableField
               field={key}
-              value={values[key]}
+              value={values.file}
               ns="guillotina.behaviors.attachment.IAttachment"
-              schema={properties[key]}
+              schema={properties.file}
               modifyContent={modifyContent && ['file'].includes(key)}
             />
           </td>

src/guillo-gmi/components/behaviors/iimageattachment.tsx

@@ -15,7 +15,9 @@ import {
 import {
   GuillotinaFile,
   GuillotinaSchemaProperties,
+  GuillotinaSchemaProperty,
 } from '../../types/guillotina'
+import { LightFile } from '../../types/global'
 
 const _sizesImages = ['large', 'preview', 'mini', 'thumb']
 
@@ -31,15 +33,18 @@ export function IImageAttachment({ properties, values }: Props) {
   const Ctx = useTraversal()
   const modifyContent = Ctx.hasPerm('guillotina.ModifyContent')
   const sizesImages = cfg.SizeImages || _sizesImages
-  const [file, setFile] = useState(null)
+  const [file, setFile] = useState<LightFile | null>(null)
   const [loading, setLoading] = useState(false)
-  const [error, setError] = useState(undefined)
+  const [error, setError] = useState<string | undefined>(undefined)
   const [showConfirmToDelete, setShowConfirmToDelete] = useState(false)
 
-  const uploadFile = async (ev) => {
+  const uploadFile = async (ev: React.MouseEvent<HTMLButtonElement>) => {
     ev.preventDefault()
     setLoading(true)
     setError(undefined)
+    if (!file) {
+      return
+    }
     const endpoint = `${Ctx.path}@upload/image`
     const req = await Ctx.client.upload(endpoint, file)
     if (req.status !== 200) {
@@ -69,7 +74,7 @@ export function IImageAttachment({ properties, values }: Props) {
       }
     }
 
-    setFile(undefined)
+    setFile(null)
     setLoading(false)
     Ctx.flash(intl.formatMessage(genericFileMessages.image_uploaded), 'success')
     Ctx.refresh()
@@ -119,7 +124,7 @@ export function IImageAttachment({ properties, values }: Props) {
                 field={'image'}
                 value={values['image']}
                 ns="guillotina.behaviors.behaviors.IImageAttachment"
-                schema={properties['image']}
+                schema={properties['image'] as GuillotinaSchemaProperty}
                 modifyContent={false}
               />
               <div className="ml-5">