Is a "user rating" feature possible with Payload?

vibl

9 months ago

1 2

• Selected Answer
  

  cbrualdi

  9 months ago

  I'd approach it this way:

  • A beforeChange hook on RatingCollection to save the user who is rating in a readonly or disabled field
  • An access:read function to show the user only his own ratings
  • A validate function on the product relation to check the uniqueness of the [user, products] rating

  Something like this:

  const ProductsCollection: CollectionConfig = {
    slug: 'products-for-rating',
    labels: { plural: 'Products' },
    admin: {
      group: 'Rating',
      useAsTitle: 'productName'
    },
    fields: [
      {
        name: 'productName',
        type: 'text',
      }
    ],
  }

  const RatingsCollection: CollectionConfig = {
    slug: 'ratings',
    admin: {
      group: 'Rating',
    },
    fields: [
      {
        name: 'product',
        type: 'relationship',
        relationTo: 'products-for-rating',
        validate: async (val, { user }) => {
          const query = qs.stringify({
            where: {
              and: [
                {
                  product: { equals: val }
                },
                {
                  user: { equals: user.id }
                }
              ]
            } 
          }, { addQueryPrefix: true })
          
          const response = await fetch(`http://localhost:3000/api/ratings${query}`)
          const sameRating = await response.json()
  
          if (!sameRating.totalDocs) {
            return true;
          }
  
          return 'You have already rated this product.';
        },
      },
      {
        name: 'rating',
        type: 'number',
        min: 1, max: 5,
        // admin: {
        //   components: {
        //     Field: FiveStarsField
        //   }
        // }
      },
      {
        name: 'user',
        type: 'relationship',
        relationTo: 'users',
        admin: {
          readOnly: true
        },
      },
    ],
    access: {
      read: ({ req: { user }, id }) => { 
        return {
          user: { 
            equals: user.id 
          }
        } 
      }
    },
    hooks: {
      beforeChange: [async ({
        data,
        req, 
      }) => {
        data.user = req.user.id
        return data;
      }]
    }
  }

  To show the 5-stars field you can provide a custom Field Component to the rating field.

  If I understand your problem correctly, this work for me, but I'm curious to know if there's a better approach.

• 

  JarrodMFlesch

  Payload Team

  9 months ago

  @vibl You could create a ratings collection, and store your data there. You would have a field for the user, the article and the rating.

  To make them unique you could create a hidden field (set it to unique in the config) and use a beforeValidate hook to generate the value for that field by concatenating the userID and the articleID.

  To display it on an article page within the admin panel, you could create a custom ui field, that fetches the users rating based on the article they are viewing (the useDocumentInfo hook would be useful here). If there is a rating, set that as your value in your customStarComponent field. On change make a POST req to the ratings collection where user = userID and article = articleID.

  How does that sound to you?