[FRONT]-289 🔧 use absolute import instead relative

Author: ntchou

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%;