[do-1118] Breadcrumbs

src/components/nav/TopBar.jsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { useRef, useEffect } from 'react';
 // import PropTypes from 'prop-types';
 import {
   ChevronRight, User, Settings, HelpCircle, ToggleRight, Clipboard, File,
@@ -10,34 +10,48 @@ import TopBarSearch from 'components/nav/TopBarSearch';
 import getBreadcrumbName from 'const/breadcrumbsNames';
 import { useTranslation } from 'react-i18next';
 import Notifications from 'components/nav/Notifications';
-
+import { setBreadcrumbs } from '../../store/breadcrubms/actionCreators';
+import LoadingIcon from '../LoadingIcon';
 
 // TODO: finish this
 const TopBar = () => {
   const { t } = useTranslation();
   const dispatch = useDispatch();
   const user = useSelector((store) => store.user);
+  const breadcrumbs = useSelector((store) => store.breadcrumbs);
 
   const { pathname } = useLocation();
 
-  const breadcrumbsNodes = pathname.split('/')
-    .filter((path) => !!path)
-    .map((name, i, array) => {
-      const path = `/${array.slice(0, i + 1).join('/')}/`;
-      return (
-        <Link
-          key={path}
-          to={path}
-          className={i === array.length - 1 ? 'breadcrumb--active' : undefined}
-        >
-          {getBreadcrumbName(name) || name}
-        </Link>
-      );
-    })
-    .reduce((r, el) => r.concat(
-      <ChevronRight key={`${el.props.to}-sep`} className="breadcrumb__icon" />, el,
-    ), [])
-    .slice(1);
+  useEffect(() => {
+    const breadcrumbsNodes = pathname.split('/')
+      .filter((path) => !!path)
+      .map((name, i, array) => {
+        const path = `/${array.slice(0, i + 1).join('/')}/`;
+        return {
+          name: getBreadcrumbName(name) || name,
+          link: path,
+        };
+      });
+    dispatch(setBreadcrumbs(breadcrumbsNodes));
+  }, [pathname]);
+
+  breadcrumbs.forEach((item) => {
+    if (!Number.isNaN(parseInt(item.name, 10))) {
+      item.name = <LoadingIcon icon="three-dots" className="w-8 h-8" />;
+    }
+  });
+
+  const breadcrumbsNodes = breadcrumbs.map((breadcrumb, i, array) => (
+    <Link
+      key={breadcrumb.link}
+      to={breadcrumb.link}
+      className={i === array.length - 1 ? 'breadcrumb--active' : undefined}
+    >
+      {breadcrumb.name}
+    </Link>
+  )).reduce((r, el) => r.concat(
+    <ChevronRight key={`${el.props.to}-sep`} className="breadcrumb__icon" />, el,
+  ), []).slice(1);
 
   const userDropdownRef = useRef();
 

src/components/pages/payment/InvoicesTable.jsx

@@ -9,6 +9,8 @@ import { Eye, Printer } from 'react-feather';
 import Button from 'components/form-components/Button';
 import { BlankModal } from 'components/modals';
 import UserStatusForm from 'components/pages/profile/UserStatusForm';
+import { useDispatch } from 'react-redux';
+import { changeCrumbName } from '../../../store/breadcrubms/actionCreators';
 
 const InvoicesTable = (props) => {
   const { match } = props;
@@ -17,6 +19,7 @@ const InvoicesTable = (props) => {
   const [invoices, setInvoices] = useState([]);
   const [subData, setSubData] = useState({});
   const [selectedInvoice, setSelectedInvoice] = useState({});
+  const dispatch = useDispatch();
 
   const customSubscriptionModalRef = useRef();
 
@@ -27,6 +30,8 @@ const InvoicesTable = (props) => {
       Api.get(`payment/project-subscription/${subscriptionId}/`)
         .then((resp) => {
           setSubData(resp.data);
+          dispatch(changeCrumbName(3, resp.data.project.name));
+          dispatch(changeCrumbName(5, resp.data.subscription.name));
         });
     } else {
       url = 'payment/invoices/';

src/components/pages/payment/ProjectDetail.jsx

@@ -19,11 +19,14 @@ import Form from 'components/form-components/Form';
 import { p2sStatus, u2pRole, u2pStatus } from 'const/projects';
 import toast from 'utils/toast';
 import moment from 'moment';
+import { useDispatch } from 'react-redux';
+import { changeCrumbName } from '../../../store/breadcrubms/actionCreators';
 
 const ProjectDetail = (props) => {
   const { match, history } = props;
   const projectId = match.params.id;
 
+  const dispatch = useDispatch();
   const { t } = useTranslation();
   const addUserModalRef = useRef();
   const refreshTokenModalRef = useRef();
@@ -50,6 +53,7 @@ const ProjectDetail = (props) => {
     Api.get(`payment/project/${projectId}/`)
       .then((resp) => {
         setProject(resp.data);
+        dispatch(changeCrumbName(3, resp.data.name));
       });
   };
 

src/store/breadcrubms/actionCreators.js

@@ -0,0 +1,11 @@
+import { SET_BREADCRUBMS, CHANGE_CRUMB_NAME } from './actions';
+
+export const setBreadcrumbs = (breadcrumbs) => ({
+  type: SET_BREADCRUBMS,
+  payload: breadcrumbs,
+});
+
+export const changeCrumbName = (index, name) => ({
+  type: CHANGE_CRUMB_NAME,
+  payload: { index, name },
+});

src/store/breadcrubms/actions.js

@@ -0,0 +1,2 @@
+export const SET_BREADCRUBMS = 'SET_BREADCRUBMS';
+export const CHANGE_CRUMB_NAME = 'CHANGE_CRUMB_NAME';

src/store/breadcrubms/breadrumbsReducer.js

@@ -0,0 +1,18 @@
+import { SET_BREADCRUBMS, CHANGE_CRUMB_NAME } from './actions';
+
+
+const breadcrumbsReducer = (state = [], action) => {
+  switch (action.type) {
+    case SET_BREADCRUBMS:
+      return action.payload;
+
+    case CHANGE_CRUMB_NAME:
+      state[action.payload.index].name = action.payload.name;
+      return [...state];
+
+    default:
+      return state;
+  }
+};
+
+export default breadcrumbsReducer;

src/store/mainReducer.js

@@ -1,8 +1,10 @@
 import { combineReducers } from 'redux';
 import userReducer from 'store/user/reducer';
+import breadcrumbsReducer from 'store/breadcrubms/breadrumbsReducer';
 
 const mainReducer = combineReducers({
   user: userReducer,
+  breadcrumbs: breadcrumbsReducer,
 });
 
 export default mainReducer;

src/styles/index.scss

@@ -114,3 +114,9 @@
   margin-right: 0;
 }
 
+.breadcrumb a {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  max-width: 7rem;
+}