Fix minnor bugs in contracts page table (#246)

* add input lenght validator and message * fix problem with loading state * add default name for empty contracts names * fix problem with listing date
protofire · Oct 26, 2023 · df28515 · df28515
1 parent d7fdbb6
commit df28515
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 8 deletions.
diff --git a/src/hooks/userContracts/useListUserContracts.ts b/src/hooks/userContracts/useListUserContracts.ts
@@ -43,6 +43,11 @@ export function useListUserContracts(
       return
     }
 
+    if (userContracts.length === 0) {
+      setUserContracts(userContracts)
+      setIsLoading(false)
+    }
+
     userContractsFromApi(userAddress, networkConnected)
       .then(async deployments => {
         deployments &&
@@ -54,6 +59,7 @@ export function useListUserContracts(
           .searchBy(userAddress, networkConnected, filterBy)
           .then(response => {
             setUserContracts(response)
+            setIsLoading(false)
           })
       })
       .catch(setError)

diff --git a/src/services/localDB/UserContractsRepository.ts b/src/services/localDB/UserContractsRepository.ts
@@ -65,7 +65,7 @@ export class UserContractsRepository implements IUserContractsRepository {
       codeHash: d.codeId,
       type: d.contractType as ContractType,
       name: d.contractName,
-      date: new Date().toISOString(),
+      date: d.date,
       external: false,
       hidden: d.hidden
     }))

diff --git a/src/view/ContractView/ContractsTable/ContractsTable.tsx b/src/view/ContractView/ContractsTable/ContractsTable.tsx
@@ -33,11 +33,15 @@ import { TITLE_MAP_TOKEN } from '@/constants/titleTokenType'
 import { useUpdateUserContracts } from '@/hooks/userContracts/useUpdateUserContracts'
 import { DeleteContractModal } from '@/view/components/DeleteContractModal'
 import { UpdateDeployment } from '@/domain/repositories/DeploymentRepository'
+import { nameWithTimestamp } from '@/utils/generators'
 
 export interface ContractsTableProps {
   contracts: ContractTableItem[]
 }
 
+const MAX_INPUT_LENGTH = 20
+const ERROR_MESSAGE = '20 characters max'
+
 function ContractTableRow({
   contract,
   setOpenShareModal,
@@ -48,25 +52,34 @@ function ContractTableRow({
   setOpenDeleteModal: React.Dispatch<React.SetStateAction<boolean>>
 }) {
   const [editable, setEditable] = React.useState(false)
+  const [error, setError] = React.useState(false)
   const [textInput, setTextInput] = React.useState(contract.name)
   const { updateContract } = useUpdateUserContracts()
 
   const typeMap = TITLE_MAP_TOKEN[contract.type]
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setTextInput(event.target.value)
+    setError(false)
+    const value = event.target.value
+    if (value.length >= MAX_INPUT_LENGTH) {
+      setError(true)
+      return
+    }
+    setTextInput(value)
   }
 
   const handleUpdate = () => {
     setEditable(!editable)
+    const contractName =
+      textInput.length > 0 ? textInput : nameWithTimestamp('custom')
     const updatedContract: UpdateDeployment = {
       contractAddress: contract.address,
       userAddress: contract.userAddress,
       network: contract.blockchain,
-      contractName: textInput,
+      contractName: contractName,
       hidden: false
     }
-
+    setTextInput(contractName)
     updateContract({
       deployment: updatedContract
     })
@@ -96,7 +109,12 @@ function ContractTableRow({
         <TokenWrapper>
           {editable ? (
             <>
-              <TextField value={textInput} onChange={handleChange}></TextField>
+              <TextField
+                error={error}
+                helperText={error ? ERROR_MESSAGE : ''}
+                value={textInput}
+                onChange={handleChange}
+              ></TextField>
               <DefaultToolTipButton
                 id="save-contract-name"
                 sx={{ color: 'green' }}

diff --git a/src/view/ContractView/ContractsTable/index.tsx b/src/view/ContractView/ContractsTable/index.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { ContractsTable } from '@/view/ContractView/ContractsTable/ContractsTable'
 import { UserContractDetails } from '@/domain'
 import { ContractTableItem } from '@/domain/wizard/ContractTableItem'
@@ -11,6 +11,10 @@ interface Props extends FiltersInputProps {
   isLoading: boolean
 }
 
+const Loading: React.FC<{ isLoading: boolean }> = ({ isLoading }) => {
+  if (isLoading) return <Typography>Loading</Typography>
+}
+
 export function ContractsTableContent({
   contracts,
   setFilterBy,
@@ -40,7 +44,7 @@ export function ContractsTableContent({
           </Button>
         </Link>
       </Box>
-      {isLoading && <Typography>Loading</Typography>}
+      <Loading isLoading={isLoading} />
       {!isLoading && contracts.length > 0 ? (
         <ContractsTable contracts={contractsItem} />
       ) : (

diff --git a/src/view/ContractView/FiltersInput.tsx b/src/view/ContractView/FiltersInput.tsx
@@ -36,7 +36,6 @@ export function FiltersInput({ setFilterBy }: FiltersInputProps) {
         '& > :not(style)': { m: 1, color: 'white' }
       }}
     >
-      <SearchInput></SearchInput>
       <Select
         sx={{ m: 1, width: '150px' }}
         value={contractType}