Snackbar show method should not require message parameter

[memestageceo]

I am trying to use the snackbar that ships with MDC for web with connect-flash of express. If i simply add the snackbar element like this, it dosn't seem to work

block messages
      if locals.flashes
        - const categories = Object.keys(locals.flashes)
        each category in categories
          each message in flashes[category]
            #mdc-js-snackbar
              .mdc-snackbar(aria-live="assertive", aria-atomic="true" aria-hidden="true")
                .mdc-snackbar__text!= message
                .mdc-snackbar__action-wrapper
                  button.mdc-snackbar__action-button Ok

Also, i've added the JS

import * as mdc from "material-components-web";

function initSnackbars() {
  [].forEach.call(document.querySelectorAll('.mdc-snackbar'), bar => {
    snackbar.MDCSnackbar.attachTo(bar);
    const data = { timeout: 2750 };
    bar.show(data)
  });
}

export default initSnackbars;

The main problem seems to be the message attribute that has to be provided via data obj to snackbar.show(data).
Please, can you give me an example of how I can use mdc-snackbar with connect-flash.

[williamernest]

@aadtyaraj01 Can you give an example of the rendered html? At a glance, it looks like you're missing the message property on your data object. The docs indicate this is required.

[memestageceo]

@williamernest I cannot figure out how to get that message from express connect-flash to mdc snackbar. I want to use it like the alert in bootstrap to display small notifications like

• Image Uploaded
• Comment Added
• Signed in

[williamernest]

If you have to store the message in the html you can query the mdc-snackbar__text selector for it.

function initSnackbars() {
  [].forEach.call(document.querySelectorAll('.mdc-snackbar'), barEle => {
    var bar = new snackbar.MDCSnackbar(barEle);
    const data = { timeout: 2750, message: barEle.querySelector('.mdc-snackbar__text').innerText };
    bar.show(data);
  });
}

[memestageceo]

Thnx...worked like a charm! 😄

[williamernest]

Re-opening this issue so we can fix the underlying problem, even though the user has a workaround.

The MDCSnackbar requires developers to pass an object into the show method that contains a message parameter. This prevents the user from simply rendering the html with the message parameter already set and just showing the user what is already in the DOM. When the MDCSnackbar.show() method is called without an object, or with an object without a message property, it should show the snackbar to the user.