From 2c945c566922576ebc3490d5bf7f648311358da0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=92scar=20Casajuana?= <elboletaire@gmail.com>
Date: Thu, 23 Jan 2025 17:56:54 +0100
Subject: [PATCH] Remove process filters from the sidebar

Created a new buttongroup component to hold them
---
 src/components/Dashboard/Menu/Options.tsx     |  9 +----
 .../Process/ProcessStatusFilters.tsx          | 39 +++++++++++++++++++
 src/elements/dashboard/processes/index.tsx    |  6 ++-
 tsconfig.paths.json                           |  1 +
 4 files changed, 46 insertions(+), 9 deletions(-)
 create mode 100644 src/components/Process/ProcessStatusFilters.tsx

diff --git a/src/components/Dashboard/Menu/Options.tsx b/src/components/Dashboard/Menu/Options.tsx
index db72b20c4..051cee716 100644
--- a/src/components/Dashboard/Menu/Options.tsx
+++ b/src/components/Dashboard/Menu/Options.tsx
@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { HiSquares2X2 } from 'react-icons/hi2'
 import { IoIosSettings } from 'react-icons/io'
-import { generatePath, matchPath, useLocation } from 'react-router-dom'
+import { matchPath, useLocation } from 'react-router-dom'
 import { Routes } from '~src/router/routes'
 import { DashboardMenuItem } from './Item'
 import { OrganizationSwitcher } from './OrganizationSwitcher'
@@ -27,13 +27,8 @@ export const DashboardMenuOptions = () => {
     // },
     {
       label: t('voting_processes'),
+      route: Routes.dashboard.processes,
       icon: HiSquares2X2,
-      children: [
-        { label: t('all'), route: generatePath(Routes.dashboard.processes, { page: 1 }) },
-        { label: t('active'), route: generatePath(Routes.dashboard.processes, { status: 'ready', page: 1 }) },
-        { label: t('finished'), route: generatePath(Routes.dashboard.processes, { status: 'results', page: 1 }) },
-        // { label: t('draft'), route: '#draft' },
-      ],
     },
     // {
     //   label: t('organization.census'),
diff --git a/src/components/Process/ProcessStatusFilters.tsx b/src/components/Process/ProcessStatusFilters.tsx
new file mode 100644
index 000000000..3964309a8
--- /dev/null
+++ b/src/components/Process/ProcessStatusFilters.tsx
@@ -0,0 +1,39 @@
+import { Button, ButtonGroup, ButtonGroupProps } from '@chakra-ui/react'
+import { Trans } from 'react-i18next'
+import { generatePath, NavLink } from 'react-router-dom'
+import { Routes } from '~routes'
+
+type ProcessStatusFilterProps = ButtonGroupProps & {
+  status?: string
+}
+
+const ProcessStatusFilter = ({ status, ...rest }: ProcessStatusFilterProps) => (
+  <ButtonGroup isAttached {...rest}>
+    <Button
+      size='xs'
+      as={NavLink}
+      to={generatePath(Routes.dashboard.processes, { page: 1 })}
+      isActive={status === undefined}
+    >
+      <Trans i18nKey='all'>All</Trans>
+    </Button>
+    <Button
+      size='xs'
+      as={NavLink}
+      to={generatePath(Routes.dashboard.processes, { status: 'ready', page: 1 })}
+      isActive={status === 'ready'}
+    >
+      <Trans i18nKey='active'>Active</Trans>
+    </Button>
+    <Button
+      size='xs'
+      as={NavLink}
+      to={generatePath(Routes.dashboard.processes, { status: 'results', page: 1 })}
+      isActive={status === 'results'}
+    >
+      <Trans i18nKey='finished'>Finished</Trans>
+    </Button>
+  </ButtonGroup>
+)
+
+export default ProcessStatusFilter
diff --git a/src/elements/dashboard/processes/index.tsx b/src/elements/dashboard/processes/index.tsx
index d217427f6..32ebb502f 100644
--- a/src/elements/dashboard/processes/index.tsx
+++ b/src/elements/dashboard/processes/index.tsx
@@ -4,12 +4,13 @@ import { useTranslation } from 'react-i18next'
 import { useLoaderData, useOutletContext, useParams } from 'react-router-dom'
 import { DashboardContents } from '~components/Layout/Dashboard'
 import Votings from '~components/Organization/Dashboard/Votings'
+import ProcessStatusFilter from '~components/Process/ProcessStatusFilters'
 import { DashboardLayoutContext } from '~elements/LayoutDashboard'
 
 const OrganizationVotings = () => {
   const { t } = useTranslation()
   const { setBack, setTitle } = useOutletContext<DashboardLayoutContext>()
-  const data = useLoaderData()
+  const data = useLoaderData() as ElectionListWithPagination
   const { status } = useParams<{ status?: string }>()
 
   // Set page title
@@ -19,7 +20,8 @@ const OrganizationVotings = () => {
   }, [setTitle, setBack])
 
   return (
-    <DashboardContents>
+    <DashboardContents display='flex' flexDirection='column'>
+      <ProcessStatusFilter status={status} alignSelf='end' />
       <Votings data={data as ElectionListWithPagination} status={status} />
     </DashboardContents>
   )
diff --git a/tsconfig.paths.json b/tsconfig.paths.json
index c4aeb8114..b6fb64180 100644
--- a/tsconfig.paths.json
+++ b/tsconfig.paths.json
@@ -8,6 +8,7 @@
       "~elements/*": ["elements/*"],
       "~i18n": ["i18n/index.ts"],
       "~i18n/*": ["i18n/*"],
+      "~routes": ["router/routes/index.ts"],
       "~theme": ["theme/index.ts"],
       "~theme/*" : ["theme/*"],
       "~utils/*": ["utils/*"],