Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-09-19 17:52:45 +02:00
Code Issues Projects Releases Wiki Activity

refactor: move content grid into one function

Browse Source
This commit is contained in:
Thomas Heartman 2024-10-15 10:45:49 +02:00
parent 05906e607d
commit d4dab15581
No known key found for this signature in database
GPG Key ID: BD1F880DAED1EE78
1 changed files with 117 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

134
frontend/src/component/personalDashboard/MyProjects.tsx
View File

@ -11,7 +11,7 @@ import { ProjectSetupComplete } from './ProjectSetupComplete';
import { ConnectSDK, CreateFlag, ExistingFlag } from './ConnectSDK'; import { ConnectSDK, CreateFlag, ExistingFlag } from './ConnectSDK';
import { LatestProjectEvents } from './LatestProjectEvents'; import { LatestProjectEvents } from './LatestProjectEvents';
import { RoleAndOwnerInfo } from './RoleAndOwnerInfo'; import { RoleAndOwnerInfo } from './RoleAndOwnerInfo';
import { forwardRef, useEffect, useRef, type FC } from 'react'; import { type ReactNode, forwardRef, useEffect, useRef, type FC } from 'react';
import type { import type {
PersonalDashboardProjectDetailsSchema, PersonalDashboardProjectDetailsSchema,
PersonalDashboardSchemaAdminsItem, PersonalDashboardSchemaAdminsItem,
@ -159,15 +159,59 @@ export const MyProjects = forwardRef<
activeProjectStage === 'onboarding-started' || activeProjectStage === 'onboarding-started' ||
activeProjectStage === 'first-flag-created'; activeProjectStage === 'first-flag-created';
const box1Content = () => { const getGridContents = (): {
if (state === 'no projects') { list: ReactNode;
return <NoProjectsContactAdmin admins={admins} />; box1: ReactNode;
} box2: ReactNode;
} => {
switch (state) {
case 'no projects':
return {
list: (
<ActionBox>
<Typography>
You don't currently have access to any
projects in the system.
</Typography>
<Typography>
To get started, you can{' '}
<Link to='/projects?create=true'>
create your own project
</Link>
. Alternatively, you can review the
available projects in the system and ask the
owner for access.
</Typography>
</ActionBox>
),
box1: <NoProjectsContactAdmin admins={admins} />,
box2: (
<AskOwnerToAddYouToTheirProject owners={owners} />
),
};
if (state === 'projects with error') { case 'projects with error':
return <DataError project={activeProject} />; return {
list: (
<StyledList>
{projects.map((project) => (
<ProjectListItem
key={project.id}
project={project}
selected={project.id === activeProject}
onClick={() =>
setActiveProject(project.id)
} }
/>
))}
</StyledList>
),
box1: <DataError project={activeProject} />,
box2: <ContactAdmins admins={admins} />,
};
case 'projects': {
const box1 = (() => {
if ( if (
activeProjectStage === 'onboarded' && activeProjectStage === 'onboarded' &&
personalDashboardProjectDetails personalDashboardProjectDetails
@ -175,7 +219,9 @@ export const MyProjects = forwardRef<
return ( return (
<ProjectSetupComplete <ProjectSetupComplete
project={activeProject} project={activeProject}
insights={personalDashboardProjectDetails.insights} insights={
personalDashboardProjectDetails.insights
}
/> />
); );
} else if ( } else if (
@ -183,20 +229,14 @@ export const MyProjects = forwardRef<
activeProjectStage === 'loading' activeProjectStage === 'loading'
) { ) {
return <CreateFlag project={activeProject} />; return <CreateFlag project={activeProject} />;
} else if (activeProjectStage === 'first-flag-created') { } else if (
activeProjectStage === 'first-flag-created'
) {
return <ExistingFlag project={activeProject} />; return <ExistingFlag project={activeProject} />;
} }
}; })();
const box2Content = () => {
if (state === 'no projects') {
return <AskOwnerToAddYouToTheirProject owners={owners} />;
}
if (state === 'projects with error') {
return <ContactAdmins admins={admins} />;
}
const box2 = (() => {
if ( if (
activeProjectStage === 'onboarded' && activeProjectStage === 'onboarded' &&
personalDashboardProjectDetails personalDashboardProjectDetails
@ -208,59 +248,43 @@ export const MyProjects = forwardRef<
} }
/> />
); );
} } else if (
setupIncomplete ||
if (setupIncomplete || activeProjectStage === 'loading') { activeProjectStage === 'loading'
) {
return <ConnectSDK project={activeProject} />; return <ConnectSDK project={activeProject} />;
} }
}; })();
const projectListContent = () => { return {
if (state === 'no projects') { list: (
return (
<ActionBox>
<Typography>
You don't currently have access to any projects in
the system.
</Typography>
<Typography>
To get started, you can{' '}
<Link to='/projects?create=true'>
create your own project
</Link>
. Alternatively, you can review the available
projects in the system and ask the owner for access.
</Typography>
</ActionBox>
);
}
return (
<StyledList> <StyledList>
{projects.map((project) => ( {projects.map((project) => (
<ProjectListItem <ProjectListItem
key={project.id} key={project.id}
project={project} project={project}
selected={project.id === activeProject} selected={project.id === activeProject}
onClick={() => setActiveProject(project.id)} onClick={() =>
setActiveProject(project.id)
}
/> />
))} ))}
</StyledList> </StyledList>
); ),
box1,
box2,
};
}
}
}; };
const { list, box1, box2 } = getGridContents();
return ( return (
<ContentGridContainer ref={ref}> <ContentGridContainer ref={ref}>
<ProjectGrid> <ProjectGrid>
<SpacedGridItem gridArea='projects'> <SpacedGridItem gridArea='projects'>{list}</SpacedGridItem>
{projectListContent()} <SpacedGridItem gridArea='box1'>{box1}</SpacedGridItem>
</SpacedGridItem> <SpacedGridItem gridArea='box2'>{box2}</SpacedGridItem>
<SpacedGridItem gridArea='box1'>
{box1Content()}
</SpacedGridItem>
<SpacedGridItem gridArea='box2'>
{box2Content()}
</SpacedGridItem>
<EmptyGridItem /> <EmptyGridItem />
<GridItem gridArea='owners'> <GridItem gridArea='owners'>
<RoleAndOwnerInfo <RoleAndOwnerInfo