Updated dependencies and added human time display to consentos

App.tsx

@@ -32,14 +32,14 @@ export default function App (): JSX.Element {
       .catch(setError)
   }, [])
   if (error !== undefined) {
-    return <Text>{`Error while initing:\n${this.state.error}`}</Text>
+    return <Text>{`Error while initing:\n${String(this.state.error)}`}</Text>
   }
   if (loaded !== undefined) {
     try {
       return <SafeAreaProvider><loaded.ConsentoApp /></SafeAreaProvider>
     // eslint-disable-next-line no-unreachable
     } catch (err) {
-      return <Text>{`Error: ${err}`}</Text>
+      return <Text>{`Error: ${String(err)}`}</Text>
     }
   }
   return <SafeAreaProvider><Loading /></SafeAreaProvider>

package.json

@@ -46,6 +46,7 @@
     "react-navigation": "^4.0.10",
     "react-navigation-stack": "^1.10.3",
     "react-navigation-tabs": "^2.6.2",
+    "readable-timespan": "^2.1.0",
     "sharp-cli": "^1.13.1"
   },
   "devDependencies": {
@@ -61,19 +62,19 @@
     "enzyme-adapter-react-16": "^1.15.2",
     "eslint": "^6.8.0",
     "eslint-config-standard-react": "^9.2.0",
-    "eslint-config-standard-with-typescript": "^11.0.1",
+    "eslint-config-standard-with-typescript": "^12.0.1",
     "eslint-plugin-import": "^2.20.0",
     "eslint-plugin-node": "^11.0.0",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-react": "^7.18.0",
     "eslint-plugin-standard": "^4.0.1",
     "expo-cli": "^3.11.7",
-    "jest": "^24.9.0",
+    "jest": "^25.1.0",
     "jest-environment-enzyme": "^7.1.2",
     "jest-enzyme": "^7.1.2",
     "jest-expo": "^36.0.1",
     "jetifier": "^1.6.5",
-    "ts-jest": "^24.3.0",
+    "ts-jest": "^25.0.0",
     "typescript": "^3.7.5",
     "unimodules-permissions-interface": "~5.0.0"
   },

src/model/Consento.ts

@@ -117,6 +117,7 @@ function diffSubscriptions (stored: ISubscriptionMap, current: ISubscriptionMap)
   }
   const goneSubscriptions = Array.from(goneReceiveKeys).map(receiveKey => {
     const subscription = stored[receiveKey]
+    // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
     delete stored[receiveKey]
     return subscription
   })
@@ -224,7 +225,7 @@ export class Consento extends Model({
             if (message.type === 'success') {
               const subscription = subscriptions[message.channelIdBase64]
               if (subscription === undefined) {
-                console.log(`Received notification for ${message.channelIdBase64} but there was no subscriber ${encryptedMessage}?!`)
+                console.log(`Received notification for ${message.channelIdBase64} but there was no subscriber ${String(encryptedMessage)}?!`)
                 return
               }
               console.log(`Received notification: ${message.channelIdBase64}`)
@@ -265,6 +266,7 @@ export class Consento extends Model({
                   .subscribe(receivers)
                   .catch(subscribeError => {
                     for (const subscription of newSubscriptions) {
+                      // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
                       delete subscriptions[subscription.receiver.receiveKey]
                     }
                     console.log({ subscribeError })

src/model/User.ts

@@ -35,7 +35,7 @@ export const vaultRefInUser = customRef<Vault>(`${Vault.$modelType}#inUser`, {
   }
 })
 
-export const becomeUnlockeeRefInUser = customRef<ConsentoBecomeLockee>(`${ConsentoBecomeLockee}#inUser`, {
+export const becomeUnlockeeRefInUser = customRef<ConsentoBecomeLockee>(`${ConsentoBecomeLockee.$modelType}#inUser`, {
   resolve (ref: Ref<ConsentoBecomeLockee>): ConsentoBecomeLockee {
     return findParentUser(ref)?.findBecomeLockee(ref.id)
   }

src/model/VaultData.ts

@@ -183,7 +183,7 @@ export class VaultData extends Model({
     let filename: string
     do {
       index += 1
-      filename = `Untitled-${index}`
+      filename = `Untitled-${index.toString()}`
     } while (!this.isUnusedFilename(filename))
     return filename
   }

src/screens/Consentos.tsx

@@ -13,6 +13,7 @@ import Svg, { Circle, Rect, G } from 'react-native-svg'
 import { elementConsentosLockeeIdle } from '../styles/component/elementConsentosLockeeIdle'
 import { map } from '../util/map'
 import { ConsentoContext } from '../model/Consento'
+import { useHumanSince } from '../util/useHumanSince'
 
 const cardMargin = screen02Consentos.b.place.top - screen02Consentos.a.place.bottom
 
@@ -25,12 +26,7 @@ const accessCardStyle: ViewStyle = {
   ...elementConsentosBase.background.borderStyle()
 }
 
-function humanTime (time: number): string {
-  // TODO!
-  return String(time)
-}
-
-const viewBox = `0 0 ${elementConsentosLockeeIdle.width} ${elementConsentosLockeeIdle.height}`
+const viewBox = `0 0 ${elementConsentosLockeeIdle.width.toString()} ${elementConsentosLockeeIdle.height.toString()}`
 const lockeeCardStyle: ViewStyle = {
   position: 'relative',
   width: elementConsentosLockeeIdle.width,
@@ -78,7 +74,7 @@ const BecomeLockee = observer(({ consento }: { consento: ConsentoBecomeLockee })
       </G>
     </Svg>
     <elementConsentosLockeeIdle.vaultIcon.Render />
-    <elementConsentosLockeeIdle.lastAccess.Render />
+    <elementConsentosLockeeIdle.lastAccess.Render value={useHumanSince(consento.creationTime)} />
     <elementConsentosLockeeIdle.relationName.Render value={consento.relationName} />
     <elementConsentosLockeeIdle.relationID.Render value={consento.relationHumanId} />
     <elementConsentosLockeeIdle.question.Render />
@@ -89,7 +85,7 @@ const BecomeLockee = observer(({ consento }: { consento: ConsentoBecomeLockee })
 
 const UnlockVault = observer(({ consento }: { consento: ConsentoUnlockVault }) => {
   return <View style={accessCardStyle}>
-    <elementConsentosBase.lastAccess.Render value={humanTime(consento.time)} />
+    <elementConsentosBase.lastAccess.Render value={useHumanSince(consento.time)} />
     <elementConsentosBase.relationName.Render value={consento.relationName} style={{ ...elementConsentosBase.relationName.place.size(), backgroundColor: '#00000000', position: 'relative' }} />
     <elementConsentosBase.relationID.Render value={consento.relationHumanId} />
     <elementConsentosBase.actionRequested.Render />

src/screens/components/Locks.tsx

@@ -66,6 +66,7 @@ const LockeeList = (): JSX.Element => {
     if (selected) {
       selection[relation.$modelId] = relation
     } else {
+      // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
       delete selection[relation.$modelId]
     }
   }
@@ -82,7 +83,7 @@ const LockeeList = (): JSX.Element => {
     })().catch(error => {
       Alert.alert(
         'Failed',
-        `Woops, for some reason the lockee could not be added.\n [${error.code}]`
+        `Woops, for some reason the lockee could not be added.\n [${String(error.code)}]`
       )
       console.log(error)
       setSelectionActive(false)

src/util/useHumanSince.ts

@@ -0,0 +1,20 @@
+import { useState } from 'react'
+import Timespan from 'readable-timespan'
+import useInterval from '@use-it/interval'
+
+const timespan = new Timespan()
+
+function stringify (timestamp): string {
+  return `${timespan.parse(Date.now() - timestamp)} ago`
+}
+
+export function useHumanSince (timestamp: number): string {
+  const [humanTime, setHumanTime] = useState<string>(() => stringify(timestamp))
+  useInterval(() => {
+    const newTimestamp = stringify(timestamp)
+    if (newTimestamp !== humanTime) {
+      setHumanTime(newTimestamp)
+    }
+  }, 250)
+  return humanTime
+}