[PATCH v2 0/2] Fix getFixedRandomColor() function

[PATCH v2 0/2] Fix getFixedRandomColor() function

[Muhammad Rizki]

This series contains:
- Fix getFixedRandomColor() to fix logic Tailwind class name selection.
- Add error message text to the recent message UI.

v2:
  - Add `.split(" ")` on return `getFixedRandomColor()`.
  - Add error message text to the recent message UI.

Please give it a test, thanks!

Muhammad Rizki (2):
  fix(page): fix getFixedRandomColor() function
  feat(page): add error message for recent messages

 index.html | 84 ++++++++++++++++++++++++++++++++++--------------------
 1 file changed, 53 insertions(+), 31 deletions(-)


base-commit: e4dc93f72a2bb7537a0e67748f3b406c798960a6
--
Muhammad Rizki

[PATCH v2 1/2] fix(page): fix getFixedRandomColor() function

[Muhammad Rizki]

The previous code for `getFixedRandomColor()`, where Tailwind
dynamically creates class names, does not work properly. This is because
Tailwind does not support dynamic class names such as string
concatenation or conditional class names like `text-${color}-${level}`.
Tailwind uses regular expressions to search for complete class names.
Reference: https://tailwindcss.com/docs/content-configuration#dynamic-class-names

Fixes: e21879bf509a ("feat(page): implement chat bubble message rendering")
Signed-off-by: Muhammad Rizki <kiizuha@gnuweeb.org>
---
 index.html | 32 +++++++++++++++++++++-----------
 1 file changed, 21 insertions(+), 11 deletions(-)

diff --git a/index.html b/index.html
index 64e5884..81162db 100644
--- a/index.html
+++ b/index.html
@@ -394,17 +394,27 @@
       }
 
       function getFixedRandomColor(name) {
-        const colors = [
-          "red", "yellow", "blue", "sky", "purple", "orange",
-          "amber", "lime", "green", "emerald", "teal", "cyan",
-          "indigo", "violet", "fuchsia", "pink", "rose"
-        ];
-
-        const c = colors[hashCode(name) % colors.length];
-        return [
-          "text-" + c + "-400",
-          "border-" + c + "-400",
-        ];
+        const colorData = {
+          red: "text-red-400 border-red-400",
+          yellow: "text-yellow-400 border-yellow-400",
+          blue: "text-blue-400 border-blue-400",
+          sky: "text-sky-400 border-sky-400",
+          purple: "text-purple-400 border-purple-400",
+          orange: "text-orange-400 border-orange-400",
+          amber: "text-amber-400 border-amber-400",
+          lime: "text-lime-400 border-lime-400",
+          green: "text-green-400 border-green-400",
+          emerald: "text-emerald-400 border-emerald-400",
+          teal: "text-teal-400 border-teal-400",
+          cyan: "text-cyan-400 border-cyan-400",
+          indigo: "text-indigo-400 border-indigo-400",
+          violet: "text-violet-400 border-violet-400",
+          fuchsia: "text-fuchsia-400 border-fuchsia-400",
+          pink: "text-pink-400 border-pink-400",
+          rose: "text-rose-400 border-rose-400",
+        };
+        const colorNames = Object.keys(colorData);
+        return colorData[colorNames[hashCode(name) % colorNames.length]].split(" ");
       }
 
       function cleanMessageText(text) {
-- 
Muhammad Rizki

[PATCH v2 2/2] feat(page): add error message for recent messages

[Muhammad Rizki]

Show error message to the recent messages UI when API connection is
failure.

Signed-off-by: Muhammad Rizki <kiizuha@gnuweeb.org>
---
 index.html | 52 ++++++++++++++++++++++++++++++++--------------------
 1 file changed, 32 insertions(+), 20 deletions(-)

diff --git a/index.html b/index.html
index 81162db..5c6eef3 100644
--- a/index.html
+++ b/index.html
@@ -361,27 +361,31 @@
       }
 
       async function getRecentMessages() {
-        const response = await fetch(API_URL + "/zxc.php?action=get_messages&chat_id=-1001483770714&limit=50");
-        const { data } = (await response.json()).result;
-
-        const transformedData = data.map(item => {
-          return {
-            user_id: item[0],
-            username: item[1],
-            first_name: item[2],
-            last_name: item[3],
-            user_photo: item[4],
-            message_id: item[5],
-            reply_to_message_id: item[6],
-            message_type: item[7],
-            text: item[8],
-            text_entities: item[9] ? JSON.parse(item[9]) : null,
-            file: item[10],
-            date: item[11]
-          };
-        });
+        try {
+          const response = await fetch(API_URL + "/zxc.php?action=get_messages&chat_id=-1001483770714&limit=50");
+          const { data } = (await response.json()).result;
+
+          const transformedData = data.map(item => {
+            return {
+              user_id: item[0],
+              username: item[1],
+              first_name: item[2],
+              last_name: item[3],
+              user_photo: item[4],
+              message_id: item[5],
+              reply_to_message_id: item[6],
+              message_type: item[7],
+              text: item[8],
+              text_entities: item[9] ? JSON.parse(item[9]) : null,
+              file: item[10],
+              date: item[11]
+            };
+          });
 
-        return transformedData.reverse();
+          return transformedData.reverse();
+        } catch {
+          return [];
+        }
       }
 
       function hashCode(name) {
@@ -434,6 +438,14 @@
         const messageData = await getRecentMessages();
         const recentMessages = document.getElementById("recent-messages");
 
+        if (messageData.length === 0) {
+          const connectionErrEl = document.createElement("div");
+          connectionErrEl.classList.add("text-red-500", "italic", "text-center", "p-3");
+          connectionErrEl.innerText = "Cannot Connect to the API.\nAPI Connection failure.";
+          recentMessages.appendChild(connectionErrEl);
+          return;
+        }
+
         messageData.forEach(message => {
           const getColor = m => getFixedRandomColor(`${m.first_name}`);
 
-- 
Muhammad Rizki

Re: [PATCH v2 0/2] Fix getFixedRandomColor() function

[Ammar Faizi]

On Wed, 27 Sep 2023 20:09:32 +0700, Muhammad Rizki wrote:
> This series contains:
> - Fix getFixedRandomColor() to fix logic Tailwind class name selection.
> - Add error message text to the recent message UI.
> 
> v2:
>   - Add `.split(" ")` on return `getFixedRandomColor()`.
>   - Add error message text to the recent message UI.
> 
> [...]

Applied, thanks!

[1/2] fix(page): fix getFixedRandomColor() function
      commit: 6dc2b22b34f7724d81041203d24b24f18b5258ea
[2/2] feat(page): add error message for recent messages
      commit: 49d472f817b656aaa929175fc9ed26d164b7c410

Best regards,
-- 
Ammar Faizi

Re: [PATCH v2 0/2] Fix getFixedRandomColor() function

[Muhammad Rizki]

On 27/09/2023 20.14, Ammar Faizi wrote:
> On Wed, 27 Sep 2023 20:09:32 +0700, Muhammad Rizki wrote:
>> This series contains:
>> - Fix getFixedRandomColor() to fix logic Tailwind class name selection.
>> - Add error message text to the recent message UI.
>>
>> v2:
>>    - Add `.split(" ")` on return `getFixedRandomColor()`.
>>    - Add error message text to the recent message UI.
>>
>> [...]
> 
> Applied, thanks!
> 
> [1/2] fix(page): fix getFixedRandomColor() function
>        commit: 6dc2b22b34f7724d81041203d24b24f18b5258ea
> [2/2] feat(page): add error message for recent messages
>        commit: 49d472f817b656aaa929175fc9ed26d164b7c410
> 
> Best regards,

Can you push it to GitHub so I can pull them? thanks!

Re: [PATCH v2 0/2] Fix getFixedRandomColor() function

[Ammar Faizi]

On 9/27/23 9:54 PM, Muhammad Rizki wrote:
> Can you push it to GitHub so I can pull them? thanks!

I did.

-- 
Ammar Faizi

Re: [PATCH v2 0/2] Fix getFixedRandomColor() function

[Muhammad Rizki]

On 27/09/2023 21.54, Ammar Faizi wrote:
> On 9/27/23 9:54 PM, Muhammad Rizki wrote:
>> Can you push it to GitHub so I can pull them? thanks!
> 
> I did.
> 

Oh, I didn't focus on index.html update date, thanks!