From 07afcabeb01b988e383fd7f79a24718c27ba21a1 Mon Sep 17 00:00:00 2001 From: burnettk Date: Thu, 29 Sep 2022 18:13:53 -0400 Subject: [PATCH] show recent process models on the HomePage --- src/interfaces.ts | 6 +++ src/routes/HomePage.tsx | 45 +++++++++++++++- src/routes/ProcessModelShow.tsx | 93 ++++++++++++++++++++------------- 3 files changed, 108 insertions(+), 36 deletions(-) diff --git a/src/interfaces.ts b/src/interfaces.ts index f7cafa2..0f451f2 100644 --- a/src/interfaces.ts +++ b/src/interfaces.ts @@ -3,3 +3,9 @@ export interface Secret { value: string; username: string; } + +export interface RecentProcessModel { + processGroupIdentifier: string; + processModelIdentifier: string; + processModelDisplayName: string; +} diff --git a/src/routes/HomePage.tsx b/src/routes/HomePage.tsx index 97767ab..eeb05c3 100644 --- a/src/routes/HomePage.tsx +++ b/src/routes/HomePage.tsx @@ -4,6 +4,7 @@ import { Link, useSearchParams } from 'react-router-dom'; import PaginationForTable from '../components/PaginationForTable'; import { getPageInfoFromSearchParams } from '../helpers'; import HttpService from '../services/HttpService'; +import { RecentProcessModel } from '../interfaces'; export default function HomePage() { const [searchParams] = useSearchParams(); @@ -22,6 +23,12 @@ export default function HomePage() { }); }, [searchParams]); + let recentProcessModels: RecentProcessModel[] = []; + const recentProcessModelsString = localStorage.getItem('recentProcessModels'); + if (recentProcessModelsString !== null) { + recentProcessModels = JSON.parse(recentProcessModelsString); + } + const buildTable = () => { const rows = tasks.map((row) => { const rowToUse = row as any; @@ -74,7 +81,43 @@ export default function HomePage() { ); }; - const relevantProcessModelSection = null; + const buildRecentProcessModelSection = () => { + const rows = recentProcessModels.map((row) => { + const rowToUse = row as any; + return ( + + + + {rowToUse.processModelDisplayName} + + + + + ); + }); + return ( + <> +

Processes to start

+ + + + + + + + {rows} +
Process ModelActions
+ + ); + }; + + const relevantProcessModelSection = + recentProcessModels.length > 0 && buildRecentProcessModelSection(); if (pagination) { const { page, perPage } = getPageInfoFromSearchParams(searchParams); diff --git a/src/routes/ProcessModelShow.tsx b/src/routes/ProcessModelShow.tsx index 6cf2d82..7f98e8a 100644 --- a/src/routes/ProcessModelShow.tsx +++ b/src/routes/ProcessModelShow.tsx @@ -5,6 +5,7 @@ import ProcessBreadcrumb from '../components/ProcessBreadcrumb'; import FileInput from '../components/FileInput'; import HttpService from '../services/HttpService'; import ErrorContext from '../contexts/ErrorContext'; +import { RecentProcessModel } from '../interfaces'; export default function ProcessModelShow() { const params = useParams(); @@ -14,45 +15,67 @@ export default function ProcessModelShow() { const [processInstanceResult, setProcessInstanceResult] = useState(null); const [reloadModel, setReloadModel] = useState(false); - // useEffect(() => { - // // All values stored in localStorage are strings. - // // Grab our recentProcessModels string from localStorage. - // const stringFromLocalStorage = window.localStorage.getItem( - // 'recentProcessModels' - // ); - // - // // Then parse that string into an actual value. - // const parsedValueFromString = JSON.parse(stringFromLocalStorage); - // - // // If that value is null (meaning that we've never saved anything to that spot in localStorage before), use an empty array as our array. Otherwise, just stick with the value we've just parsed out. - // const array = parsedValueFromString || []; - // - // // Here's the value we want to add - // const value = { - // processGroupIdentifier: params.process_group_id, - // processModelIdentifier: params.process_model_id, - // }; - // - // // If our parsed/empty array doesn't already have this value in it... - // if (array.indexOf(value) == -1) { - // // add the value to the array - // array.push(value); - // - // // turn the array WITH THE NEW VALUE IN IT into a string to prepare it to be stored in localStorage - // const stringRepresentingArray = JSON.stringify(array); - // - // // and store it in localStorage as "recentProcessModels" - // window.localStorage.setItem( - // 'recentProcessModels', - // stringRepresentingArray - // ); - // } - // }, []); - useEffect(() => { + const storeRecentProcessModelInLocalStorage = ( + processModelForStorage: any + ) => { + if ( + params.process_group_id === undefined || + params.process_model_id === undefined + ) { + return; + } + // All values stored in localStorage are strings. + // Grab our recentProcessModels string from localStorage. + const stringFromLocalStorage = window.localStorage.getItem( + 'recentProcessModels' + ); + + // adapted from https://stackoverflow.com/a/59424458/6090676 + // If that value is null (meaning that we've never saved anything to that spot in localStorage before), use an empty array as our array. Otherwise, use the value we parse out. + let array: RecentProcessModel[] = []; + if (stringFromLocalStorage !== null) { + // Then parse that string into an actual value. + array = JSON.parse(stringFromLocalStorage); + } + + // Here's the value we want to add + const value = { + processGroupIdentifier: processModelForStorage.process_group_id, + processModelIdentifier: processModelForStorage.id, + processModelDisplayName: processModelForStorage.display_name, + }; + + // If our parsed/empty array doesn't already have this value in it... + const matchingItem = array.find( + (item) => + item.processGroupIdentifier === value.processGroupIdentifier && + item.processModelIdentifier === value.processModelIdentifier + ); + if (matchingItem === undefined) { + // add the value to the beginning of the array + array.unshift(value); + + // Keep the array to 3 items + if (array.length > 3) { + array.pop(); + } + + // turn the array WITH THE NEW VALUE IN IT into a string to prepare it to be stored in localStorage + const stringRepresentingArray = JSON.stringify(array); + + // and store it in localStorage as "recentProcessModels" + window.localStorage.setItem( + 'recentProcessModels', + stringRepresentingArray + ); + } + }; + const processResult = (result: object) => { setProcessModel(result); setReloadModel(false); + storeRecentProcessModelInLocalStorage(result); }; HttpService.makeCallToBackend({ path: `/process-models/${params.process_group_id}/${params.process_model_id}`,