import getPhotoUrl from 'get-photo-url'
import { useLiveQuery } from 'dexie-react-hooks'
import { db } from '../dexie'

const Gallery  = () => {
    const allPhotos = useLiveQuery(() => db.gallery.toArray(), [])
    
    const addPhoto = async () => {
        db.gallery.add({
            url: await getPhotoUrl('#addPhotoInput'),
        })

    }

    const removePhoto = (id) => {
        db.gallery.delete(id)
    }

    return (
        <>
            <input type="file" name="photo" id="addPhotoInput"/>
            <label htmlFor="addPhotoInput" onClick={addPhoto}>
                <i className="add-photo-button fas fa-plus-square"></i>
            </label>

            <section className='gallery'>
                {!allPhotos && <p>Loading...</p>}
                {allPhotos?.map((photo) => (
                <div className="item" key={photo.id}>
                    <img src ={photo.url} className="item-image" alt=""/>
                    <button className="delete-button" onClick= {() => {
                        const deleteConfirmed = window.confirm('Are you sure?')
                        if (deleteConfirmed) {
                    removePhoto(photo.id)}}}>Delete</button>
                </div>
                ))}
            </section>
        
        </>
    )

}

export default Gallery

Please I have the above code for a React Instagram app clone. It's working fine but the images are added to the bottom or last whenever a person adds an image to the gallery. I want to know how to make it such that the images will be added at the top. Thanks.

CodePudding user response：

You can sort by id in reverse order:

useLiveQuery(() => db.gallery.reverse().sortBy("id"), []);