venus•3y 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•3y 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?

venusOP•3y ago

It should be always next to each other.

S3BAS•3y 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

venusOP•3y 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•3y ago

Yeah, in that case you look at what index findIndex returns

venusOP•3y 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•3y ago

Yeah, seems like the straight forwarded solution to me

venusOP•3y 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•3y ago

Unknown User•3y ago

Message Not Public

venusOP•3y 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•3y ago

Message Not Public

venusOP•3y ago

About mine

S3BAS•3y ago

Nice to use the offset of the selectedArr

venusOP•3y ago

Sorry, forgot to edit all variables in the function. I was renaming it here on Discord, to make it more clear

Unknown User•3y ago

Message Not Public

venusOP•3y ago

I did edit this const firstItem = selectedArr[0]; do you have it same?

Unknown User•3y ago

Message Not Public

venusOP•3y 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•3y 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•3y ago

Message Not Public

venusOP•3y ago

How is this meant? Oh nvm, now I can understand

S3BAS•3y ago

reactibot•3y 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

✅ – venus – 09-58 Aug 22

Did you find this page helpful?