Merge remote-tracking branch 'origin/feature/breadcrumb/fix_localize'

client/src/components/Authentication.js

@@ -8,7 +8,7 @@ export default function AuthenticationWrapper({
   isAuthenticated = false,
   ...rest
 }) {
-  const to = { pathname: '/dashboard/homepage' };
+  const to = { pathname: '/homepage' };
 
   return (
     <Route path='/auth'>

client/src/components/Dashboard/Dashboard.js

@@ -11,13 +11,13 @@ export default function Dashboard() {
   return (
     <div className='dashboard'>
       <Switch>
-        <Route path='/dashboard/preferences'>
+        <Route path='/preferences'>
           <Sidebar />
           <PreferencesSidebar />
           <PreferencesContent />
         </Route>
 
-        <Route path='/dashboard'>
+        <Route path='/'>
           <Sidebar />
           <DashboardContent />
         </Route>

client/src/components/Dashboard/DashboardBreadcrumbs.js

@@ -3,38 +3,33 @@ import {
   CollapsibleList,
   MenuItem,
   Classes,
-  Boundary
+  Boundary,
 } from '@blueprintjs/core';
 import classNames from 'classnames';
+import withBreadcrumbs from 'react-router-breadcrumbs-hoc';
+import routes from 'routes/dashboard';
+import { useHistory } from 'react-router-dom';
 
-export default function DashboardBreadcrumbs() {
-  function renderBreadcrumb(props) {
-    if (props.href != null) {
-      return <a className={Classes.BREADCRUMB}>{props.text}</a>;
-    } else {
-      return (
-        <span
-          className={classNames(Classes.BREADCRUMB, Classes.BREADCRUMB_CURRENT)}
-        >
-          {props.text}
-        </span>
-      );
-    }
-  }
-  return (
+function DashboardBreadcrumbs( {breadcrumbs }){
+  const history = useHistory();
+
+  return(
     <CollapsibleList
-      className={Classes.BREADCRUMBS}
-      dropdownTarget={<span className={Classes.BREADCRUMBS_COLLAPSED} />}
-      visibleItemRenderer={renderBreadcrumb}
-      collapseFrom={Boundary.START}
-      visibleItemCount={0}
-    >
-      <MenuItem icon='folder-close' text='All files' href='#' />
-      <MenuItem icon='folder-close' text='Users' href='#' />
-      <MenuItem icon='folder-close' text='Jane Person' href='#' />
-      <MenuItem icon='folder-close' text='My documents' href='#' />
-      <MenuItem icon='folder-close' text='Classy dayjob' href='#' />
-      <MenuItem icon='document' text='How to crush it' />
+     className={Classes.BREADCRUMBS}
+     dropdownTarget={<span className={Classes.BREADCRUMBS_COLLAPSED} />}
+     collapseFrom={Boundary.START}
+     visibleItemCount={0}>
+     {
+      breadcrumbs.map(({ breadcrumb,match })=>{
+        return (<MenuItem
+          key={match.url}
+          icon={'folder-close'}
+          text={breadcrumb}
+          onClick={() => history.push(match.url) } />)
+        })
+     }
     </CollapsibleList>
-  );
+  )
 }
+
+export default withBreadcrumbs(routes)(DashboardBreadcrumbs)

client/src/components/Dashboard/DashboardContentRoute.js

@@ -5,7 +5,7 @@ import routes from 'routes/dashboard'
 export default function DashboardContentRoute() {
 
   return (
-    <Route pathname="/dashboard">
+    <Route pathname="/">
       <Switch>
         { routes.map((route, index) => (
           <Route

client/src/components/Dashboard/DashboardTopbar.js

@@ -24,7 +24,7 @@ function DashboardTopbar({
   const history = useHistory();
 
   const handlerClickEditView = () => {
-    history.push(`/dashboard/custom_views/${editViewId}/edit`);
+    history.push(`/custom_views/${editViewId}/edit`);
   };
 
   const maybleRenderPageSubtitle = pageSubtitle && <h3>{pageSubtitle}</h3>;
@@ -48,7 +48,7 @@ function DashboardTopbar({
               role='img'
               focusable='false'
             >
-              <title>Menu</title>
+              <title><T id={'menu'}/></title>
               <path
                 stroke='currentColor'
                 stroke-linecap='round'

client/src/components/Dashboard/TopbarUser.js

@@ -9,6 +9,7 @@ import {
   Popover
 } from '@blueprintjs/core';
 import t from 'store/types';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 
 function DashboardTopbarUser({ logout }) {
   const history = useHistory();
@@ -20,12 +21,12 @@ function DashboardTopbarUser({ logout }) {
 
   const userAvatarDropMenu = useMemo(() => (
     <Menu>
-      <MenuItem icon="graph" text="Graph" />
-      <MenuItem icon="map" text="Map" />
-      <MenuItem icon="th" text="Table" shouldDismissPopover={false} />
-      <MenuItem icon="zoom-to-fit" text="Nucleus" disabled={true} />
+      <MenuItem icon="graph" text={<T id={'menu'}/>} />
+      <MenuItem icon="map" text={<T id={'graph'}/>} />
+      <MenuItem icon="th" text={<T id={'table'}/>} shouldDismissPopover={false} />
+      <MenuItem icon="zoom-to-fit" text={<T id={'nucleus'}/>} disabled={true} />
       <MenuDivider />
-      <MenuItem icon="cog" text="Logout" onClick={onClickLogout} />
+      <MenuItem icon="cog" text={<T id={'logout'}/>} onClick={onClickLogout} />
     </Menu>
   ), [onClickLogout]);
 

client/src/components/Expenses/ExpenseForm.js

@@ -32,14 +32,14 @@ export default function ExpenseForm({
     selectedPaymentAccount: null
   });
   const validationSchema = Yup.object().shape({
-    date: Yup.date().required(),
-    description: Yup.string().trim(),
-    expense_account_id: Yup.number().required(),
-    payment_account_id: Yup.number().required(),
-    amount: Yup.number().required(),
-    currency_code: Yup.string().required(),
-    publish: Yup.boolean(),
-    exchange_rate: Yup.number()
+    date: Yup.date().required().label(formatMessage({id:'date'})),
+    description: Yup.string().trim().label(formatMessage({id:'description'})),
+    expense_account_id: Yup.number().required().label(formatMessage({id:'expense_account_id'})),
+    payment_account_id: Yup.number().required().label(formatMessage({id:'payment_account_id'})),
+    amount: Yup.number().required().label(formatMessage({id:'amount'})),
+    currency_code: Yup.string().required().label(formatMessage({id:'currency_code_'})),
+    publish: Yup.boolean().label(formatMessage({id:'publish'})),
+    exchange_rate: Yup.number().label(formatMessage({id:'exchange_rate_'}))
   });
 
   const formik = useFormik({
@@ -52,7 +52,7 @@ export default function ExpenseForm({
       submitExpense(values)
         .then(response => {
           AppToaster.show({
-            message: 'the_expense_has_been_submit'
+            message: formatMessage({id:'the_expense_has_been_successfully_created'})
           });
         })
         .catch(error => {});
@@ -108,11 +108,11 @@ export default function ExpenseForm({
 
   const paymentAccountLabel = state.selectedPaymentAccount
     ? state.selectedPaymentAccount.name
-    : 'Select Payment Account';
+    : <T id={'select_payment_account'}/>;
 
   const expenseAccountLabel = state.selectedExpenseAccount
     ? state.selectedExpenseAccount.name
-    : 'Select Expense Account';
+    : <T id={'select_expense_account'}/>;
 
   const handleClose = () => {};
 

client/src/components/Expenses/ExpensesActionsBar.js

@@ -50,7 +50,7 @@ export default function ExpensesActionsBar({
         <AnchorButton
           className={Classes.MINIMAL}
           icon={<Icon icon='plus' />}
-          href='/dashboard/expenses/new'
+          href='/expenses/new'
           text={<T id={'new_expense'}/>}
           onClick={onClickNewAccount}
         />

client/src/components/Expenses/ExpensesViewsTabs.js

@@ -17,7 +17,7 @@ function AccountsViewsTabs({ views }) {
   const {path} = useRouteMatch();
 
   const handleClickNewView = () => {
-    history.push('/dashboard/custom_views/new');
+    history.push('/custom_views/new');
   };
 
   const tabs = views.map((view) => {

client/src/components/FilterDropdown.js

@@ -19,9 +19,11 @@ export default function FilterDropdown({
   fields,
   onFilterChange,
 }) {
+  const {formatMessage} =useIntl();
+
   const conditionalsItems = useMemo(() => [
-    { value: 'and', label: 'AND' },
-    { value: 'or', label: 'OR' },
+    { value: 'and', label:formatMessage({id:'and'})  },
+    { value: 'or', label: formatMessage({id:'or'}) },
   ], []);
 
   const resourceFields = useMemo(() => [
@@ -29,11 +31,11 @@ export default function FilterDropdown({
   ], [fields]);
 
   const compatatorsItems = useMemo(() => [
-    {value: '', label: 'Select a compatator'},
-    {value: 'equals', label: 'Equals'},
-    {value: 'not_equal', label: 'Not Equal'},
-    {value: 'contain', label: 'Contain'},
-    {value: 'not_contain', label: 'Not Contain'},
+    {value: '', label:formatMessage({id:'select_a_comparator'})},
+    {value: 'equals', label: formatMessage({id:'equals'})},
+    {value: 'not_equal', label: formatMessage({id:'not_equal'})},
+    {value: 'contain', label: formatMessage({id:'contain'})},
+    {value: 'not_contain', label: formatMessage({id:'not_contain'})},
   ], []);
 
   const defaultFilterCondition = useMemo(() => ({

client/src/components/FinancialSheet.js

@@ -2,6 +2,7 @@ import React, { useMemo, useCallback } from 'react';
 import moment from 'moment';
 import classnames from 'classnames';
 import LoadingIndicator from 'components/LoadingIndicator';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 
 export default function FinancialSheet({
   companyName,
@@ -18,42 +19,44 @@ export default function FinancialSheet({
   const formattedFromDate = moment(fromDate).format('DD MMMM YYYY');
   const formattedToDate = moment(toDate).format('DD MMMM YYYY');
   const nameModifer = name ? `financial-sheet--${name}` : '';
-
-  const methodsLabels = useMemo(() => ({
-    'cash': 'Cash',
-    'accural': 'Accural',
-  }), []);
+  const { formatMessage } = useIntl();
+  const methodsLabels = useMemo(
+    () => ({
+      cash: formatMessage({id:'cash'}),
+      accrual: formatMessage({id:'accrual'}),
+    }),
+    []
+  );
   const getBasisLabel = useCallback((b) => methodsLabels[b], [methodsLabels]);
-  const basisLabel = useMemo(() => getBasisLabel(basis), [getBasisLabel, basis]);
+  const basisLabel = useMemo(() => getBasisLabel(basis), [
+    getBasisLabel,
+    basis,
+  ]);
 
   return (
     <div className={classnames('financial-sheet', nameModifer, className)}>
       <LoadingIndicator loading={loading} spinnerSize={34} />
 
-      <div className={classnames('financial-sheet__inner', {
-        'is-loading': loading,
-      })}>
-        <h1 class="financial-sheet__title">
-          { companyName }
-        </h1>
-        <h6 class="financial-sheet__sheet-type">{ sheetType }</h6>
-        <div class="financial-sheet__date">
-          From { formattedFromDate } | To { formattedToDate }
+      <div
+        className={classnames('financial-sheet__inner', {
+          'is-loading': loading,
+        })}
+      >
+        <h1 class='financial-sheet__title'>{companyName}</h1>
+        <h6 class='financial-sheet__sheet-type'>{sheetType}</h6>
+        <div class='financial-sheet__date'>
+      <T id={'from'}/> {formattedFromDate} | <T id={'to'}/> {formattedToDate}
         </div>
 
-        <div class="financial-sheet__table">
-          { children }
-        </div>
-        <div class="financial-sheet__accounting-basis">
-          { accountingBasis }
-        </div>
+        <div class='financial-sheet__table'>{children}</div>
+        <div class='financial-sheet__accounting-basis'>{accountingBasis}</div>
 
-        { (basisLabel) && (
-          <div class="financial-sheet__basis">
-            Accounting Basis: { basisLabel }
+        {basisLabel && (
+          <div class='financial-sheet__basis'>
+            <T id={'accounting_basis'}/> {basisLabel}
           </div>
-        )}        
+        )}
       </div>
     </div>
   );
-}
+}

client/src/components/Preferences/PreferencesContentRoute.js

@@ -4,11 +4,11 @@ import preferencesRoutes from 'routes/preferences'
 
 
 export default function DashboardContentRoute() {
-  const defaultTab = '/dashboard/preferences/general';
+  const defaultTab = '/preferences/general';
 
   return (
-    <Route pathname="/dashboard/preferences">
-      <Redirect from='/dashboard/preferences' to={defaultTab} />
+    <Route pathname="/preferences">
+      <Redirect from='/preferences' to={defaultTab} />
 
       <Switch>
         { preferencesRoutes.map((route, index) => (

client/src/components/Preferences/PreferencesTopbar.js

@@ -11,16 +11,16 @@ export default function PreferencesTopbar() {
       <h2>Accounts</h2>
 
       <div class="preferences__topbar-actions">
-        <Route pathname="/dashboard/preferences">
+        <Route pathname="/preferences">
           <Switch>
             <Route
               exact
-              path={'/dashboard/preferences/users'}
+              path={'/preferences/users'}
               component={UsersActions} />
 
             <Route
               exact
-              path={'/dashboard/preferences/currencies'}
+              path={'/preferences/currencies'}
               component={CurrenciesActions} />
           </Switch>
         </Route>

client/src/components/PrivateRoute.js

@@ -17,7 +17,7 @@ function PrivateRoute({
     <BodyClassName className={''}>
       <Route
         {...rest}
-        path="/dashboard"
+        path="/"
         render={_props =>
           isAuthenticated ? (<Component {..._props} />) :
           (