Ts migration

pages/package/[...packageString]/components/ExportAnalysisSection/ExportAnalysisSection.js → pages/package/[...packageString]/components/ExportAnalysisSection/ExportAnalysisSection.tsx

@@ -5,6 +5,7 @@ import API from '../../../../../client/api'
 import SearchIcon from '../../../../../client/components/Icons/SearchIcon'
 import JumpingDots from '../../../../../client/components/JumpingDots'
 import { formatSize, resolveBuildError } from '../../../../../utils'
+import { Asset } from '../../../../../types'
 
 const State = {
   TBD: 'tbd',
@@ -14,7 +15,7 @@ const State = {
   REJECTED: 'rejected',
 }
 
-function getBGClass(ratio) {
+function getBGClass(ratio: number) {
   if (ratio < 0.05) {
     return 'low-1'
   } else if (ratio < 0.15) {
@@ -32,9 +33,16 @@ function getBGClass(ratio) {
   }
 }
 
-class ExportPill extends React.Component {
+type ExportPillProps = {
+  name: string
+  size?: number
+  totalSize: number
+  isLoading: boolean
+}
+
+class ExportPill extends React.Component<ExportPillProps> {
   render() {
-    const { name, size, totalSize, isLoading } = this.props
+    const { name, size = 0, totalSize, isLoading } = this.props
     return (
       <li className="export-analysis-section__pill export-analysis-section__dont-break">
         <div
@@ -63,9 +71,15 @@ class ExportPill extends React.Component {
   }
 }
 
-function ExportList({ exports, totalSize, isLoading }) {
+type ExportListProps = {
+  exports: Asset[]
+  totalSize: number
+  isLoading: boolean
+}
+
+function ExportList({ exports, totalSize, isLoading }: ExportListProps) {
   const shouldShowLabels = exports.length > 20
-  const exportDictionary = {}
+  const exportDictionary: { [x: string]: Asset[] } = {}
   let curIndex = 0
 
   exports.forEach(exp => {
@@ -92,7 +106,7 @@ function ExportList({ exports, totalSize, isLoading }) {
                   size={exportDictionary[letter][0].gzip}
                   totalSize={totalSize}
                   name={exportDictionary[letter][0].name}
-                  path={exportDictionary[letter][0].path}
+                  // path={exportDictionary[letter][0].path}
                   key={exportDictionary[letter][0].name}
                   isLoading={curIndex++ < 40 && isLoading}
                 />
@@ -105,7 +119,7 @@ function ExportList({ exports, totalSize, isLoading }) {
                   size={exp.gzip}
                   totalSize={totalSize}
                   name={exp.name}
-                  path={exp.path}
+                  // path={exp.path}
                   key={exp.name}
                   isLoading={curIndex++ < 40 && isLoading}
                 />
@@ -117,7 +131,11 @@ function ExportList({ exports, totalSize, isLoading }) {
   )
 }
 
-function InputExportFilter({ onChange }) {
+type InputExportFilterProps = {
+  onChange: (text: string) => void
+}
+
+function InputExportFilter({ onChange }: InputExportFilterProps) {
   return (
     <div className="export-analysis-section__filter-input-container">
       <input
@@ -131,7 +149,36 @@ function InputExportFilter({ onChange }) {
   )
 }
 
-class ExportAnalysisSection extends Component {
+type ExportAnalysisSectionProps = {
+  result: {
+    description: string
+    gzip: number
+    hasJSModule: string
+    hasJSNext: boolean
+    hasSideEffects: boolean
+    isModuleType: boolean
+    name: string
+    parse: any
+    peerDependencies: string[]
+    repository: string
+    scoped: boolean
+    size: number
+    version: string
+  }
+}
+
+type ExportAnalysisSectionState = {
+  analysisState: string
+  exports: { [x: string]: string }
+  assets: Asset[]
+  filterText: string
+  resultError: any
+}
+
+class ExportAnalysisSection extends Component<
+  ExportAnalysisSectionProps,
+  ExportAnalysisSectionState
+> {
   state = {
     analysisState: State.TBD,
     exports: {},
@@ -153,7 +200,7 @@ class ExportAnalysisSection extends Component {
     const { name, version } = result
     const packageString = `${name}@${version}`
     const startTime = Date.now()
-    let sizeStartTime
+    let sizeStartTime: number
 
     this.setState({ analysisState: State.IN_PROGRESS })
 
@@ -215,7 +262,7 @@ class ExportAnalysisSection extends Component {
       })
   }
 
-  handleFilterInputChange = value => {
+  handleFilterInputChange = (value: string) => {
     this.setState({ filterText: value })
   }
 

pages/package/[...packageString]/components/InterLinksSection/InterLinksSection.js → pages/package/[...packageString]/components/InterLinksSection/InterLinksSection.tsx

@@ -5,12 +5,13 @@ import {
 } from '../../../../../utils/common.utils'
 import API from '../../../../../client/api'
 import InterLinksSectionCard from './InterLinksSectionCard'
+import { PackageSuggestion } from '../../../../../types'
 
-function usePackagesFromSameScope(packageName) {
+function usePackagesFromSameScope(packageName: string) {
   const { scope } = parsePackageString(packageName)
 
-  const [morePackages, setMorePackages] = useState([])
-  const getAgeScore = result =>
+  const [morePackages, setMorePackages] = useState<PackageSuggestion[]>([])
+  const getAgeScore = (result: PackageSuggestion) =>
     Math.min(1 / Math.log(daysFromToday(result.package.date)), 1)
 
   useEffect(() => {
@@ -29,7 +30,11 @@ function usePackagesFromSameScope(packageName) {
   return morePackages
 }
 
-const InterLinksSection = props => {
+interface InterLinksSectionProps {
+  packageName: string
+}
+
+const InterLinksSection: React.FC<InterLinksSectionProps> = props => {
   const { scope } = parsePackageString(props.packageName)
   const morePackages = usePackagesFromSameScope(props.packageName)
 

pages/package/[...packageString]/components/InterLinksSection/InterLinksSectionCard/InterLinksSectionCard.js → pages/package/[...packageString]/components/InterLinksSection/InterLinksSectionCard/InterLinksSectionCard.tsx

@@ -3,7 +3,15 @@ import Link from 'next/link'
 import { formatDistanceToNow } from 'date-fns'
 import React from 'react'
 
-export default function InterLinksSectionCard(props) {
+interface InterLinksSectionCardProps {
+  description: string
+  name: string
+  date: string | number | Date
+}
+
+export default function InterLinksSectionCard(
+  props: InterLinksSectionCardProps
+) {
   const { description, name, date } = props
 
   return (

pages/package/[...packageString]/components/SimilarPackagesSection/SimilarPackagesSection.js → pages/package/[...packageString]/components/SimilarPackagesSection/SimilarPackagesSection.tsx

@@ -1,7 +1,14 @@
 import React, { Component } from 'react'
 import SimilarPackageCard from '../../../../../client/components/SimilarPackageCard/SimilarPackageCard'
+import { PackageInfo } from '../../../../../types'
 
-class SimilarPackagesSection extends Component {
+type SimilarPackagesSectionProps = {
+  packs: PackageInfo[]
+  category: string
+  comparisonGzip: number
+}
+
+class SimilarPackagesSection extends Component<SimilarPackagesSectionProps> {
   render() {
     const { packs, category, comparisonGzip } = this.props
     return (

pages/package/[...packageString]/components/TreemapSection.js → pages/package/[...packageString]/components/TreemapSection.tsx

@@ -2,8 +2,15 @@ import React, { Component } from 'react'
 import { formatSize } from 'utils'
 import colors from 'client/config/colors'
 import { Treemap, TreemapSquare } from 'client/components/Treemap'
+import { DependencySize } from '../../../../types'
 
-class TreemapSection extends Component {
+type TreemapSectionProps = {
+  packageName: string
+  packageSize: number
+  dependencySizes: DependencySize[]
+}
+
+class TreemapSection extends Component<TreemapSectionProps> {
   state = {
     width: 0,
     height: 0,
@@ -77,7 +84,7 @@ class TreemapSection extends Component {
       }))
 
     depdendenciesCopy.sort((depA, depB) => {
-      return depB.percentShare - depA.percentShare
+      return (depB.percentShare || 0) - (depA.percentShare || 0)
     })
 
     let compactedDependencies = []
@@ -93,11 +100,11 @@ class TreemapSection extends Component {
         0
       )
       const percentShare = otherDependencies.reduce(
-        (acc, dep) => acc + dep.percentShare,
+        (acc, dep) => acc + (dep.percentShare || 0),
         0
       )
       const sizeShare = otherDependencies.reduce(
-        (acc, dep) => acc + dep.sizeShare,
+        (acc, dep) => acc + (dep.sizeShare || 0),
         0
       )
 
@@ -110,7 +117,7 @@ class TreemapSection extends Component {
         tooltip: otherDependencies
           .map(
             dep =>
-              `${dep.name} ｜ ${dep.percentShare.toFixed(
+              `${dep.name} ｜ ${(dep.percentShare || 0).toFixed(
                 1
               )}% ｜ ~ ${getFormattedSize(dep.sizeShare)} min`
           )
@@ -136,8 +143,9 @@ class TreemapSection extends Component {
               data-balloon-pos="top"
               className="treemap__square"
             >
-              {dep.percentShare > ellipsizeLimit &&
-              dep.name.length < dep.percentShare * (12 / ellipsizeLimit) ? (
+              {(dep.percentShare || 0) > ellipsizeLimit &&
+              dep.name.length <
+                (dep.percentShare || 0) * (12 / ellipsizeLimit) ? (
                 <div className="treemap__content">
                   <div className="treemap__label">
                     {dep.isSelf || dep.isOthers ? (
@@ -156,11 +164,11 @@ class TreemapSection extends Component {
                     className="treemap__percent"
                     style={{
                       fontSize: `${
-                        14 + Math.min(dep.percentShare * 1.2, 25)
+                        14 + Math.min((dep.percentShare || 0) * 1.2, 25)
                       }px`,
                     }}
                   >
-                    {dep.percentShare.toFixed(1)}
+                    {(dep.percentShare || 0).toFixed(1)}
                     <span className="treemap__percent-sign">%</span>
                   </div>
                 </div>

pages/scan-results/ScanResults.js → pages/scan-results/ScanResults.tsx

@@ -13,8 +13,21 @@ import { parsePackageString } from '../../utils/common.utils'
 
 import API from '../../client/api'
 import { getTimeFromSize } from '../../utils'
+import { Asset } from '../../types'
+
+type ResultCardProps = {
+  pack: {
+    result: Asset
+    promiseState: string
+    error: {
+      code: string
+      message: string
+    }
+  }
+  index: number
+}
 
-class ResultCard extends Component {
+class ResultCard extends Component<ResultCardProps> {
   render() {
     const { pack, index } = this.props
 
@@ -32,14 +45,14 @@ class ResultCard extends Component {
           <div className="scan-results__stat-container">
             <Stat
               className="scan-results__stat-item"
-              value={pack.result.size}
+              value={pack.result.size || 0}
               type={Stat.type.SIZE}
               label="Min"
               compact
             />
             <Stat
               className="scan-results__stat-item"
-              value={pack.result.gzip}
+              value={pack.result.gzip || 0}
               type={Stat.type.SIZE}
               label="Min + GZIP"
               compact
@@ -167,7 +180,7 @@ class ScanResults extends Component {
 
     queue.onIdle().then(() => {
       const successfulBuildCount = packages.reduce(
-        (curSum, nextPack) =>
+        (curSum: number, nextPack) =>
           nextPack.promiseState === 'fulfilled' ? curSum + 1 : curSum,
         0
       )
@@ -235,12 +248,14 @@ class ScanResults extends Component {
     const packages = this.sortPackages()
 
     const totalMinSize = packages.reduce(
-      (curTotal, pack) => curTotal + (pack.result ? pack.result.size : 0),
+      (curTotal: number, pack) =>
+        curTotal + (pack.result ? pack.result.size : 0),
       0
     )
 
     const totalGZIPSize = packages.reduce(
-      (curTotal, pack) => curTotal + (pack.result ? pack.result.gzip : 0),
+      (curTotal: number, pack) =>
+        curTotal + (pack.result ? pack.result.gzip : 0),
       0
     )
 

pages/scan/Scan.js → pages/scan/Scan.tsx

@@ -8,7 +8,18 @@ import Dropzone from 'react-dropzone'
 import Router from 'next/router'
 import * as semver from 'semver'
 
-export default class Scan extends Component {
+type Package = {
+  name: string
+  resolvedVersion: string
+  versionRange: string
+}
+
+type ScanState = {
+  packages: Package | null
+  selectedPackages: Package[]
+}
+
+export default class Scan extends Component<_, ScanState> {
   state = {
     packages: null,
     selectedPackages: [],
@@ -18,7 +29,7 @@ export default class Scan extends Component {
     Analytics.pageView('scan')
   }
 
-  resolveVersionFromRange = range => {
+  resolveVersionFromRange = (range: string) => {
     const rangeSet = new semver.Range(range).set
     return rangeSet[0][0].semver.version
   }
@@ -27,10 +38,12 @@ export default class Scan extends Component {
     const checkedInputs =
       this.packageSelectionContainer.querySelectorAll('input:checked')
 
-    const selectedPackages = Array.from(checkedInputs).map(({ value }) => {
-      const [name, resolvedVersion] = value.split('#')
-      return { name, resolvedVersion }
-    })
+    const selectedPackages: Package[] = Array.from(checkedInputs).map(
+      ({ value }) => {
+        const [name, resolvedVersion] = value.split('#')
+        return { name, resolvedVersion }
+      }
+    )
 
     this.setState({ selectedPackages })
   }
@@ -39,7 +52,7 @@ export default class Scan extends Component {
     this.setSelectedPackages()
   }
 
-  handleDropAccepted = ([file]) => {
+  handleDropAccepted = ([file]: [file: File]) => {
     const reader = new FileReader()
     reader.onload = () => {
       try {