refactor: Pass createdWith to VisualizeLink

...in order so we don't have to use i18n provider when making a screenshot.
visualize-admin · Dec 4, 2024 · af03396 · af03396
1 parent 59e2be3
commit af03396
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/app/components/chart-footnotes.tsx b/app/components/chart-footnotes.tsx
@@ -107,7 +107,9 @@ export const ChartFootnotes = ({
           ) : null}
         </div>
       ))}
-      {showVisualizeLink ? <VisualizeLink /> : null}
+      {showVisualizeLink ? (
+        <VisualizeLink createdWith={t({ id: "metadata.link.created.with" })} />
+      ) : null}
     </Box>
   );
 };
@@ -281,11 +283,12 @@ const ChartFootnotesComboLineSingle = ({
   ) : null;
 };
 
-export const VisualizeLink = () => {
+export const VisualizeLink = ({ createdWith }: { createdWith: ReactNode }) => {
   const locale = useLocale();
+
   return (
     <Typography variant="caption" color="grey.600">
-      <Trans id="metadata.link.created.with">Created with</Trans>
+      {createdWith}
       <Link
         href={`https://visualize.admin.ch/${locale}/`}
         target="_blank"

diff --git a/app/components/chart-published.tsx b/app/components/chart-published.tsx
@@ -27,8 +27,8 @@ import { DashboardInteractiveFilters } from "@/components/dashboard-interactive-
 import Flex from "@/components/flex";
 import { HintBlue, HintRed, HintYellow } from "@/components/hint";
 import {
-  MetadataPanelStoreContext,
   createMetadataPanelStore,
+  MetadataPanelStoreContext,
 } from "@/components/metadata-panel-store";
 import {
   ChartConfig,
@@ -155,7 +155,11 @@ export const ChartPublished = ({
                 chartConfigs={state.chartConfigs}
                 renderChart={renderChart}
               />
-              {state.chartConfigs.length !== 1 && <VisualizeLink />}
+              {state.chartConfigs.length !== 1 && (
+                <VisualizeLink
+                  createdWith={t({ id: "metadata.link.created.with" })}
+                />
+              )}
             </Box>
           ) : (
             <>