Needing help with a block component

taun21602 years ago

6

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,
    },
  ],
};

 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>
    );
  };

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;

• 

  notchr2 years ago

  Morning

  @479030528084017165

  , what is the issue exactly, sorry

  
  
  

  The component.tsx

  
  
  

  ?

• 

  taun21602 years 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.

• 

  notchr2 years ago

  And what are you getting now, no data?

• 

  taun21602 years 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

• 

  notchr2 years ago

  OH weird, this issue was happening yesterday

  
  
  

  The ConcatSource thing

  
  
  @364124941832159242

  Wasn't this a thing yesterday?

• 

  taun21602 years 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?