CODEWITHSUNDEEP
reactjsastrojsnanostores
Mossy82
Mossy82

Reputation: 365

Unable to update object in nanostore using setKey

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.

Upvotes: 0

Views: 1195

Answers (1)

euaaaio
euaaaio

Reputation: 11

Nano Stores’ map is designed to work with objects, but not with arrays of objects. You should use atom to store an array of objects. Then your code will look like this:

import { atom } from 'nanostores'

export interface Notification {
  name: string
  unread: boolean
}

export const $notifications = atom<Notification[]>([
  {
    name: "Mark Webber",
    unread: true
  }
])

To change any values in an array of objects, you need to get the value of a store, change it, then set it:

import type { Atom } from 'nanostores'

import type { Notification } from '../stores/index.ts'
    
export function markAllAsRead(store: Atom<Notification[]>) {
  store.set([
    ...store.value.map(value => {
      value.unread = false
    })
  ])
}

Upvotes: 1

Related Questions