clean up flow errors(#528) (#549)

* clean up flow errors

* correct obj destructuring error

* update code based on the PR feedback

* make sure the linter is happy

.Gruntfile.babel.js

@@ -150,7 +150,7 @@ module.exports = (grunt) => {
         middleware: (connect, opts, middlewares) => {
           middlewares.unshift((req, res, next) => {
             var f = url.parse(req.url).pathname // eslint-disable-line
-            if (/^\/app(\/|$)/.test(f)) {
+            if (f !== undefined && /^\/app(\/|$)/.test(f)) {
               // NOTE: if you change the URL from /app you must modify it here,
               //       and also:
               //       - page() function in `frontend/test.js`

frontend/controller/backend.js

@@ -96,7 +96,9 @@ sbp('sbp/selectors/register', {
   'backend/eventsSince': async (contractID: string, since: string) => {
     var events = await fetch(`${process.env.API_URL}/events/${contractID}/${since}`)
       .then(handleFetchResult('json'))
-    return events.reverse().map(e => b64ToStr(e))
+    if (Array.isArray(events)) {
+      return events.reverse().map(e => b64ToStr(e))
+    }
   },
   'backend/latestHash': (contractID: string) => {
     return fetch(`${process.env.API_URL}/latestHash/${contractID}`)

frontend/model/state.js

@@ -145,9 +145,12 @@ const getters = {
   },
   // list of group names and contractIDs
   groupsByName (state) {
-    return Object.entries(store.state.contracts)
-      .filter(([key, value]) => value.type === 'GroupContract')
-      .map(([key]) => ({ groupName: state[key].groupName, contractID: key }))
+    const { contracts } = store.state
+    // The code below was originally Object.entries(...) but changed to .keys()
+    // due to the same flow issue as https://github.com/facebook/flow/issues/5838
+    return Object.keys(contracts)
+      .filter((key) => contracts[key].type === 'GroupContract')
+      .map((key) => ({ groupName: state[key].groupName, contractID: key }))
   },
   proposals (state) {
     // TODO: clean this up

frontend/views/components/Transitions/MaskToModal/mixinTransitions.js

@@ -55,15 +55,15 @@ const animationMixins = {
   },
   methods: {
     // -- Trigger animations
-    triggerEnter (el, complete) {
+    triggerEnter (el: HTMLElement, complete: Function) {
       console.log('triggerEnter')
       this.updateSpecsOf(el, 'trigger')
 
       this.elementStartsInvisible(el)
       // Fades In only after the masker animation is completed.
       Velocity(el, { opacity: 1 }, { duration: this.config.fade, delay: this.config.delay, complete })
     },
-    triggerLeave (el, complete) {
+    triggerLeave (el: HTMLElement, complete: Function) {
       console.log('triggerLeave')
       this.updateSpecsOf(el, 'trigger')
 
@@ -72,7 +72,7 @@ const animationMixins = {
     },
 
     // -- Target animations
-    targetEnter (el, complete) {
+    targetEnter (el: HTMLElement, complete: Function) {
       console.log('targetEnter')
       const targetInner = this.getTargetCard()
       this.updateSpecsOf(targetInner, 'target')
@@ -85,13 +85,14 @@ const animationMixins = {
       // And Fade in the targetInner only after the Masker has completed its transition animation
       Velocity(targetInner, { opacity: 1 }, { duration: this.config.fade, delay: this.config.delay, complete })
     },
-    transitionAfterEnter (el) {
+    transitionAfterEnter (el: HTMLElement) {
       console.log('transitionAfterEnter')
       // Trigger/Target has opacity: 0 by default, so let's force to stay 1 after the animation finishes.
       // Velocity(el, { opacity: 1 }, { duration: 0 })
-      el.style.opacity = 1
+      const elStyle: Object = el.style
+      elStyle.opacity = 1
     },
-    targetLeave (el, complete) {
+    targetLeave (el: HTMLElement, complete: Function) {
       console.log('targetLeave')
       const targetInner = this.getTargetCard()
       this.updateSpecsOf(targetInner, 'target')
@@ -103,40 +104,41 @@ const animationMixins = {
       // after Masker goes back to the initial position
       Velocity(el, { opacity: 0 }, { duration: this.config.fade, delay: this.config.maskerTime, complete })
     },
-    elementStartsInvisible (el) {
+    elementStartsInvisible (el: HTMLElement) {
       // Use only opacity to fadeIn/Out because it's faster than
       // Velocity's 'fadeIn' feature (it doesn't use display)
       // Velocity(el, { opacity: 0 }, { duration: 0 })
-      el.style.opacity = 0
+      const elStyle: Object = el.style
+      elStyle.opacity = 0
     },
 
     // -- Masker animations
     // when animates to Target
-    maskEnter (el, complete) {
+    maskEnter (el: HTMLElement, complete: Function) {
       console.log('maskLeave')
 
       this.maskerTakesImmediatelyTheShapeOf(el, 'trigger', this.config.fade)
       this.maskerAnimatesToTheShapeOf(el, 'target', complete)
     },
 
     // when animates back to a Trigger
-    maskLeave (el, complete) {
+    maskLeave (el: HTMLElement, complete: Function) {
       console.log('maskEnter')
 
       this.maskerTakesImmediatelyTheShapeOf(el, 'target', this.config.fadeBack)
       this.maskerAnimatesToTheShapeOf(el, 'trigger', complete)
     },
 
     // -- Animation utils
-    maskerTakesImmediatelyTheShapeOf (maskerEl, originalElement, duration) {
+    maskerTakesImmediatelyTheShapeOf (maskerEl: HTMLElement, originalElement: HTMLElement, duration: number) {
       // Masker takes imediately the specs (dimensions and position)
       // of the originalElement (Trigger or Target) size...
       Velocity(maskerEl, { opacity: 0, ...this.getSpecsOf(originalElement) }, { duration: 0 })
 
       // And fadesIn at the same time as the originalElement (trigger or target) is fading Out
       Velocity(maskerEl, { opacity: 1 }, { duration })
     },
-    maskerAnimatesToTheShapeOf (el, originalElement, complete) {
+    maskerAnimatesToTheShapeOf (el: HTMLElement, originalElement: HTMLElement, complete: Function) {
       // The animation need to wait for the element to be loaded in the dom
       Vue.nextTick(() => {
         // Then it animates to the the originalElement specs creating the "growing effect"
@@ -145,7 +147,7 @@ const animationMixins = {
         Velocity(el, { opacity: 0 }, { duration: this.config.fade, complete })
       })
     },
-    updateSpecsOf (el, elementId: string) {
+    updateSpecsOf (el: HTMLElement, elementId: string) {
       this.MaskToModal.updateSpecsOf(el, elementId)
     },
     getSpecsOf (elementId: string) {

frontend/views/containers/Chatroom/fakeStore.js

@@ -25,39 +25,39 @@ export const users = {
     unreadCount: 1,
     description: 'I’m here to keep you update while you are away'
   },
-  111: {
+  '111': {
     id: '111',
     name: 'johnn',
     displayName: 'John Mars',
     picture: '/assets/images/default-avatar.png',
     unreadCount: 0,
     description: 'You and John are both part of Dreamers group'
   },
-  222: {
+  '222': {
     id: '222',
     name: 'hlenon',
     displayName: 'Hugo Lenon',
     picture: '/assets/images/default-avatar.png',
     unreadCount: 0,
     description: null
   },
-  333: {
+  '333': {
     id: '333',
     name: 'liliabt',
     displayName: 'Lilia Bouvet',
     picture: '/assets/images/default-avatar.png',
     unreadCount: 0,
     description: null
   },
-  444: {
+  '444': {
     id: '444',
     name: 'rickyricky',
     displayName: 'Rick Eggs',
     picture: '/assets/images/default-avatar.png',
     unreadCount: 0,
     description: null
   },
-  555: {
+  '555': {
     id: '555',
     name: 'ericrock',
     displayName: 'Eric Rock',
@@ -88,13 +88,13 @@ export const individualConversations = {
       unread: true
     }
   ],
-  333: [
+  '333': [
     {
       from: '333',
       text: 'Hello'
     }
   ],
-  444: [
+  '444': [
     {
       from: '444',
       text: 'check this out:'
@@ -156,7 +156,7 @@ export const individualConversations = {
       text: 'this is funny!'
     }
   ],
-  555: [
+  '555': [
     {
       from: '555',
       text: 'Hi!'
@@ -187,7 +187,7 @@ export const individualConversations = {
       unread: true
     }
   ],
-  111: [
+  '111': [
     {
       from: currentUserId,
       text: 'Hey there'

scripts/i18n.js

@@ -7,7 +7,7 @@ let localeObject = {}
 function parseJS (text) {
   let functionEx = /\bL\(\s*['"](.*?)['"]\s*(?:,\s*['"](.*?)['"]\s*)?\)/mg
   let matches
-  while ((matches = functionEx.exec(text)) !== null) {
+  while (matches = functionEx.exec(text)) {
     let text = matches[ 1 ]
     let comment = matches[ 2 ]
     localeObject[ text ] = { text: text, comment: comment || '' }

shared/declarations.js

@@ -158,6 +158,7 @@ declare module './views/containers/proposals-form/Mincome.vue' { declare module.
 declare module './views/containers/proposals-form/RuleChangeRule.vue' { declare module.exports: Object }
 declare module './views/containers/proposals-form/RuleAddMember.vue' { declare module.exports: Object }
 declare module './views/containers/proposals-form/RuleRemoveMember.vue' { declare module.exports: Object }
+declare module './views/components/AppStyles.vue' { declare module.exports: Object }
 
 declare module '../../utils/flow-typer.js' { declare module.exports: Object }
 declare module './backend/pubsub.js' { declare module.exports: Function }
@@ -217,6 +218,9 @@ declare module '../shared/domains/okTurtles/events/index.js' { declare module.ex
 declare module './lazyLoadedView.js' { declare module.exports: any }
 declare module '../shared/domains/okTurtles/events/index.js' { declare module.exports: any }
 declare module '../backend/index.js' { declare module.exports: any }
+declare module './utils/autofocus.js' { declare module.exports: any }
+declare module './views/utils/v-style.js' { declare module.exports: any }
+declare module './colors.js' { declare module.exports: any }
 
 // we ignored everything in assets/, so...
 declare module '../frontend/controller/utils/primus.js' { declare module.exports: Function }

shared/sbp.js

@@ -10,7 +10,9 @@ var selectorFilters: {[string]: Array<TypeFilter>} = {}
 const DOMAIN_REGEX = /^[^/]+/
 
 function sbp (selector: string, ...data: any): any {
-  const domain = DOMAIN_REGEX.exec(selector)[0]
+  const domainLookup = DOMAIN_REGEX.exec(selector)
+  if (domainLookup === null) return
+  const domain = domainLookup[0]
   // Filters can perform additional functions, and by returning `false` they
   // can prevent the execution of a selector.
   // TODO: decide whether the order of filter calls should be reversed

test/backend.js

@@ -116,9 +116,11 @@ describe('Full walkthrough', function () {
   })
 
   after(function () {
-    for (let user of Object.values(users)) {
-      user.socket && user.socket.destroy({ timeout: 500 })
-    }
+    // The code below was originally Object.values(...) but changed to .keys()
+    // due to a similar flow issue to https://github.com/facebook/flow/issues/2221
+    Object.keys(users).forEach((userKey) => {
+      users[userKey].socket && users[userKey].socket.destroy({ timeout: 500 })
+    });
   })
 
   describe('Identity tests', function () {
@@ -152,7 +154,10 @@ describe('Full walkthrough', function () {
     })
 
     it('Should open sockets for Alice and Bob', async function () {
-      for (let user of Object.values(users)) {
+      // The code below was originally Object.values(...) but changed to .keys()
+      // due to a similar flow issue to https://github.com/facebook/flow/issues/2221
+      const userList = Object.keys(users).map((userKey) => users[userKey])
+      for (let user of userList) {
         user.socket = await createSocket()
       }
     })