index.tsx

/* eslint-disable @typescript-eslint/no-var-requires */
/* global cozy */
import '../../styles/index.scss'

import React from 'react'
import CozyClient, { CozyProvider, Client } from 'cozy-client'
import ReactDOM, { render } from 'react-dom'
import { Document } from 'cozy-doctypes'
import { I18n } from 'cozy-ui/transpiled/react'
import { initTranslation } from 'cozy-ui/transpiled/react/I18n'
import { handleOAuthResponse } from 'cozy-harvest-lib/dist/helpers/oauth'
import schema from 'doctypes'

const manifest = require('../../../manifest.webapp')

const renderApp = (polyglot: any, lang: string, client: Client) => {
  if (handleOAuthResponse()) return
  const App = require('components/App').default
  render(
    <CozyProvider client={client}>
      <I18n lang={lang} polyglot={polyglot}>
        <App />
      </I18n>
    </CozyProvider>,
    document.querySelector('[role=application]')
  )
}

export const getDataset = () => {
  const root: any = document.querySelector('[role=application]')
  return root.dataset
}

// return a defaultData if the template hasn't been replaced by cozy-stack
export const getDataOrDefault = (toTest: string, defaultData: string) => {
  const templateRegex = /^\{\{\.[a-zA-Z]*\}\}$/ // {{.Example}}
  return templateRegex.test(toTest) ? defaultData : toTest
}

const initApp = () => {
  const supportedLocales = ['fr', 'en']
  const data = getDataset()

  const iconPath = getDataOrDefault(
    data.cozyIconPath,
    require('../vendor/assets/icon.svg')
  )
  const appNamePrefix = getDataOrDefault(
    data.cozyAppNamePrefix || manifest.name_prefix,
    ''
  )
  const appName = getDataOrDefault(data.cozyAppName, manifest.name)
  const appSlug = getDataOrDefault(data.cozyAppSlug, manifest.slug)
  const appVersion = manifest.version
  // FIX cozyLocal
  const userLocale = 'fr' // getDataOrDefault(data.cozyLocale, 'fr')
  const polyglot = initTranslation(userLocale, lang =>
    require(`locales/${lang}`)
  )

  const lang = supportedLocales.includes(userLocale) ? userLocale : 'fr'
  const protocol = window.location ? window.location.protocol : 'https:'

  const token = data.cozyToken

  // initialize the client
  const client = new CozyClient({
    uri: `${protocol}//${data.cozyDomain}`,
    token,
    appMetadata: {
      slug: appSlug,
      version: appVersion,
    },
    schema,
  })
  if (!Document.cozyClient) {
    Document.registerClient(client)
  }

  // necessary to initialize the bar with the correct React instance
  window.React = React
  window.ReactDOM = ReactDOM
  cozy.bar.init({
    appName,
    appNamePrefix,
    iconPath,
    lang,
    replaceTitleOnMobile: true,
    cozyClient: client,
  })

  const { setTheme } = cozy.bar
  setTheme('primary', { primaryColor: 'transparent' })

  renderApp(polyglot, lang, client)
}

// initial rendering of the application
document.addEventListener('DOMContentLoaded', initApp)