Sort Data Fetched from Pocket API by Date

[SureshPradhana]

Description:

The data fetched from the Pocket API is grouped based on dates but they are not sorted. This needs to be addressed so that the route /readings shows the data based on the latest dates first.

File Path:

/src/pages/readings/index.astro

Task:

• Sort the fetched data by date in descending order to ensure the latest dates are displayed first.

[Mark-a-obrien]

Hi, can you assign me this issue?

[SureshPradhana]

Hi @Mark-a-obrien, thanks for willing to contribute. Here is the blog with API information on connecting to the Pocket API: Getting Started with the Pocket Developer API. official docs: https://getpocket.com/developer/docs/v3/retrieve

I used the portfolio tag on saved posts on Pocket.

[Mark-a-obrien]

Hi @SureshPradhana, /readings it doesn't seem to be displaying any data besides the Readings header.

I apologies if I'm missing something I'm new to collaborating on projects. Thanks

[SureshPradhana]

You are not missing anything. First, we have to set up a connection with Pocket. It does not show any data yet because we are loading from GetPocket. Here are the steps you need to follow:

1. Create a Pocket account to save blog posts there. Only portfolio tags will be shown here.
2. Create a new app at this URL: Create Pocket App.
3. Obtain the consumer key from the app, which is needed to get the code and access token. The process is described in this blog: Getting Started with the Pocket Developer API.

We only need the access token and consumer key to connect to the API. I have done that and fetched the data.

Put POCKET_CONSUMER_KEY="consumer key from Pocket" and POCKET_ACCESS_TOKEN="access token from Pocket" in your .env file at root.

In /src/readings/index.astro, you need to sort the data by date:

function groupDataByDate() {
    if (!pocketData) return;

    const groupedByDate = {};
    Object.keys(pocketData).forEach((itemId) => {
        const timestamp = parseInt(pocketData[itemId].time_added);
        const date = new Date(timestamp * 1000).toISOString().substr(0, 10); // Get date in YYYY-MM-DD format
        if (!groupedByDate[date]) {
            groupedByDate[date] = [];
        }
        groupedByDate[date].push(pocketData[itemId]);
    });

    groupedData = Object.keys(groupedByDate).map((date) => ({
        date,
        items: groupedByDate[date],
    }));
}

something like this

    groupedData = Object.keys(groupedByDate).map((date) => ({
        date,
        items: groupedByDate[date],
    })).sort((a, b) => b.date.localeCompare(a.date)); // Sort by date in YYYY-MM-DD format
}

It's a lot of work to create and connect to Pocket. If not, just make the sorting change and submit a pull request. I'll review and make any necessary tweaks.

On my side, I have set everything up. Just make the small changes and I'll look at them.

[SureshPradhana]

Hi, I understand this setup can be challenging when you're new. Feel free to submit a pull request with your progress, and I'll review it and offer assistance if necessary.

[SureshPradhana]

I've decided to take on the issue since I already have everything set up.