From e1ba2c97b304efc368d0e6cec38e3800dd7c7593 Mon Sep 17 00:00:00 2001 From: Keeslow Date: Wed, 28 Apr 2021 15:02:13 +0300 Subject: [PATCH 1/5] crumbsdonebutwithproblem --- src/components/nav/TopBar.jsx | 46 +++++++++++-------- .../pages/payment/InvoicesTable.jsx | 8 ++++ .../pages/payment/ProjectDetail.jsx | 4 ++ src/store/breadcrubms/actionCreators.js | 9 ++++ src/store/breadcrubms/breadrumbsReducer.js | 23 ++++++++++ src/store/mainReducer.js | 2 + 6 files changed, 73 insertions(+), 19 deletions(-) create mode 100644 src/store/breadcrubms/actionCreators.js create mode 100644 src/store/breadcrubms/breadrumbsReducer.js diff --git a/src/components/nav/TopBar.jsx b/src/components/nav/TopBar.jsx index 3906bc4e..42b95334 100644 --- a/src/components/nav/TopBar.jsx +++ b/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,6 +10,7 @@ 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'; // TODO: finish this @@ -17,27 +18,34 @@ 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 ( - - {getBreadcrumbName(name) || name} - - ); - }) - .reduce((r, el) => r.concat( - , 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]); + + const breadcrumbsNodes = breadcrumbs.map((breadcrumb, i, array) => ( + + {breadcrumb.name} + + )).reduce((r, el) => r.concat( + , el, + ), []).slice(1); const userDropdownRef = useRef(); diff --git a/src/components/pages/payment/InvoicesTable.jsx b/src/components/pages/payment/InvoicesTable.jsx index 57e75bcc..706833d8 100644 --- a/src/components/pages/payment/InvoicesTable.jsx +++ b/src/components/pages/payment/InvoicesTable.jsx @@ -7,6 +7,8 @@ import { useTranslation } from 'react-i18next'; import Api, { baseApiUrl } from 'api'; import { Eye, Printer } from 'react-feather'; import Button from 'components/form-components/Button'; +import { useDispatch } from 'react-redux'; +import { changeCrumbName } from '../../../store/breadcrubms/actionCreators'; const InvoicesTable = (props) => { @@ -15,6 +17,7 @@ const InvoicesTable = (props) => { const { t } = useTranslation(); const [invoices, setInvoices] = useState([]); const [subData, setSubData] = useState({}); + const dispatch = useDispatch(); const fetchData = () => { let url; @@ -30,6 +33,10 @@ const InvoicesTable = (props) => { Api.get(url) .then((resp) => { setInvoices(resp.data); + console.log(resp.data); + debugger; + dispatch(changeCrumbName(3, resp.data[0].project_name)); + dispatch(changeCrumbName(5, resp.data[0].subscription_name)); }); }; @@ -55,6 +62,7 @@ const InvoicesTable = (props) => { } return t('myPayments'); }; + console.log(invoices); return ( diff --git a/src/components/pages/payment/ProjectDetail.jsx b/src/components/pages/payment/ProjectDetail.jsx index 575b814a..206f9355 100644 --- a/src/components/pages/payment/ProjectDetail.jsx +++ b/src/components/pages/payment/ProjectDetail.jsx @@ -18,11 +18,14 @@ import { dateFormat } from 'utils'; import Form from 'components/form-components/Form'; import { p2sStatus, u2pRole, u2pStatus } from 'const/projects'; import toast from 'utils/toast'; +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(); @@ -49,6 +52,7 @@ const ProjectDetail = (props) => { Api.get(`payment/project/${projectId}/`) .then((resp) => { setProject(resp.data); + dispatch(changeCrumbName(3, resp.data.name)); }); }; diff --git a/src/store/breadcrubms/actionCreators.js b/src/store/breadcrubms/actionCreators.js new file mode 100644 index 00000000..c32beffe --- /dev/null +++ b/src/store/breadcrubms/actionCreators.js @@ -0,0 +1,9 @@ +export const setBreadcrumbs = (breadcrumbs) => ({ + type: 'SET_BREADCRUBMS', + payload: breadcrumbs, +}); + +export const changeCrumbName = (index, name) => ({ + type: 'CHANGE_CRUMB_NAME', + payload: { index, name }, +}); diff --git a/src/store/breadcrubms/breadrumbsReducer.js b/src/store/breadcrubms/breadrumbsReducer.js new file mode 100644 index 00000000..0ab98480 --- /dev/null +++ b/src/store/breadcrubms/breadrumbsReducer.js @@ -0,0 +1,23 @@ + +const initialState = [ + // { + // name: '', + // link: '', + // }, +]; + +const breadcrumbsReducer = (state = initialState, 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; diff --git a/src/store/mainReducer.js b/src/store/mainReducer.js index 8335ae4e..da1b1619 100644 --- a/src/store/mainReducer.js +++ b/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; From 8bc927391d77f65da62aed320559e7143cae3199 Mon Sep 17 00:00:00 2001 From: Keeslow Date: Wed, 28 Apr 2021 16:53:06 +0300 Subject: [PATCH 2/5] crumbs --- src/components/pages/payment/InvoicesTable.jsx | 9 ++++----- src/styles/index.scss | 6 ++++++ 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/src/components/pages/payment/InvoicesTable.jsx b/src/components/pages/payment/InvoicesTable.jsx index 10aa7747..367293e6 100644 --- a/src/components/pages/payment/InvoicesTable.jsx +++ b/src/components/pages/payment/InvoicesTable.jsx @@ -37,10 +37,10 @@ const InvoicesTable = (props) => { Api.get(url) .then((resp) => { setInvoices(resp.data); - console.log(resp.data); - debugger; - dispatch(changeCrumbName(3, resp.data[0].project_name)); - dispatch(changeCrumbName(5, resp.data[0].subscription_name)); + if (subscriptionId) { + dispatch(changeCrumbName(3, resp.data[0].project_name)); + dispatch(changeCrumbName(5, resp.data[0].subscription_name)); + } }); }; @@ -66,7 +66,6 @@ const InvoicesTable = (props) => { } return t('myPayments'); }; - console.log(invoices); return ( <> diff --git a/src/styles/index.scss b/src/styles/index.scss index 8a49bb9a..c7357dd3 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -114,3 +114,9 @@ margin-right: 0; } +.breadcrumb a { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + max-width: 20%; +} From 63e519231ea82c9fc49ab57341b8410d48fd2eca Mon Sep 17 00:00:00 2001 From: Keeslow Date: Wed, 28 Apr 2021 17:10:13 +0300 Subject: [PATCH 3/5] breadsfin --- src/store/breadcrubms/actionCreators.js | 6 ++++-- src/store/breadcrubms/actions.js | 2 ++ src/store/breadcrubms/breadrumbsReducer.js | 13 ++++--------- src/styles/index.scss | 2 +- 4 files changed, 11 insertions(+), 12 deletions(-) create mode 100644 src/store/breadcrubms/actions.js diff --git a/src/store/breadcrubms/actionCreators.js b/src/store/breadcrubms/actionCreators.js index c32beffe..7780d836 100644 --- a/src/store/breadcrubms/actionCreators.js +++ b/src/store/breadcrubms/actionCreators.js @@ -1,9 +1,11 @@ +import { SET_BREADCRUBMS, CHANGE_CRUMB_NAME } from './actions'; + export const setBreadcrumbs = (breadcrumbs) => ({ - type: 'SET_BREADCRUBMS', + type: SET_BREADCRUBMS, payload: breadcrumbs, }); export const changeCrumbName = (index, name) => ({ - type: 'CHANGE_CRUMB_NAME', + type: CHANGE_CRUMB_NAME, payload: { index, name }, }); diff --git a/src/store/breadcrubms/actions.js b/src/store/breadcrubms/actions.js new file mode 100644 index 00000000..763a3886 --- /dev/null +++ b/src/store/breadcrubms/actions.js @@ -0,0 +1,2 @@ +export const SET_BREADCRUBMS = 'SET_BREADCRUBMS'; +export const CHANGE_CRUMB_NAME = 'CHANGE_CRUMB_NAME'; diff --git a/src/store/breadcrubms/breadrumbsReducer.js b/src/store/breadcrubms/breadrumbsReducer.js index 0ab98480..2dccbcef 100644 --- a/src/store/breadcrubms/breadrumbsReducer.js +++ b/src/store/breadcrubms/breadrumbsReducer.js @@ -1,17 +1,12 @@ +import { SET_BREADCRUBMS, CHANGE_CRUMB_NAME } from './actions'; -const initialState = [ - // { - // name: '', - // link: '', - // }, -]; -const breadcrumbsReducer = (state = initialState, action) => { +const breadcrumbsReducer = (state = [], action) => { switch (action.type) { - case 'SET_BREADCRUBMS': + case SET_BREADCRUBMS: return action.payload; - case 'CHANGE_CRUMB_NAME': + case CHANGE_CRUMB_NAME: state[action.payload.index].name = action.payload.name; return [...state]; diff --git a/src/styles/index.scss b/src/styles/index.scss index c7357dd3..246d57b1 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -118,5 +118,5 @@ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; - max-width: 20%; + max-width: 7rem; } From 1be56ead834d1cb50c65ce5ee1be8dca7b3ee002 Mon Sep 17 00:00:00 2001 From: Keeslow Date: Thu, 6 May 2021 20:28:31 +0300 Subject: [PATCH 4/5] crumbswithloader --- src/components/nav/TopBar.jsx | 10 +++++++++- src/components/pages/payment/InvoicesTable.jsx | 6 ++---- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/src/components/nav/TopBar.jsx b/src/components/nav/TopBar.jsx index 42b95334..45a5f49b 100644 --- a/src/components/nav/TopBar.jsx +++ b/src/components/nav/TopBar.jsx @@ -11,7 +11,7 @@ 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 = () => { @@ -32,6 +32,14 @@ const TopBar = () => { link: path, }; }); + const checkIntInCrumb = () => { + breadcrumbsNodes.forEach((item) => { + if (!Number.isNaN(parseInt(item.name, 10))) { + item.name = ; + } + }); + }; + checkIntInCrumb(); dispatch(setBreadcrumbs(breadcrumbsNodes)); }, [pathname]); diff --git a/src/components/pages/payment/InvoicesTable.jsx b/src/components/pages/payment/InvoicesTable.jsx index 367293e6..f47d302e 100644 --- a/src/components/pages/payment/InvoicesTable.jsx +++ b/src/components/pages/payment/InvoicesTable.jsx @@ -30,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/'; @@ -37,10 +39,6 @@ const InvoicesTable = (props) => { Api.get(url) .then((resp) => { setInvoices(resp.data); - if (subscriptionId) { - dispatch(changeCrumbName(3, resp.data[0].project_name)); - dispatch(changeCrumbName(5, resp.data[0].subscription_name)); - } }); }; From 3b445fd379a1182696218518b82cd81f2064ff03 Mon Sep 17 00:00:00 2001 From: Keeslow Date: Tue, 18 May 2021 00:46:19 +0300 Subject: [PATCH 5/5] upd --- src/components/nav/TopBar.jsx | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/src/components/nav/TopBar.jsx b/src/components/nav/TopBar.jsx index 45a5f49b..5aee8c32 100644 --- a/src/components/nav/TopBar.jsx +++ b/src/components/nav/TopBar.jsx @@ -32,17 +32,15 @@ const TopBar = () => { link: path, }; }); - const checkIntInCrumb = () => { - breadcrumbsNodes.forEach((item) => { - if (!Number.isNaN(parseInt(item.name, 10))) { - item.name = ; - } - }); - }; - checkIntInCrumb(); dispatch(setBreadcrumbs(breadcrumbsNodes)); }, [pathname]); + breadcrumbs.forEach((item) => { + if (!Number.isNaN(parseInt(item.name, 10))) { + item.name = ; + } + }); + const breadcrumbsNodes = breadcrumbs.map((breadcrumb, i, array) => (