Update dayjs locale when changing app language

[medamineziraoui]

Overview of the feature request

Currently when changing the language from application, the locale is not updated. it will keep the default locale of days. that need to change.

Motivation for or Use Case

Locale dayjs need to be updated according to the use language selection.

Related issues or PR

https://github.com/jhipster/generator-jhipster/issues/12575

• [x] Checking this box is mandatory (this is just to show you read everything)

[medamineziraoui]

@FabienEssid and myself started looking on how to add the improvement.

• [x] Check that locale are imported properly.
• [x] Code to be used for changing dayjs locale dayjs.locale(LOCALE_VALUE)
• [x] Find the method called when the application language is changed.
• [x] Add the changements for React, Angular and VueJs
• [x] Test that everything is working

[atomfrede]

A confirm the issue for angular. ~It works for vue.~ I was wrong, it also doesn't work for vue.

I think for vue it can be added to translation.service.ts in refreshTranslation. Need to check for angular/react

It works for vue by extending translation.service.ts as follows:

import axios from 'axios';
import dayjs from 'dayjs';
import VueI18n from 'vue-i18n';
import { Store } from 'vuex';
import { BUILD_TIMESTAMP } from '@/constants';

export default class TranslationService {
  private store: Store<{}>;
  private i18n: VueI18n;

  constructor(store: Store<{}>, i18n: VueI18n) {
    this.store = store;
    this.i18n = i18n;
  }

  public refreshTranslation(newLanguage: string) {
    let currentLanguage = this.store.getters.currentLanguage;
    currentLanguage = newLanguage ? newLanguage : 'en';
    if (this.i18n && !this.i18n.messages[currentLanguage]) {
      this.i18n.setLocaleMessage(currentLanguage, {});
      dayjs.locale(currentLanguage);
      axios.get(`i18n/${currentLanguage}.json?buildTimestamp=${BUILD_TIMESTAMP}`).then(res => {
        if (res.data) {
          this.i18n.setLocaleMessage(currentLanguage, res.data);
          this.i18n.locale = currentLanguage;
          this.store.commit('currentLanguage', currentLanguage);
        }
      });
    } else if (this.i18n) {
      this.i18n.locale = currentLanguage;
      dayjs.locale(currentLanguage);
      this.store.commit('currentLanguage', currentLanguage);
    }
  }
}

@medamineziraoui Would you like to do a PR? If you need more help don't hesitate to reach out here.

[medamineziraoui]

Hello @atomfrede yes i would love to, this would be my first contribution if done successfully so definitely would not hesitate to ask if I need help.

[atomfrede]

@medamineziraoui Awesome! I think for angular you need to look here and for react it could be done in the locale reducer/store

[medamineziraoui]

@atomfrede Thank you

[FabienEssid]

@medamineziraoui is currently on holidays. We should work on this issue when he'll be back next week :slightly_smiling_face:

[medamineziraoui]

Hello im starting working on this issue today, i will keep you updated with my progress :slightly_smiling_face:

[medamineziraoui]

• [x] Vuejs: we tried the fixed offered by @atomfrede, we confirmed that it change update the dayjs with the current app locale.
• [x] React: I located this reducer that update locale in the hipster TranslatorContext

  
  export type LocaleState = Readonly<typeof initialState>;

export default (state: LocaleState = initialState, action): LocaleState => { switch (action.type) { case ACTION_TYPES.SET_LOCALE: { const currentLocale = action.locale; if (state.currentLocale !== currentLocale) { dayjs.locale(currentLocale); // <====== updated this dayjs locale before setting state in the TranslatorContext TranslatorContext.setLocale(currentLocale);

What do think about updating React this way to fixe the dayjs locale?
- [x] Angular: i tried starting the project but i got an error 
![image](https://user-images.githubusercontent.com/57661415/100020684-80b1eb00-2de0-11eb-8cfb-8c7a2fed44c9.png)
I will look it up tomorrow

[medamineziraoui]

• When we tried starting spring section of a generated jhipster project 3 weeks ago, we got this error On multiple machines. Today we tried starting again the same process ( ofc after pulling changes from jhipster main project , we got the changes ), and we still got the exactly the same error. Did you experience the same issue before ? We only could work with the generator when we changed

  <jhipster-dependencies.version>7.0.0-SNAPSHOT</jhipster-dependencies.version> 

  jhipster-dependencies.version to 0.1,0 This ofc broke multiple parts in the project but it was enough for us to test what we need for Vuejs and Reactjs.

[DanielFran]

@medamineziraoui You need to checkout jhipster-bom project and build it locally. There is no breaking change between released version 0.1.0 and current master (7.0.0-SNAPSHOT) of jhipster-bom project until now... But better to always compile it locally.

[medamineziraoui]

Thank you for your answer @DanielFran, are you talking about this repo ? https://github.com/jhipster/jhipster-bom Is there anything else I need to do ( any change in configuration for generated project ?)

[DanielFran]

Yes, it is this repo. No changes required on generator side... Please follow the instructions how to build jhipster-bom project in the readme.

[medamineziraoui]

Ok thank you, i will test this tomorrow :slightly_smiling_face:

[kaidohallik]

• Angular: i tried starting the project but i got an error

Try to delete node_modules folder and package-lock.json file and run npm install again, this can solve this error.

[medamineziraoui]

Thank you @kaidohallik i will try this later this day and i will keep you updated :slightly_smiling_face:

[medamineziraoui]

I tried both solution for jhipster-bom and node_modules and works fine ( needed to upgrade node version too for angular ), i got another issue when trying to link the generator-jhipster i will check it out and continue tomorrow

[medamineziraoui]

Never mind i upgraded the node and it works now

[DanielFran]

@medamineziraoui Do you still have issues with your setup?

[medamineziraoui]

Hello no i don't have setups issues thx to your advice guys so thank you, i wasn't able to work fixe the issue those pass days but i will this weekend.

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Our core developers tend to be more verbose on denying. If there is no negative comment, possibly this feature will be accepted. We are accepting PRs :smiley:. Comment or this will be closed in 7 days

[atomfrede]

Keep it open

[atomfrede]

@medamineziraoui Whats your status on this? If you like I can pick up where you left and finish it.

[medamineziraoui]

Hello @atomfrede sorry for being disconnected for this long :sweat_smile: , but if you let me I would like to continue work on this issue this weekend, i did test the fixes on monday and it s worked for

• Vue.js
• ReactJs
• angularJs

I will send a Fix this weekend.

[atomfrede]

Sure, go ahead, looking forward to the PR!

[medamineziraoui]

Thank you :smile:

[medamineziraoui]

Hello @atomfrede I added Pull Request , i tried to add test for react but couldn't make it work,

 it('should current locale state be coherent with dayjs locale', () => {
    const localeState = locale({ currentLocale: 'en' }, { type: ACTION_TYPES.SET_LOCALE, locale: 'es' });
    expect(dayjs.locale()).toEqual(localeState?.currentLocale);
  });

Maybe locale method is async This is the first time I try to write test with jest so could be if i did something wrong.

I ran test with vuejs but i got 2 failed tests, i don t believe they are related to my changes.

[medamineziraoui]

Thank you for letting me finish the PR, and i apologize for taking long to finish a simple fixe

[atomfrede]

No need to apologize! We are all doing this in our freetime. Thanks for contributing.