#Is using your helpers in Components or controller bad practices?

1 messages · Page 1 of 1 (latest)

elder crane
#

I have a helper that formats dates, and I saw that you can use a helper in code if you formate the exports properly. So I was just wondering is that bad practices, and is there something better?


export function format_date([date, format]) {

        if(date == undefined || date.length == 0){
        return ""
      }

      let d =   new Date(date);
      let output_format = {};
      if(format.y == 1){
        output_format.year = "numeric";
      }
      if(format.m == 1){
        output_format.month = "2-digit";
      }
      if(format.d == 1){
        output_format.day = "numeric";
      }
      if(format.h == 1){
        output_format.hour = "numeric";
      }
      if(format.h12 == 1){
        output_format.hour12 = true;
      }

      return d.toLocaleDateString('en-us', output_format);
     

}

export default helper(format_date);```
humble ridge
#

Depending on your ember-source version, you can just use plain functions as helpers. I.e. you would not need the helper wrapper anymore.

elder crane
#

So in my case I want the helper to work as a function I can import in the component or as a helper on screen..

#

I did achieve that with the file above but I'm using ember-source 6.6

willow beacon
#

You no longer need the helper() utility

#

Js functions can be used in templates and vice-a-versa

elder crane
willow beacon
#

What is

  • your ember-source version?
  • the whole helper file
  • your usage of the helper (gjs? What's the import)

Tyty

elder crane
#

"ember-source": "~6.6.0",

# 

export function format_date([date, format]) {

        if(date == undefined || date.length == 0){
        return ""
      }

      let d =   new Date(date);
      let output_format = {};
      if(format.y == 1){
        output_format.year = "numeric";
      }
      if(format.m == 1){
        output_format.month = "2-digit";
      }
      if(format.d == 1){
        output_format.day = "numeric";
      }
      if(format.h == 1){
        output_format.hour = "numeric";
      }
      if(format.h12 == 1){
        output_format.hour12 = true;
      }

      return d.toLocaleDateString('en-us', output_format);
     

}

export default helper(format_date);```
#

In my hbs file@value={{format-date this.model.dob (hash y=1 m=1 d=1)}}

#

Same thing used in my component ```import Component from '@glimmer/component';
import { format_date } from 'daacs-frontend/helpers/format-date';

export default class TablePaginationComponent extends Component {

print_value(thedate){
let date = new Date( thedate).toString();
return_string = format_date([date, "" ]);

return return_string

}

}```

#

So the point of my server is to format dates... and it works right now how i have it setup... but your saying that I could remove the helper function and it would still work as a helper

willow beacon
#

ah, so.... do this:

# 
// no array:
export function format_date(date, format) {
  // ...
}
// no default export

// ---------------------------

// .... in component
 print_value(thedate){
  let date = new Date( thedate).toString();
  return_string = format_date(date, ""); // no array
 
  return return_string
}
elder crane
#

I found the example in stackover flow some where

#

it was from here

willow beacon
#

What issue are you running in to?

Also, i think that SO post is too old for what we're doing

elder crane
willow beacon
#

ahh ok

#

yea, import { helper } was needed pre 4.5

elder crane
#

Oh you know what the problem was you said I don't need the helper() for it to work on the frontend

#

So if I'm doing something like

#

{{format-date this.date }}

#

that doesn't work without the helper class. Sorry I wrote that when I just woke up LOL but it's not really a problem

#

so i dont want you to do research into it becausei it's really breaking anything

#

but I am asking a milion questions because I'm doing a redesign and like last time this is my time to learn and make sure I am doing things properly

#

but .. this redesign has help me reinforce how to build better frontend apps. I definitely got sloppy at the end of my last project .

willow beacon
#

no worries! here to help

stoic copper
#

You can have a specific directory for all the utility functions