cozy-bar 0.0.0-development

package/src/lib/api/index.jsx

@@ -0,0 +1,145 @@
+import React, { Component } from 'react'
+import {
+  setContent,
+  unsetContent,
+  setLocale,
+  setTheme,
+  setWebviewContext
+} from 'lib/reducers'
+
+import { locations, getJsApiName, getReactApiName } from 'lib/api/helpers'
+
+// The React API need unique IDs, so we will increment this variable
+let idToIncrement = 0
+
+/**
+ * Wraps argument into a React element if it is a string. Is used
+ * for setBar{Left,Right,Center} to be able to pass HTML
+ *
+ * @param  {ReactElement|string} v
+ * @return {ReactElement}
+ */
+const wrapInElement = v => {
+  if (typeof v === 'string') {
+    return <span dangerouslySetInnerHTML={{ __html: v }} />
+  } else {
+    return v
+  }
+}
+
+/**
+ * Creates a React component that enables to access store
+ * properties in a declarative way.
+ *
+ * @param  {BarStore} store
+ */
+const barContentComponent = (store, location) =>
+  class BarContent extends Component {
+    componentDidMount() {
+      this.componentId = idToIncrement++
+      this.setContent(this.props.children)
+    }
+
+    setContent(content) {
+      try {
+        content = React.Children.only(content)
+        // eslint-disable-next-line no-empty
+      } catch (e) {}
+      store.dispatch(setContent(location, content, this.componentId))
+    }
+
+    unsetContent() {
+      store.dispatch(unsetContent(location, this.componentId))
+    }
+
+    componentWillUnmount() {
+      this.unsetContent()
+    }
+
+    componentDidUpdate(prevProps) {
+      if (this.props.children !== prevProps.children) {
+        this.setContent(this.props.children)
+      }
+    }
+
+    render() {
+      return null
+    }
+  }
+
+/**
+ * Creates a public API
+ *
+ * - getters/setters for public attributes
+ * - React components that act as getters/setters
+ *
+ * @param  {ReduxStore} store - Store on which the API will act
+ * @return {object} - Methods of the public API
+ */
+export const createBarAPI = store => {
+  // setBar{Left,Right,Center} and <Bar{Left,Right,Center} />
+  const methods = {}
+  locations.forEach(location => {
+    // expose JS API
+    methods[getJsApiName(location)] = value =>
+      store.dispatch(setContent(location, wrapInElement(value), 'js'))
+
+    // expose React API
+    methods[getReactApiName(location)] = barContentComponent(store, location)
+  })
+
+  methods.setLocale = (...args) => {
+    store.dispatch(setLocale(...args))
+  }
+
+  methods.setTheme = (...args) => {
+    store.dispatch(setTheme(...args))
+  }
+
+  methods.setWebviewContext = (...args) => {
+    store.dispatch(setWebviewContext(...args))
+  }
+
+  return methods
+}
+
+// Handle exceptions for API before init
+const showAPIError = name => {
+  // eslint-disable-next-line no-console
+  console.error(
+    `You tried to use the CozyBar API (${name}) but the CozyBar is not initialised yet via cozy.bar.init(...).`
+  )
+}
+
+const makeProxyMethodToAPI = (exposedAPI, fnName) => {
+  return (...args) => {
+    if (exposedAPI[fnName]) {
+      return exposedAPI[fnName](...args)
+    } else {
+      showAPIError(fnName)
+    }
+  }
+}
+
+/** Creates an API that swallows error until bar is correctly initialized */
+export const createBarProxiedAPI = exposedAPI => {
+  const apiReferences = {}
+
+  locations.forEach(location => {
+    const jsAPIName = getJsApiName(location)
+    const reactAPIName = getReactApiName(location)
+    apiReferences[jsAPIName] = makeProxyMethodToAPI(exposedAPI, jsAPIName)
+    apiReferences[reactAPIName] = props => {
+      if (exposedAPI[reactAPIName]) {
+        return React.createElement(exposedAPI[reactAPIName], props)
+      } else {
+        showAPIError(reactAPIName)
+      }
+    }
+  })
+
+  for (let fnName of ['setLocale', 'setTheme', 'setWebviewContext']) {
+    apiReferences[fnName] = makeProxyMethodToAPI(exposedAPI, fnName)
+  }
+  return apiReferences
+}

package/src/lib/exceptions.js

@@ -0,0 +1,89 @@
+class ForbiddenException extends Error {
+  constructor(message) {
+    super()
+
+    this.name = 'Forbidden'
+    this.status = 403
+    this.message =
+      message ||
+      'The application does not have permission to access this resource.'
+    this.stack = new Error().stack
+  }
+}
+
+class ServerErrorException extends Error {
+  constructor(message) {
+    super()
+
+    this.name = 'ServerError'
+    this.status = 500
+    this.message = message || 'A server error occurred'
+    this.stack = new Error().stack
+  }
+}
+
+class NotFoundException extends Error {
+  constructor(message) {
+    super()
+
+    this.name = 'NotFound'
+    this.status = 404
+    this.message = message || 'The ressource was not found'
+    this.stack = new Error().stack
+  }
+}
+
+class MethodNotAllowedException extends Error {
+  constructor(message) {
+    super()
+
+    this.name = 'MethodNotAllowed'
+    this.status = 405
+    this.message = message || 'Method not allowed'
+    this.stack = new Error().stack
+  }
+}
+
+class UnavailableStackException extends Error {
+  constructor(message) {
+    super()
+
+    this.name = 'UnavailableStack'
+    this.message = message || 'The stack is temporarily unavailable'
+    this.stack = new Error().stack
+  }
+}
+
+class UnauthorizedStackException extends Error {
+  constructor(message) {
+    super()
+
+    this.name = 'UnauthorizedStack'
+    this.status = 401
+    this.message =
+      message || 'The app is not allowed to access to the requested resource'
+    this.stack = new Error().stack
+  }
+}
+
+class UnavailableSettingsException extends Error {
+  constructor(message) {
+    super()
+
+    this.name = 'UnavailableSettings'
+    this.message =
+      message ||
+      "The 'Settings' application isn't available or installed in the stack"
+    this.stack = new Error().stack
+  }
+}
+
+export {
+  ForbiddenException,
+  ServerErrorException,
+  NotFoundException,
+  MethodNotAllowedException,
+  UnavailableStackException,
+  UnavailableSettingsException,
+  UnauthorizedStackException
+}

package/src/lib/expiringMemoize.js

@@ -0,0 +1,13 @@
+export default function(fn, duration, keyFn) {
+  const memo = {}
+  return arg => {
+    const key = keyFn(arg)
+    const memoInfo = memo[key]
+    const uptodate =
+      memoInfo && memoInfo.result && memoInfo.date - Date.now() < duration
+    if (!uptodate) {
+      memo[key] = { result: fn(arg), date: Date.now() }
+    }
+    return memo[key].result
+  }
+}

package/src/lib/icon.js

@@ -0,0 +1,77 @@
+const cache = {}
+
+const mimeTypes = {
+  gif: 'image/gif',
+  ico: 'image/vnd.microsoft.icon',
+  jpeg: 'image/jpeg',
+  jpg: 'image/jpeg',
+  png: 'image/png',
+  svg: 'image/svg+xml'
+}
+
+/**
+ * Get an icon URL usable in the HTML page from it's stack path
+ *
+ * @function
+ * @private
+ * @param {function} iconFetcher - takes an icon path on the stack
+ *                                 and returns a fetch response with the icon
+ * @param {object} app - app object with a `links.icon` attribute
+ * @param {boolean} useCache
+ * @returns {Promise} url string of an icon usable in the HTML page
+ *                   may be empty if the `app` object didn't have an icon path
+ */
+export default async function getIcon(iconFetcher, app = {}, useCache = true) {
+  if (useCache && cache.icons && cache.icons[url]) return cache.icons[url]
+
+  const url = app.links && app.links.icon
+  if (!url) return ''
+  let icon
+
+  try {
+    const resp = await iconFetcher(url)
+    if (!resp.ok)
+      throw new Error(`Error while fetching icon ${resp.statusText}: ${url}`)
+    icon = await resp.blob()
+  } catch (error) {
+    throw error
+  }
+  if (!icon.type) {
+    // iOS10 does not set correctly mime type for images, so we assume
+    // that an empty mime type could mean that the app is running on iOS10.
+    // For regular images like jpeg, png or gif it still works well in the
+    // Safari browser but not for SVG.
+    // So let's set a mime type manually. We cannot always set it to
+    // image/svg+xml and must guess the mime type based on the icon attribute
+    // from app/manifest
+    // See https://stackoverflow.com/questions/38318411/uiwebview-on-ios-10-beta-not-loading-any-svg-images
+    if (!app.icon) {
+      throw new Error(`${app.name}: Cannot detect mime type for icon ${url}`)
+    }
+
+    const extension = app.icon.split('.').pop()
+
+    if (!extension) {
+      throw new Error(
+        `${app.name}: Unable to detect icon mime type from extension (${app.icon})`
+      )
+    }
+
+    if (!mimeTypes[extension]) {
+      throw new Error(`${app.name}: 'Unexpected icon extension (${app.icon})`)
+    }
+
+    icon = new Blob([icon], { type: mimeTypes[extension] })
+  }
+
+  if (icon.type.match(/^image\/.*$/)) {
+    const iconURL = URL.createObjectURL(icon)
+    if (useCache) {
+      cache.icons = cache.icons || {}
+      cache.icons[url] = iconURL
+    }
+
+    return iconURL
+  }
+  throw new Error(`${app.name}: icon ${url} is not an image.`)
+}

package/src/lib/intents.js

@@ -0,0 +1,16 @@
+import { cozyFetchJSON } from 'lib/stack'
+
+// This is a function that does the bare minimum in order to bypass the normal intent flow. To be replaced in th next version of intents.
+export function fetchRawIntent(action, type, data = {}, permissions = []) {
+  return cozyFetchJSON(null, 'POST', '/intents', {
+    data: {
+      type: 'io.cozy.intents',
+      attributes: {
+        action: action,
+        type: type,
+        data: data,
+        permissions: permissions
+      }
+    }
+  })
+}

package/src/lib/logger.js

@@ -0,0 +1,11 @@
+import flag from 'cozy-flags'
+import _minilog from '@cozy/minilog'
+
+const minilog = window.minilog || _minilog
+const logger = minilog('cozy-bar')
+
+if (!flag('bar.debug')) {
+  minilog.suggest.deny('cozy-bar', 'info')
+}
+
+export default logger

package/src/lib/middlewares/appsI18n.js

@@ -0,0 +1,57 @@
+import { extend as extendI18n } from 'cozy-ui/react/I18n'
+import { SET_LOCALE } from 'lib/reducers/locale'
+
+const extendI18nWithApp = lang => app => {
+  const { langs, locales } = app
+
+  const hasLangs = langs && langs.length
+  if (!hasLangs) {
+    // TODO The app does not provide langs, we should probably warn the developer
+    // when the app is published on the registry.
+    return app
+  }
+
+  const providesLang = hasLangs && langs.includes(lang)
+  const currentLang = providesLang ? lang : langs[0]
+
+  const localeKeys = locales && Object.keys(locales)
+  const providesLocales =
+    localeKeys && localeKeys.length && localeKeys.includes(currentLang)
+
+  if (!providesLocales) {
+    // TODO The app does not provide locales, we should probably warn the developer
+    // when the app is published on the regisry.
+    return app
+  }
+
+  extendI18n({ [app.slug]: locales[currentLang] })
+  return app
+}
+
+const useLang = (apps, lang) => {
+  apps && apps.forEach(extendI18nWithApp(lang))
+}
+
+export const appsI18nMiddleware = ({ getState }) => next => action => {
+  const state = getState()
+  switch (action.type) {
+    case SET_LOCALE: {
+      const apps = state.apps && state.apps.apps
+      useLang(apps, action.lang)
+      break
+    }
+    case 'RECEIVE_APP_LIST':
+      action.apps &&
+        action.apps.length &&
+        action.apps.forEach(extendI18nWithApp(state.locale))
+      break
+    case 'RECEIVE_APP':
+      action.app &&
+        extendI18nWithApp(state.locale && state.locale.lang)(action.app)
+      break
+  }
+
+  return next(action)
+}
+
+export default appsI18nMiddleware

package/src/lib/realtime.js

@@ -0,0 +1,43 @@
+import CozyRealtime from 'cozy-realtime'
+
+const APPS_DOCTYPE = 'io.cozy.apps'
+
+/**
+ * Initialize realtime sockets
+ *
+ * @private
+ * @param {object}
+ * @returns {Promise}
+ */
+function initializeRealtime({ getApp, onCreate, onDelete, cozyClient }) {
+  const handleAppCreation = async app => {
+    // Fetch directly the app to get attributes `related` as well.
+    let fullApp
+    try {
+      fullApp = await getApp(app.slug)
+    } catch (error) {
+      throw new Error(`Cannot fetch app ${app.slug}: ${error.message}`)
+    }
+
+    if (typeof onCreate === 'function') {
+      onCreate(fullApp)
+    }
+  }
+
+  const handleAppRemoval = app => {
+    if (typeof onDelete === 'function') {
+      onDelete(app)
+    }
+  }
+
+  try {
+    const realtime = new CozyRealtime({ client: cozyClient })
+    realtime.subscribe('created', APPS_DOCTYPE, handleAppCreation)
+    realtime.subscribe('deleted', APPS_DOCTYPE, handleAppRemoval)
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.warn(`Cannot initialize realtime in Cozy-bar: ${error.message}`)
+  }
+}
+
+export default initializeRealtime

package/src/lib/reducers/apps.js

@@ -0,0 +1,175 @@
+import stack from 'lib/stack'
+import unionWith from 'lodash.unionwith'
+
+// constants
+const DELETE_APP = 'DELETE_APP'
+const RECEIVE_APP = 'RECEIVE_APP'
+const RECEIVE_APP_LIST = 'RECEIVE_APP_LIST'
+const RECEIVE_HOME_APP = 'RECEIVE_HOME_APP'
+const FETCH_APPS = 'FETCH_APPS'
+const FETCH_APPS_FAILURE = 'FETCH_APPS_FAILURE'
+const SET_INFOS = 'SET_INFOS'
+
+export const isCurrentApp = (state, app) => app.slug === state.appSlug
+
+// selectors
+export const getApps = state => {
+  if (!state.apps) return []
+  return state.apps
+}
+
+export const getHomeApp = state => {
+  return state.homeApp
+}
+
+export const isFetchingApps = state => {
+  return state ? state.isFetching : false
+}
+
+export const hasFetched = state => state.hasFetched
+
+// actions
+export const deleteApp = app => ({ type: DELETE_APP, app })
+export const receiveApp = app => ({ type: RECEIVE_APP, app })
+const receiveAppList = apps => ({ type: RECEIVE_APP_LIST, apps })
+const receiveHomeApp = homeApp => ({ type: RECEIVE_HOME_APP, homeApp })
+export const setInfos = (appName, appNamePrefix, appSlug) => ({
+  type: SET_INFOS,
+  appName,
+  appNamePrefix,
+  appSlug
+})
+
+// actions async
+export const fetchApps = () => async dispatch => {
+  try {
+    dispatch({ type: FETCH_APPS })
+    const rawAppList = await stack.get.apps()
+    const apps = rawAppList.map(mapApp)
+    if (!rawAppList.length)
+      throw new Error('No installed apps found by the bar')
+    // TODO load only one time icons
+    await dispatch(setDefaultApp(apps))
+    await dispatch(receiveAppList(apps))
+  } catch (e) {
+    dispatch({ type: FETCH_APPS_FAILURE })
+    // eslint-disable-next-line no-console
+    console.warn(e.message ? e.message : e)
+  }
+}
+
+/**
+ *
+ * @param {Array} appsList
+ */
+export const setDefaultApp = appsList => async dispatch => {
+  try {
+    const context = await stack.get.context()
+    const defaultRedirection =
+      context.data &&
+      context.data.attributes &&
+      context.data.attributes.default_redirection
+    let homeApp = null
+    // self hosted cozy has no context by default
+    // so let's use hardcoded home slug if needed
+    if (!defaultRedirection) {
+      const HOME_APP_SLUG = 'home'
+      homeApp = findAppInArray(HOME_APP_SLUG, appsList)
+    } else {
+      const slugRegexp = /^([^/]+)\/.*/
+      const matches = defaultRedirection.match(slugRegexp)
+      const defaultAppSlug = matches && matches[1]
+      homeApp = findAppInArray(defaultAppSlug, appsList)
+    }
+
+    if (homeApp) {
+      return dispatch(receiveHomeApp(homeApp))
+    }
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.warn(`Cozy-bar cannot fetch home app data: ${error.message}`)
+  }
+}
+
+// reducers
+const defaultState = {
+  apps: [],
+  homeApp: null,
+  isFetching: true,
+  appName: null,
+  appNamePrefix: null,
+  appSlug: null,
+  hasFetched: false
+}
+
+const reducer = (state = defaultState, action) => {
+  switch (action.type) {
+    case FETCH_APPS:
+      return { ...state, isFetching: true }
+    case FETCH_APPS_FAILURE:
+      return { ...state, isFetching: false }
+    case RECEIVE_APP:
+      return {
+        ...state,
+        apps: unionWith(
+          state.apps,
+          [mapApp(action.app)],
+          (appA, appB) => appA.slug === appB.slug
+        )
+      }
+    case RECEIVE_APP_LIST: {
+      const appsList = action.apps.map(app => ({
+        ...app,
+        isCurrentApp: isCurrentApp(state, app)
+      }))
+      return { ...state, isFetching: false, hasFetched: true, apps: appsList }
+    }
+    case RECEIVE_HOME_APP: {
+      const homeApp = action.homeApp
+      return isCurrentApp(state, homeApp)
+        ? {
+            ...state,
+            homeApp: { ...homeApp, isCurrentApp: true }
+          }
+        : { ...state, homeApp }
+    }
+    case DELETE_APP:
+      return {
+        ...state,
+        apps: state.apps.filter(app => app.slug !== action.app.slug)
+      }
+    case SET_INFOS:
+      return {
+        ...state,
+        appName: action.appName,
+        appNamePrefix: action.appNamePrefix,
+        appSlug: action.appSlug
+      }
+    default:
+      return state
+  }
+}
+
+export default reducer
+
+// helpers
+const camelCasify = object =>
+  !!object &&
+  Object.keys(object).reduce((acc, key) => {
+    const camelCaseKey = key
+      .split('_')
+      .map((segment, index) =>
+        index ? segment.charAt(0).toUpperCase() + segment.slice(1) : segment
+      )
+      .join('')
+    acc[camelCaseKey] = object[key]
+    return acc
+  }, {})
+
+const mapApp = app => ({
+  ...app,
+  ...camelCasify(app.attributes),
+  href: app.links && app.links.related
+})
+
+const findAppInArray = (appSlug, apps) => apps.find(app => app.slug === appSlug)

package/src/lib/reducers/apps.spec.js

@@ -0,0 +1,59 @@
+import CozyClient from 'cozy-client'
+import client from 'lib/stack-client.js'
+import stack from 'lib/stack.js'
+import { setDefaultApp } from './apps'
+
+const cozyURL = 'https://test.mycozy.cloud'
+const token = 'mytoken'
+const fakeStackClient = {
+  uri: cozyURL,
+  token: { token }
+}
+describe('app reducer', () => {
+  beforeAll(() => {
+    jest.clearAllMocks()
+    const params = {
+      cozyClient: new CozyClient({ fakeStackClient }),
+      onCreate: function() {},
+      onDelete: function() {}
+    }
+
+    stack.init(params)
+  })
+  it('dispatch RECEIVE_HOME_APP if context has default redirection', async () => {
+    jest.spyOn(client.get, 'context').mockResolvedValue({
+      data: { attributes: { default_redirection: 'home/' } }
+    })
+    const dispatchMock = jest.fn(x => x)
+
+    const setted = setDefaultApp([{ slug: 'home' }])
+    await setted(dispatchMock)
+    expect(dispatchMock).toHaveBeenCalledWith({
+      homeApp: { slug: 'home' },
+      type: 'RECEIVE_HOME_APP'
+    })
+  })
+
+  it('dispatch RECEIVE_HOME_APP with hardcoded home if context has no default redirection', async () => {
+    jest.spyOn(client.get, 'context').mockResolvedValue({})
+    const dispatchMock = jest.fn(x => x)
+
+    const setted = setDefaultApp([{ slug: 'home' }])
+    await setted(dispatchMock)
+    expect(dispatchMock).toHaveBeenCalledWith({
+      homeApp: { slug: 'home' },
+      type: 'RECEIVE_HOME_APP'
+    })
+  })
+
+  it('dispatch nothing if the default redirection if not in the apps array', async () => {
+    jest.spyOn(client.get, 'context').mockResolvedValue({
+      data: { attributes: { default_redirection: 'drive/' } }
+    })
+    const dispatchMock = jest.fn(x => x)
+
+    const setted = setDefaultApp([{ slug: 'home' }])
+    await setted(dispatchMock)
+    expect(dispatchMock).not.toHaveBeenCalled()
+  })
+})