Redux store for recent items. BOD-178

client/src/components/breadcrumbs/breadcrumbs.component.jsx

@@ -1,19 +1,35 @@
-import { HomeFilled } from "@ant-design/icons";
+import { HomeFilled, ClockCircleFilled } from "@ant-design/icons";
-import { Breadcrumb } from "antd";
+import { Breadcrumb, Menu, Dropdown } from "antd";
 import React from "react";
 import { connect } from "react-redux";
 import { Link } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
-import { selectBreadcrumbs } from "../../redux/application/application.selectors";
+import {
+  selectBreadcrumbs,
+  selectRecentItems,
+} from "../../redux/application/application.selectors";
 import "./breadcrumbs.styles.scss";
 
 const mapStateToProps = createStructuredSelector({
   breadcrumbs: selectBreadcrumbs,
+  recentItems: selectRecentItems,
 });
 
-export function BreadCrumbs({ breadcrumbs }) {
+export function BreadCrumbs({ breadcrumbs, recentItems }) {
+  const menu = (
+    <Menu>
+      {recentItems.map((i, idx) => (
+        <Menu.Item key={idx}>{i.label}</Menu.Item>
+      ))}
+    </Menu>
+  );
+
   return (
     <div className='breadcrumb-container'>
+      <Dropdown overlay={menu} trigger={["click"]}>
+        <ClockCircleFilled onClick={(e) => e.preventDefault()} />
+      </Dropdown>
+
       <Breadcrumb separator='>'>
         <Breadcrumb.Item>
           <Link to={`/manage`}>

client/src/pages/jobs-detail/jobs-detail.page.container.jsx

@@ -11,14 +11,18 @@ import {
   UPDATE_JOB_STATUS,
 } from "../../graphql/jobs.queries";
 import JobsDetailPage from "./jobs-detail.page.component";
-import { setBreadcrumbs } from "../../redux/application/application.actions";
+import {
+  setBreadcrumbs,
+  addRecentItem,
+} from "../../redux/application/application.actions";
 import { connect } from "react-redux";
 
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
+  addRecentItem: (item) => dispatch(setrecentItem(item)),
 });
 
-function JobsDetailPageContainer({ match, setBreadcrumbs }) {
+function JobsDetailPageContainer({ match, setBreadcrumbs,addRecentItem }) {
   const { jobId } = match.params;
   const { t } = useTranslation();
 
@@ -70,7 +74,7 @@ function JobsDetailPageContainer({ match, setBreadcrumbs }) {
   }, [loading, data, t, error, setBreadcrumbs, jobId]);
 
   if (loading) return <SpinComponent />;
-  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (error) return <AlertComponent message={error.message} type='error' />;
 
   return data.jobs_by_pk ? (
     <JobsDetailPage
@@ -81,7 +85,7 @@ function JobsDetailPageContainer({ match, setBreadcrumbs }) {
       updateJobStatus={updateJobStatus}
     />
   ) : (
-    <AlertComponent message={t("jobs.errors.noaccess")} type="error" />
+    <AlertComponent message={t("jobs.errors.noaccess")} type='error' />
   );
 }
 export default connect(null, mapDispatchToProps)(JobsDetailPageContainer);

client/src/redux/application/application.actions.js

@@ -28,3 +28,8 @@ export const scheduleLoadFailure = (error) => ({
   type: ApplicationActionTypes.CALCULATE_SCHEDULE_LOAD_FAILURE,
   payload: error,
 });
+
+export const addRecentItem = (item) => ({
+  type: ApplicationActionTypes.ADD_RECENT_ITEM,
+  payload: item,
+});

client/src/redux/application/application.reducer.js

@@ -3,6 +3,7 @@ import ApplicationActionTypes from "./application.types";
 const INITIAL_STATE = {
   loading: false,
   breadcrumbs: [],
+  recentItems: [],
   scheduleLoad: {
     load: {},
     calculating: false,
@@ -12,6 +13,11 @@ const INITIAL_STATE = {
 
 const applicationReducer = (state = INITIAL_STATE, action) => {
   switch (action.type) {
+    case ApplicationActionTypes.ADD_RECENT_ITEM:
+      return {
+        ...state,
+        recentItems: [action.payload, ...state.scheduleLoad.slice(0, 9)],
+      };
     case ApplicationActionTypes.SET_BREAD_CRUMBS:
       return {
         ...state,

client/src/redux/application/application.selectors.js

@@ -12,6 +12,11 @@ export const selectBreadcrumbs = createSelector(
   (application) => application.breadcrumbs
 );
 
+export const selectRecentItems = createSelector(
+  [selectApplication],
+  (application) => application.recentItems
+);
+
 export const selectScheduleLoad = createSelector(
   [selectApplication],
   (application) => application.scheduleLoad.load

client/src/redux/application/application.types.js

@@ -5,5 +5,6 @@ const ApplicationActionTypes = {
   CALCULATE_SCHEDULE_LOAD: "CALCULATE_SCHEDULE_LOAD",
   CALCULATE_SCHEDULE_LOAD_SUCCESS: "CALCULATE_SCHEDULE_LOAD_SUCCESS",
   CALCULATE_SCHEDULE_LOAD_FAILURE: "CALCULATE_SCHEDULE_LOAD_FAILURE",
+  ADD_RECENT_ITEM: "ADD_RECENT_ITEM",
 };
 export default ApplicationActionTypes;