R
Reactiflux
✅ – venus – 09-58 Aug 22
✅ – venus – 09-58 Aug 22
Hello, I'm trying to think of best solution to get previous and next item of
So in this case it would be:
selectedState when we fit it inside initialState. Length of selectedState array could be up to the length of initialState. Is there any function that would do it for me, or do I have to write it by myself?
Example:
const initialState = [
{ id: 'zero' },
{ id: 'one' },
{ id: 'two' }, // Previous item
{ id: 'three' }, // Existing array
{ id: 'four' }, // Existing array
{ id: 'five' }, // Next item
{ id: 'six' },
];
const selectedState = [
{ id: 'three' },
{ id: 'four' },
];
const initialState = [
{ id: 'zero' },
{ id: 'one' },
{ id: 'two' }, // Previous item
{ id: 'three' }, // Existing array
{ id: 'four' }, // Existing array
{ id: 'five' }, // Next item
{ id: 'six' },
];
const selectedState = [
{ id: 'three' },
{ id: 'four' },
];
[{ id: 'two' }, { id: ' five' ].Will the items in
selectedState always be in order next to each other?
In other words, something with id three and id five will not exist in selectedState?It should be always next to each other.
I would do
findIndex on the first element of selectedState and then -1 to find previous item, then repeat for the last item of selectedState and +1 the index (take care of the boundaries)
Anything that goes in between seems irrelevantSometimes it can be like 👇 , so result would be just one item
[{ id: 'two' }]
const selectedState = [
{ id: 'zero' },
{ id: 'one' },
];
const selectedState = [
{ id: 'zero' },
{ id: 'one' },
];
Yeah, in that case you look at what index
findIndex returnsYeah I was thinking about something similar.
This is what I wrote yest.
Get the first and last item inselectedState, find them ininitialState& get -1 item from first and +1 from the last
Yeah, seems like the straight forwarded solution to me
Okay, thank you. I'll keep this thread open to let you know how it goes. Just maybe some little correction of the code at the end.
2 Messages Not Public
Sign In & Join Server To View
import compact from "lodash/compact";
export const getNextAndPrevious = <P extends { id: any }>(
initialArr: Array<P>,
selectedArr: Array<P>
) => {
const firstItem = selectedArr[0];
const indexOfFirst = initialArr.findIndex((i) => i.id === firstItem?.id);
if (indexOfFirst === -1) return [];
const previous = initialArr[indexOfFirst - 1];
const next = initialArr[indexOfFirst + selectedArr.length];
return compact([previous, next]); // Removes item if it's `undefined`
};
import compact from "lodash/compact";
export const getNextAndPrevious = <P extends { id: any }>(
initialArr: Array<P>,
selectedArr: Array<P>
) => {
const firstItem = selectedArr[0];
const indexOfFirst = initialArr.findIndex((i) => i.id === firstItem?.id);
if (indexOfFirst === -1) return [];
const previous = initialArr[indexOfFirst - 1];
const next = initialArr[indexOfFirst + selectedArr.length];
return compact([previous, next]); // Removes item if it's `undefined`
};
Message Not Public
Sign In & Join Server To View
About mine
Nice to use the offset
of the
selectedArrSorry, forgot to edit all variables in the function. I was renaming it here on Discord, to make it more clear
Message Not Public
Sign In & Join Server To View
I did edit this
const firstItem = selectedArr[0];
do you have it same?2 Messages Not Public
Sign In & Join Server To View
Oh, there might be a problem. I realized.
Cuz it won't be in order as I thought
const initialState = [
{ id: 'zero' },
{ id: 'one' }, // Previous item
{ id: 'two' }, // Existing array
{ id: 'three' }, // Existing array
{ id: 'four' }, // Existing array
{ id: 'five' }, // Next item
{ id: 'six' },
];
const selectedState = [
{ id: 'three' },
{ id: 'four' },
{ id: 'two' },
];
const initialState = [
{ id: 'zero' },
{ id: 'one' }, // Previous item
{ id: 'two' }, // Existing array
{ id: 'three' }, // Existing array
{ id: 'four' }, // Existing array
{ id: 'five' }, // Next item
{ id: 'six' },
];
const selectedState = [
{ id: 'three' },
{ id: 'four' },
{ id: 'two' },
];
You'll need to find the lowest index then
Or highest
eg,
findIndex for every element
const indices = selectedState.map(elA => initialState.findIndex(elB => elA.id === elB.id))
const minIndive = Math.min(...indices)
const indices = selectedState.map(elA => initialState.findIndex(elB => elA.id === elB.id))
const minIndive = Math.min(...indices)
2 Messages Not Public
Sign In & Join Server To View
How is this meant?
Oh nvm, now I can understand
2 Messages Not Public
Sign In & Join Server To View
Looking for more? Join the community!
R
Reactiflux
✅ – venus – 09-58 Aug 22
R
Reactiflux
✅ – venus – 09-58 Aug 22
Want results from more Discord servers?
Recommended Posts