Time format option

[MagsMagnoli]

Description:

A setting for 24 hour time format exists on the desktop but not the client apps.

1. Expose the option in the profile settings
2. Sync the setting between mobile and desktop apps

Environment Information:

• Rocket.Chat Server Version: 4.4
• Rocket.Chat App Version: 4.24.0.28002
• Device Name: Android
• OS Version: 12

Steps to reproduce:

1. Desktop app: Update time format in profile settings
2. Switch to mobile app, view that messages are still in 12 hour format
3. View that there is no option to switch time format in the app

Expected behavior:

Time is shown in 24 hour format

Actual behavior:

Time is shown in 12 hour format

Additional context:

Tried logging out then back in to the app and that didn't work

[try-catch-stack]

Hey @diegolmello I am implementing this feature and needed your suggestion on the usage of UserPreference endpoint or basically the function defined in rocketchat.js to get the preferences of user. I mean which is the best place to call this function to sync with the web and store Time format in the local state. In my current implementation , I used it in the RoomListView . What do you think?

[diegolmello]

@try-catch-stack You'll need to save the preference on our local db.

It's very similar to what we do for 'show_message_in_main_thread' and you should use it as example.

• You'll need to create a new column on that WatermelonDB table for 'clockMode' user preference.
• Update the column on login and dispatch to Redux on change

We have a couple of custom hooks on web that will help you:

• https://github.com/RocketChat/Rocket.Chat/blob/develop/client/hooks/useFormatTime.ts
• https://github.com/RocketChat/Rocket.Chat/blob/develop/client/hooks/useFormatDateAndTime.js
• https://github.com/RocketChat/Rocket.Chat/blob/develop/client/hooks/useFormatDate.js

On mobile repo, you can find settings on Redux and, after you add clockMode, you'll find it on login.user reducer.