Relations hasMany bug. about vulcan HOT 12 CLOSED

Your app is crashing. Here's the latest log:
(node:70528) [DEP0131] DeprecationWarning: The legacy HTTP parser is deprecated.
/Users/webface/.meteor/packages/meteor-tool/.2.1.1.1tw9rit.a722++os.osx.x86_64+web.browser+web.browser.legacy+web.cordova/mt-os.osx.x86_64/dev_bundle/server-lib/node_modules/fibers/future.js:280
						throw(ex);
						^

Error: Could not find collection for type “Genre”. Registered types: User, Email, Setting, Callback
    at getCollectionByTypeName (packages/vulcan:lib/lib/modules/collections.js:42:11)
    at getQueryResolverName (packages/vulcan:core/lib/modules/decorators/autocomplete.js:8:24)
    at makeAutocomplete (packages/vulcan:core/lib/modules/decorators/autocomplete.js:34:58)
    at module (packages/music-site/lib/modules/albums/schema.js:81:14)
    at fileEvaluate (packages/modules-runtime.js:336:7)
    at Module.require (packages/modules-runtime.js:238:14)
    at Module.moduleLink [as link] (/Users/webface/.meteor/packages/modules/.0.16.0.hebza9.gspxj++os+web.browser+web.browser.legacy+web.cordova/npm/node_modules/reify/lib/runtime/index.js:52:22)
    at module (packages/music-site/lib/modules/albums/collection.js:1:153)
    at fileEvaluate (packages/modules-runtime.js:336:7)
    at Module.require (packages/modules-runtime.js:238:14)
    at Module.moduleLink [as link] (/Users/webface/.meteor/packages/modules/.0.16.0.hebza9.gspxj++os+web.browser+web.browser.legacy+web.cordova/npm/node_modules/reify/lib/runtime/index.js:52:22)
    at module (packages/music-site/lib/modules/albums/index.js:1:38)
    at fileEvaluate (packages/modules-runtime.js:336:7)
    at Module.require (packages/modules-runtime.js:238:14)
    at Module.moduleLink [as link] (/Users/webface/.meteor/packages/modules/.0.16.0.hebza9.gspxj++os+web.browser+web.browser.legacy+web.cordova/npm/node_modules/reify/lib/runtime/index.js:52:22)
    at module (packages/music-site/lib/modules/index.js:1:8)
    at fileEvaluate (packages/modules-runtime.js:336:7)
    at Module.require (packages/modules-runtime.js:238:14)
    at Module.moduleLink [as link] (/Users/webface/.meteor/packages/modules/.0.16.0.hebza9.gspxj++os+web.browser+web.browser.legacy+web.cordova/npm/node_modules/reify/lib/runtime/index.js:52:22)
    at module (packages/music-site/lib/server/main.js:1:8)
    at fileEvaluate (packages/modules-runtime.js:336:7)
    at Module.require (packages/modules-runtime.js:238:14)
Exited with code: 1
Your application is crashing. Waiting for file change.

import Users from "meteor/vulcan:users";
import { Utils, makeAutocomplete } from "meteor/vulcan:core";
/*

modules/movies/schema.js - #tutorial-step-10 -
This is a JS object that defines every property of a collection document...

A SimpleSchema-compatible JSON schema

*/
export const schema = {
  // default properties

  _id: {
    type: String,
    optional: true,
    canRead: ['guests'],
  },
  createdAt: {
    type: Date,
    optional: true,
    canRead: ['guests'],
    onCreate: () => {
      return new Date();
    },
  },
  userId: {
    type: String,
    optional: true,
    canRead: ['guests'],
    resolveAs: {
      fieldName: 'user',
      type: 'User',
      relation: 'hasOne',
    },
  },

  // custom properties

  name: {
    label: 'Name',
    type: String,
    optional: true,
    canRead: ['guests'],
    canCreate: ['members'],
    canUpdate: ['members'],
  },

  releaseDate: {
    label: 'Release Date',
    type: Date,
    optional: true,
    canRead: ['guests'],
    canCreate: ['members'],
    canUpdate: ['members'],
  },
  downloads: {
    label: 'Downloads',
    type: Number,
    optional: true,
    canRead: ['guests'],
    canCreate: ['members'],
    canUpdate: ['members'],
  },
  // genresIds: {
  //   type: Array,
  //   arrayItem: {
  //     type: String,
  //     optional: true,
  //     canRead: ['guests'],
  //   },
  //   optional: true,
  //   canRead: ['guests'],
  //   relation: {
  //     fieldName: 'genres',
  //     typeName: '[Genre]',
  //     kind: 'hasMany'
  //   }
  // }, // this block cant read genres of undefined

  genresIds: makeAutocomplete( //This block crashes app (Error: Could not find collection for type “Genre”. Registered types: User, Email, Setting, Callback)
    {
      type: Array,
      arrayItem: {
        type: String,
        optional: true,
      },
      label: "Genres",
      optional: true,
      canCreate: ["members"],
      canUpdate: ["owners", "admins"],
      canRead: ["guests"],
      relation: {
        fieldName: "genresIds",
        typeName: "[Genre]",
        kind: "hasMany",
      },
      order: 5,
      description: "You can pick up to three genres.",
    },
    { autocompletePropertyName: "name" }
  ),
  
};

export const schema = {
  // default properties

  _id: {
    type: String,
    optional: true,
    canRead: ['guests'],
  },
   // custom properties

  name: {
    label: 'Name',
    type: String,
    optional: true,
    canRead: ['guests'],
    canCreate: ['members'],
    canUpdate: ['members'],
    searchable: true,
  },

};

import { registerFragment } from 'meteor/vulcan:core';

registerFragment(`
  fragment GenreFragment on Genre {
    _id
    name
  }
`);

registerFragment(/* GraphQL */`
  fragment AlbumItem on Album {
    # posts
    _id
    name
    
    createdAt
    releaseDate
    downloads
    genresIds
    }
`);

registerFragment(/* GraphQL */`
  fragment AlbumPage on Album {
    ...AlbumItem
  }
`);

export * from './genres';
export * from './songs';
export * from './albums';

// Routes
export * from './routes.js';

Error while server-rendering. date: Fri Apr 09 2021 09:03:25 GMT-0400 (Eastern Daylight Time) url: [object Object]
W20210409-09:03:25.088(-4)? (STDERR) TypeError: Cannot read property 'genres' of undefined
W20210409-09:03:25.088(-4)? (STDERR)     at CardItemSwitcher (packages/vulcan:core/lib/modules/components/Card/CardItemSwitcher.jsx:53:41)
W20210409-09:03:25.089(-4)? (STDERR)     at processChild (/Applications/MAMP/htdocs/PROJECTS2021/meteor-vulcan/node_modules/react-dom/cjs/react-dom-server.node.development.js:3043:14)
W20210409-09:03:25.089(-4)? (STDERR)     at resolve (/Applications/MAMP/htdocs/PROJECTS2021/meteor-vulcan/node_modules/react-dom/cjs/react-dom-server.node.development.js:2960:5)
W20210409-09:03:25.089(-4)? (STDERR)     at ReactDOMServerRenderer.render (/Applications/MAMP/htdocs/PROJECTS2021/meteor-vulcan/node_modules/react-dom/cjs/react-dom-server.node.development.js:3435:22)
W20210409-09:03:25.089(-4)? (STDERR)     at ReactDOMServerRenderer.read (/Applications/MAMP/htdocs/PROJECTS2021/meteor-vulcan/node_modules/react-dom/cjs/react-dom-server.node.development.js:3373:29)
W20210409-09:03:25.089(-4)? (STDERR)     at renderToStaticMarkup (/Applications/MAMP/htdocs/PROJECTS2021/meteor-vulcan/node_modules/react-dom/cjs/react-dom-server.node.development.js:4004:27)
W20210409-09:03:25.089(-4)? (STDERR)     at /Applications/MAMP/htdocs/PROJECTS2021/meteor-vulcan/node_modules/@apollo/client/react/ssr/ssr.cjs.js:85:21
W20210409-09:03:25.089(-4)? (STDERR)     at new Promise (<anonymous>)
W20210409-09:03:25.090(-4)? (STDERR)     at process (/Applications/MAMP/htdocs/PROJECTS2021/meteor-vulcan/node_modules/@apollo/client/react/ssr/ssr.cjs.js:83:16)
W20210409-09:03:25.090(-4)? (STDERR)     at /Users/webface/.meteor/packages/promise/.0.11.2.1xo9zmy.xljqg++os+web.browser+web.browser.legacy+web.cordova/npm/node_modules/meteor-promise/fiber_pool.js:43:40
W20210409-09:03:25.090(-4)? (STDERR)  => awaited here:
W20210409-09:03:25.090(-4)? (STDERR)     at Function.Promise.await (/Users/webface/.meteor/packages/promise/.0.11.2.1xo9zmy.xljqg++os+web.browser+web.browser.legacy+web.cordova/npm/node_modules/meteor-promise/promise_server.js:56:12)
W20210409-09:03:25.090(-4)? (STDERR)     at packages/vulcan:lib/lib/server/apollo-ssr/renderPage.js:61:7
W20210409-09:03:25.090(-4)? (STDERR)     at /Users/webface/.meteor/packages/promise/.0.11.2.1xo9zmy.xljqg++os+web.browser+web.browser.legacy+web.cordova/npm/node_modules/meteor-promise/fiber_pool.js:43:40

modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:98614 Warning: Expected server HTML to contain a matching <div> in <div>.
    in div (created by App)
    in IntlProvider (created by App)
    in App (created by Context.Consumer)
    in withRouter(App) (created by withCookies(withRouter(App)))
    in withCookies(withRouter(App)) (created by Context.Consumer)
    in withCookies(withRouter(App)) (created by Context.Consumer)
    in ApolloConsumer (created by withApollo(withCookies(withRouter(App))))
    in withApollo(withCookies(withRouter(App))) (created by withUpdateUser)
    in withUpdateUser (created by withLocaleData)
    in withLocaleData (created by withSiteData)
    in withSiteData (created by withCurrentUser)
    in withCurrentUser (created by AppGenerator)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by AppGenerator)
    in CookiesProvider (created by AppGenerator)
    in ApolloProvider (created by AppGenerator)
    in AppGenerator (created by Main)
    in Main
printWarning @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:98614
error @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:98586
warnForInsertedHydratedElement @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:105129
didNotFindHydratableContainerInstance @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:106319
insertNonHydratedInstance @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:115008
tryToClaimNextHydratableInstance @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:115117
updateHostComponent @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:115795
beginWork @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:117153
beginWork$1 @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:121705
performUnitOfWork @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:120680
workLoopSync @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:120656
performSyncWorkOnRoot @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:120282
scheduleUpdateOnFiber @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:119714
updateContainer @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:122899
(anonymous) @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:123284
unbatchedUpdates @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:120429
legacyRenderSubtreeIntoContainer @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:123283
hydrate @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:123349
(anonymous) @ start.jsx:47
(anonymous) @ client.js:8
(anonymous) @ meteor.js?hash=857dafb4b9dff17e29ed8498a22ea5b1a3d6b41d:1234
Promise.then (async)
Promise.then @ promise.js?hash=bcc278416465049d96746a94376f34245ad33b8c:132
onPageLoad @ client.js:8
(anonymous) @ start.jsx:35
maybeReady @ meteor.js?hash=857dafb4b9dff17e29ed8498a22ea5b1a3d6b41d:938
loadingCompleted @ meteor.js?hash=857dafb4b9dff17e29ed8498a22ea5b1a3d6b41d:950
CardItemSwitcher.jsx:53 Uncaught TypeError: Cannot read property 'genres' of undefined
    at CardItemSwitcher (CardItemSwitcher.jsx:53)
    at renderWithHooks (modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:113329)
    at mountIndeterminateComponent (modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:116008)
    at beginWork (modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:117122)
    at HTMLUnknownElement.callCallback (modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:98714)
    at Object.invokeGuardedCallbackDev (modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:98763)
    at invokeGuardedCallback (modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:98818)
    at beginWork$1 (modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:121729)
    at performUnitOfWork (modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:120680)
    at workLoopSync (modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:120656)
CardItemSwitcher @ CardItemSwitcher.jsx:53
renderWithHooks @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:113329
mountIndeterminateComponent @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:116008
beginWork @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:117122
callCallback @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:98714
invokeGuardedCallbackDev @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:98763
invokeGuardedCallback @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:98818
beginWork$1 @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:121729
performUnitOfWork @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:120680
workLoopSync @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:120656
performSyncWorkOnRoot @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:120282
scheduleUpdateOnFiber @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:119714
updateContainer @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:122899
(anonymous) @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:123284
unbatchedUpdates @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:120429
legacyRenderSubtreeIntoContainer @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:123283
hydrate @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:123349
(anonymous) @ start.jsx:47
(anonymous) @ client.js:8
(anonymous) @ meteor.js?hash=857dafb4b9dff17e29ed8498a22ea5b1a3d6b41d:1234
Promise.then (async)
Promise.then @ promise.js?hash=bcc278416465049d96746a94376f34245ad33b8c:132
onPageLoad @ client.js:8
(anonymous) @ start.jsx:35
maybeReady @ meteor.js?hash=857dafb4b9dff17e29ed8498a22ea5b1a3d6b41d:938
loadingCompleted @ meteor.js?hash=857dafb4b9dff17e29ed8498a22ea5b1a3d6b41d:950
modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:98614 Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: DateTime
printWarning @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:98614
warn @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:98577
ReactStrictModeWarnings.flushPendingUnsafeLifecycleWarnings @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:109903
flushRenderPhaseStrictModeWarningsInDEV @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:121638
commitRootImpl @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:120922
unstable_runWithPriority @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:124268
runWithPriority$1 @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:109565
commitRoot @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:120907
finishSyncRender @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:120333
performSyncWorkOnRoot @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:120319
scheduleUpdateOnFiber @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:119714
updateContainer @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:122899
(anonymous) @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:123284
unbatchedUpdates @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:120429
legacyRenderSubtreeIntoContainer @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:123283
hydrate @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:123349
(anonymous) @ start.jsx:47
(anonymous) @ client.js:8
(anonymous) @ meteor.js?hash=857dafb4b9dff17e29ed8498a22ea5b1a3d6b41d:1234
Promise.then (async)
Promise.then @ promise.js?hash=bcc278416465049d96746a94376f34245ad33b8c:132
onPageLoad @ client.js:8
(anonymous) @ start.jsx:35
maybeReady @ meteor.js?hash=857dafb4b9dff17e29ed8498a22ea5b1a3d6b41d:938
loadingCompleted @ meteor.js?hash=857dafb4b9dff17e29ed8498a22ea5b1a3d6b41d:950
modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:118053 The above error occurred in the <CardItemSwitcher> component:
    in CardItemSwitcher (created by CardItem)
    in td (created by CardItem)
    in tr (created by CardItem)
    in CardItem (created by Card)
    in tbody (created by Card)
    in table (created by Card)
    in div (created by Card)
    in Card (created by withComponents(Card))
    in withComponents(Card) (created by AlbumsList)
    in div (created by AlbumsList)
    in div (created by AlbumsList)
    in AlbumsList (created by withAlbum)
    in withAlbum (created by withCurrentUser)
    in withCurrentUser (created by Context.Consumer)
    in AccessControl (created by withMessages(AccessControl))
    in withMessages(AccessControl) (created by Context.Consumer)
    in ErrorCatcher (created by Context.Consumer)
    in withRouter(ErrorCatcher) (created by withSiteData)
    in withSiteData (created by withCurrentUser)
    in withCurrentUser (created by Context.Consumer)
    in div (created by Dashboard)
    in Dashboard (created by Layout)
    in div (created by Container)
    in Container (created by Layout)
    in div (created by Layout)
    in Layout (created by Context.Consumer)
    in Route (created by RouteWithLayout)
    in RouteWithLayout (created by App)
    in Switch (created by App)
    in div (created by App)
    in IntlProvider (created by App)
    in App (created by Context.Consumer)
    in withRouter(App) (created by withCookies(withRouter(App)))
    in withCookies(withRouter(App)) (created by Context.Consumer)
    in withCookies(withRouter(App)) (created by Context.Consumer)
    in ApolloConsumer (created by withApollo(withCookies(withRouter(App))))
    in withApollo(withCookies(withRouter(App))) (created by withUpdateUser)
    in withUpdateUser (created by withLocaleData)
    in withLocaleData (created by withSiteData)
    in withSiteData (created by withCurrentUser)
    in withCurrentUser (created by AppGenerator)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by AppGenerator)
    in CookiesProvider (created by AppGenerator)
    in ApolloProvider (created by AppGenerator)
    in AppGenerator (created by Main)
    in Main

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorCatcher.
logCapturedError @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:118053
logError @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:118090
callback @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:119270
callCallback @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:111016
commitUpdateQueue @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:111037
commitLifeCycles @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:118384
commitLayoutEffects @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:121329
callCallback @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:98714
invokeGuardedCallbackDev @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:98763
invokeGuardedCallback @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:98818
commitRootImpl @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:121067
unstable_runWithPriority @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:124268
runWithPriority$1 @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:109565
commitRoot @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:120907
finishSyncRender @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:120333
performSyncWorkOnRoot @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:120319
scheduleUpdateOnFiber @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:119714
updateContainer @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:122899
(anonymous) @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:123284
unbatchedUpdates @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:120429
legacyRenderSubtreeIntoContainer @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:123283
hydrate @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:123349
(anonymous) @ start.jsx:47
(anonymous) @ client.js:8
(anonymous) @ meteor.js?hash=857dafb4b9dff17e29ed8498a22ea5b1a3d6b41d:1234
Promise.then (async)
Promise.then @ promise.js?hash=bcc278416465049d96746a94376f34245ad33b8c:132
onPageLoad @ client.js:8
(anonymous) @ start.jsx:35
maybeReady @ meteor.js?hash=857dafb4b9dff17e29ed8498a22ea5b1a3d6b41d:938
loadingCompleted @ meteor.js?hash=857dafb4b9dff17e29ed8498a22ea5b1a3d6b41d:950
modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:47671 Warning: Failed prop type: The prop `dismissFlash` is marked as required in `Flash`, but its value is `undefined`.
    in Flash (created by ErrorCatcherContents)
    in ErrorCatcherContents (created by ErrorCatcher)
    in ErrorCatcher (created by Context.Consumer)
    in withRouter(ErrorCatcher) (created by withSiteData)
    in withSiteData (created by withCurrentUser)
    in withCurrentUser (created by Context.Consumer)
    in div (created by Dashboard)
    in Dashboard (created by Layout)
    in div (created by Container)
    in Container (created by Layout)
    in div (created by Layout)
    in Layout (created by Context.Consumer)
    in Route (created by RouteWithLayout)
    in RouteWithLayout (created by App)
    in Switch (created by App)
    in div (created by App)
    in IntlProvider (created by App)
    in App (created by Context.Consumer)
    in withRouter(App) (created by withCookies(withRouter(App)))
    in withCookies(withRouter(App)) (created by Context.Consumer)
    in withCookies(withRouter(App)) (created by Context.Consumer)
    in ApolloConsumer (created by withApollo(withCookies(withRouter(App))))
    in withApollo(withCookies(withRouter(App))) (created by withUpdateUser)
    in withUpdateUser (created by withLocaleData)
    in withLocaleData (created by withSiteData)
    in withSiteData (created by withCurrentUser)
    in withCurrentUser (created by AppGenerator)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by AppGenerator)
    in CookiesProvider (created by AppGenerator)
    in ApolloProvider (created by AppGenerator)
    in AppGenerator (created by Main)
    in Main
    

import React from 'react';
import { Helmet } from 'react-helmet';
import { Components, withMulti, withCurrentUser, registerComponent } from 'meteor/vulcan:core';
import Users from 'meteor/vulcan:users';

import Albums from '../../modules/albums/collection.js';

{
  /* These are "props". They are variables for the component that are passed by the components parent. 
  In this case, to create the parent we wrapped the component in "Higer Order Compoents" (See the Higer Order Compoents section below.) 
    By doing this, we can pass on those props to the children of he HOCs and give them access to the props... */
}
const AlbumsList = ({ results = [], currentUser, loading, loadMore, count, totalCount }) => (
  <div style={{ maxWidth: '500px', margin: '20px auto' }}>
    {/* First, this is a Helment tag. It's a React package that loads head tags. We're using it to load the Bootstrap stylesheet. 
      This is not Vulcan specific but it is an easy way to add tags to the head... */}
    


    {/* ... We have a test for the loding variable (See the "Higher Order Components" section at the bottom and then the "props" section at the top.)... */}
    {loading ? (
      <Components.Loading />
    ) : (
      <div className="albums">
        {/* new document form - this if for inserting new documents. Because the collection has the schema, when we generate the form, it know what the colleciton should look like
          You only need to specify the colleciton. You don't need to code any of the form. Validation will work and it will show you fields based on your user permission...*/}

        {Users.canCreate({ collection: Albums, user: currentUser }) ? (
          <div
            style={{
              marginBottom: '20px',
              paddingBottom: '20px',
              borderBottom: '1px solid #ccc',
            }}
          >
            <h4>Create New Album</h4>
            <Components.SmartForm collection={Albums} />
          </div>
        ) : null}

        {/* documents list - this is another small utility in Vulcan and it will display it as a card... */}

        {results.map(album => (
          <Components.Card
            fields={['name', 'releaseDate','downloads', 'genresIds']}
            key={album._id}
            collection={Albums}
            document={album}
            currentUser={currentUser}
          />
        ))}

        {/* load more - this is the load more button. On click we trigger the loadMore function which is passed as a prop by withList... */}

        {totalCount > results.length ? (
          <a
            href="#"
            onClick={e => {
              e.preventDefault();
              loadMore();
            }}
          >
            Load More ({count}/{totalCount})
          </a>
        ) : (
          <p>No more items.</p>
        )}
      </div>
    )}
  </div>
);

// ...this is where we specify how to load the data in the options object that we pass to withList
// if you want, you can specify many more options here, like how often to look for data or what fields to query from, filtering and sorting options. ...
const options = {
  collection: Albums,
  limit: 5,
  fragmentName: 'AlbumItem',
};



// These two functions (withList & withCurrentUser) are Higher Order Components (HOC) and by wrapping our component with this we can give it "props". (See the "props" section at the top.)
registerComponent({ name: 'AlbumsList', component: AlbumsList, hocs: [withCurrentUser, [withMulti, options]] });

{results.map(album => (
          <Components.Card
            fields={['name', 'releaseDate','downloads', 'genres']}
            key={album._id}
            collection={Albums}
            document={album}
            currentUser={currentUser}
          />
        ))}