crimson-quirks/crimson-quirks-ui
1
0
Fork 0
mirror of https://github.com/hazemKrimi/crimson-quirks-ui.git synced 2026-05-01 18:20:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix warnings

Browse Source
This commit is contained in:
Hazem Krimi
2023-05-21 17:18:54 +01:00
parent 69e7258076
commit 055ad3a61e
1 changed files with 64 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Sidebar/index.tsx
+63 -52
View File
@@ -56,7 +56,7 @@ const Sidebar = () => {
}, },
onCompleted({ getAllProjectsByClientId }) { onCompleted({ getAllProjectsByClientId }) {
setProjects(getAllProjectsByClientId); setProjects(getAllProjectsByClientId);
} },
}); });
const [getProjects] = useLazyQuery< const [getProjects] = useLazyQuery<
@@ -65,7 +65,7 @@ const Sidebar = () => {
>(GET_ALL_PROJECTS, { >(GET_ALL_PROJECTS, {
onCompleted({ getAllProjects }) { onCompleted({ getAllProjects }) {
setProjects(getAllProjects); setProjects(getAllProjects);
} },
}); });
const [getTemplates] = useLazyQuery< const [getTemplates] = useLazyQuery<
@@ -120,15 +120,18 @@ const Sidebar = () => {
}; };
}, [location.pathname]); }, [location.pathname]);
const showAddButton = (role: string, pathname: string) => { const showAddButton = (role: string, pathname: string) => {
switch (role) { switch (role) {
case 'client': return (/project/i.test(pathname)); case 'client':
case 'productOwner': return (/template/i.test(pathname)); return /project/i.test(pathname);
case 'developer': return (/feature/i.test(pathname) || /category/i.test(pathname)); case 'productOwner':
} return /template/i.test(pathname);
case 'developer':
return /feature/i.test(pathname) || /category/i.test(pathname);
}
return false; return false;
} };
return ( return (
<Wrapper color={role}> <Wrapper color={role}>
@@ -136,7 +139,7 @@ const Sidebar = () => {
<> <>
<Box display='flex' flexDirection='column'> <Box display='flex' flexDirection='column'>
{projects && {projects &&
new RegExp(/project/, 'i').test(location.pathname) && new RegExp(/project/, 'i').test(location.pathname) &&
projects.map((project, index) => ( projects.map((project, index) => (
<Box marginBottom='20px' key={project.id}> <Box marginBottom='20px' key={project.id}>
<div id={`project-${project.id}`}> <div id={`project-${project.id}`}>
@@ -144,7 +147,8 @@ const Sidebar = () => {
color={role} color={role}
selected={ selected={
new RegExp(project.id, 'i').test(location.pathname) || new RegExp(project.id, 'i').test(location.pathname) ||
(index === 0 && location.pathname === '/project')} (index === 0 && location.pathname === '/project')
}
text={project.name[0]} text={project.name[0]}
onClick={() => navigate(`/project/${project.id}`)} onClick={() => navigate(`/project/${project.id}`)}
/> />
@@ -156,7 +160,7 @@ const Sidebar = () => {
</Box> </Box>
))} ))}
{templates && {templates &&
new RegExp(/template/, 'i').test(location.pathname) && new RegExp(/template/, 'i').test(location.pathname) &&
templates.map((template, index) => ( templates.map((template, index) => (
<Box marginBottom='20px' key={template.id}> <Box marginBottom='20px' key={template.id}>
<div id={`template-${template.id}`}> <div id={`template-${template.id}`}>
@@ -177,7 +181,7 @@ const Sidebar = () => {
</Box> </Box>
))} ))}
{features && {features &&
new RegExp(/feature/, 'i').test(location.pathname) && new RegExp(/feature/, 'i').test(location.pathname) &&
features.map((feature, index) => ( features.map((feature, index) => (
<Box marginBottom='20px' key={feature.id}> <Box marginBottom='20px' key={feature.id}>
<div id={`feature-${feature.id}`}> <div id={`feature-${feature.id}`}>
@@ -198,7 +202,7 @@ const Sidebar = () => {
</Box> </Box>
))} ))}
{categories && {categories &&
new RegExp(/category/, 'i').test(location.pathname) && new RegExp(/category/, 'i').test(location.pathname) &&
categories.map((category, index) => ( categories.map((category, index) => (
<Box marginBottom='20px' key={category.id}> <Box marginBottom='20px' key={category.id}>
<div id={`category-${category.id}`}> <div id={`category-${category.id}`}>
@@ -220,48 +224,55 @@ const Sidebar = () => {
))} ))}
</Box> </Box>
<Box display='flex' flexDirection='column'> <Box display='flex' flexDirection='column'>
{showAddButton(role, location.pathname) && ( {showAddButton(role as string, location.pathname) && (
<Box marginBottom='20px'> <Box marginBottom='20px'>
<IconButton
icon={<Add />}
color={role}
onClick={() => {
switch(role) {
case 'client': {
if (/project/i.test(location.pathname)) {
navigate('/add-project');
}
}
case 'productOwner': {
if (/project/i.test(location.pathname)) {
navigate('/add-project');
}
if (/template/i.test(location.pathname)) {
navigate('/add-template');
}
}
case 'developer': {
if (/feature/i.test(location.pathname)) {
navigate('/add-feature');
}
if (/category/i.test(location.pathname)) {
navigate('/add-category');
}
}
}
}}
/>
</Box>
)}
{/project/i.test(location.pathname) && ['client', 'productOwner'].includes(role) && (
<Box>
<IconButton <IconButton
icon={<Messaging />} icon={<Add />}
color={role} color={role}
onClick={() => setMessagingSidebarOpen(!messagingSidebarOpen)} onClick={() => {
switch (role) {
case 'client':
default: {
if (/project/i.test(location.pathname)) {
navigate('/add-project');
}
break;
}
case 'productOwner': {
if (/project/i.test(location.pathname)) {
navigate('/add-project');
}
if (/template/i.test(location.pathname)) {
navigate('/add-template');
}
break;
}
case 'developer': {
if (/feature/i.test(location.pathname)) {
navigate('/add-feature');
}
if (/category/i.test(location.pathname)) {
navigate('/add-category');
}
break;
}
}
}}
/> />
</Box> </Box>
)} )}
{/project/i.test(location.pathname) &&
['client', 'productOwner'].includes(role as string) && (
<Box>
<IconButton
icon={<Messaging />}
color={role}
onClick={() =>
setMessagingSidebarOpen(!messagingSidebarOpen)
}
/>
</Box>
)}
</Box> </Box>
</> </>
)} )}