Skip to content
Snippets Groups Projects
index.tsx 2.83 KiB
Newer Older
  • Learn to ignore specific revisions
  • /* eslint-disable @typescript-eslint/no-var-requires */
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
    /* 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'
    
    Yoan VALLET's avatar
    Yoan VALLET committed
    import { handleOAuthResponse } from 'cozy-harvest-lib/dist/helpers/oauth'
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
    import schema from 'doctypes'
    
    const manifest = require('../../../manifest.webapp')
    
    
    const renderApp = (polyglot: any, lang: string, client: Client) => {
    
    Yoan VALLET's avatar
    Yoan VALLET committed
      if (handleOAuthResponse()) return
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
      const App = require('components/App').default
      render(
    
        <CozyProvider client={client}>
          <I18n lang={lang} polyglot={polyglot}>
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
            <App />
    
          </I18n>
        </CozyProvider>,
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
        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()
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
    
    
      const iconPath = getDataOrDefault(
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
        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}`)
      )
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
    
    
      const lang = supportedLocales.includes(userLocale) ? userLocale : 'fr'
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
      const protocol = window.location ? window.location.protocol : 'https:'
    
    
      const token = data.cozyToken
    
      // initialize the client
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
      const client = new CozyClient({
        uri: `${protocol}//${data.cozyDomain}`,
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
        appMetadata: {
          slug: appSlug,
          version: appVersion,
        },
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
      })
    
      if (!Document.cozyClient) {
        Document.registerClient(client)
      }
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
    
    
      // necessary to initialize the bar with the correct React instance
      window.React = React
      window.ReactDOM = ReactDOM
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
      cozy.bar.init({
    
        appName,
        appNamePrefix,
        iconPath,
        lang,
    
    Hugo NOUTS's avatar
    Hugo NOUTS committed
        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)