Absolute path on client side #289

src/actions/createCall.tsx

@@ -1,4 +1,4 @@
-import { functions } from '../firebase/firebase'
+import { functions } from 'src/firebase/firebase'
 
 export const createCall = async (values) => {
     try {

src/components/App/index.tsx

@@ -1,18 +1,18 @@
 import React, { useEffect } from 'react'
 import './App.scss'
-import { gdprHandler } from '../../utils/gdpr'
+import { gdprHandler } from 'src/utils/gdpr'
 import Router from './router'
 import { IonApp, IonHeader } from '@ionic/react'
-import SwipeableTemporaryDrawer from '../SwipeableTemporaryDrawer/SwipeableTemporaryDrawer'
+import SwipeableTemporaryDrawer from 'src/components/SwipeableTemporaryDrawer/SwipeableTemporaryDrawer'
 import { Navbar } from 'react-bootstrap'
-import useDetectMobileOrTablet from '../../hooks/useDetectMobileOrTablet'
+import useDetectMobileOrTablet from 'src/hooks/useDetectMobileOrTablet'
 import styled from 'styled-components'
 import { IonReactRouter } from '@ionic/react-router'
 
 import { createStore, applyMiddleware } from 'redux'
 import { Provider } from 'react-redux'
 import thunk from 'redux-thunk'
-import rootReducer from '../../reducers'
+import rootReducer from 'src/reducers'
 import { composeWithDevTools } from 'redux-devtools-extension'
 
 const store = createStore(

src/components/App/router.tsx

@@ -9,9 +9,9 @@ import {
     MediaNews,
     NotFound,
     JoinVideoCall,
-} from '../../pages'
+} from 'src/pages'
 
-import VideoCallPrecheck from '../../pages/VideoCall/VideoCallPrecheck'
+import VideoCallPrecheck from 'src/pages/VideoCall/VideoCallPrecheck'
 import { useTranslation } from 'react-i18next'
 import { Route } from 'react-router-dom'
 import { IonRouterOutlet } from '@ionic/react'

src/components/BlogArticle/BlogArticle.tsx

@@ -5,7 +5,7 @@ import ReactMarkdown from 'react-remarkable'
 import { useTranslation } from 'react-i18next'
 import { truncate } from 'lodash'
 
-import useDocumentTitle from '../../hooks/useDocumentTitle'
+import useDocumentTitle from 'src/hooks/useDocumentTitle'
 import BlogArticleStyled from './BlogArticleStyled'
 import blog from '../../data/js/blog'
 

src/components/BlogArticle/BlogArticleStyled.tsx

@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-import { SCREEN } from '../../styles/theme'
+import { SCREEN } from 'src/styles/theme'
 
 const BlogArticleStyled = styled.div`
     p img, p > img {

src/components/Country/Country.tsx

@@ -3,9 +3,9 @@ import PropTypes from 'prop-types'
 import { FormControl } from 'react-bootstrap'
 import styled from 'styled-components'
 import getCountries from './countries'
-import Flag from '../Flag/Flag'
-import BaseArrow from '../Arrow/Arrow'
-import { BaseArrowProps } from '../Arrow/Arrow'
+import Flag from 'src/components/Flag/Flag'
+import BaseArrow from 'src/components/Arrow/Arrow'
+import { BaseArrowProps } from 'src/components/Arrow/Arrow'
 
 const Wrapper = styled.div`
     display: flex;

src/components/Country/countries.tsx

@@ -1,5 +1,5 @@
 import isoCountries from 'i18n-iso-countries'
-import i18n from '../../i18n/i18n'
+import i18n from 'src/i18n/i18n'
 
 export default function getCountries() {
     const { language, options } = i18n

src/components/Footer/Footer.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
-import About from '../../documents/Instant_Visio_Keynote.pdf'
+import About from 'src/documents/Instant_Visio_Keynote.pdf'
 import FooterStyled from './FooterStyled'
-import { showPreferencesDialog } from '../../utils/gdpr'
-import NewsletterModal from '../../pages/Newsletter/NewsletterModal'
+import { showPreferencesDialog } from 'src/utils/gdpr'
+import NewsletterModal from 'src/pages/Newsletter/NewsletterModal'
 
 const Footer = () => {
     const { t } = useTranslation()

src/components/Footer/FooterStyled.tsx

@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-import { SCREEN } from '../../styles/theme'
+import { SCREEN } from 'src/styles/theme'
 
 const FooterStyled = styled.footer`
     background: #222222;

src/components/Form/Form.tsx

@@ -8,7 +8,7 @@ import Field from './Field'
 import CallError, { Error } from './CallError'
 import { triggerValidation, format } from './validation'
 import PhoneField from './PhoneField'
-import { getLocale } from '../../i18n/helper'
+import { getLocale } from 'src/i18n/helper'
 
 const BootstrapForm = styled(BaseForm)`
     width: 100%;

src/components/Form/PhoneField.tsx

@@ -2,10 +2,10 @@ import React from 'react'
 import styled from 'styled-components'
 import { useTranslation } from 'react-i18next'
 import PropTypes from 'prop-types'
-import Country from '../Country/Country'
+import Country from 'src/components/Country/Country'
 import Field from './Field'
 import { useField } from 'formik'
-import { getLocale } from '../../i18n/helper'
+import { getLocale } from 'src/i18n/helper'
 
 const Wrapper = styled.div`
     & .input-group-prepend {

src/components/FormMobile/FormMobile.tsx

@@ -5,11 +5,11 @@ import styled from 'styled-components'
 import { useTranslation } from 'react-i18next'
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
-import Field from '../Form/Field'
-import CallError from '../Form/CallError'
-import { triggerValidation, format } from '../Form/validation'
-import PhoneField from '../Form/PhoneField'
-import { getLocale } from '../../i18n/helper'
+import Field from 'src/components/Form/Field'
+import CallError from 'src/components/Form/CallError'
+import { triggerValidation, format } from 'src/components/Form/validation'
+import PhoneField from 'src/components/Form/PhoneField'
+import { getLocale } from 'src/i18n/helper'
 
 const BootstrapForm = styled(BaseForm)`
     width: 100%;

src/components/Header/Header.tsx

@@ -3,8 +3,8 @@ import 'bootstrap/dist/css/bootstrap.min.css'
 import { Container } from 'react-bootstrap'
 import { HeaderStyled, HeaderLogoBaseline } from './HeaderStyled'
 import { useTranslation } from 'react-i18next'
-import Logo from '../Logo/Logo'
-import useDetectMobileOrTablet from '../../hooks/useDetectMobileOrTablet'
+import Logo from 'src/components/Logo/Logo'
+import useDetectMobileOrTablet from 'src/hooks/useDetectMobileOrTablet'
 
 const Header = () => {
     const { t } = useTranslation()

src/components/Header/HeaderStyled.tsx

@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-import { SCREEN } from '../../styles/theme'
+import { SCREEN } from 'src/styles/theme'
 
 export const HeaderStyled = styled.header`
     background-color: ${({ theme }) => theme.color.white};

src/components/Lang/Lang.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components'
 import { useTranslation } from 'react-i18next'
 //todo get from firebase
 import config from './config.json'
-import { getLocale } from '../../i18n/helper'
+import { getLocale } from 'src/i18n/helper'
 
 const Wrapper = styled.div`
     & .btn {

src/components/List/List.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import styled from 'styled-components'
 import BaseListItem from './ListItem'
-import { SCREEN } from '../../styles/theme'
+import { SCREEN } from 'src/styles/theme'
 
 const ListItem = styled(BaseListItem)``
 

src/components/Login.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { authInstance, firebaseAuth } from '../firebase/firebase'
+import { authInstance, firebaseAuth } from 'src/firebase/firebase'
 import { StyledFirebaseAuth } from 'react-firebaseui'
 import { Button } from 'react-bootstrap'
 

src/components/Logo/Logo.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
-import homeLogo from '../../styles/assets/images/homeLogo.svg'
-import logo from '../../styles/assets/images/logo.svg'
-import logoMobile from '../../styles/assets/images/logo_mobile.svg'
-import useDetectMobileOrTablet from '../../hooks/useDetectMobileOrTablet'
+import homeLogo from 'src/styles/assets/images/homeLogo.svg'
+import logo from 'src/styles/assets/images/logo.svg'
+import logoMobile from 'src/styles/assets/images/logo_mobile.svg'
+import useDetectMobileOrTablet from 'src/hooks/useDetectMobileOrTablet'
 
 function Logo() {
     const { t } = useTranslation()

src/components/SwipeableTemporaryDrawer/SwipeableTemporaryDrawer.tsx

@@ -7,7 +7,7 @@ import Divider from '@material-ui/core/Divider'
 import ListItem from '@material-ui/core/ListItem'
 import ListItemIcon from '@material-ui/core/ListItemIcon'
 import ListItemText from '@material-ui/core/ListItemText'
-import Logo from '../Logo/Logo'
+import Logo from 'src/components/Logo/Logo'
 import { useTranslation } from 'react-i18next'
 
 import styled from 'styled-components'

src/firebase/firebase.tsx

@@ -17,6 +17,7 @@ const firebaseInstance = firebase.initializeApp(firebaseConfig)
 export const firebaseAuth = firebase.auth
 export const authInstance = firebaseInstance.auth()
 export const remoteConfig = firebase.remoteConfig()
+
 remoteConfig.settings = {
     minimumFetchIntervalMillis: 3600000,
     fetchTimeoutMillis: 60000, // default value used here: https://firebase.google.com/docs/reference/js/firebase.remoteconfig.Settings#fetchtimeoutmillis

src/hooks/useCameraMicrophonePermission.tsx

@@ -3,7 +3,7 @@ import {
     STATE_DENIED,
     STATE_GRANTED,
     STATE_WAITING,
-} from '../pages/VideoCall/permissions/PermissionConstants'
+} from 'src/pages/VideoCall/permissions/PermissionConstants'
 
 export default function useCameraMicrophonePermission(name) {
     const [result, setResult] = React.useState(STATE_WAITING)

src/hooks/useCookiePermission.tsx

@@ -4,7 +4,7 @@ import {
     STATE_DENIED,
     STATE_GRANTED,
     STATE_WAITING,
-} from '../pages/VideoCall/permissions/PermissionConstants'
+} from 'src/pages/VideoCall/permissions/PermissionConstants'
 
 export default function useCookiePermission() {
     const [result, setResult] = useState(STATE_WAITING)

src/layout/Columns/Columns.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import styled from 'styled-components'
 import PropTypes from 'prop-types'
-import useDocumentTitle from '../../hooks/useDocumentTitle'
-import { SCREEN } from '../../styles/theme'
-import Footer from '../../components/Footer/Footer'
-import BaseLang from '../../components/Lang/Lang'
+import useDocumentTitle from 'src/hooks/useDocumentTitle'
+import { SCREEN } from 'src/styles/theme'
+import Footer from 'src/components/Footer/Footer'
+import BaseLang from 'src/components/Lang/Lang'
 
 const Lang = styled(BaseLang)`
     position: absolute;

src/layout/Default/Default.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
 import styled from 'styled-components'
-import { SCREEN } from '../../styles/theme'
-import useDocumentTitle from '../../hooks/useDocumentTitle'
-import useDetectMobileOrTablet from '../../hooks/useDetectMobileOrTablet'
-import Header from '../../components/Header/Header'
-import Footer from '../../components/Footer/Footer'
-import BaseLang from '../../components/Lang/Lang'
+import { SCREEN } from 'src/styles/theme'
+import useDocumentTitle from 'src/hooks/useDocumentTitle'
+import useDetectMobileOrTablet from 'src/hooks/useDetectMobileOrTablet'
+import Header from 'src/components/Header/Header'
+import Footer from 'src/components/Footer/Footer'
+import BaseLang from 'src/components/Lang/Lang'
 
 const Lang = styled(BaseLang)`
     position: absolute;

src/pages/Blog/Blog.tsx

@@ -2,8 +2,8 @@ import React from 'react'
 import { useParams } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 
-import DefaultLayout from '../../layout/Default/Default'
-import BlogArticle from '../../components/BlogArticle/BlogArticle'
+import DefaultLayout from 'src/layout/Default/Default'
+import BlogArticle from 'src/components/BlogArticle/BlogArticle'
 import { IonContent } from '@ionic/react'
 
 const Blog = () => {

src/pages/Credits/Credits.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import DefaultLayout from '../../layout/Default/Default'
+import DefaultLayout from 'src/layout/Default/Default'
 import CreditsStyled from './CreditsStyled'
 import data from './data.json'
 import { IonContent } from '@ionic/react'

src/pages/Credits/CreditsStyled.tsx

@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-import { SCREEN } from '../../styles/theme'
+import { SCREEN } from 'src/styles/theme'
 
 const CreditsStyled = styled.div`
     display: flex;

src/pages/Home/Description.tsx

@@ -2,11 +2,11 @@ import React, { useState } from 'react'
 import styled, { css } from 'styled-components'
 import color from 'color'
 import { useTranslation, Trans } from 'react-i18next'
-import { SCREEN } from '../../styles/theme'
-import BaseList from '../../components/List/List'
-import Logo from '../../components/Logo/Logo'
-import BaseArrow, { BaseArrowProps } from '../../components/Arrow/Arrow'
-import useDetectMobileOrTablet from '../../hooks/useDetectMobileOrTablet'
+import { SCREEN } from 'src/styles/theme'
+import BaseList from 'src/components/List/List'
+import Logo from 'src/components/Logo/Logo'
+import BaseArrow, { BaseArrowProps } from 'src/components/Arrow/Arrow'
+import useDetectMobileOrTablet from 'src/hooks/useDetectMobileOrTablet'
 
 interface Collapsable {
     collapsed: boolean

src/pages/Home/Home.tsx

@@ -2,22 +2,22 @@ import React, { useState, useRef } from 'react'
 import styled from 'styled-components'
 import { Link, Route } from 'react-router-dom'
 import { useTranslation, Trans } from 'react-i18next'
-import ColumnsLayout from '../../layout/Columns/Columns'
+import ColumnsLayout from 'src/layout/Columns/Columns'
 import { createCall } from '../../actions/createCall'
-import FormMobile from '../../components/FormMobile/FormMobile'
-import Form from '../../components/Form/Form'
-import VerticallyCenteredModal from '../../components/VerticallyCenteredModal/VerticallyCenteredModal'
+import FormMobile from 'src/components/FormMobile/FormMobile'
+import Form from 'src/components/Form/Form'
+import VerticallyCenteredModal from 'src/components/VerticallyCenteredModal/VerticallyCenteredModal'
 import Description from './Description'
 import {
     setNewCall,
     setNewCallError,
     setNewCallRedirected,
-} from '../../utils/support'
-import Logo from '../../components/Logo/Logo'
-import useDetectMobileOrTablet from '../../hooks/useDetectMobileOrTablet'
+} from 'src/utils/support'
+import Logo from 'src/components//Logo/Logo'
+import useDetectMobileOrTablet from 'src/hooks/useDetectMobileOrTablet'
 import { IonContent } from '@ionic/react'
-import * as LocalStorage from '../../services/local-storage'
-import Login from '../../components/Login'
+import * as LocalStorage from 'src/services/local-storage'
+import Login from 'src/components/Login'
 
 const DataMentions = styled.div`
     .cnil {

src/pages/JoinVideoCall/JoinVideoCall.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import DefaultLayout from '../../layout/Default/Default'
+import DefaultLayout from 'src/layout/Default/Default'
 import { IonContent } from '@ionic/react'
 import { Redirect, Link } from 'react-router-dom'
-import * as LocalStorage from '../../services/local-storage'
+import * as LocalStorage from 'src/services/local-storage'
 import styled from 'styled-components'
 
 const CenteredText = styled.div`

src/pages/LegalMentions/LegalMentions.tsx

@@ -2,8 +2,8 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import ReactMarkdown from 'react-remarkable'
 import styled from 'styled-components'
-import DefaultLayout from '../../layout/Default/Default'
-import useDetectMobileOrTablet from '../../hooks/useDetectMobileOrTablet'
+import DefaultLayout from 'src/layout/Default/Default'
+import useDetectMobileOrTablet from 'src/hooks/useDetectMobileOrTablet'
 import { IonContent } from '@ionic/react'
 const MarkdownContainer = styled.div`
     h2 {

src/pages/MediaNews/MediaNews.tsx

@@ -3,7 +3,7 @@ import { useTranslation, Trans } from 'react-i18next'
 import { MediaNewsTitle, MediaNewsStyled } from './MediaNewsStyled'
 import data from './data'
 
-import DefaultLayout from '../../layout/Default/Default'
+import DefaultLayout from 'src/layout/Default/Default'
 
 const MediaNews = () => {
     const { t } = useTranslation('media')

src/pages/MediaNews/MediaNewsStyled.tsx

@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-import { SCREEN } from '../../styles/theme'
+import { SCREEN } from 'src/styles/theme'
 
 export const MediaNewsTitle = styled.h2`
     display: flex;

src/pages/MediaNews/data.tsx

@@ -1,12 +1,12 @@
-import VingtMinutes from '../../styles/assets/images/media/20Minutes.jpg'
-import LesEchosStart from '../../styles/assets/images/media/LesEchosStart.jpg'
-import Maddyness from '../../styles/assets/images/media/Maddyness.jpg'
-import JCM from '../../styles/assets/images/media/JCM.jpg'
-import ticsante from '../../styles/assets/images/media/ticsante.jpg'
-import MarcheDesSeniors from '../../styles/assets/images/media/MarcheDesSeniors.jpg'
-import MedtechStrasbourg from '../../styles/assets/images/media/MedtechStrasbourg.jpg'
-import Caducee from '../../styles/assets/images/media/Caducee.jpg'
-import Makery from '../../styles/assets/images/media/Makery.jpg'
+import VingtMinutes from 'src/styles/assets/images/media/20Minutes.jpg'
+import LesEchosStart from 'src/styles/assets/images/media/LesEchosStart.jpg'
+import Maddyness from 'src/styles/assets/images/media/Maddyness.jpg'
+import JCM from 'src/styles/assets/images/media/JCM.jpg'
+import ticsante from 'src/styles/assets/images/media/ticsante.jpg'
+import MarcheDesSeniors from 'src/styles/assets/images/media/MarcheDesSeniors.jpg'
+import MedtechStrasbourg from 'src/styles/assets/images/media/MedtechStrasbourg.jpg'
+import Caducee from 'src/styles/assets/images/media/Caducee.jpg'
+import Makery from 'src/styles/assets/images/media/Makery.jpg'
 export default [
     {
         id: 1,