Sort the day names elements in order for mapped values

Question

I am trying to sort the mapped values for week day names.

I have an array defaultDays which contains daynames.

defaultDays could be ["friday", "monday", "thursday"] or ["monday", "thursday"] (day names could be in any order)

based on the values in defaultDays, I create time picker in the same order as per values in defaultDays order.

How can I sort below elements to show day names in order? Help is appreciated!

<Row className="marginBottom15">
        <Row className="marginBottom10">
          <Col>Store Hours:</Col>
          <Col className="marginLeft15">
            <Checkbox.Group
              defaultValue={defaultDays}
              onChange={onCheckBoxChange}>
              <Checkbox value="monday">Monday</Checkbox>
              <Checkbox value="tuesday">Tuesday</Checkbox>
              <Checkbox value="wednesday">Wednesday</Checkbox>
              <Checkbox value="thursday">Thursday</Checkbox>
              <Checkbox value="friday">Friday</Checkbox>
              <Checkbox value="saturday">Saturday</Checkbox>
              <Checkbox value="sunday">Sunday</Checkbox>
            </Checkbox.Group>
          </Col>
        </Row>

        {defaultDays.map((day) => {
          return (
            <Row className="alignBaseline flexWrapper marginTop5">
              <Col className="width100px">{toTitleCase(day)}</Col>
              <Col className="marginLeft15 ">
                <Form.Item
                  className="fullWidth"
                  name={`${day}StartTime`}
                  label="Start Time">
                  <TimePicker
                    defaultValue={_commonTime.startTime}
                    onChange={(time) =>
                      onTimeChange(time, `${day}StartTime`, `${day}`)
                    }
                    minuteStep={15}
                    format={timeFormat}
                  />
                </Form.Item>
              </Col>
              <Col className="marginLeft30">
                <Form.Item
                  className="fullWidth"
                  name={`${day}EndTime`}
                  label="End Time">
                  <TimePicker
                    defaultValue={_commonTime.endTime}
                    onChange={(time) =>
                      onTimeChange(time, `${day}EndTime`, `${day}`)
                    }
                    minuteStep={15}
                    format={timeFormat}
                  />
                </Form.Item>
              </Col>
            </Row>
          );
        })}
      </Row>

      function onCheckBoxChange(checkedValues) {
        setDefaultDays(checkedValues);
}

This is how it looks currently:

you might be wondering how this list is created unordered in first place?

answer : I am showing all 7 checkboxes in proper order. When user clicks on any checkbox it created the first day row with time pickers.

e.g. user clicks friday checbox first, it created time pickers for friday and so on...

I need to rearrange below rows maps elements according to day order.

checkbox order has nothing really has to do with below order.

Here is sandbox link - https://codesandbox.io/s/sleepy-haze-i5vdy?file=/pages/index.js

Can you please also create demo of this on jsfiddle or codesandbox or any of your comfortable environment so that it can be easier to debug? — Pritesh, Jul 28 '20 at 05:58
This will help you: https://stackoverflow.com/questions/17892674/sort-array-of-days-in-javascript — Pritesh, Jul 28 '20 at 06:09
here is sandbox link - https://codesandbox.io/s/sleepy-haze-i5vdy?file=/pages/index.js — newdeveloper, Jul 28 '20 at 06:24

score 0 · Answer 1 · answered Jul 28 '20 at 06:03

0

const order = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday']
defaultDays = ['friday', 'tuesday', 'monday']
defaultDays.sort((elem1, elem2) => {
  return order.indexOf(elem1.toLowerCase()) - order.indexOf(elem2.toLowerCase())
})
console.log(defaultDays);

answered Jul 28 '20 at 06:03

Asutosh

1,775
2
15
22

how do I use sort with map ? – newdeveloper Jul 28 '20 at 06:06
https://codesandbox.io/s/sleepy-haze-i5vdy?file=/pages/index.js – newdeveloper Jul 28 '20 at 06:25

score 0 · Answer 2 · answered Jul 28 '20 at 06:09

I'm not a Reactjs user but I would write something that gets all the Checkbox elements, then prepends them inside the Checkbox.Group holder based on the order of your array. Something like this:


let checkboxes=document.querySelectorAll('Checkbox');
for (let d of defaultDays) {
  for (let c of checkboxes) {
    if (c.getAttribute('value')==d) {
      c.parent.prepend(c);
      continue;
    |
  }
}

I haven't tested this -- you should write the code yourself. But in principle, since prepending removes and replaces the element, going through the array and prepending should rearrange the checkboxes based on the array order.

I am not trying to rearrange the checkboxes. I am trying to rearrange timepicker rows actually. — newdeveloper, Jul 28 '20 at 06:10

Sort the day names elements in order for mapped values

2 Answers2