log once

Author: s77rt

src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/components/VictoryChartCartesian.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import {CartesianChart} from 'victory-native';
-import {CHART_TYPE} from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/constants';
 import {useVictoryChartContext} from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/context/VictoryChartContext';
 import {VictoryChartRenderArgsProvider} from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/context/VictoryChartRenderArgsContext';
 import getYKey from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/utils/getYKey';
@@ -15,11 +14,7 @@ import VictoryChartSeries from './VictoryChartSeries';
  * Labels and legend overlays are handled internally via `renderOutside`.
  */
 function VictoryChartCartesian() {
-    const {data, xKey, yKeys, xAxis, yAxis, tnode, labelItems, legendItems, type} = useVictoryChartContext();
-
-    if (type !== CHART_TYPE.CARTESIAN) {
-        return null;
-    }
+    const {data, xKey, yKeys, xAxis, yAxis, tnode, labelItems, legendItems} = useVictoryChartContext();
 
     return (
         <CartesianChart

src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/components/VictoryChartContent.tsx

@@ -1,12 +1,20 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 import {CHART_TYPE} from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/constants';
 import {useVictoryChartContext} from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/context/VictoryChartContext';
+import Log from '@libs/Log';
 import VictoryChartCartesian from './VictoryChartCartesian';
 import VictoryChartPolar from './VictoryChartPolar';
 
 function VictoryChartContent() {
     const {type} = useVictoryChartContext();
 
+    useEffect(() => {
+        if (type) {
+            return;
+        }
+        Log.warn('Trying to render an invalid chart (empty or mixed chart types).');
+    }, [type]);
+
     switch (type) {
         case CHART_TYPE.CARTESIAN:
             return <VictoryChartCartesian />;

src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/components/VictoryChartPolar.tsx

@@ -1,19 +1,13 @@
-import {CHART_TYPE} from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/constants';
-import {useVictoryChartContext} from '@components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/context/VictoryChartContext';
+import {useEffect} from 'react';
 import Log from '@libs/Log';
 
 /**
  * Renders the PolarChart with data drawn from context.
  */
 function VictoryChartPolar() {
-    const {type} = useVictoryChartContext();
-
-    if (type !== CHART_TYPE.POLAR) {
-        return null;
-    }
+    useEffect(() => Log.warn('Trying to render unsupported polar charts'), []);
 
     // Support for polar chars will be added in a follow up https://github.com/Expensify/App/issues/90546
-    Log.warn('Trying to render unsupported polar charts');
     return null;
 }
 

src/components/HTMLEngineProvider/HTMLRenderers/VictoryChartRenderer/components/VictoryChartSeries.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 import type {TNode} from 'react-native-render-html';
 import Log from '@libs/Log';
 import VictoryChartBar from './VictoryChartBar';
@@ -19,10 +19,18 @@ const SERIES_RENDERERS: Partial<Record<string, SeriesComponent>> = {
 
 function VictoryChartSeries({tnode}: VictoryChartSeriesProps) {
     const SeriesRenderer = SERIES_RENDERERS[tnode.tagName ?? ''];
-    if (!SeriesRenderer) {
+
+    useEffect(() => {
+        if (SeriesRenderer) {
+            return;
+        }
         Log.warn('Trying to render an unsupported series chart', {tagName: tnode.tagName});
+    }, [SeriesRenderer, tnode.tagName]);
+
+    if (!SeriesRenderer) {
         return null;
     }
+
     return <SeriesRenderer tnode={tnode} />;
 }