venus
venus3y ago

✅ – venus – 09-58 Aug 22

Hello, I'm trying to think of best solution to get previous and next item of 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' },
];
So in this case it would be: [{ id: 'two' }, { id: ' five' ].
24 Replies
S3BAS
S3BAS3y ago
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?
venus
venusOP3y ago
It should be always next to each other.
S3BAS
S3BAS3y ago
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 irrelevant
venus
venusOP3y ago
Sometimes 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' },
];
S3BAS
S3BAS3y ago
Yeah, in that case you look at what index findIndex returns
venus
venusOP3y ago
Yeah I was thinking about something similar. This is what I wrote yest.
Get the first and last item in selectedState, find them in initialState & get -1 item from first and +1 from the last
S3BAS
S3BAS3y ago
Yeah, seems like the straight forwarded solution to me
venus
venusOP3y ago
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.
S3BAS
S3BAS3y ago
meowthumbsup
Unknown User
Unknown User3y ago
Message Not Public
Sign In & Join Server To View
venus
venusOP3y ago
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`
};
@Timotius What do you think about this?
Unknown User
Unknown User3y ago
Message Not Public
Sign In & Join Server To View
venus
venusOP3y ago
About mine
S3BAS
S3BAS3y ago
Nice to use the offset of the selectedArr
venus
venusOP3y ago
Sorry, forgot to edit all variables in the function. I was renaming it here on Discord, to make it more clear
Unknown User
Unknown User3y ago
Message Not Public
Sign In & Join Server To View
venus
venusOP3y ago
I did edit this const firstItem = selectedArr[0]; do you have it same?
Unknown User
Unknown User3y ago
Message Not Public
Sign In & Join Server To View
venus
venusOP3y ago
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' },
];
S3BAS
S3BAS3y ago
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)
Unknown User
Unknown User3y ago
Message Not Public
Sign In & Join Server To View
venus
venusOP3y ago
How is this meant? Oh nvm, now I can understand
S3BAS
S3BAS3y ago
meowthumbsup
reactibot
reactibot3y ago
This question has an answer! Thank you for helping 😄 If you have a followup question, you may want to reply to this thread so other members know they're related. https://discord.com/channels/102860784329052160/565213527673929729/1011212650090340412 This thread hasn’t had any activity in 12 hours, so it’s now locked. Threads are closed automatically after 12 hours. If you have a followup question, you may want to reply to this thread so other members know they're related. https://discord.com/channels/102860784329052160/565213527673929729/1011212650090340412

Did you find this page helpful?