I am trying to learn Astro and how to share state with it and I am having a hard time getting a function to update an object in the nanostore.
I have a store of notifications, each of which looks like this:
{
name: "Nathan Peterson",
type: "post-reaction",
avatar: "/avatar-nathan-peterson.webp",
message: "",
time: "2 weeks ago",
postName: "5 end-game strategies to increase your win rate",
commentedPicture: "",
unread: false,
},
and I am trying to write a function that maps over all of the notifications and changes any notifications with unread: true to false.
What I have attempted was to first use compute to filter out the notifications that are not unread: true, and then to pass that into a function that maps over the array of objects. I am trying to use setKey as such:
export const $unreadLength = computed($notifications, n => n.filter(i => i.unread))
export function markRead(n: Notification[]) {
n.map((n: Notification) => n.setKey("unread", false))
}
I get the error: setKey does not exist on type 'Notification'.
How can I achieve this?
Here is my complete nanostore store:
export type Notification = {
name: string;
type:
| "post-reaction"
| "follow"
| "joined"
| "left"
| "message"
| "picture-comment";
avatar: string;
message?: string;
time: string;
postName?: string;
commentedPicture?: string;
unread: boolean;
};
export const notification = map<Notification>({
name: "",
type: "post-reaction",
avatar: "",
time: "",
postName: "",
commentedPicture: "",
message: "",
unread: false
});
export const $notifications = map<Notification[]>([
{
name: "Mark Webber",
type: "post-reaction",
avatar: "/avatar-mark-webber.webp",
message: "",
time: "1m ago",
postName: "My first tournament today!",
commentedPicture: "",
unread: true,
},
{
name: "Angela Gray",
type: "follow",
avatar: "/avatar-angela-gray.webp",
message: "",
time: "5m ago",
postName: "",
commentedPicture: "",
unread: true,
},
{
name: "Jacob Thompson",
type: "joined",
avatar: "/avatar-jacob-thompson.webp",
message: "",
time: "1 day ago",
postName: "",
commentedPicture: "",
unread: true,
},
{
name: "Rizky Hasanuddin",
type: "message",
avatar: "/avatar-rizky-hasanuddin.webp",
message:
"Hello, thanks for setting up the Chess Club. I've been a member for a few weeks now and I'm already having lots of fun and improving my game.",
time: "5 days ago",
postName: "",
commentedPicture: "",
unread: false,
},
{
name: "Kimberly Smith",
type: "picture-comment",
avatar: "/avatar-kimberly-smith.webp",
message: "",
time: "1 week ago",
postName: "",
commentedPicture: "/image-chess.webp",
unread: false,
},
{
name: "Nathan Peterson",
type: "post-reaction",
avatar: "/avatar-nathan-peterson.webp",
message: "",
time: "2 weeks ago",
postName: "5 end-game strategies to increase your win rate",
commentedPicture: "",
unread: false,
},
{
name: "Anna Kim",
type: "left",
avatar: "/avatar-anna-kim.webp",
message: "",
time: "2 weeks ago",
postName: "",
commentedPicture: "",
unread: false,
},
]);
export const $unreadLength = computed($notifications, n => n.filter(i => i.unread))
export function markRead(n: Notification[]) {
n.map((n: Notification) => n.setKey("unread", false))
}
Thank you.