Implementation of filters on the Activities page #212
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
toothlesspanda
previously requested changes
Jul 5, 2024
src/pages/Activities/index.js
Outdated
Comment on lines
100
to
106
| <button onClick={() => handleCategoryClick('')} className={`${selectedCategory === '' ? 'activeTab' : 'inactiveTab'} rounded-pill`}> Todos <span>{total}</span> </button> | ||
| <button onClick={() => handleCategoryClick('evento')} className={`${selectedCategory === 'evento' ? 'activeTab' : 'inactiveTab'} rounded-pill`}> Evento <span>{qtEvento}</span> | ||
| </button> | ||
| <button onClick={() => handleCategoryClick('media')} className={`${selectedCategory === 'media' ? 'activeTab' : 'inactiveTab'} rounded-pill`}> Media <span>{qtMedia}</span> | ||
| </button> | ||
| <button onClick={() => handleCategoryClick('workshop')} className={`${selectedCategory === 'workshop' ? 'activeTab' : 'inactiveTab'} rounded-pill`}> Workshop <span>{qtWorkshop}</span> | ||
| </button> |
There was a problem hiding this comment.
isto pode ser feito por um array, evitando a duplicacao de código
const calculateCategoryTotal = (category) =>{
return activitiesRefined && activitiesRefined.filter((item) => item.category.label === category).length;
}
(...)
<button onClick={() => handleCategoryClick('')} className={`${selectedCategory === '' ? 'activeTab' : 'inactiveTab'} rounded-pill`}> Todos <span>{activitiesRefined && activitiesRefined.length;}</span> </button>
Constants.Categories.map((item) =>{
<button onClick={() => handleCategoryClick('evento')} className={`${selectedCategory === item.label ? 'activeTab' : 'inactiveTab'} rounded-pill`}> { capitalize(item.label)} <span> { calculateCategoryTotal(item.label) }</span>
</button>
})
//utils.js
function capitalize(word) {
return word.charAt(0).toUpperCase() + word.slice(1);
}que achas?
src/pages/Activities/activities.scss
Outdated
Comment on lines
10
to
37
|
|
||
| .inactiveTab, .activeTab{ | ||
| padding: 6px 18px; | ||
| text-decoration: none; | ||
| margin-right: 15px; | ||
| } | ||
|
|
||
| .inactiveTab{ | ||
| border: 1px solid #DEDEDE; | ||
| background-color: transparent; | ||
| color: #000958; | ||
| } | ||
|
|
||
| .activeTab{ | ||
| background-color: #01C2A9; | ||
| color: #fff; | ||
| border: 1px solid #01C2A9; | ||
| } | ||
|
|
||
| .activeTab > span, .inactiveTab > span { | ||
| padding: 5px; | ||
| background-color: #000958; | ||
| border-radius: 50px; | ||
| font-size: 10px; | ||
| color: #fff; | ||
| line-height: 1.5; | ||
| vertical-align: middle; | ||
| } |
There was a problem hiding this comment.
podes substituir as cores pelas variáveis que estao no ./styles/variables.scss ?
para que possa ficar consistente com as cores do sistema, caso queiramos mudar
src/pages/Activities/index.js
Outdated
| @@ -76,15 +76,42 @@ function Activities({ translation }) { | |||
| }) | |||
| .sort((a, b) => sortByDesc(a, b, 'date')); | |||
|
|
|||
| const categories = Array.from(new Set(activities.map(item => item.category.label))); | |||
There was a problem hiding this comment.
Acho que não precisas disto, podes simplesmente fazer require das constantes, já existe uma lista declarada com as categorias todas. Que achas?
src/pages/Activities/index.js
Outdated
Comment on lines
101
to
112
| <button onClick={() => handleCategoryClick('')} className={`${selectedCategory === '' ? 'activeTab' : 'inactiveTab'} rounded-pill`}> | ||
| Todos <span>{total}</span> | ||
| </button> | ||
| {categories.map((category, index) => ( | ||
| <button | ||
| key={index} | ||
| onClick={() => handleCategoryClick(category)} | ||
| className={`${selectedCategory === category ? 'activeTab' : 'inactiveTab'} rounded-pill`} | ||
| > | ||
| {capitalize(category)} <span>{calculateCategoryTotal(category)}</span> | ||
| </button> | ||
| ))} |
There was a problem hiding this comment.
Also, poderíamos ter antes uma dropdown com seleção múltipla, mas isto pode ser uma iteração para depois
There was a problem hiding this comment.
Acho que pode ser para depois também, Não sei se temos design para esta interação 🤔 podia também ser uma outra issue.
3 tasks
isabelcosta
dismissed
toothlesspanda’s stale review
Dismissing this, as we all gathered and reviewed the code together :)
isabelcosta
approved these changes
Jul 13, 2024
There was a problem hiding this comment.
Obrigada pela tua contribuição @msantosdevlab !
Muito bom trabalho! 👏🏾 💯 E obrigada @toothlesspanda pela ajuda!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Descrição
Foram inseridos os filtros das tags na página Atividades
Fixes #210
Como testar esta modificação?
As.Raparigas.do.Codigo.mp4
Checklist: