sorting by two different date props | Astro Lounge | Page 1

spiral hill Jan 21, 2024, 12:59 AM

#

i have an art archive where my content collection includes two date props, the {date} it was created and the {uploadDate}. to sort them by {date}, i've written the following:

export function sortByDate(entries) {
    const sortedEntries = [...entries];
    sortedEntries.sort((a, b) => new Date(a) - new Date(b));
    return sortedEntries;
}

i'm trying to write a separate function to sort them by {uploadDate} as well for a "recently added entries" scrollbox. how might i specify when writing the function that that is the prop i am trying to work with?

small ember Jan 21, 2024, 1:09 AM

#

Could do a second parameter of the function maybe like isScrollbox

spiral hill Jan 21, 2024, 1:14 AM

#

my approach here is building the scrollbox as a component and keeping the function contained to that component because i shouldn't need it anywhere else. i just don't know how to select the upload date as opposed to the creation date (or as general Date) when writing it.

i had to declare the collection in the component itself (unsure if this is a good approach) so i should be able to manipulate the props. here is where i'm at:

---
import { getCollection } from "astro:content";
import { formatDate } from "../js/utils.js";

const entries = await getCollection("entries");
---

<div>
    <h2>RECENT UPLOADS</h2>
    <ul class="scrollbox">
        {
            entries.toReversed().map((entry) =>
            <li>
                <a href={`/archive/entries/${entry.slug}/`}><b>{formatDate(entry.data.date)}</b> : {entry.data.title}                     
                    <div class="icons">
                            { entry.data.Nsfw && <i class="fas fa-ban"></i> }
                            { entry.data.Dd && <i class="fas fa-feather"></i>}

                    </div>
                </a>
            </li>
            )
        }
    </ul>
</div>

please let me know if anything jumps out at you. i'm a baby still lol

#

i would have no issue comparing the two dates, i just need to select the upload date specifically

small ember Jan 21, 2024, 1:17 AM

#

thats all looking good to me, maybe im underthinking it but can you just take entry.data.uploadDate from the frontmatter and sort them there

const sortByUpload = (dates) => date.sort((a, b)) => new Date(a) - new Date(b))
const entries = await getCollection("entries");
const sortedByUpload = sortByUpload(entries.data.uploadDate)

#

or if you want to use that same function from before

import { sortByDate } from "path"
const entries = await getCollection("entries");
const sortedByUpload = sortByDate(entries.data.uploadDate)

spiral hill Jan 21, 2024, 1:22 AM

#

re: (entries.data.uploadDate) specifically, typescript says there is no type assigned to data

#

the latter should work fine, i just can't get the upload date

small ember Jan 21, 2024, 1:22 AM

#

interesting

#

can you show your content collection config?

spiral hill Jan 21, 2024, 1:24 AM

#

const allEntries = defineCollection({ 
    type: 'content',
    schema: ({ image }: SchemaContext) => 
        z.object({
            title: z.string(),
            date: z.date(),
            uploadDate: z.date(),
            thumb: z.object({
              src: image(),
              alt: z.string()
            }),
            image: z.object({
                src: image(),
                alt: z.string(),
            }),
            tags: z.array(z.string()),
            icons: z.array(z.string()),
            desc: z.string(),
            original: z.boolean(),
            medium: z.string(),
          }),

small ember Jan 21, 2024, 1:31 AM

#

hmm yeah if that looks fine

#

maybe the types just need a refresh if youre using vscode try restarting it? because if you can access date i dont see why you cant access uploadDate the same way

spiral hill Jan 21, 2024, 1:38 AM

#

tried a restart, no go

small ember Jan 21, 2024, 1:38 AM

#

can you show the whole frontmatter where youre trying to access entries.data.uploadDate

spiral hill Jan 21, 2024, 1:43 AM

#

---
import { getCollection } from "astro:content";
import { formatDate, sortByDate } from "../js/utils.js";

const entries = await getCollection("entries");
const sortedUploadDate = sortByDate(entries.data.uploadDate);
---

ftr, there's a squiggle under data

small ember Jan 21, 2024, 1:44 AM

#

if you hover over entries what does it show you is available there

#

oh wait

#

sorry entires is going to be an array of all the entires

spiral hill Jan 21, 2024, 1:47 AM

#

yep

small ember Jan 21, 2024, 1:48 AM

#

sorry brain not braining

function sortByUploadDate(entries) {
    const sortedEntries = [...entries];
    sortedEntries.sort((a, b) => new Date(a.data.uploadDate) - new Date(b.data.uploadDate));
    return sortedEntries;
}

#

and then youd just pass sortByDate(entries)

spiral hill Jan 21, 2024, 2:00 AM

#

sortedEntries.sort((a, b) => new Date(a.data.uploadDate) - new Date(b.data.uploadDate));

typescript doesn't like this because new Date() must be a number or integer

#

i remember there's a way to like. brute force it. i don't want to if i don't have to but i am running short on elegant solutions

#

like for all intents and purposes this should work but typescript is typescripting

small ember Jan 21, 2024, 2:02 AM

#

dang what the heck

spiral hill Jan 21, 2024, 2:03 AM

#

right lol

small ember Jan 21, 2024, 2:03 AM

#

what type is it now?

spiral hill Jan 21, 2024, 2:03 AM

#

and i feel you re: brain not braining

#

small ember Jan 21, 2024, 2:20 AM

#

sortedEntries.sort((a, b) => new Date(a.data.uploadDate).getDate() - new Date(b.data.uploadDate).getDate());

#

i think

#

but honestly im now just guessing sorry this isnt the best support

spiral hill Jan 21, 2024, 2:25 AM

#

you're good, typescript is evil

#

it seemed to like that at least

small ember Jan 21, 2024, 2:28 AM

#

nice now the question is are they actually sorted LOL

#

i wonder why it was able to just create a date about of the entry for the first one

#

looking back at how i did this before i was able to do

b.data.date_modified.getTime() - a.data.date_modified.getTime()

#

which is a bit simpler

#

since a.data.uploadDate should already be a date from the zod schema

spiral hill Jan 21, 2024, 2:31 AM

#

the issue i'm running into now is vscode says sortByUploadDate is never read so i get a squiggly under sortedEntries in toReversed().map((entry)

small ember Jan 21, 2024, 2:33 AM

#

im guess that means you gotta invoke that function ?

const sortedByUploadTime = sortbyUploadDate(entries) ? then reverse and map over that

spiral hill Jan 21, 2024, 2:42 AM

#

it doesn't appear to be :(

small ember Jan 21, 2024, 2:44 AM

#

can you show the whole frontmatter again

#

er i guess the whole file

spiral hill Jan 21, 2024, 2:48 AM

#

(fwiw i tossed // @ts-ignore above it and we seem to be working so i might. just stay with that)

#

---
import { getCollection } from "astro:content";
import { formatDate, sortByDate } from "../js/utils.js";

const entries = await getCollection("entries");

function sortByUploadDate(entries) {
    const sortedEntries = [...entries];
    // @ts-ignore
    sortedEntries.sort((a, b) => new Date(a.data.uploadDate) - new Date(b.data.uploadDate));
    return sortedEntries;
}

const sort = sortByUploadDate(entries);
console.log(sort)

---

<div class="recent">
    <h2>RECENT UPLOADS</h2>
    <ul class="scrollbox">
        {
            sort.toReversed().map((entry) =>
            <li>
                <a href={`/archive/entries/${entry.slug}/`}><b>{formatDate(entry.data.date)}</b> : {entry.data.title}  
                </a>
            </li>
            )
        }
    </ul>
</div>

<style>...</style>

#

i am going to step away because i am about to pass out and my dog is mad at me for not paying attention to him. sorry if this stumped you, i really appreciate the help.

small ember Jan 21, 2024, 3:23 AM

#

i think sorting based on a.data.uploadDate.getTime() and a.data.uploadDate.getTime() would avoid the errors

spiral hill Jan 24, 2024, 3:26 AM

#

if you were at all interested in taking another crack at this, it is no longer working 🙃 it isn't screaming bc @ts-ignore but yeah

function sortByUploadDate(entries) {
    const allEntries = [...entries];
    // @ts-ignore
    allEntries.sort((a, b) => new Date(a.data.uploadDate) - new Date(b.data.uploadDate));
    return allEntries;
}

#

adding .getTime() did not help

small ember Jan 24, 2024, 3:33 AM

#

function sortByUploadDate(entries) {
    const allEntries = [...entries];
    allEntries.sort((a, b) => a.data.uploadDate.getTime() - b.data.uploadDate.getTime());
    return allEntries;
}

Isn't working?

spiral hill Jan 24, 2024, 3:47 AM

#

actually you know what. i have no idea what happened but it is working now.

#

i appreciate this.

#

sorry to bug you. you are my hero.

small ember Jan 24, 2024, 3:48 AM

#

haha no worries glad its working!

#

when it doubt restart everything is my motto

#sorting by two different date props