Skip to content
Snippets Groups Projects
Commit 18aaf86a authored by lokmeinmatz's avatar lokmeinmatz
Browse files

fixed render performance for SportartenTable

parent 10161861
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
package.json
+ 1
− 0
View file @ 18aaf86a
...@@ -15,6 +15,7 @@ ...@@ -15,6 +15,7 @@
"@types/react-dom": "^16.9.0", "@types/react-dom": "^16.9.0",
"@types/react-redux": "^7.1.7", "@types/react-redux": "^7.1.7",
"babel-jest": "^26.6.0", "babel-jest": "^26.6.0",
"fast-deep-equal": "^3.1.3",
"history": "^5.0.0", "history": "^5.0.0",
"react": "^17.0.2", "react": "^17.0.2",
"react-dnd": "^14.0.2", "react-dnd": "^14.0.2",
......
src/components/admin/sports/SportartenTable.tsx
+ 130
− 64
View file @ 18aaf86a
...@@ -11,26 +11,132 @@ import { ...@@ -11,26 +11,132 @@ import {
import AddIcon from '@material-ui/icons/Add' import AddIcon from '@material-ui/icons/Add'
import { ArrowDownward, ArrowUpward } from '@material-ui/icons' import { ArrowDownward, ArrowUpward } from '@material-ui/icons'
import ClearIcon from '@material-ui/icons/Clear' import ClearIcon from '@material-ui/icons/Clear'
import {ICategorie, ISport} from "./sportsMockData"; import { ICategorie, ISport } from './sportsMockData'
import deepEqual from 'fast-deep-equal'
interface SportartenTableProps { interface SportartenTableProps {
categories: ICategorie[] categories: ICategorie[]
sportarten: ISport[] sportarten: ISport[]
activ: boolean, activ: boolean
handlerSport:any, handlerSport: any
handlerCategorie:any, handlerCategorie: any
} }
interface MemoRowProps {
sport: ISport
listIdx: number
categoryWeightChange: (category: string, weight: number) => void
onToggleActive: () => void
onDelete: () => void
}
function compareRowProps(old: MemoRowProps, n: MemoRowProps): boolean {
console.log(old.sport, n.sport)
const sportUnchanged = deepEqual(old.sport, n.sport)
//const callbacksUnchanged = old.categoryWeightChange == n.categoryWeightChange && old.onDelete == n.onDelete && old.onToggleActive == n.onToggleActive
//console.log('sportUnchanged: ', sportUnchanged, 'callbacksUnchanged: ', callbacksUnchanged);
console.log(sportUnchanged && old.listIdx === n.listIdx)
return sportUnchanged && old.listIdx === n.listIdx
}
const MemoRow = React.memo(
({
sport,
categoryWeightChange,
onToggleActive,
onDelete
}: MemoRowProps) => {
return (
<TableRow>
<TableCell> {sport.name}</TableCell>
{Object.keys(sport.categoryWeights).map(function (key, idx) {
// TODO: use diffrent key?
return (
<TableCell key={key}>
<TextField
id="outlined-basic"
type="number"
variant="outlined"
value={sport.categoryWeights[key]}
onChange={(e) => {
categoryWeightChange(
key,
parseInt(e.currentTarget.value, 10)
)
}}
/>
</TableCell>
)
})}
<TableCell />
<TableCell>
<a href={sport.url} target="_blank">
{sport.url}
</a>
</TableCell>
<TableCell>
<IconButton>
{sport.active ? (
<ArrowDownward
onClick={() => {
onToggleActive()
}}
/>
) : (
<ArrowUpward
onClick={() => {
onToggleActive()
}}
/>
)}
</IconButton>
</TableCell>
<TableCell>
<IconButton>
<ClearIcon
onClick={() => {
onDelete()
}}
/>
</IconButton>
</TableCell>
</TableRow>
)
},
compareRowProps
)
export const SportartenTable: React.FC<SportartenTableProps> = ({ export const SportartenTable: React.FC<SportartenTableProps> = ({
sportarten, sportarten,
categories, categories,
activ, activ,
handlerSport, handlerSport,
handlerCategorie, handlerCategorie
}: SportartenTableProps) => {
const deleteEntry = (idx: number) => {
let copy = [...sportarten]
copy.splice(idx, 1)
handlerSport(copy)
}
const toggleActive = (idx: number) => {
let copy = [...sportarten]
copy[idx].active = !copy[idx].active
handlerSport(copy)
}
}: SportartenTableProps) => { const changeWeight = (idx: number, category: string, weight: number) => {
let copy = [...sportarten]
copy[idx] = { ...copy[idx] }
copy[idx].categoryWeights = {
...copy[idx].categoryWeights,
[category]: weight
}
handlerSport(copy)
}
return ( return (
<Table> <Table>
...@@ -38,7 +144,11 @@ export const SportartenTable: React.FC<SportartenTableProps> = ({ ...@@ -38,7 +144,11 @@ export const SportartenTable: React.FC<SportartenTableProps> = ({
<TableRow> <TableRow>
<TableCell> Sportarten </TableCell> <TableCell> Sportarten </TableCell>
{categories.map((elem) => { {categories.map((elem) => {
return <TableCell key={elem.categorieId}>{elem.categorie}</TableCell> return (
<TableCell key={elem.categorieId}>
{elem.categorie}
</TableCell>
)
})} })}
<TableCell> <TableCell>
<IconButton> <IconButton>
...@@ -51,63 +161,19 @@ export const SportartenTable: React.FC<SportartenTableProps> = ({ ...@@ -51,63 +161,19 @@ export const SportartenTable: React.FC<SportartenTableProps> = ({
</TableRow> </TableRow>
</TableHead> </TableHead>
<TableBody> <TableBody>
{sportarten.map((elem,itx) => { {sportarten.map((elem, itx) => {
if (elem.active!=activ) return if (elem.active !== activ) return null
return ( return (
<TableRow key={elem.name}> <MemoRow
<TableCell> {elem.name}</TableCell> key={elem.name}
{Object.keys(elem.categoryWeights).map(function(key, idx) { sport={elem}
// TODO: use diffrent key? listIdx={itx}
return ( onDelete={() => deleteEntry(itx)}
<TableCell key={key}> onToggleActive={() => toggleActive(itx)}
<TextField categoryWeightChange={(cat, weight) =>
id="outlined-basic" changeWeight(itx, cat, weight)
type="number" }
variant="outlined" />
value={elem.categoryWeights[key]}
onChange={(e)=>{
let copy = [...sportarten]
copy[itx].categoryWeights[key]=parseInt(e.currentTarget.value,10)
handlerSport(copy)
}
}
/>
</TableCell>
)
})}
<TableCell />
<TableCell>
<a href={elem.url} target="_blank">
{elem.url}
</a>
</TableCell>
<TableCell>
<IconButton>
{activ ? (
<ArrowDownward onClick={()=>{
let copy = [...sportarten]
copy[itx].active=false
handlerSport(copy)
}}/>
) : (
<ArrowUpward onClick={()=>{
let copy = [...sportarten]
copy[itx].active=true
handlerSport(copy)
}}/>
)}
</IconButton>
</TableCell>
<TableCell>
<IconButton>
<ClearIcon onClick={()=>{
let copy = [...sportarten]
copy.splice(itx,1)
handlerSport(copy)
}}/>
</IconButton>
</TableCell>
</TableRow>
) )
})} })}
</TableBody> </TableBody>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment