From ce86484c66974d9e8e80698b6a43a20f0b4c489c Mon Sep 17 00:00:00 2001
From: Michel Mendiola <suki@missallsunday.com>
Date: Sat, 15 Jun 2024 14:05:57 -0600
Subject: [PATCH] feat: update content mapper

Signed-off-by: Michel Mendiola <suki@missallsunday.com>
---
 Sources/Breeze/Breeze.php                     |  2 +-
 .../default/scripts/breezeComponents/tabs.js  | 55 -------------------
 src/components/Tabs.tsx                       | 16 +++---
 3 files changed, 9 insertions(+), 64 deletions(-)
 delete mode 100644 Themes/default/scripts/breezeComponents/tabs.js

diff --git a/Sources/Breeze/Breeze.php b/Sources/Breeze/Breeze.php
index e65bf787..94b29ed6 100644
--- a/Sources/Breeze/Breeze.php
+++ b/Sources/Breeze/Breeze.php
@@ -38,7 +38,7 @@ class Breeze
 	public const SUPPORT_URL = 'https://missallsunday.com';
 	public const REACT_DOM_VERSION = '18.2.0';
 	public const REACT_VERSION = '18.2.0';
-	public const REACT_HASH = '07ff47b4';
+	public const REACT_HASH = 'd37a3248';
 	public const ACTIONS = [
 		'breezeStatus',
 		'breezeComment',
diff --git a/Themes/default/scripts/breezeComponents/tabs.js b/Themes/default/scripts/breezeComponents/tabs.js
deleted file mode 100644
index 2ce276d4..00000000
--- a/Themes/default/scripts/breezeComponents/tabs.js
+++ /dev/null
@@ -1,55 +0,0 @@
-const tabs = {};
-const getCurrentActiveTab = () => {
-
-  let currentTab = null, key;
-
-  for (key in tabs) {
-    if (Object.prototype.hasOwnProperty.call(tabs, key)) {
-      if (tabs[key].active === true) {
-        currentTab = tabs[key];
-      }
-    }
-  }
-
-  return currentTab;
-};
-
-const tabChange = function (newTab) {
-
-  let currentActiveTab = getCurrentActiveTab();
-
-  currentActiveTab.active = false;
-  currentActiveTab.contentElement.classList.replace('show', 'hide');
-  currentActiveTab.tabElement.querySelectorAll(':scope a')[0].classList.remove('active');
-  newTab.tabElement.querySelectorAll(':scope a')[0].classList.add('active');
-
-  newTab.contentElement.classList.replace('hide', 'show');
-  newTab.active = true;
-};
-
-document.querySelectorAll('ul.breezeTabs li.subsections').forEach((element, i) => {
-  const elementName = element.getAttribute('id');
-  const contentElementId = element.querySelectorAll(':scope a')[0].getAttribute('href').replace('#', '');
-  const contentElement =  document.getElementById(contentElementId);
-
-
-  tabs[elementName] = {
-    href : element.querySelectorAll(':scope a')[0].getAttribute('href'),
-    name : element.getAttribute('id'),
-    active : (elementName === 'wall'),
-    tabElement: element,
-    contentElement: contentElement,
-  };
-
-  element.addEventListener('click', (event) => {
-
-    if (!tabs[elementName].active) {
-      tabChange(tabs[elementName]);
-    }
-
-    event.preventDefault();
-    return false;
-
-  });
-
-});
diff --git a/src/components/Tabs.tsx b/src/components/Tabs.tsx
index a0a00335..e0785af9 100644
--- a/src/components/Tabs.tsx
+++ b/src/components/Tabs.tsx
@@ -1,8 +1,8 @@
-import React, {Children, JSXElementConstructor, ReactNode, useCallback, useEffect, useState} from 'react';
+import React, { Children, JSXElementConstructor, ReactNode, useCallback, useEffect, useState } from 'react';
 
+import { getStatus, ServerGetStatusResponse } from '../api/StatusApi';
 import smfTextVars from '../DataSource/Txt';
-import {showInfo} from "../utils/tooltip";
-import {getStatus, ServerGetStatusResponse} from "../api/StatusApi";
+import { showInfo } from '../utils/tooltip';
 
 interface TabType {
   index: number;
@@ -47,15 +47,15 @@ function Tabs(props: { children: ReactNode; }): any {
     </li>
   ));
 
+  const mappedContent = tabs.map((tab: TabType) => (
+    <li key={tab.index} id={'#tab-' + tab.index} className={tab.active ? 'show' : 'hide'}>{tab.contentElement}</li>
+  ));
+
+
   const changeTab = useCallback((currentTab: TabType) => {
 
   }, []);
 
-  const mappedContent = Children.map(props.children, child =>
-    <li className="Row">
-    {child}
-    </li>,
-  );
 
   return <>