refactor(renterd): typescript strict mode

SiaFoundation · Sep 20, 2024 · d710788 · d710788
1 parent 8c93f0a
commit d710788
Show file tree

Hide file tree

Showing 106 changed files with 1,204 additions and 780 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -12,5 +12,6 @@
       "GOOS": "js",
       "GOARCH": "wasm"
     }
-  }
+  },
+  "typescript.tsdk": "node_modules/typescript/lib"
 }
diff --git a/apps/hostd/contexts/config/fields.tsx b/apps/hostd/contexts/config/fields.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react/no-unescaped-entities */
 import { blocksToMonths } from '@siafoundation/units'
-import { ConfigFields } from '@siafoundation/design-system'
+import { ConfigFields, Maybe } from '@siafoundation/design-system'
 import BigNumber from 'bignumber.js'
 import {
   ConfigViewMode,

diff --git a/apps/hostd/dialogs/VolumeCreateDialog.tsx b/apps/hostd/dialogs/VolumeCreateDialog.tsx
@@ -67,7 +67,8 @@ function getFields(
       validation: {
         required: 'required',
         validate: {
-          req: (value) => value !== '\\' || 'directory within a drive required',
+          req: (value: string) =>
+            value !== '\\' || 'directory within a drive required',
         },
       },
     },
@@ -80,11 +81,11 @@ function getFields(
       validation: {
         required: 'required',
         validate: {
-          between: (value: number) => {
+          between: (value: BigNumber) => {
             const error = `Must be between ${humanBytes(
               GBToBytes(minSizeGB)
             )} and ${humanBytes(GBToBytes(maxSizeGB), { fixed: 3 })}`
-            return (value <= maxSizeGB && value >= minSizeGB) || error
+            return (value.lte(maxSizeGB) && value.gte(minSizeGB)) || error
           },
           nospace: () =>
             maxSizeGB > minSizeGB || 'not enough space in directory',

diff --git a/apps/renterd/components/Alerts/AlertsFilterMenu.tsx b/apps/renterd/components/Alerts/AlertsFilterMenu.tsx
@@ -56,7 +56,12 @@ export function AlertsFilterMenu() {
       {!dataState && !!pageCount && (
         <Button
           tip={severityFilter ? `dismiss ${pageCount}` : 'dismiss all'}
-          onClick={() => dismissMany(datasetPage.map((a) => a.id))}
+          onClick={() => {
+            if (!datasetPage) {
+              return
+            }
+            dismissMany(datasetPage.map((a) => a.id))
+          }}
         >
           <Checkmark16 />
           Dismiss ({pageCount})

diff --git a/apps/renterd/components/Alerts/index.tsx b/apps/renterd/components/Alerts/index.tsx
@@ -21,7 +21,6 @@ export function Alerts() {
     toggleSort,
     limit,
     dataState,
-    cellContext,
   } = useAlerts()
 
   return (
@@ -35,7 +34,6 @@ export function Alerts() {
     >
       <div className="p-6 min-w-fit">
         <Table
-          context={cellContext}
           isLoading={dataState === 'loading'}
           emptyState={
             dataState === 'noneMatchingFilters' ? (

diff --git a/apps/renterd/components/CmdRoot/Item.tsx b/apps/renterd/components/CmdRoot/Item.tsx
@@ -13,15 +13,15 @@ export function CommandItemNav({
 }: React.ComponentProps<typeof Command.Item> & {
   currentPage?: Page
   parentPage?: Page
-  commandPage: Page
+  commandPage?: Page
 }) {
   const search = useCommandState((state) => state.search)
   // show if user is on parent page and not searching
   if (parentPage?.namespace === currentPage?.namespace && !search)
     return (
       <Command.Item
         className={cx(itemStyles(), 'group', className)}
-        value={`${commandPage?.label} ${props.children.toString()}`}
+        value={`${commandPage?.label} ${props.children?.toString() || ''}`}
         {...props}
       />
     )
@@ -48,7 +48,7 @@ export function CommandItemSearch({
     return (
       <Command.Item
         className={cx(itemStyles(), 'group', className)}
-        value={`${commandPage.label} ${props.children.toString()}`}
+        value={`${commandPage.label} ${props.children?.toString() || ''}`}
         {...props}
       />
     )
@@ -76,7 +76,7 @@ export function CommandItemRootAndSearch({
     return (
       <Command.Item
         className={cx(itemStyles(), 'group', className)}
-        value={`${commandPage.label} ${props.children.toString()}`}
+        value={`${commandPage.label} ${props.children?.toString() || ''}`}
         {...props}
       />
     )

diff --git a/apps/renterd/components/Contracts/ContractContextMenu.tsx b/apps/renterd/components/Contracts/ContractContextMenu.tsx
@@ -118,6 +118,9 @@ export function ContractContextMenuContent({
       <DropdownMenuItem
         disabled={!hostAddress}
         onSelect={() => {
+          if (!hostAddress) {
+            return
+          }
           resetContractsFilters()
           setContractsFilter(addressContainsFilter(hostAddress))
           router.push(routes.contracts.index)
@@ -131,6 +134,9 @@ export function ContractContextMenuContent({
       <DropdownMenuItem
         disabled={!hostKey}
         onSelect={() => {
+          if (!hostKey) {
+            return
+          }
           resetContractsFilters()
           setContractsFilter(publicKeyContainsFilter(hostKey))
           router.push(routes.contracts.index)
@@ -145,7 +151,12 @@ export function ContractContextMenuContent({
       {blocklist.data?.find((l) => l === hostAddress) ? (
         <DropdownMenuItem
           disabled={!hostAddress}
-          onSelect={() => blocklistUpdate([], [hostAddress])}
+          onSelect={() => {
+            if (!hostAddress) {
+              return
+            }
+            blocklistUpdate([], [hostAddress])
+          }}
         >
           <DropdownMenuLeftSlot>
             <ListChecked16 />
@@ -155,7 +166,12 @@ export function ContractContextMenuContent({
       ) : (
         <DropdownMenuItem
           disabled={!hostAddress}
-          onSelect={() => blocklistUpdate([hostAddress], [])}
+          onSelect={() => {
+            if (!hostAddress) {
+              return
+            }
+            blocklistUpdate([hostAddress], [])
+          }}
         >
           <DropdownMenuLeftSlot>
             <ListChecked16 />
@@ -166,7 +182,12 @@ export function ContractContextMenuContent({
       {allowlist.data?.find((l) => l === hostKey) ? (
         <DropdownMenuItem
           disabled={!hostKey}
-          onSelect={() => allowlistUpdate([], [hostKey])}
+          onSelect={() => {
+            if (!hostKey) {
+              return
+            }
+            allowlistUpdate([], [hostKey])
+          }}
         >
           <DropdownMenuLeftSlot>
             <ListChecked16 />
@@ -176,7 +197,12 @@ export function ContractContextMenuContent({
       ) : (
         <DropdownMenuItem
           disabled={!hostKey}
-          onSelect={() => allowlistUpdate([hostKey], [])}
+          onSelect={() => {
+            if (!hostKey) {
+              return
+            }
+            allowlistUpdate([hostKey], [])
+          }}
         >
           <DropdownMenuLeftSlot>
             <ListChecked16 />
@@ -199,7 +225,12 @@ export function ContractContextMenuContent({
       </DropdownMenuItem>
       <DropdownMenuItem
         disabled={!hostKey}
-        onSelect={() => copyToClipboard(hostKey, 'host public key')}
+        onSelect={() => {
+          if (!hostKey) {
+            return
+          }
+          copyToClipboard(hostKey, 'host public key')
+        }}
       >
         <DropdownMenuLeftSlot>
           <Copy16 />
@@ -208,7 +239,12 @@ export function ContractContextMenuContent({
       </DropdownMenuItem>
       <DropdownMenuItem
         disabled={!hostAddress}
-        onSelect={() => copyToClipboard(hostAddress, 'host address')}
+        onSelect={() => {
+          if (!hostAddress) {
+            return
+          }
+          copyToClipboard(hostAddress, 'host address')
+        }}
       >
         <DropdownMenuLeftSlot>
           <Copy16 />

diff --git a/.../components/Contracts/ContractsCmd/ContractsFilterCmd/ContractFilterCmdGroups/Address.tsx b/.../components/Contracts/ContractsCmd/ContractsFilterCmd/ContractFilterCmdGroups/Address.tsx
@@ -47,7 +47,7 @@ export function AddressCmdNav({
   commandPage,
 }: {
   currentPage: Page
-  parentPage: Page
+  parentPage?: Page
   commandPage: Page
   select: () => void
 }) {

diff --git a/...ponents/Contracts/ContractsCmd/ContractsFilterCmd/ContractFilterCmdGroups/ContractSet.tsx b/...ponents/Contracts/ContractsCmd/ContractsFilterCmd/ContractFilterCmdGroups/ContractSet.tsx
@@ -47,7 +47,7 @@ export function ContractSetCmdNav({
   commandPage,
 }: {
   currentPage: Page
-  parentPage: Page
+  parentPage?: Page
   commandPage: Page
   select: () => void
 }) {

diff --git a/...omponents/Contracts/ContractsCmd/ContractsFilterCmd/ContractFilterCmdGroups/PublicKey.tsx b/...omponents/Contracts/ContractsCmd/ContractsFilterCmd/ContractFilterCmdGroups/PublicKey.tsx
@@ -47,7 +47,7 @@ export function PublicKeyCmdNav({
   commandPage,
 }: {
   currentPage: Page
-  parentPage: Page
+  parentPage?: Page
   commandPage: Page
   select: () => void
 }) {

diff --git a/...rd/components/Contracts/ContractsCmd/ContractsFilterCmd/ContractFilterCmdGroups/index.tsx b/...rd/components/Contracts/ContractsCmd/ContractsFilterCmd/ContractFilterCmdGroups/index.tsx
@@ -1,16 +1,14 @@
 import { ExpiryCmdGroup } from './Expiry'
-import { ContractData } from '../../../../../contexts/contracts/types'
 import { FormationCmdGroup } from './Formation'
 import { RenewCmdGroup } from './Renew'
 import { Page } from '../../../../CmdRoot/types'
-import { ClientFilterItem } from '@siafoundation/design-system'
 import { AddressCmdGroup } from './Address'
 import { PublicKeyCmdGroup } from './PublicKey'
 import { ContractSetCmdGroup } from './ContractSet'
 
 type Props = {
   currentPage: Page
-  select?: (filter?: ClientFilterItem<ContractData>) => void
+  select: () => void
 }
 
 export function ContractFilterCmdGroups({ currentPage, select }: Props) {

diff --git a/apps/renterd/components/Contracts/ContractsFilterContractSetDialog.tsx b/apps/renterd/components/Contracts/ContractsFilterContractSetDialog.tsx
@@ -17,7 +17,7 @@ export function contractSetsIncludeFilter(contractSet: string) {
     value: contractSet,
     label: `contract in set ${contractSet}`,
     fn: (d: ContractData) => {
-      return d.contractSets?.includes(contractSet)
+      return !!d.contractSets?.includes(contractSet)
     },
   }
 }
@@ -80,6 +80,9 @@ export function ContractsFilterContractSetDialog({
 
   const onValid = useCallback(
     (values: Values) => {
+      if (!values.contractSet) {
+        return
+      }
       setFilter(contractSetsIncludeFilter(values.contractSet))
       closeAndReset()
     },

diff --git a/apps/renterd/components/Contracts/ContractsFilterMenu/index.tsx b/apps/renterd/components/Contracts/ContractsFilterMenu/index.tsx
@@ -20,7 +20,7 @@ export function ContractsFilterMenu() {
   const [pages, setPages] = useState<Page[]>([])
   const currentPage = pages[pages.length - 1]
   const rootPage = pages.length === 0
-  const rootRef = useRef(null)
+  const rootRef = useRef<HTMLDivElement>(null)
   const inputRef = useRef<HTMLInputElement>(null)
 
   const pushPage = useCallback(
@@ -35,8 +35,8 @@ export function ContractsFilterMenu() {
   }, [setPages])
 
   useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (rootRef.current && !rootRef.current.contains(event.target)) {
+    const handleClickOutside = (event: Event) => {
+      if (rootRef.current && !rootRef.current.contains(event.target as Node)) {
         setOpen(false)
       }
     }

diff --git a/apps/renterd/components/Files/Columns/FilesHealthColumn/FilesHealthColumnContents.tsx b/apps/renterd/components/Files/Columns/FilesHealthColumn/FilesHealthColumnContents.tsx
@@ -82,7 +82,7 @@ export function FilesHealthColumnContents({
       displayHealth={displayHealth}
       label={label}
       minShards={slabs.find((s) => s.minShards)?.minShards}
-      totalShards={slabs.find((s) => s.shards)?.shards.length}
+      totalShards={slabs.find((s) => s.shards)?.shards?.length}
     >
       {slabs.map((slab) => (
         <div key={slab.id} className="flex justify-between gap-2">
@@ -96,7 +96,7 @@ export function FilesHealthColumnContents({
           </Text>
           <Text size="12" className="flex items-center">
             {slab.isPartialSlab
-              ? `${slab.contractSetShards}/${slab.shards.length}`
+              ? `${slab.contractSetShards}/${slab.shards?.length}`
               : 'partial slab'}
           </Text>
         </div>

diff --git a/apps/renterd/components/Files/FilesCmd/FilesSearchCmd/index.tsx b/apps/renterd/components/Files/FilesCmd/FilesSearchCmd/index.tsx
@@ -62,9 +62,9 @@ export function FilesSearchCmd({
             currentPage={currentPage}
             key={key}
             onSelect={() => {
-              beforeSelect()
+              beforeSelect?.()
               navigateToModeSpecificFiltering(searchBucket + key)
-              afterSelect()
+              afterSelect?.()
             }}
             value={key}
           >

diff --git a/apps/renterd/components/Files/FilesCmd/index.tsx b/apps/renterd/components/Files/FilesCmd/index.tsx
@@ -54,7 +54,7 @@ export function FilesCmd({
               router.push(routes.buckets.index)
             }
             closeDialog()
-            afterSelect()
+            afterSelect?.()
           }}
         >
           View files
@@ -64,7 +64,7 @@ export function FilesCmd({
           commandPage={commandPage}
           onSelect={() => {
             pushPage(filesSearchPage)
-            afterSelect()
+            afterSelect?.()
           }}
         >
           Search files

diff --git a/apps/renterd/components/FilesDirectory/EmptyState/StateNoneYetBuckets.tsx b/apps/renterd/components/FilesDirectory/EmptyState/StateNoneYetBuckets.tsx
@@ -0,0 +1,27 @@
+import { Button, Text } from '@siafoundation/design-system'
+import { Add16, BucketIcon } from '@siafoundation/react-icons'
+import { useDialog } from '../../../contexts/dialog'
+
+export function StateNoneYetBuckets() {
+  const { openDialog } = useDialog()
+  return (
+    <div className="flex flex-col gap-10 justify-center items-center h-[400px] cursor-pointer">
+      <Text>
+        <BucketIcon className="scale-[200%]" />
+      </Text>
+      <div className="flex flex-col gap-3 items-center">
+        <Text color="subtle" className="text-center max-w-[500px]">
+          Create a bucket to get started. Buckets are distinct storage areas
+          that you can use to organize your files.
+        </Text>
+        <Button
+          onClick={() => openDialog('filesCreateBucket')}
+          tip="Create bucket"
+        >
+          <Add16 />
+          Create bucket
+        </Button>
+      </div>
+    </div>
+  )
+}
diff --git a/...ilesDirectory/EmptyState/StateNoneYet.tsx → ...irectory/EmptyState/StateNoneYetFiles.tsx b/...ilesDirectory/EmptyState/StateNoneYet.tsx → ...irectory/EmptyState/StateNoneYetFiles.tsx
@@ -3,7 +3,7 @@ import { CloudUpload32 } from '@siafoundation/react-icons'
 import { routes } from '../../../config/routes'
 import { useFilesManager } from '../../../contexts/filesManager'
 
-export function StateNoneYet() {
+export function StateNoneYetFiles() {
   const {
     activeBucketName: activeBucket,
     activeDirectory,