Needing help with a block component

default discord avatar
taun2160
5 months ago
6

Hi. I'd like to render the selected rooms data, such as title, description, images, price. No styling at this point.


What should my Component code be, or can you please provide keywords to search to learn how to do it, if you're not willing to write out the code.


https://github.com/taunhealy/Bukela-Lodge


Rooms block config:


import React from 'react';
import { Block } from 'payload/types';

export const Rooms: Block = {
  slug: 'rooms-block',
  labels: {
    singular: 'Rooms Block',
    plural: 'Rooms Blocks',
  },
  fields: [
  {
      name: 'selectRooms',
      type: 'relationship',
      relationTo: 'rooms',
      hasMany: true,
    },
  ],
};


the incorrect Rooms/Component.tsx



 import React from 'react';
import NextImage from 'next/image';
import RichText from '../../components/RichText';
import classes from './index.module.css';
import sizes from './sizes.json';
import { MediaType } from '../../collections/Media';
import { Rooms } from './Config';

export type RoomsBlockProps = {
    selectRooms: Array<any>;
  };

  export const RoomsBlock: React.FC<RoomsBlockProps> = ({ selectRooms }) => {
    return (
    <div>
      {selectRooms.map((room) => (
        <div key={room._id}>
        <h2>{room.title}</h2>
        <img src={room.featuredImage.url} alt={room.featuredImage.alt} />
        <p>{room.description}</p>
        <p>Price: {room.price}</p>
        </div>
        ))}
    </div>
    );
  };


collection/Room.ts


import { CollectionConfig } from 'payload/types';

const Room: CollectionConfig = {
    slug: 'rooms',
    fields: [
        {
            name: 'title',
            label: 'Room Title',
            type: 'text',
            required: true,
        },
{
    name: 'featuredImage',
    label: 'Featured Image',
    type: 'upload',
    relationTo: 'media',
    required: true,
  },
  {
    name: 'images',
    label: 'Images',
    type: 'array',
    minRows: 1,
    fields: [
      {
        name: 'image',
        label: 'Image',
        type: 'upload',
        relationTo: 'media',
        required: true,
      },
    ],
  },
  {
    name: 'description',
    label: 'Description',
    type: 'richText',
    required: true,
  },
  {
    name: 'price',
    label: 'Price',
    type: 'number',
    required: true,
  },
],
};

export default Room;


https://github.com/taunhealy/Bukela-Lodge
  • default discord avatar
    notchr
    5 months ago

    Morning @taun2160, what is the issue exactly, sorry



    The component.tsx



    ?

  • default discord avatar
    taun2160
    5 months ago

    Good morning (3pm my side). Yea, I don't know how to call the selected rooms data and render it. When the admin chooses the block, it will run the component and render it right? Which is typically rendered to a page that the block is added to?



    Those are side questions, my main challenge is the component code.

  • default discord avatar
    notchr
    5 months ago

    And what are you getting now, no data?

  • default discord avatar
    taun2160
    5 months ago

    At the moment it's displaying a blank page and the console is returning the error:

    _error.js:1          Failed to load resource: the server responded with a status of 500 (Internal Server Error)


    PS C:\git\2160\Bukela-Lodge> yarn dev
    yarn run v1.22.19
    $ ts-node server.ts
    [13:28:16] INFO (payload): Connected to Mongo server successfully!
    [13:28:16] INFO (payload): Starting Payload...
    info  - Loaded env from C:\git\2160\Bukela-Lodge\.env
    webpack built d9c26d2e97ce7dfe2c9b in 17891ms
    webpack compiled successfully
    <w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: No serializer registered for ConcatSource
    <w> while serializing webpack/lib/util/registerExternalSerializer.webpack-sources/ConcatSource -> Array { 2 items } -> ConcatSource
  • default discord avatar
    notchr
    5 months ago

    OH weird, this issue was happening yesterday



    The ConcatSource thing



    @jmikrut Wasn't this a thing yesterday?

  • default discord avatar
    taun2160
    5 months ago
    PS C:\git\2160\Bukela-Lodge> yarn dev
    yarn run v1.22.19
    $ ts-node server.ts
    [13:32:59] INFO (payload): Connected to Mongo server successfully!
    [13:32:59] INFO (payload): Starting Payload...
    info  - Loaded env from C:\git\2160\Bukela-Lodge\.env
    event - compiled client and server successfully in 5.3s (160 modules)
    NextJS started
    Server listening on 3000...
    webpack built d9c26d2e97ce7dfe2c9b in 16987ms
    webpack compiled successfully
    <w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: No serializer registered for ConcatSource
    <w> while serializing webpack/lib/util/registerExternalSerializer.webpack-sources/ConcatSource -> Array { 2 items } -> ConcatSource
    wait  - compiling / (client and server)...
    event - compiled client and server successfully in 972 ms (296 modules)
    wait  - compiling /[...slug] (client and server)...
    event - compiled client and server successfully in 672 ms (297 modules)


    I closed Vscode, my browser, re-opened VSCode and it's working again. Error is still there, but for now it's up. When I run yarn dev again I think that's when it corrupts something and doesn't refresh the server. I don't know.



    The Rooms page is loading the image and title that I assume comes from the Room collection



     import React from 'react';
    import NextImage from 'next/image';
    import RichText from '../../components/RichText';
    import classes from './index.module.css';
    import sizes from './sizes.json';
    import { MediaType } from '../../collections/Media';
    import { Rooms } from './Config';
    
    export type RoomsBlockProps = {
        selectRooms: Array<any>;
      };
    
      export const RoomsBlock: React.FC<RoomsBlockProps> = ({ selectRooms }) => {
        return (
        <div>
          {selectRooms.map((room) => (
            <div key={room._id}>
            <h2>{room.title}</h2>
            <img src={room.featuredImage.url} alt={room.featuredImage.alt} />
            <p>{room.description}</p>
            <p>Price: {room.price}</p>
            </div>
            ))}
        </div>
        );
      };


    Where is it destructuring { selectRooms } from? I don't need getStaticSideProps within the component because that's being called in the slug to render the slugs/pages that contain the blocks? Something like that?

    image.png
Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.