From ed516c8270dfc6e6ad3ce89138aee6f95dec3624 Mon Sep 17 00:00:00 2001 From: talhainvenxion Date: Thu, 29 Sep 2022 23:20:28 +0500 Subject: [PATCH 1/6] loading issue is fixed for all tables --- src/ui/layouts/common/Table/index.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/ui/layouts/common/Table/index.tsx b/src/ui/layouts/common/Table/index.tsx index 22a993055..525ad33db 100644 --- a/src/ui/layouts/common/Table/index.tsx +++ b/src/ui/layouts/common/Table/index.tsx @@ -9,6 +9,7 @@ import { If, H3, Truncate, + FullWidthSpinner, // FullWidthSpinner, } from '../../../components'; import { getPaginationData } from '../../../../utils/pagination'; @@ -60,15 +61,15 @@ export const Table: React.FC = ({ rowsToDisplay = itemsForPage; } - // if (loading) { - // return ; - // } + if (loading) { + return ; + } return ( 0 && !loading} - condition={tableRows.length > 0} + condition={tableRows.length > 0 && !loading} + // condition={tableRows.length > 0} renderWhenTrue={() => ( <> From aec31834bdb2f0e026891b5dd08265a3ceb41ecd Mon Sep 17 00:00:00 2001 From: talhainvenxion Date: Thu, 29 Sep 2022 23:40:21 +0500 Subject: [PATCH 2/6] comment dead code will remove later --- .../layouts/pipelines/Pipelines/useService.ts | 6 ++-- src/ui/layouts/runs/Stacks/index.tsx | 29 +++++++++---------- src/ui/layouts/runs/Stacks/useService.ts | 8 ++--- .../layouts/stackComponents/Stacks/index.tsx | 28 +++++++++--------- .../stackComponents/Stacks/useService.ts | 14 ++++----- src/ui/layouts/stacks/Stacks/index.tsx | 28 ++++++++---------- src/ui/layouts/stacks/Stacks/useService.ts | 8 ++--- 7 files changed, 58 insertions(+), 63 deletions(-) diff --git a/src/ui/layouts/pipelines/Pipelines/useService.ts b/src/ui/layouts/pipelines/Pipelines/useService.ts index 73a35d4b0..d28844c0d 100644 --- a/src/ui/layouts/pipelines/Pipelines/useService.ts +++ b/src/ui/layouts/pipelines/Pipelines/useService.ts @@ -16,7 +16,7 @@ interface ServiceInterface { setFetching: (arg: boolean) => void; setCurrentWorkspace: (arg: TWorkspace | null) => void; currentWorkspace: TWorkspace | null; - workspaces: TWorkspace[]; + // workspaces: TWorkspace[]; } export const useService = (): ServiceInterface => { @@ -24,7 +24,7 @@ export const useService = (): ServiceInterface => { const dispatch = useDispatch(); - const workspaces = useSelector(workspaceSelectors.myWorkspaces); + // const workspaces = useSelector(workspaceSelectors.myWorkspaces); // useRequestOnMount(workspacesActions.getMy, {}); @@ -63,6 +63,6 @@ export const useService = (): ServiceInterface => { setFetching, setCurrentWorkspace, currentWorkspace, - workspaces, + // workspaces, }; }; diff --git a/src/ui/layouts/runs/Stacks/index.tsx b/src/ui/layouts/runs/Stacks/index.tsx index c174dc190..4ac4c4528 100644 --- a/src/ui/layouts/runs/Stacks/index.tsx +++ b/src/ui/layouts/runs/Stacks/index.tsx @@ -33,12 +33,8 @@ const BREADCRUMBS = [ ]; export const Stacks: React.FC = () => { - const { - setFetching, - setCurrentWorkspace, - currentWorkspace, - workspaces, - } = useService(); + const { setFetching } = useService(); + console.log(setFetching); return ( { breadcrumbs={BREADCRUMBS} headerWithButtons renderHeaderRight={() => ( - { - if (currentWorkspace && workspace.id !== currentWorkspace.id) { - setFetching(true); - } - setCurrentWorkspace(workspace); - }} - /> + <> + // { + // if (currentWorkspace && workspace.id !== currentWorkspace.id) { + // setFetching(true); + // } + // setCurrentWorkspace(workspace); + // }} + // /> )} /> ); diff --git a/src/ui/layouts/runs/Stacks/useService.ts b/src/ui/layouts/runs/Stacks/useService.ts index 23faeea8d..193ea066c 100644 --- a/src/ui/layouts/runs/Stacks/useService.ts +++ b/src/ui/layouts/runs/Stacks/useService.ts @@ -21,7 +21,7 @@ interface ServiceInterface { setFetching: (arg: boolean) => void; setCurrentWorkspace: (arg: TWorkspace | null) => void; currentWorkspace: TWorkspace | null; - workspaces: TWorkspace[]; + // workspaces: TWorkspace[]; } export const useService = (): ServiceInterface => { @@ -29,9 +29,9 @@ export const useService = (): ServiceInterface => { const locationPath = useLocationPath(); const dispatch = useDispatch(); - const workspaces = useSelector(workspaceSelectors.myWorkspaces); + // const workspaces = useSelector(workspaceSelectors.myWorkspaces); - useRequestOnMount(workspacesActions.getMy, {}); + // useRequestOnMount(workspacesActions.getMy, {}); useEffect(() => { setFetching(true); @@ -56,6 +56,6 @@ export const useService = (): ServiceInterface => { setFetching, setCurrentWorkspace, currentWorkspace, - workspaces, + // workspaces, }; }; diff --git a/src/ui/layouts/stackComponents/Stacks/index.tsx b/src/ui/layouts/stackComponents/Stacks/index.tsx index 6e78ebff2..1c368f158 100644 --- a/src/ui/layouts/stackComponents/Stacks/index.tsx +++ b/src/ui/layouts/stackComponents/Stacks/index.tsx @@ -54,10 +54,11 @@ export const Stacks: React.FC = () => { const locationPath = useLocationPath(); const { setFetching, - setCurrentWorkspace, - currentWorkspace, - workspaces, + // setCurrentWorkspace, + // currentWorkspace, + // workspaces, } = useService(); + console.log(setFetching); return ( { ]} headerWithButtons renderHeaderRight={() => ( - { - if (currentWorkspace && workspace.id !== currentWorkspace.id) { - setFetching(true); - } - setCurrentWorkspace(workspace); - }} - /> + <> + // { + // if (currentWorkspace && workspace.id !== currentWorkspace.id) { + // setFetching(true); + // } + // setCurrentWorkspace(workspace); + // }} + // /> )} /> ); diff --git a/src/ui/layouts/stackComponents/Stacks/useService.ts b/src/ui/layouts/stackComponents/Stacks/useService.ts index 3dd51887d..97f5bfe4f 100644 --- a/src/ui/layouts/stackComponents/Stacks/useService.ts +++ b/src/ui/layouts/stackComponents/Stacks/useService.ts @@ -20,20 +20,20 @@ import { interface ServiceInterface { setFetching: (arg: boolean) => void; setCurrentWorkspace: (arg: TWorkspace | null) => void; - currentWorkspace: TWorkspace | null; - workspaces: TWorkspace[]; + // currentWorkspace: TWorkspace | null; + // workspaces: TWorkspace[]; } export const useService = (): ServiceInterface => { const locationPath = useLocationPath(); - const currentWorkspace = useSelector(stackPagesSelectors.currentWorkspace); + // const currentWorkspace = useSelector(stackPagesSelectors.currentWorkspace); const dispatch = useDispatch(); - const workspaces = useSelector(workspaceSelectors.myWorkspaces); + // const workspaces = useSelector(workspaceSelectors.myWorkspaces); - useRequestOnMount(workspacesActions.getMy, {}); + // useRequestOnMount(workspacesActions.getMy, {}); useEffect(() => { setFetching(true); @@ -69,7 +69,7 @@ export const useService = (): ServiceInterface => { return { setFetching, setCurrentWorkspace, - currentWorkspace, - workspaces, + // currentWorkspace, + // workspaces, }; }; diff --git a/src/ui/layouts/stacks/Stacks/index.tsx b/src/ui/layouts/stacks/Stacks/index.tsx index 3bfd822f5..c4f4f579e 100644 --- a/src/ui/layouts/stacks/Stacks/index.tsx +++ b/src/ui/layouts/stacks/Stacks/index.tsx @@ -57,12 +57,7 @@ const BREADCRUMBS = [ ]; export const Stacks: React.FC = () => { - const { - setFetching, - setCurrentWorkspace, - currentWorkspace, - workspaces, - } = useService(); + const { setFetching } = useService(); return ( { breadcrumbs={BREADCRUMBS} headerWithButtons renderHeaderRight={() => ( - { - if (currentWorkspace && workspace.id !== currentWorkspace.id) { - setFetching(true); - } - setCurrentWorkspace(workspace); - }} - /> + <> + // { + // if (currentWorkspace && workspace.id !== currentWorkspace.id) { + // setFetching(true); + // } + // setCurrentWorkspace(workspace); + // }} + // /> )} /> ); diff --git a/src/ui/layouts/stacks/Stacks/useService.ts b/src/ui/layouts/stacks/Stacks/useService.ts index 23faeea8d..193ea066c 100644 --- a/src/ui/layouts/stacks/Stacks/useService.ts +++ b/src/ui/layouts/stacks/Stacks/useService.ts @@ -21,7 +21,7 @@ interface ServiceInterface { setFetching: (arg: boolean) => void; setCurrentWorkspace: (arg: TWorkspace | null) => void; currentWorkspace: TWorkspace | null; - workspaces: TWorkspace[]; + // workspaces: TWorkspace[]; } export const useService = (): ServiceInterface => { @@ -29,9 +29,9 @@ export const useService = (): ServiceInterface => { const locationPath = useLocationPath(); const dispatch = useDispatch(); - const workspaces = useSelector(workspaceSelectors.myWorkspaces); + // const workspaces = useSelector(workspaceSelectors.myWorkspaces); - useRequestOnMount(workspacesActions.getMy, {}); + // useRequestOnMount(workspacesActions.getMy, {}); useEffect(() => { setFetching(true); @@ -56,6 +56,6 @@ export const useService = (): ServiceInterface => { setFetching, setCurrentWorkspace, currentWorkspace, - workspaces, + // workspaces, }; }; From a5f8d3610b1baa7c651178ab1a9b5a30fae5361b Mon Sep 17 00:00:00 2001 From: talhainvenxion Date: Fri, 30 Sep 2022 00:12:01 +0500 Subject: [PATCH 3/6] fixed camel case issue for dynamic stackcomponents type name --- .../AuthenticatedSidebar/Menu/MenuItem.tsx | 3 ++- .../stackComponents/Header/CreatePipelineButton.tsx | 5 +++-- src/ui/layouts/stackComponents/StackDetail/index.tsx | 7 ++++--- src/ui/layouts/stackComponents/Stacks/index.tsx | 5 +++-- src/utils/camelCase.ts | 11 +++++++++++ 5 files changed, 23 insertions(+), 8 deletions(-) diff --git a/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/Menu/MenuItem.tsx b/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/Menu/MenuItem.tsx index cf0072ce6..6327f59ce 100644 --- a/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/Menu/MenuItem.tsx +++ b/src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/Menu/MenuItem.tsx @@ -3,6 +3,7 @@ import { NavLink, useLocation } from 'react-router-dom'; import { Paragraph, Box, FlexBox } from '../../../../../../components'; import cn from 'classnames'; import styles from './MenuItem.module.scss'; +import { camelCaseToParagraph } from '../../../../../../../utils'; export const MenuItem: React.FC<{ subItem?: boolean; @@ -39,7 +40,7 @@ export const MenuItem: React.FC<{ - {text} + {camelCaseToParagraph(text)} diff --git a/src/ui/layouts/stackComponents/Header/CreatePipelineButton.tsx b/src/ui/layouts/stackComponents/Header/CreatePipelineButton.tsx index 072c9cba6..0c58f5348 100644 --- a/src/ui/layouts/stackComponents/Header/CreatePipelineButton.tsx +++ b/src/ui/layouts/stackComponents/Header/CreatePipelineButton.tsx @@ -18,6 +18,7 @@ import { Popup } from '../../common/Popup'; import { DocumentationLink } from './DocumentationLink'; import { CommandBoxWScroll } from '../../common/CommandBox'; import { constantCommandsToCreateComponent } from '../../../../constants/constantCommands'; +import { camelCaseToParagraph } from '../../../../utils'; export const CreatePipelineButton: React.FC = () => { const locationPath = useLocationPath(); @@ -45,14 +46,14 @@ export const CreatePipelineButton: React.FC = () => { paddingHorizontal="sm" > setCreatePipelinePopupOpen(true)}> - Create {locationPath.split('/')[2]} + Create {camelCaseToParagraph(locationPath.split('/')[2])} {createPipelinePopupOpen && ( setCreatePipelinePopupOpen(false)}>

- Create {locationPath.split('/')[2]} + Create {camelCaseToParagraph(locationPath.split('/')[2])}

{locationPath.split('/')[2] === diff --git a/src/ui/layouts/stackComponents/StackDetail/index.tsx b/src/ui/layouts/stackComponents/StackDetail/index.tsx index 090708192..754599b02 100644 --- a/src/ui/layouts/stackComponents/StackDetail/index.tsx +++ b/src/ui/layouts/stackComponents/StackDetail/index.tsx @@ -3,7 +3,7 @@ import React from 'react'; import { routePaths } from '../../../../routes/routePaths'; import { Box, Paragraph, icons } from '../../../components'; import { iconColors, iconSizes } from '../../../../constants'; -import { formatDateToDisplay } from '../../../../utils'; +import { camelCaseToParagraph, formatDateToDisplay } from '../../../../utils'; import { translate } from './translate'; import { Configuration } from './Configuration'; import { Runs } from './Runs'; @@ -35,7 +35,8 @@ const getTabPages = (stackId: TId, locationPath: any): TabPage[] => { const getBreadcrumbs = (stackId: TId, locationPath: any): TBreadcrumb[] => { return [ { - name: locationPath.split('/')[2], + name: camelCaseToParagraph(locationPath.split('/')[2]), + clickable: true, to: routePaths.stackComponents.base(locationPath.split('/')[2]), }, @@ -43,7 +44,7 @@ const getBreadcrumbs = (stackId: TId, locationPath: any): TBreadcrumb[] => { name: stackId, clickable: true, to: routePaths.stackComponents.configuration( - locationPath.split('/')[2], + camelCaseToParagraph(locationPath.split('/')[2]), stackId, ), }, diff --git a/src/ui/layouts/stackComponents/Stacks/index.tsx b/src/ui/layouts/stackComponents/Stacks/index.tsx index 1c368f158..f0886fcea 100644 --- a/src/ui/layouts/stackComponents/Stacks/index.tsx +++ b/src/ui/layouts/stackComponents/Stacks/index.tsx @@ -10,6 +10,7 @@ import { WorkspaceDropdown } from './WorkspaceDropdown'; import FilterComponent, { getInitialFilterState, } from '../../../components/Filters'; +import { camelCaseToParagraph } from '../../../../utils'; // const PAGES = [ // { // text: 'Alerter', @@ -64,7 +65,7 @@ export const Stacks: React.FC = () => { { tabBasePath={routePaths.stackComponents.base('')} breadcrumbs={[ { - name: locationPath.split('/')[2], + name: camelCaseToParagraph(locationPath.split('/')[2]), clickable: true, to: routePaths.stackComponents.base(locationPath.split('/')[2]), }, diff --git a/src/utils/camelCase.ts b/src/utils/camelCase.ts index bf5436076..f3ffed626 100644 --- a/src/utils/camelCase.ts +++ b/src/utils/camelCase.ts @@ -12,3 +12,14 @@ export const camelCaseObject = (object: any): any => { export const camelCaseArray = (array: any[]): any[] => { return array.map((arrayItem: any) => camelCaseObject(arrayItem)); }; + +export const camelCaseToParagraph = (string: string) => { + return string + .replace(/(_|-)/g, ' ') + .trim() + .replace(/\w\S*/g, function (str: string) { + return str.charAt(0).toUpperCase() + str.substr(1); + }) + .replace(/([a-z])([A-Z])/g, '$1 $2') + .replace(/([A-Z])([A-Z][a-z])/g, '$1 $2'); +}; From 7eed2126f8c471d598761ba9d25cbcb77b3f9570 Mon Sep 17 00:00:00 2001 From: talhainvenxion Date: Fri, 30 Sep 2022 00:42:37 +0500 Subject: [PATCH 4/6] undefined issue is fixed fro pipeline runs --- src/ui/layouts/pipelines/RunsTable/index.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/ui/layouts/pipelines/RunsTable/index.tsx b/src/ui/layouts/pipelines/RunsTable/index.tsx index 4cc488e01..74053f590 100644 --- a/src/ui/layouts/pipelines/RunsTable/index.tsx +++ b/src/ui/layouts/pipelines/RunsTable/index.tsx @@ -40,7 +40,10 @@ export const RunsTable: React.FC<{ fromAllruns ? history.push(routePaths.run.run.statistics(run.id)) : history.push( - routePaths.run.pipeline.statistics(run.id, run.pipeline_id), + routePaths.run.pipeline.statistics( + run.id, + run.pipeline_id ? run.pipeline_id : run.pipelineId, + ), ); }; From c887eff6fe9c19fd8f4f9e64bd56e35aa8978404 Mon Sep 17 00:00:00 2001 From: talhainvenxion Date: Fri, 30 Sep 2022 14:49:13 +0500 Subject: [PATCH 5/6] added polling on every api. --- .../pipelines/Pipelines/AllRuns/useService.ts | 13 +++++----- .../pipelines/Pipelines/List/useService.ts | 2 +- .../layouts/pipelines/Pipelines/useService.ts | 2 +- src/ui/layouts/pipelines/useService.ts | 16 +++++++++++- .../settings/Organization/DeleteMember.tsx | 16 +++++++++--- .../layouts/settings/Organization/index.tsx | 6 +++-- .../stackComponents/Stacks/List/useService.ts | 6 +---- src/ui/layouts/stackComponents/useService.ts | 26 ++++++++++++++++++- src/ui/layouts/stacks/useService.ts | 13 +++++++++- 9 files changed, 78 insertions(+), 22 deletions(-) diff --git a/src/ui/layouts/pipelines/Pipelines/AllRuns/useService.ts b/src/ui/layouts/pipelines/Pipelines/AllRuns/useService.ts index 4639e8519..a92916bf4 100644 --- a/src/ui/layouts/pipelines/Pipelines/AllRuns/useService.ts +++ b/src/ui/layouts/pipelines/Pipelines/AllRuns/useService.ts @@ -1,8 +1,10 @@ +import { useEffect } from 'react'; +import { pipelinesActions, runsActions } from '../../../../../redux/actions'; import { pipelinePagesSelectors, runSelectors, } from '../../../../../redux/selectors'; -import { useSelector } from '../../../../hooks'; +import { useSelector, useDispatch } from '../../../../hooks'; interface ServiceInterface { fetching: boolean; @@ -17,15 +19,12 @@ export const useService = (): ServiceInterface => { // debugger; // return state.persisted.runs.allNewRuns || []; // }); - + const dispatch = useDispatch(); const runs = useSelector(runSelectors.myRuns); - - // const filteredRuns = runs.filter( - // (run: TRun) => currentWorkspace && run.workspaceId === currentWorkspace.id, - // ); + useEffect(() => {}, [runs]); const runIds = runs.map((run: TRun) => run.id); - // debugger; + return { fetching, runIds, diff --git a/src/ui/layouts/pipelines/Pipelines/List/useService.ts b/src/ui/layouts/pipelines/Pipelines/List/useService.ts index 45ec1949c..d16f9b2b8 100644 --- a/src/ui/layouts/pipelines/Pipelines/List/useService.ts +++ b/src/ui/layouts/pipelines/Pipelines/List/useService.ts @@ -57,7 +57,7 @@ export const useService = ( // ); setFilteredPipelines(orderedPipelines); - }, [filter]); + }, [filter, pipelines]); const setSelectedRunIds = (runIds: TId[]) => { dispatch(pipelinePagesActions.setSelectedRunIds({ runIds })); diff --git a/src/ui/layouts/pipelines/Pipelines/useService.ts b/src/ui/layouts/pipelines/Pipelines/useService.ts index d28844c0d..9ab719625 100644 --- a/src/ui/layouts/pipelines/Pipelines/useService.ts +++ b/src/ui/layouts/pipelines/Pipelines/useService.ts @@ -4,7 +4,7 @@ import { useEffect } from 'react'; import { pipelinePagesActions, runsActions, - workspacesActions, + pipelinesActions, } from '../../../../redux/actions'; import { pipelinePagesSelectors, diff --git a/src/ui/layouts/pipelines/useService.ts b/src/ui/layouts/pipelines/useService.ts index 059920ec7..551391beb 100644 --- a/src/ui/layouts/pipelines/useService.ts +++ b/src/ui/layouts/pipelines/useService.ts @@ -1,5 +1,7 @@ +import { useEffect } from 'react'; +import { pipelinesActions, runsActions } from '../../../redux/actions'; import { organizationSelectors } from '../../../redux/selectors'; -import { useSelector } from '../../hooks'; +import { useSelector, useDispatch } from '../../hooks'; interface ServiceInterface { organization: TOrganization | null; @@ -7,7 +9,19 @@ interface ServiceInterface { export const useService = (): ServiceInterface => { const organization = useSelector(organizationSelectors.myOrganization); + const dispatch = useDispatch(); + // useEffect(() => { + // dispatch(pipelinesActions.getMy()); + // }, []); + useEffect(() => { + const intervalId = setInterval(() => { + //assign interval to a variable to clear it. + dispatch(runsActions.allRuns({})); + dispatch(pipelinesActions.getMy()); + }, 5000); + return () => clearInterval(intervalId); //This is important + }, []); return { organization, }; diff --git a/src/ui/layouts/settings/Organization/DeleteMember.tsx b/src/ui/layouts/settings/Organization/DeleteMember.tsx index 5e9017876..1ad769fe3 100644 --- a/src/ui/layouts/settings/Organization/DeleteMember.tsx +++ b/src/ui/layouts/settings/Organization/DeleteMember.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { useDispatch } from 'react-redux'; import { Box, @@ -21,6 +21,14 @@ export const DeleteMember: React.FC<{ member: TInvite }> = ({ member }) => { const [submitting, setSubmitting] = useState(false); const dispatch = useDispatch(); + useEffect(() => { + const intervalId = setInterval(() => { + //assign interval to a variable to clear it. + dispatch(organizationActions.getMembers({})); + }, 5000); + + return () => clearInterval(intervalId); //This is important + }, []); const onDelete = () => { setSubmitting(true); dispatch( @@ -60,7 +68,9 @@ export const DeleteMember: React.FC<{ member: TInvite }> = ({ member }) => { - {`${translate('deleteMemberPopup.text')} ${member?.email}`} + {`${translate('deleteMemberPopup.text')} ${ + member?.email + }`} @@ -81,7 +91,7 @@ export const DeleteMember: React.FC<{ member: TInvite }> = ({ member }) => { )} - setPopupOpen(true)} > + setPopupOpen(true)}> diff --git a/src/ui/layouts/settings/Organization/index.tsx b/src/ui/layouts/settings/Organization/index.tsx index cce2e833b..0b88725b4 100644 --- a/src/ui/layouts/settings/Organization/index.tsx +++ b/src/ui/layouts/settings/Organization/index.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { useSelector } from 'react-redux'; import { organizationActions } from '../../../../redux/actions'; import { organizationSelectors } from '../../../../redux/selectors'; @@ -39,7 +39,9 @@ export const Organization: React.FC = () => { const members = useSelector(organizationSelectors.myMembers); // const invites = useSelector(organizationSelectors.invites); const memberHeaderCols = useMemberHeaderCols(); - + useEffect(() => { + //This is important + }, [members]); if (!organization) return null; return ( diff --git a/src/ui/layouts/stackComponents/Stacks/List/useService.ts b/src/ui/layouts/stackComponents/Stacks/List/useService.ts index f929bd553..f93804246 100644 --- a/src/ui/layouts/stackComponents/Stacks/List/useService.ts +++ b/src/ui/layouts/stackComponents/Stacks/List/useService.ts @@ -53,11 +53,7 @@ export const useService = ( if (isValidFilter) { orderedStacks = getFilteredDataForTable(orderedStacks, filter); } - // const filteredPipelines = orderedPipelines.filter( - // (pipeline: TPipeline) => - // currentWorkspace && pipeline.projectName === currentWorkspace.id, - // ); - // debugger; + setFilteredStacks(orderedStacks); }, [stackComponents, filter]); diff --git a/src/ui/layouts/stackComponents/useService.ts b/src/ui/layouts/stackComponents/useService.ts index 059920ec7..1c94b0a1e 100644 --- a/src/ui/layouts/stackComponents/useService.ts +++ b/src/ui/layouts/stackComponents/useService.ts @@ -1,12 +1,36 @@ +import { useEffect } from 'react'; +import { stackComponentsActions } from '../../../redux/actions'; import { organizationSelectors } from '../../../redux/selectors'; -import { useSelector } from '../../hooks'; +import { + useDispatch, + useLocationPath, + useRequestOnMount, + useSelector, +} from '../../hooks'; interface ServiceInterface { organization: TOrganization | null; } export const useService = (): ServiceInterface => { + const locationPath = useLocationPath(); + // const currentWorkspace = useSelector(stackPagesSelectors.currentWorkspace); + + const dispatch = useDispatch(); const organization = useSelector(organizationSelectors.myOrganization); + useEffect(() => { + const intervalId = setInterval(() => { + //assign interval to a variable to clear it. + dispatch( + stackComponentsActions.getMy({ + // id: currentWorkspace.id, + type: locationPath.split('/')[2], + }), + ); + }, 5000); + + return () => clearInterval(intervalId); + }, []); return { organization, diff --git a/src/ui/layouts/stacks/useService.ts b/src/ui/layouts/stacks/useService.ts index 059920ec7..8daa06e05 100644 --- a/src/ui/layouts/stacks/useService.ts +++ b/src/ui/layouts/stacks/useService.ts @@ -1,5 +1,7 @@ +import { useEffect } from 'react'; +import { stacksActions } from '../../../redux/actions'; import { organizationSelectors } from '../../../redux/selectors'; -import { useSelector } from '../../hooks'; +import { useSelector, useDispatch } from '../../hooks'; interface ServiceInterface { organization: TOrganization | null; @@ -7,7 +9,16 @@ interface ServiceInterface { export const useService = (): ServiceInterface => { const organization = useSelector(organizationSelectors.myOrganization); + const dispatch = useDispatch(); + useEffect(() => { + const intervalId = setInterval(() => { + //assign interval to a variable to clear it. + dispatch(stacksActions.getMy({})); + }, 5000); + + return () => clearInterval(intervalId); //This is important + }, []); return { organization, }; From 83574a95225bafc48ae6d06aedf71ce9a090df89 Mon Sep 17 00:00:00 2001 From: talhainvenxion Date: Fri, 30 Sep 2022 14:53:52 +0500 Subject: [PATCH 6/6] comment dead code will remove later --- .../layouts/pipelines/Pipelines/AllRuns/useService.ts | 10 ++-------- src/ui/layouts/pipelines/useService.ts | 2 +- src/ui/layouts/runs/Stacks/index.tsx | 2 +- src/ui/layouts/settings/Organization/DeleteMember.tsx | 2 +- src/ui/layouts/stackComponents/Stacks/index.tsx | 2 +- src/ui/layouts/stackComponents/useService.ts | 4 ++-- src/ui/layouts/stacks/Stacks/index.tsx | 4 ++-- src/ui/layouts/stacks/useService.ts | 2 +- 8 files changed, 11 insertions(+), 17 deletions(-) diff --git a/src/ui/layouts/pipelines/Pipelines/AllRuns/useService.ts b/src/ui/layouts/pipelines/Pipelines/AllRuns/useService.ts index a92916bf4..dc3965dd5 100644 --- a/src/ui/layouts/pipelines/Pipelines/AllRuns/useService.ts +++ b/src/ui/layouts/pipelines/Pipelines/AllRuns/useService.ts @@ -1,10 +1,10 @@ import { useEffect } from 'react'; -import { pipelinesActions, runsActions } from '../../../../../redux/actions'; +// import { pipelinesActions, runsActions } from '../../../../../redux/actions'; import { pipelinePagesSelectors, runSelectors, } from '../../../../../redux/selectors'; -import { useSelector, useDispatch } from '../../../../hooks'; +import { useSelector } from '../../../../hooks'; interface ServiceInterface { fetching: boolean; @@ -13,13 +13,7 @@ interface ServiceInterface { export const useService = (): ServiceInterface => { const fetching = useSelector(pipelinePagesSelectors.fetching); - // const currentWorkspace = useSelector(pipelinePagesSelectors.currentWorkspace); - // const runs1 = useSelector((state: any) => { - // debugger; - // return state.persisted.runs.allNewRuns || []; - // }); - const dispatch = useDispatch(); const runs = useSelector(runSelectors.myRuns); useEffect(() => {}, [runs]); diff --git a/src/ui/layouts/pipelines/useService.ts b/src/ui/layouts/pipelines/useService.ts index 551391beb..0ff5f8763 100644 --- a/src/ui/layouts/pipelines/useService.ts +++ b/src/ui/layouts/pipelines/useService.ts @@ -21,7 +21,7 @@ export const useService = (): ServiceInterface => { }, 5000); return () => clearInterval(intervalId); //This is important - }, []); + }); return { organization, }; diff --git a/src/ui/layouts/runs/Stacks/index.tsx b/src/ui/layouts/runs/Stacks/index.tsx index 4ac4c4528..6c4deb884 100644 --- a/src/ui/layouts/runs/Stacks/index.tsx +++ b/src/ui/layouts/runs/Stacks/index.tsx @@ -3,7 +3,7 @@ import { translate } from './translate'; import { List } from './List'; import { BasePage } from '../BasePage'; import { routePaths } from '../../../../routes/routePaths'; -import { WorkspaceDropdown } from './WorkspaceDropdown'; +// import { WorkspaceDropdown } from './WorkspaceDropdown'; import { useService } from './useService'; const PAGES = [ diff --git a/src/ui/layouts/settings/Organization/DeleteMember.tsx b/src/ui/layouts/settings/Organization/DeleteMember.tsx index 1ad769fe3..a6711c908 100644 --- a/src/ui/layouts/settings/Organization/DeleteMember.tsx +++ b/src/ui/layouts/settings/Organization/DeleteMember.tsx @@ -28,7 +28,7 @@ export const DeleteMember: React.FC<{ member: TInvite }> = ({ member }) => { }, 5000); return () => clearInterval(intervalId); //This is important - }, []); + }); const onDelete = () => { setSubmitting(true); dispatch( diff --git a/src/ui/layouts/stackComponents/Stacks/index.tsx b/src/ui/layouts/stackComponents/Stacks/index.tsx index f0886fcea..f0e397356 100644 --- a/src/ui/layouts/stackComponents/Stacks/index.tsx +++ b/src/ui/layouts/stackComponents/Stacks/index.tsx @@ -6,7 +6,7 @@ import { routePaths } from '../../../../routes/routePaths'; // import { WorkspaceDropdown } from './WorkspaceDropdown'; import { useService } from './useService'; import { useLocationPath } from '../../../hooks'; -import { WorkspaceDropdown } from './WorkspaceDropdown'; +// import { WorkspaceDropdown } from './WorkspaceDropdown'; import FilterComponent, { getInitialFilterState, } from '../../../components/Filters'; diff --git a/src/ui/layouts/stackComponents/useService.ts b/src/ui/layouts/stackComponents/useService.ts index 1c94b0a1e..3dc2a09e7 100644 --- a/src/ui/layouts/stackComponents/useService.ts +++ b/src/ui/layouts/stackComponents/useService.ts @@ -4,7 +4,7 @@ import { organizationSelectors } from '../../../redux/selectors'; import { useDispatch, useLocationPath, - useRequestOnMount, + // useRequestOnMount, useSelector, } from '../../hooks'; @@ -30,7 +30,7 @@ export const useService = (): ServiceInterface => { }, 5000); return () => clearInterval(intervalId); - }, []); + }); return { organization, diff --git a/src/ui/layouts/stacks/Stacks/index.tsx b/src/ui/layouts/stacks/Stacks/index.tsx index c4f4f579e..85ff7a388 100644 --- a/src/ui/layouts/stacks/Stacks/index.tsx +++ b/src/ui/layouts/stacks/Stacks/index.tsx @@ -3,7 +3,7 @@ import { translate } from './translate'; import { List } from './List'; import { BasePage } from '../BasePage'; import { routePaths } from '../../../../routes/routePaths'; -import { WorkspaceDropdown } from './WorkspaceDropdown'; +// import { WorkspaceDropdown } from './WorkspaceDropdown'; import { useService } from './useService'; import FilterComponent, { @@ -58,7 +58,7 @@ const BREADCRUMBS = [ export const Stacks: React.FC = () => { const { setFetching } = useService(); - + console.log(setFetching); return ( { }, 5000); return () => clearInterval(intervalId); //This is important - }, []); + }); return { organization, };