This commit is contained in:
Andres
2022-06-23 23:20:18 +02:00
parent b590d5b197
commit dcc5cf08a7
7 changed files with 167 additions and 116 deletions

View File

@@ -1,6 +1,6 @@
import React, { SetStateAction, Dispatch } from 'react'
import Affair from './Affair'
import {AffairType, FilterType} from './HW2'
import { AffairType, FilterType } from './HW2'
import s from './Affairs.module.css'
type AffairsPropsType = { // need to fix any
@@ -36,24 +36,25 @@ function Affairs(props: AffairsPropsType) {
// props.setFilter(e.currentTarget.value as FilterType)
// }
const cnAll = s.button + ' ' + (props.filter === 'all' ? s.active : '')
const cnHigh = s.button + ' ' + (props.filter === 'high' ? s.active : '')
const cnMiddle = s.button + ' ' + (props.filter === 'middle' ? s.active : '')
const cnLow = s.button + ' ' + (props.filter === 'low' ? s.active : '')
const cnAll = s.button + ' ' + s.all + ' ' + (props.filter === 'all' ? s.active : '')
const cnHigh = s.button + ' ' + s.high + ' ' + (props.filter === 'high' ? s.active : '')
const cnMiddle = s.button + ' ' + s.middle + ' ' + (props.filter === 'middle' ? s.active : '')
const cnLow = s.button + ' ' + s.low + ' ' + (props.filter === 'low' ? s.active : '')
// const setClass = (filter: FilterType) => {
// return s.button + (props.filter === filter ? ' ' + s.active : '')
// }
return (
<div>
{mappedAffairs}
<button id={'hw2-button-all'} onClick={setAll} className={cnAll}>All</button>
<button id={'hw2-button-high'} onClick={setHigh} className={cnHigh}>High</button>
<button id={'hw2-button-middle'} onClick={setMiddle} className={cnMiddle}>Middle</button>
<button id={'hw2-button-low'} onClick={setLow} className={cnLow}>Low</button>
<div className={s.container}>
<div className={s.buttonContainer}>
<button id={'hw2-button-all'} onClick={setAll} className={cnAll}>All</button>
<button id={'hw2-button-high'} onClick={setHigh} className={cnHigh}>High</button>
<button id={'hw2-button-middle'} onClick={setMiddle} className={cnMiddle}>Middle</button>
<button id={'hw2-button-low'} onClick={setLow} className={cnLow}>Low</button>
</div>
<div className={s.affairs}>
{mappedAffairs}
</div>
{/*<button onClick={set} className={setClass('all')} value={'all'}>All</button>*/}
{/*<button onClick={set} className={setClass('high')} value={'high'}>High</button>*/}
{/*<button onClick={set} className={setClass('middle')} value={'middle'}>Middle</button>*/}