0

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.

Mossy82
  • 115
  • 1
  • 9

0 Answers0