tweak: Extracted some buildRow functionality to its own function

Note: More difficult than it sounds given the constraint
that I want to preserve functionality.
This commit is contained in:
NunoSempere 2021-12-08 11:30:13 +01:00
parent f82043d24a
commit f134df4b0a

View File

@ -43,7 +43,8 @@ async function findPathsInner({
sourceElementId: link.source, sourceElementPosition: link.sourceElementPosition,
targetElementId, targetElementPosition,
pathSoFar: pathSoFar.concat(link).flat(),
links: linksInner, nodes, maxLengthOfPath: (maxLengthOfPath - 1) })
links: linksInner, nodes, maxLengthOfPath: (maxLengthOfPath - 1)
})
if (newPaths.length != 0) {
paths.push(...newPaths)
}
@ -155,19 +156,19 @@ function abridgeArrayAndDisplay(array) {
return result
}
export async function buildRows(isListOrdered, orderedList, listOfElements, links){
export async function buildRows({ isListOrdered, orderedList, listOfElements, links, rows, setTableRows }) {
// Not used yet.
let rows = []
if (isListOrdered && ! (orderedList.length < listOfElements.length) && rows.length == 0) {
if (isListOrdered && !(orderedList.length < listOfElements.length) && rows.length == 0) {
let nodes = []
let positionDictionary=({})
let positionDictionary = ({})
orderedList.forEach((id, pos) => {
nodes.push({ ...listOfElements[id], position: pos })
positionDictionary[id] = pos
})
// let nodes = orderedList.map((id, pos) => ({ ...listOfElements[id], position: pos }))
/* Pre-process links to talk in terms of distances */
links = links.map(link => ({...link,
links = links.map(link => ({
...link,
sourceElementPosition: positionDictionary[link.source],
targetElementPosition: positionDictionary[link.target]
}))
@ -181,16 +182,20 @@ export async function buildRows(isListOrdered, orderedList, listOfElements, link
}))
console.log("rows@CreateTableWithDistances")
console.log(rows)
}else{
rows = []
setTableRows(rows)
} else {
// rows = []
// Do nothing
}
return rows
// return rows
}
export function CreateTableWithDistances({ isListOrdered, orderedList, listOfElements, links }) {
const [rows, setRows] = useState([])
const [tableRows, setTableRows] = useState([])
useEffect(async () => {
await buildRows({ isListOrdered, orderedList, listOfElements, links, rows: tableRows, setTableRows })
/*
// https://stackoverflow.com/questions/57847626/using-async-await-inside-a-react-functional-component
// https://stackoverflow.com/questions/54936559/using-async-await-in-react-component
// https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects
@ -202,7 +207,7 @@ export function CreateTableWithDistances({ isListOrdered, orderedList, listOfEle
positionDictionary[id] = pos
})
// let nodes = orderedList.map((id, pos) => ({ ...listOfElements[id], position: pos }))
/* Pre-process links to talk in terms of distances */
// Pre-process links to talk in terms of distances
links = links.map(link => ({...link,
sourceElementPosition: positionDictionary[link.source],
targetElementPosition: positionDictionary[link.target]
@ -218,6 +223,7 @@ export function CreateTableWithDistances({ isListOrdered, orderedList, listOfEle
console.log("rows@CreateTableWithDistances")
console.log(rows)
}
*/
}); // this useEffect should ideally only work when isListOrdered changes, but I haven't bothered to program that.
return (
@ -237,7 +243,7 @@ export function CreateTableWithDistances({ isListOrdered, orderedList, listOfEle
</tr>
</thead>
<tbody>
{rows.map(row => <tr key={row.id}>
{tableRows.map(row => <tr key={row.id}>
<td className="" >{row.id}</td>
<td>&nbsp;&nbsp;&nbsp;</td>
<td className="" >{row.position}</td>