Refactor multiple old files to TypeScript

src/App.js

@@ -22,7 +22,7 @@ import { getClient } from '/libs/client'
 import { getColors } from '/ui/colors'
 import { localMethods } from '/libs/intents/localMethods'
 import { persistor, store } from '/redux/store'
-import { useAppBootstrap } from '/hooks/useAppBootstrap.js'
+import { useAppBootstrap } from '/hooks/useAppBootstrap'
 import { useGlobalAppState } from '/hooks/useGlobalAppState'
 import { useCookieResyncOnResume } from '/hooks/useCookieResyncOnResume'
 import { useCozyEnvironmentOverride } from '/hooks/useCozyEnvironmentOverride'

src/app/domain/backup/services/getMedias.ts

@@ -100,6 +100,7 @@ export const formatMediasFromPhotoIdentifier = (
   if (subTypes.includes('PhotoLive')) {
     return [
       {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
         id,
         name: getPathWithoutExtension(filename) + '.MOV',
         uri: uri,
@@ -113,6 +114,7 @@ export const formatMediasFromPhotoIdentifier = (
         fileSize: null
       },
       {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
         id,
         name: filename,
         uri: uri,
@@ -130,6 +132,7 @@ export const formatMediasFromPhotoIdentifier = (
 
   return [
     {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
       id,
       name: filename,
       uri: uri,

src/app/domain/geolocation/helpers/index.ts

@@ -0,0 +1,31 @@
+import BackgroundGeolocation from 'react-native-background-geolocation'
+
+import Minilog from 'cozy-minilog'
+
+const log = Minilog('📍 Geolocation')
+
+export const getTs = (location: { timestamp: string }): number => {
+  return parseISOString(location.timestamp).getTime() / 1000
+}
+
+export const parseISOString = (ISOString: string): Date => {
+  const b = ISOString.split(/\D+/)
+  // @ts-expect-error - Date.UTC() expects number arguments, not stringed numbers
+  // But at the time of this refactoring, not feeling safe enough to change this
+  return new Date(Date.UTC(b[0], --b[1], b[2], b[3], b[4], b[5], b[6]))
+}
+
+const Logger = BackgroundGeolocation.logger
+
+export const Log = (message: string): void => {
+  log.debug(message)
+  Logger.debug(message)
+}
+
+export const getAllLogs = async (): Promise<string> => {
+  return Logger.getLog()
+}
+
+export const sendLogFile = (): Promise<boolean> => {
+  return Logger.emailLog('')
+}

src/app/view/Loading/RemountProgress.tsx

@@ -16,7 +16,7 @@ export const RemountProgress = (): JSX.Element => {
 }
 
 const progressBarConfig = {
-  width: null,
+  width: undefined,
   indeterminate: true,
   unfilledColor: palette.Grey[200],
   color: palette.Primary[600],

src/components/Bar.js → src/components/Bar.tsx

@@ -1,14 +1,50 @@
 // This was taken from https://github.com/oblador/react-native-progress because hacks were needed
 // At this time the fastest was just to copy the file, it has no dependencies
 
-import React, { Component } from 'react'
-import { Animated, Easing, View, I18nManager } from 'react-native'
+import React, { Component, ReactElement } from 'react'
+import {
+  Animated,
+  Easing,
+  View,
+  I18nManager,
+  ViewStyle,
+  StyleProp
+} from 'react-native'
 
 const INDETERMINATE_WIDTH_FACTOR = 0.6 // 0.3 to 0.6
 const BAR_WIDTH_ZERO_POSITION =
   INDETERMINATE_WIDTH_FACTOR / (1 + INDETERMINATE_WIDTH_FACTOR)
 
-export default class ProgressBar extends Component {
+interface ProgressBarProps {
+  animated?: boolean
+  borderRadius?: number
+  borderWidth?: number
+  color?: string
+  height?: number
+  indeterminate?: boolean
+  indeterminateAnimationDuration?: number
+  progress?: number
+  width?: number
+  useNativeDriver?: boolean
+  animationConfig?: { bounciness: number }
+  animationType?: string
+  onLayout?: (event: unknown) => void
+  unfilledColor?: string
+  borderColor?: string
+  style?: StyleProp<ViewStyle>
+  children?: ReactElement
+}
+
+interface ProgressBarState {
+  width: number
+  progress: Animated.Value
+  animationValue: Animated.Value
+}
+
+export default class ProgressBar extends Component<
+  ProgressBarProps,
+  ProgressBarState
+> {
   static defaultProps = {
     animated: true,
     borderRadius: 4,
@@ -24,9 +60,9 @@ export default class ProgressBar extends Component {
     animationType: 'spring'
   }
 
-  constructor(props) {
+  constructor(props: ProgressBarProps) {
     super(props)
-    const progress = Math.min(Math.max(props.progress, 0), 1)
+    const progress = Math.min(Math.max(props.progress ?? 0, 0), 1)
     this.state = {
       width: 0,
       progress: new Animated.Value(
@@ -36,20 +72,20 @@ export default class ProgressBar extends Component {
     }
   }
 
-  componentDidMount() {
+  componentDidMount(): void {
     if (this.props.indeterminate) {
       this.animate()
     }
   }
 
-  componentDidUpdate(prevProps) {
+  componentDidUpdate(prevProps: ProgressBarProps): void {
     if (prevProps.indeterminate !== this.props.indeterminate) {
       if (this.props.indeterminate) {
         this.animate()
       } else {
         Animated.spring(this.state.animationValue, {
           toValue: BAR_WIDTH_ZERO_POSITION,
-          useNativeDriver: this.props.useNativeDriver
+          useNativeDriver: this.props.useNativeDriver ?? false
         }).start()
       }
     }
@@ -59,22 +95,34 @@ export default class ProgressBar extends Component {
     ) {
       const progress = this.props.indeterminate
         ? INDETERMINATE_WIDTH_FACTOR
-        : Math.min(Math.max(this.props.progress, 0), 1)
+        : Math.min(Math.max(this.props.progress ?? 0, 0), 1)
 
       if (this.props.animated) {
         const { animationType, animationConfig } = this.props
-        Animated[animationType](this.state.progress, {
+        const animationFunction = Animated[
+          animationType as keyof typeof Animated
+        ] as (
+          value: Animated.Value,
+          config: Animated.SpringAnimationConfig
+        ) => Animated.CompositeAnimation
+        animationFunction(this.state.progress, {
           ...animationConfig,
           toValue: progress,
-          useNativeDriver: this.props.useNativeDriver
-        }).start()
+          useNativeDriver: this.props.useNativeDriver ?? false
+        }).start((endState: { finished: boolean }) => {
+          if (endState.finished && this.props.indeterminate) {
+            this.animate()
+          }
+        })
       } else {
         this.state.progress.setValue(progress)
       }
     }
   }
 
-  handleLayout = event => {
+  handleLayout = (event: {
+    nativeEvent: { layout: { width: number } }
+  }): void => {
     if (!this.props.width) {
       this.setState({ width: event.nativeEvent.layout.width })
     }
@@ -83,22 +131,22 @@ export default class ProgressBar extends Component {
     }
   }
 
-  animate() {
+  animate(): void {
     this.state.animationValue.setValue(0)
     Animated.timing(this.state.animationValue, {
       toValue: 1,
       duration: this.props.indeterminateAnimationDuration,
       easing: Easing.linear,
       isInteraction: false,
-      useNativeDriver: this.props.useNativeDriver
+      useNativeDriver: this.props.useNativeDriver ?? false
     }).start(endState => {
       if (endState.finished) {
         this.animate()
       }
     })
   }
 
-  render() {
+  render(): JSX.Element {
     const {
       borderColor,
       borderRadius,
@@ -112,15 +160,16 @@ export default class ProgressBar extends Component {
       ...restProps
     } = this.props
 
-    const innerWidth = Math.max(0, width || this.state.width) - borderWidth * 2
+    const innerWidth =
+      Math.max(0, width ?? this.state.width) - (borderWidth ?? 1) * 2
     const containerStyle = {
       width,
       borderWidth,
-      borderColor: borderColor || color,
+      borderColor: borderColor ?? color,
       borderRadius,
       overflow: 'hidden',
       backgroundColor: unfilledColor
-    }
+    } as ViewStyle
     const progressStyle = {
       backgroundColor: color,
       borderRadius: 100, // Added

src/components/ProgressContainer.tsx

@@ -10,7 +10,7 @@ import { styles } from '/components/ProgressContainer.styles'
 const colors = getColors()
 
 const progressBarConfig = {
-  width: null,
+  width: undefined,
   indeterminate: false,
   unfilledColor: palette.Grey[200],
   color: colors.primaryColor,

src/components/html/WelcomePage.js → src/components/html/WelcomePage.ts

@@ -7,7 +7,10 @@ const colors = getColors()
 const body = `
   <div class="d-flex flex-grow-1 flex-column justify-content-center text-center">
     <div class="mb-4">
-      ${getLogoSvg({ backgroundColor: colors.primaryColor })}
+      ${getLogoSvg({
+        backgroundColor: colors.primaryColor,
+        foregroundColor: colors.paperBackgroundColor
+      })}
     </div>
 
     <div class="h2 mb-3">${t('screens.welcome.title')}</div>

src/components/makeHTML.js → src/components/makeHTML.ts

@@ -5,7 +5,13 @@ import { themeCss } from '/screens/login/components/assets/common/css/cssTheme'
 
 import { getLocalFonts } from './getLocalFonts'
 
-const makeDOM = ({ body, isInverted }) => {
+const makeDOM = ({
+  body,
+  isInverted
+}: {
+  body: string
+  isInverted: boolean
+}): string => {
   const { navbarHeight, statusBarHeight } = getDimensions()
 
   const theme = isInverted ? 'theme-inverted' : ''
@@ -32,10 +38,10 @@ const makeDOM = ({ body, isInverted }) => {
 `
 }
 
-export const makeHTML = body => {
+export const makeHTML = (body: string): string => {
   return makeDOM({ body, isInverted: false })
 }
 
-export const makeInvertedHTML = body => {
+export const makeInvertedHTML = (body: string): string => {
   return makeDOM({ body, isInverted: true })
 }

src/components/ui/icons/BackTo.jsx → src/components/ui/icons/BackTo.tsx

@@ -7,8 +7,12 @@ const xml = `
 </svg>
 `
 
-class SVG extends React.Component {
-  render() {
+class SVG extends React.Component<{
+  width: number
+  height: number
+  color: string
+}> {
+  render(): JSX.Element {
     return (
       <SvgXml
         xml={xml}

src/components/webviews/CozyWebview.spec.js

@@ -18,7 +18,7 @@ jest.mock('react-native-file-viewer', () => ({
 jest.mock('@react-native-cookies/cookies', () => ({
   set: jest.fn()
 }))
-jest.mock('/libs/RootNavigation.js', () => ({
+jest.mock('/libs/RootNavigation', () => ({
   navigationRef: {
     getCurrentRoute: jest.fn().mockReturnValue({ name: 'home' })
   }
@@ -65,7 +65,7 @@ jest.mock('@react-navigation/native', () => ({
   useIsFocused: () => mockUseIsFocused()
 }))
 
-jest.mock('../../hooks/useSession.js', () => ({
+jest.mock('../../hooks/useSession', () => ({
   useSession: () => ({
     shouldInterceptAuth: false,
     handleInterceptAuth: jest.fn(),

src/components/webviews/jsInteractions/jsLogInterception.spec.js → src/components/webviews/jsInteractions/jsLogInterception.spec.tsx

@@ -1,16 +1,23 @@
-/* eslint-disable no-console */
+/* eslint-disable no-console */ // we're mocking console
 import { tryConsole } from './jsLogInterception'
 
 const logId = 'logId'
 const logger = {
   log: jest.fn(),
   debug: jest.fn()
+} as unknown as MiniLogger
+
+type MakePayload = ({ type, args }: { type: string; args?: string[] }) => {
+  nativeEvent: {
+    data: string
+  }
 }
-const makePayload = ({ type, args }) => ({
+
+const makePayload: MakePayload = ({ type, args }) => ({
   nativeEvent: {
     data: JSON.stringify({
       type: 'Console',
-      data: { type, log: ['one', 'two', 'three', ...(args || [])] }
+      data: { type, log: ['one', 'two', 'three', ...(args ?? [])] }
     })
   }
 })
@@ -66,6 +73,7 @@ it('handles post-me case', () => {
 it('recovers when erroring', () => {
   console.error = jest.fn()
 
+  // @ts-expect-error - we're testing error handling
   tryConsole()
 
   expect(console.error).toHaveBeenCalledTimes(1)