Implementation of filters on the Activities page

src/pages/Activities/activities.scss

@@ -7,3 +7,31 @@
 .activity-feature-image {
   width: 80px;
 }
+
+.inactiveTab, .activeTab {
+  padding: 6px 18px;
+  text-decoration: none;
+  margin-right: 15px;
+}
+
+.inactiveTab {
+  border: 1px solid $light-gray;
+  background-color: transparent;
+  color: $brand-color;
+}
+
+.activeTab {
+  background-color: $green;
+  color: $white;
+  border: 1px solid $green;
+}
+
+.activeTab > span, .inactiveTab > span {
+  padding: 5px;
+  background-color: $brand-color;
+  border-radius: 50px;
+  font-size: 10px;
+  color: $white;
+  line-height: 1.5;
+  vertical-align: middle;
+}

src/pages/Activities/index.js

@@ -1,12 +1,12 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Container, Row, Col } from 'react-bootstrap';
 
 import PageLayout from 'components/PageLayout';
 import OrganizationFeature from 'components/OrganizationFeature';
 import EventCard from 'components/EventCard';
 
 import Constants from 'constants';
-import { sortByDesc } from 'utils';
+import { sortByDesc, capitalize } from 'utils';
 
 import projectoEducacao from '../../assets/projeto_educacao.png';
 import inclusaoDigital from '../../assets/inclusao_digital.png';
@@ -76,15 +76,51 @@ function Activities({ translation }) {
     })
     .sort((a, b) => sortByDesc(a, b, 'date'));
 
+  const calculateCategoryTotal = (category) => {
+    return (
+      activitiesRefined &&
+      activitiesRefined.filter((item) => item.category.label === category).length
+    );
+  };
+
+  const total = activitiesRefined && activitiesRefined.length;
+  const [selectedCategory, setSelectedCategory] = useState('');
+
+  const handleCategoryClick = (category) => {
+    setSelectedCategory(category);
+  };
+
+  const filteredEvents = selectedCategory
+    ? activitiesRefined.filter((event) => event.category.label === selectedCategory)
+    : activitiesRefined;
+
   return (
     <PageLayout
       customBanner={<ActivitiesFeaturesBanner t={translation} />}
       title={translation('ActivitiesPage-PageName')}
       descriptionParagraphs={[translation('ActivitiesPage-Description')]}
       breadcrumbsData={breadcrumbs}>
       <Container fluid="md" className="">
+        <button
+          onClick={() => handleCategoryClick('')}
+          className={`${selectedCategory === '' ? 'activeTab' : 'inactiveTab'} rounded-pill`}>
+          Todos <span>{total}</span>
+        </button>
+        {Object.values(Constants.Categories).map((category, index) => {
+          const label = category.label;
+          return (
+            <button
+              key={`categories-${index}`}
+              onClick={() => handleCategoryClick(label)}
+              className={`${
+                selectedCategory === label ? 'activeTab' : 'inactiveTab'
+              } rounded-pill`}>
+              {capitalize(label)} <span>{calculateCategoryTotal(label)}</span>
+            </button>
+          );
+        })}
         <Row className={'mt-4 mb-5'} xs={1} lg={4}>
-          {activitiesRefined.map((item, key) => (
+          {filteredEvents.map((item, key) => (
             <Col key={key} className={'mt-4'}>
               <span className={'event-card-wrapper'}>
                 <EventCard item={item} key={item.id} />

src/utils.js

@@ -52,3 +52,7 @@ export function importAll(r) {
   });
   return images;
 }
+
+export function capitalize(word) {
+  return word.charAt(0).toUpperCase() + word.slice(1);
+}