feat: interpolate anchor from i18n

LaxmanSharma1 · Jan 16, 2023 · 3f6a96f · 3f6a96f
1 parent f7f9e3d
commit 3f6a96f
Show file tree

Hide file tree

Showing 78 changed files with 153 additions and 105 deletions.
diff --git a/components/Chart/ChartHeader/index.tsx b/components/Chart/ChartHeader/index.tsx
@@ -1,5 +1,5 @@
 import { CountryAndStates } from "@lib/constants";
-import { useTranslation } from "next-i18next";
+import { useTranslation } from "@hooks/useTranslation";
 import { FunctionComponent, ReactNode } from "react";
 export interface ChartHeaderProps {
   className?: string;

diff --git a/components/Chart/Choropleth/index.tsx b/components/Chart/Choropleth/index.tsx
@@ -12,7 +12,7 @@ import StateMobile from "@lib/geojson/state_mobile.json";
 import { numFormat } from "@lib/helpers";
 import { BREAKPOINTS } from "@lib/constants";
 import { useWindowWidth } from "@hooks/useWindowWidth";
-import { useTranslation } from "next-i18next";
+import { useTranslation } from "@hooks/useTranslation";
 import { useZoom } from "@hooks/useZoom";
 import { ArrowPathIcon, MinusSmallIcon, PlusSmallIcon } from "@heroicons/react/24/outline";
 import type { ChoroplethColors } from "@lib/types";

diff --git a/components/Chart/Choropleth/scale.tsx b/components/Chart/Choropleth/scale.tsx
@@ -1,5 +1,5 @@
 import { FunctionComponent } from "react";
-import { useTranslation } from "next-i18next";
+import { useTranslation } from "@hooks/useTranslation";
 import { sequentialColorSchemes, colorSchemes } from "@nivo/colors";
 import type { ChoroplethColors } from "@lib/types";
 import { numFormat } from "@lib/helpers";

diff --git a/components/Chart/Jitterplot/overlay.tsx b/components/Chart/Jitterplot/overlay.tsx
@@ -1,5 +1,5 @@
 import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/24/outline";
-import { useTranslation } from "next-i18next";
+import { useTranslation } from "@hooks/useTranslation";
 import { FunctionComponent } from "react";
 
 interface JitterplotOverlayProps {

diff --git a/components/Chart/Table/index.tsx b/components/Chart/Table/index.tsx
@@ -7,6 +7,7 @@ import {
   Dispatch,
   SetStateAction,
   useCallback,
+  ReactNode,
 } from "react";
 import {
   ColumnDef,
@@ -26,7 +27,7 @@ import { ArrowUpIcon, ArrowDownIcon } from "@heroicons/react/20/solid";
 import { rankItem } from "@tanstack/match-sorter-utils";
 import { CountryAndStates } from "@lib/constants";
 import Image from "next/image";
-import { useTranslation } from "next-i18next";
+import { useTranslation } from "@hooks/useTranslation";
 import { default as debounce } from "lodash/debounce";
 import type { DebouncedFunc } from "lodash";
 
@@ -38,7 +39,7 @@ export interface TableConfigColumn {
 
 export interface TableConfig {
   id: string | undefined;
-  header?: string;
+  header?: ReactNode;
   accessorKey?: string;
   className?: string;
   /**
@@ -254,21 +255,19 @@ const Table: FunctionComponent<TableProps> = ({
                       const scale = cell.column.columnDef.scale ?? undefined;
 
                       const classNames = [
-                        ...(cell.row.original.state === "mys" ? ["bg-outline"] : []),
-                        ...(lastCellInGroup.id === cell.column.id
-                          ? ["text-sm border-r-black"]
-                          : []),
-                        ...(relative
-                          ? [relativeColor(value as number, inverse), "bg-opacity-20"]
-                          : []),
-                        ...(scale ? [scaleColor(value as number)] : []),
-                        ...(value === null ? ["bg-outlineHover"] : []),
+                        cell.row.original.state === "mys" && "bg-outline",
+                        lastCellInGroup.id === cell.column.id && "text-sm border-r-black",
+                        relative ? relativeColor(value as number, inverse) : "bg-opacity-20",
+                        scale && scaleColor(value as number),
+                        value === null && "bg-outlineHover",
                         index !== 0
                           ? cell.column.columnDef.className
                             ? cell.column.columnDef.className
                             : cellClass
                           : "",
-                      ].join(" ");
+                      ]
+                        .filter(Boolean)
+                        .join(" ");
 
                       return (
                         <td key={cell.id} className={classNames}>

diff --git a/components/Chart/Timeseries/index.tsx b/components/Chart/Timeseries/index.tsx
@@ -1,4 +1,11 @@
-import { FunctionComponent, ReactElement, useMemo, useCallback, ForwardedRef } from "react";
+import {
+  FunctionComponent,
+  ReactElement,
+  ReactNode,
+  useMemo,
+  useCallback,
+  ForwardedRef,
+} from "react";
 import Tooltip from "@components/Tooltip";
 import { default as ChartHeader, ChartHeaderProps } from "@components/Chart/ChartHeader";
 import {
@@ -17,6 +24,7 @@ import {
   ChartTypeRegistry,
   Filler,
   BarController,
+  ChartDataset,
 } from "chart.js";
 import { CrosshairPlugin } from "chartjs-plugin-crosshair";
 import AnnotationPlugin from "chartjs-plugin-annotation";
@@ -149,7 +157,7 @@ const Timeseries: FunctionComponent<TimeseriesProps> = ({
           intersect: false,
           callbacks: {
             label: function (item) {
-              return `${item.dataset.label}: ${
+              return `${item.dataset.label as string}: ${
                 item.parsed.y !== undefined || item.parsed.y !== null
                   ? display(item.parsed.y, "standard", 1)
                   : "-"
@@ -391,7 +399,7 @@ interface StatsProps {
 }
 
 type StatProps = {
-  title: string;
+  title: ReactNode;
   value: string;
   tooltip?: string;
 };

diff --git a/components/Chips/index.tsx b/components/Chips/index.tsx
@@ -1,7 +1,7 @@
 import Button from "@components/Button";
 import { OptionType } from "@components/types";
 import { XMarkIcon } from "@heroicons/react/24/outline";
-import { useTranslation } from "next-i18next";
+import { useTranslation } from "@hooks/useTranslation";
 import { FunctionComponent } from "react";
 
 interface ChipsProps {

diff --git a/components/CodeBlock/index.tsx b/components/CodeBlock/index.tsx
@@ -9,7 +9,7 @@ import python from "highlight.js/lib/languages/python";
 import "highlight.js/styles/shades-of-purple.css";
 import { OptionType } from "@components/types";
 import { copyClipboard } from "@lib/helpers";
-import { useTranslation } from "next-i18next";
+import { useTranslation } from "@hooks/useTranslation";
 import { track } from "@lib/mixpanel";
 
 interface CodeBlockProps {

diff --git a/components/Combobox/index.tsx b/components/Combobox/index.tsx
@@ -1,5 +1,5 @@
 import { Fragment, useState } from "react";
-import { useTranslation } from "next-i18next";
+import { useTranslation } from "@hooks/useTranslation";
 import { Combobox, Transition } from "@headlessui/react";
 
 import { OptionType } from "@components/types";

diff --git a/components/Dropdown/StateDropdown.tsx b/components/Dropdown/StateDropdown.tsx
@@ -1,7 +1,7 @@
 import { OptionType } from "@components/types";
 import { useWindowScroll } from "@hooks/useWindowWidth";
 import { statesOptions } from "@lib/options";
-import { useTranslation } from "next-i18next";
+import { useTranslation } from "@hooks/useTranslation";
 import { useRouter } from "next/router";
 import { FunctionComponent, useMemo } from "react";
 import { default as Dropdown } from ".";

diff --git a/components/Dropdown/index.tsx b/components/Dropdown/index.tsx
@@ -32,13 +32,13 @@ type ConditionalProps<L, V> =
       multiple?: false;
       selected?: any;
       title?: never;
-      placeholder?: string;
+      placeholder?: ReactNode;
       onChange: (selected: any) => void;
     };
 
 type DropdownProps<L, V> = CommonProps<L, V> & ConditionalProps<L, V> & LabelProps;
 
-const Dropdown = <L extends string | number | ReactElement = string, V = string>({
+const Dropdown = <L extends string | number | ReactElement | ReactElement[] = string, V = string>({
   className = "flex-col lg:flex-row ",
   disabled = false,
   multiple = false,

diff --git a/components/Error/index.tsx b/components/Error/index.tsx
@@ -1,7 +1,7 @@
 import Dropdown from "@components/Dropdown";
 import { GlobeAltIcon } from "@heroicons/react/24/outline";
 import "highlight.js/styles/shades-of-purple.css";
-import { useTranslation } from "next-i18next";
+import { useTranslation } from "@hooks/useTranslation";
 import { FunctionComponent } from "react";
 
 interface ErrorProps {

diff --git a/components/Layout/Footer.tsx b/components/Layout/Footer.tsx
@@ -1,6 +1,6 @@
 import Link from "next/link";
 import Image from "next/image";
-import { useTranslation } from "next-i18next";
+import { useTranslation } from "@hooks/useTranslation";
 
 import Container from "@components/Container";
 import At from "@components/At";

diff --git a/components/Layout/Header.tsx b/components/Layout/Header.tsx
@@ -1,7 +1,7 @@
 import Link from "next/link";
 import Image from "next/image";
 import { FunctionComponent, ReactElement, useState } from "react";
-import { useTranslation } from "next-i18next";
+import { useTranslation } from "@hooks/useTranslation";
 import {
   HomeIcon,
   Bars3BottomRightIcon,

diff --git a/components/Modal/StateModal.tsx b/components/Modal/StateModal.tsx
@@ -6,7 +6,7 @@ import { FunctionComponent, useEffect, useState } from "react";
 import Modal from ".";
 import { useRouter } from "next/router";
 import { useWindowScroll } from "@hooks/useWindowWidth";
-import { useTranslation } from "next-i18next";
+import { useTranslation } from "@hooks/useTranslation";
 
 interface StateModalProps {
   exclude?: string[];

diff --git a/components/Search/index.tsx b/components/Search/index.tsx
@@ -1,5 +1,5 @@
 import { MagnifyingGlassIcon as SearchIcon } from "@heroicons/react/24/solid";
-import { useTranslation } from "next-i18next";
+import { useTranslation } from "@hooks/useTranslation";
 import { FunctionComponent, useEffect, useRef } from "react";
 
 type SearchProps = {

diff --git a/components/Section/index.tsx b/components/Section/index.tsx
@@ -1,5 +1,5 @@
 import { toDate } from "@lib/helpers";
-import { useTranslation } from "next-i18next";
+import { useTranslation } from "@hooks/useTranslation";
 import { useRouter } from "next/router";
 import { FunctionComponent, ReactNode, forwardRef, LegacyRef, ForwardedRef, useMemo } from "react";
 import { DateTime } from "luxon";
@@ -35,7 +35,7 @@ const Section: FunctionComponent<SectionProps> = forwardRef(
       <section className={className} ref={ref}>
         <div className="pb-2 lg:pb-4">
           <div className="flex flex-col items-start gap-2 pb-4 lg:flex-row lg:items-center lg:justify-between">
-            {title && typeof title === "string" ? <h4>{title}</h4> : title}
+            <h4>{title}</h4>
             {date && date !== null && (
               <span className="text-right text-sm text-dim">
                 {t("common.data_of", { date: displayDate })}

diff --git a/components/Sidebar/index.tsx b/components/Sidebar/index.tsx
@@ -2,7 +2,7 @@ import { FunctionComponent, ReactNode, useState } from "react";
 import { Transition } from "@headlessui/react";
 import Button from "@components/Button";
 import { Bars3BottomLeftIcon, XMarkIcon } from "@heroicons/react/24/outline";
-import { useTranslation } from "next-i18next";
+import { useTranslation } from "@hooks/useTranslation";
 
 interface SidebarProps {
   children: ReactNode;

diff --git a/components/Tabs/index.tsx b/components/Tabs/index.tsx
@@ -1,7 +1,7 @@
 import { FunctionComponent, ReactElement, ReactNode, useMemo, useState } from "react";
 import { Tab } from "@headlessui/react";
 import { CountryAndStates } from "@lib/constants";
-import { useTranslation } from "next-i18next";
+import { useTranslation } from "@hooks/useTranslation";
 
 interface TabsProps {
   children: ReactNode;

diff --git a/components/types.ts b/components/types.ts
@@ -1,6 +1,6 @@
 import { ReactElement } from "react";
 
-export type OptionType<L = ReactElement | string, V = string> = {
+export type OptionType<L = ReactElement | ReactElement[] | string, V = string> = {
   label: L;
   value: V;
 };
diff --git a/dashboards/composite-indices/index.tsx b/dashboards/composite-indices/index.tsx
@@ -2,7 +2,7 @@ import { Container, Dropdown, Hero, Section } from "@components/index";
 import { FunctionComponent, useCallback, useEffect, useMemo } from "react";
 import dynamic from "next/dynamic";
 import { numFormat, toDate } from "@lib/helpers";
-import { useTranslation } from "next-i18next";
+import { useTranslation } from "@hooks/useTranslation";
 import { useSlice } from "@hooks/useSlice";
 import { useData } from "@hooks/useData";
 import type { OptionType } from "@components/types";

diff --git a/dashboards/consumer-prices/index.tsx b/dashboards/consumer-prices/index.tsx
@@ -2,7 +2,7 @@ import { Container, Dropdown, Hero, Section } from "@components/index";
 import { FunctionComponent, useCallback, useEffect } from "react";
 import dynamic from "next/dynamic";
 import { numFormat, toDate } from "@lib/helpers";
-import { useTranslation } from "next-i18next";
+import { useTranslation } from "@hooks/useTranslation";
 import { useSlice } from "@hooks/useSlice";
 import { useData } from "@hooks/useData";
 import type { OptionType } from "@components/types";

diff --git a/dashboards/consumer-prices/inflation-snapshot.tsx b/dashboards/consumer-prices/inflation-snapshot.tsx
@@ -8,7 +8,7 @@ import { useWatch } from "@hooks/useWatch";
 import { get } from "@lib/api";
 import { SHORT_LANG } from "@lib/constants";
 import type { ChartDataset } from "chart.js";
-import { useTranslation } from "next-i18next";
+import { useTranslation } from "@hooks/useTranslation";
 import dynamic from "next/dynamic";
 import { FunctionComponent, useCallback } from "react";
 

diff --git a/dashboards/consumer-prices/inflation-trends.tsx b/dashboards/consumer-prices/inflation-trends.tsx
@@ -11,7 +11,7 @@ import { SHORT_LANG } from "@lib/constants";
 import { numFormat } from "@lib/helpers";
 import type { ChartDataset, ChartTypeRegistry } from "chart.js";
 import groupBy from "lodash/groupBy";
-import { useTranslation } from "next-i18next";
+import { useTranslation } from "@hooks/useTranslation";
 import dynamic from "next/dynamic";
 import { FunctionComponent, useCallback } from "react";
 

diff --git a/dashboards/crime/index.tsx b/dashboards/crime/index.tsx
@@ -3,7 +3,7 @@ import Image from "next/image";
 import { FunctionComponent, useEffect } from "react";
 import dynamic from "next/dynamic";
 import { flip, numFormat, toDate } from "@lib/helpers";
-import { useTranslation } from "next-i18next";
+import { useTranslation } from "@hooks/useTranslation";
 import { useData } from "@hooks/useData";
 import { AKSARA_COLOR, CountryAndStates } from "@lib/constants";
 import { useRouter } from "next/router";

diff --git a/dashboards/currency-in-circulation/index.tsx b/dashboards/currency-in-circulation/index.tsx
@@ -2,7 +2,7 @@ import { Container, Dropdown, Hero, Section } from "@components/index";
 import { FunctionComponent, useCallback, useEffect } from "react";
 import dynamic from "next/dynamic";
 import { numFormat, smartNumFormat, toDate } from "@lib/helpers";
-import { useTranslation } from "next-i18next";
+import { useTranslation } from "@hooks/useTranslation";
 import { useSlice } from "@hooks/useSlice";
 import { useData } from "@hooks/useData";
 import type { OptionType } from "@components/types";

diff --git a/dashboards/daily-prices/index.tsx b/dashboards/daily-prices/index.tsx
@@ -2,7 +2,7 @@ import { Container, Hero, Section, StateDropdown } from "@components/index";
 import { FunctionComponent, useEffect } from "react";
 import dynamic from "next/dynamic";
 import { toDate } from "@lib/helpers";
-import { useTranslation } from "next-i18next";
+import { useTranslation } from "@hooks/useTranslation";
 import { useRouter } from "next/router";
 import { routes } from "@lib/routes";
 import { AKSARA_COLOR, CountryAndStates } from "@lib/constants";

diff --git a/dashboards/drug-addiction/index.tsx b/dashboards/drug-addiction/index.tsx
@@ -2,7 +2,7 @@ import { Container, Hero, Section, StateDropdown } from "@components/index";
 import { FunctionComponent, useEffect } from "react";
 import dynamic from "next/dynamic";
 import { toDate } from "@lib/helpers";
-import { useTranslation } from "next-i18next";
+import { useTranslation } from "@hooks/useTranslation";
 import { useRouter } from "next/router";
 import { routes } from "@lib/routes";
 import { AKSARA_COLOR, CountryAndStates } from "@lib/constants";

diff --git a/dashboards/exchange-rates/index.tsx b/dashboards/exchange-rates/index.tsx
@@ -1,7 +1,7 @@
 import { FunctionComponent, useCallback, useEffect } from "react";
 import dynamic from "next/dynamic";
 import { sortMulti, toDate } from "@lib/helpers";
-import { useTranslation } from "next-i18next";
+import { useTranslation } from "@hooks/useTranslation";
 import { useData } from "@hooks/useData";
 import { AKSARA_COLOR, SHORT_LANG } from "@lib/constants";
 import { default as Tabs, Panel } from "@components/Tabs";

diff --git a/dashboards/gdp/index.tsx b/dashboards/gdp/index.tsx
@@ -2,7 +2,7 @@ import { Container, Dropdown, Hero, Section } from "@components/index";
 import { FunctionComponent, useCallback, useEffect } from "react";
 import dynamic from "next/dynamic";
 import { numFormat, smartNumFormat, toDate } from "@lib/helpers";
-import { useTranslation } from "next-i18next";
+import { useTranslation } from "@hooks/useTranslation";
 import { useSlice } from "@hooks/useSlice";
 import { useData } from "@hooks/useData";
 import type { OptionType } from "@components/types";

diff --git a/dashboards/industrial-production/index.tsx b/dashboards/industrial-production/index.tsx
@@ -3,7 +3,7 @@ import Slider from "@components/Chart/Slider";
 import { FunctionComponent, useCallback, useEffect, useMemo } from "react";
 import dynamic from "next/dynamic";
 import { numFormat, toDate } from "@lib/helpers";
-import { useTranslation } from "next-i18next";
+import { useTranslation } from "@hooks/useTranslation";
 import { useSlice } from "@hooks/useSlice";
 import { useData } from "@hooks/useData";
 import type { OptionType } from "@components/types";

diff --git a/dashboards/interest-rates/index.tsx b/dashboards/interest-rates/index.tsx
@@ -2,7 +2,7 @@ import { Container, Dropdown, Hero, Section } from "@components/index";
 import { FunctionComponent, useCallback, useEffect } from "react";
 import dynamic from "next/dynamic";
 import { numFormat, toDate } from "@lib/helpers";
-import { useTranslation } from "next-i18next";
+import { useTranslation } from "@hooks/useTranslation";
 import { useSlice } from "@hooks/useSlice";
 import { useData } from "@hooks/useData";
 import type { OptionType } from "@components/types";

diff --git a/dashboards/international-reserves/index.tsx b/dashboards/international-reserves/index.tsx
@@ -2,7 +2,7 @@ import { Container, Dropdown, Hero, Section } from "@components/index";
 import { FunctionComponent, useCallback, useEffect } from "react";
 import dynamic from "next/dynamic";
 import { numFormat, toDate } from "@lib/helpers";
-import { useTranslation } from "next-i18next";
+import { useTranslation } from "@hooks/useTranslation";
 import { useSlice } from "@hooks/useSlice";
 import { useData } from "@hooks/useData";
 import type { OptionType } from "@components/types";

diff --git a/dashboards/kawasanku/index.tsx b/dashboards/kawasanku/index.tsx
@@ -5,7 +5,7 @@ import type { JitterData } from "@components/Chart/Jitterplot";
 import Container from "@components/Container";
 import Hero from "@components/Hero";
 import Section from "@components/Section";
-import { useTranslation } from "next-i18next";
+import { useTranslation } from "@hooks/useTranslation";
 import { FunctionComponent, useEffect, useMemo } from "react";
 import JitterplotOverlay from "@components/Chart/Jitterplot/overlay";
 import Dropdown from "@components/Dropdown";

diff --git a/dashboards/labour-market/index.tsx b/dashboards/labour-market/index.tsx
@@ -3,7 +3,7 @@ import Slider from "@components/Chart/Slider";
 import { FunctionComponent, useEffect } from "react";
 import dynamic from "next/dynamic";
 import { default as Image } from "next/image";
-import { useTranslation } from "next-i18next";
+import { useTranslation } from "@hooks/useTranslation";
 import { useData } from "@hooks/useData";
 import { useSlice } from "@hooks/useSlice";
 import { AKSARA_COLOR, CountryAndStates } from "@lib/constants";