sorting array

[paulinal3]

What stack are you using?

(ex: MERN(mongoose + react), DR(django + react), PEN, etc.)

MERN

What's the problem you're trying to solve?

Trying to sort my array in different ways (newest, oldest, most updated

Post any code you think might be relevant (one fenced block per file)

different code I've tried

    const [playlistsOrder, setPlaylistsOrder] = useState('alph')

    const allPlaylists = props.playlists
    if (playlistsOrder === 'new') {
        allPlaylists.sort((a, b) => {
            console.log('new')
            return new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
        }).reverse().map(p => {
            return (
                // and pass them as a prop to IndexPlaylist
                <IndexPlaylist playlist={p} selectedPlaylist={playlistClicked} />
            )
        })
    } else if (playlistsOrder === 'old') {
        allPlaylists.sort((a, b) => {
            console.log('old')
            return new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
        }).map(p => {
            return (
                // and pass them as a prop to IndexPlaylist
                <IndexPlaylist playlist={p} selectedPlaylist={playlistClicked} />
            )
        })
    } else if (playlistsOrder === 'updated') {
        allPlaylists.sort((a, b) => {
            console.log('update')
            return new Date(a.updatedAt).getTime() - new Date(b.updatedAt).getTime()
        }).reverse().map(p => {
            return (
                // and pass them as a prop to IndexPlaylist
                <IndexPlaylist playlist={p} selectedPlaylist={playlistClicked} />
            )
        })
    } else if (playlistsOrder === 'alph') {
        allPlaylists.sort((a, b) => (a.title < b.title) ? -1 : 1)
            // then map through them
            .map(p => {
                return (
                    // and pass them as a prop to IndexPlaylist
                    <IndexPlaylist playlist={p} selectedPlaylist={playlistClicked} />
                )
            })
    }

    return (
        <div>
            <h1>{props.user.firstName}'s Playlists:</h1>
            <Button variant='secondary'><GrAdd onClick={() => setModalShow(true)} /></Button>
            <Form.Select onChange={sortClicked}>
                <option value='alph'>A to Z</option>
                <option value='new'>Newest Created</option>
                <option value="old">Oldest Created</option>
                <option value='updated'>Most Updated</option>
            </Form.Select>
            <ol id='allPlaylists'>{allPlaylists}</ol>
            <NewPlaylist
                show={modalShow}
                onHide={() => setModalShow(false)}
                currentUser={props.user}
                allPlaylists={props.getAllPlaylists}
            />
            <Card style={{ width: '18rem' }}>
                {/* <Card.Img variant="top" src={props.playlist.videos[0].image} /> */}
                <Card.Body>
                    <Card.Title>Watched Videos</Card.Title>
                    <Link to={`/playlists/watched`}><Button variant="secondary">See Playlist</Button></Link>
                </Card.Body>
            </Card>
        </div>
    )

    const [playlistsOrder, setPlaylistsOrder] = useState('alph')

    // sort the playlist alphabeticaly
    const allPlaylists = props.playlists.sort((a, b) => (a.title < b.title) ? -1 : 1)
        // then map through them
    .map(p => {
        return (
            // and pass them as a prop to IndexPlaylist
            <IndexPlaylist playlist={p} selectedPlaylist={playlistClicked} />
        )
    })

    const sortClicked = (e) => {
        setPlaylistsOrder(e.target.value)
    }

    if (playlistsOrder === 'new') {
        allPlaylists.sort((a, b) => {
            return new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
        }).reverse()
    } else if (playlistsOrder === 'old') {
        allPlaylists.sort((a, b) => {
            return new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
        })
    } else if (playlistsOrder === 'updated') {
        allPlaylists.sort((a, b) => {
            return new Date(a.updatedAt).getTime() - new Date(b.updatedAt).getTime()
        }).reverse()
    } else if (playlistsOrder === 'alph') {
        return (
            <div>
                <h1>{props.user.firstName}'s Playlists:</h1>
                <Button variant='secondary'><GrAdd onClick={() => setModalShow(true)} /></Button>
                <Form.Select onChange={sortClicked}>
                    <option value='alph'>A to Z</option>
                    <option value='new'>Newest Created</option>
                    <option value="old">Oldest Created</option>
                    <option value='updated'>Most Updated</option>
                </Form.Select>
                <ol id='allPlaylists'>{allPlaylists}</ol>
                <NewPlaylist
                    show={modalShow}
                    onHide={() => setModalShow(false)}
                    currentUser={props.user}
                    allPlaylists={props.getAllPlaylists}
                />
                <Card style={{ width: '18rem' }}>
                    {/* <Card.Img variant="top" src={props.playlist.videos[0].image} /> */}
                    <Card.Body>
                        <Card.Title>Watched Videos</Card.Title>
                        <Link to={`/playlists/watched`}><Button variant="secondary">See Playlist</Button></Link>
                    </Card.Body>
                </Card>
            </div>
        )
    }

    return (
        <div>
            <h1>{props.user.firstName}'s Playlists:</h1>
            <Button variant='secondary'><GrAdd onClick={() => setModalShow(true)} /></Button>
            <Form.Select onChange={sortClicked}>
                <option value='alph'>A to Z</option>
                <option value='new'>Newest Created</option>
                <option value="old">Oldest Created</option>
                <option value='updated'>Most Updated</option>
            </Form.Select>
            <ol id='allPlaylists'>{allPlaylists}</ol>
            <NewPlaylist
                show={modalShow}
                onHide={() => setModalShow(false)}
                currentUser={props.user}
                allPlaylists={props.getAllPlaylists}
            />
            <Card style={{ width: '18rem' }}>
                {/* <Card.Img variant="top" src={props.playlist.videos[0].image} /> */}
                <Card.Body>
                    <Card.Title>Watched Videos</Card.Title>
                    <Link to={`/playlists/watched`}><Button variant="secondary">See Playlist</Button></Link>
                </Card.Body>
            </Card>
        </div>
    )

If you see an error message, post it here. If you don't, what unexpected behavior are you seeing?

No error, just not sorting the way I want to

What is your best guess as to the source of the problem?

The conditional seems to work but it skips over the return in those conditionals except for alphabetically

What things have you already tried to solve the problem?

Refactoring, google, peer to peer

[paulinal3]

Also still wondering about if findOrCreate() is a built in mongoose method or if I should install the npm package!

[TaylorDarneille]

To answer the second Q, I'm pretty sure findOneAndUpdate creates a new doc of it doesn't exist already. TBH I didn't realize mongoose didn't have a findOrCreate

[TaylorDarneille]

can you explain "The conditional seems to work but it skips over the return in those conditionals except for alphabetically"?

[paulinal3]

can you explain "The conditional seems to work but it skips over the return in those conditionals except for alphabetically"?

I console logged under the conditionals but before the actual sort runs and got the correct console logs when it changed state but the actual sort functions to be returned aren't working.

The "new" and "updated" conditionals just return the reverse of the alphabetically sort and the "old" returns alphabetically.

So I'm assuming it's because I have it originally return the playlists alphabetically that's messing with everything.

[paulinal3]

To answer the second Q, I'm pretty sure findOneAndUpdate creates a new doc of it doesn't exist already. TBH I didn't realize mongoose didn't have a findOrCreate

Ah gotcha! So it's fine to use findOneAndUpdate for a post route?

[TaylorDarneille]

Ah ok so it's like the callbacks you're passing into the .sort() aren't working as expected?

[TaylorDarneille]

And yeah I think it's fine to use that OR the npm module. Up to you.

[paulinal3]

Ah ok so it's like the callbacks you're passing into the .sort() aren't working as expected?

Correct and I'm not sure why. because even with the array being sorted alphabetically first, I'm still looking for specific dates to sort by afterwards

[paulinal3]

still stuck on this if anyone has ideas!