useLocalization hook

package.json

@@ -8,7 +8,7 @@
         "url": "https://github.com/AndcultureCode/AndcultureCode.JavaScript.React/issues"
     },
     "dependencies": {
-        "andculturecode-javascript-core": "0.0.7",
+        "andculturecode-javascript-core": "0.1.0",
         "axios": "0.19.2",
         "immutable": "4.0.0-rc.12",
         "react": "16.13.1",
@@ -19,24 +19,28 @@
     "devDependencies": {
         "@testing-library/jest-dom": "5.5.0",
         "@testing-library/react": "10.0.4",
+        "@types/faker": "4.1.12",
         "@types/jest": "25.1.5",
         "@types/node": "13.11.0",
         "@types/react": "16.9.26",
         "@types/react-dom": "16.9.6",
         "@types/react-router-dom": "5.1.5",
         "@types/rosie": "0.0.37",
         "andculturecode-javascript-testing": "0.0.2",
+        "faker": "4.1.0",
+        "i18next": "19.4.5",
         "jest": "25.5.4",
         "jest-extended": "0.11.5",
         "jest-fetch-mock": "3.0.3",
         "prettier": "1.19.1",
+        "react-i18next": "11.6.0",
         "rimraf": "2.6.2",
         "rosie": "2.0.1",
         "ts-jest": "25.5.1",
         "tslint": "6.1.2",
         "tslint-config-prettier": "1.18.0",
-        "typedoc": "^0.17.6",
-        "typedoc-plugin-markdown": "^2.2.17",
+        "typedoc": "0.17.6",
+        "typedoc-plugin-markdown": "2.2.17",
         "typescript": "3.8.3"
     },
     "files": [
@@ -69,6 +73,7 @@
         "prepublishOnly": "npm run build",
         "test": "jest ./src",
         "watch": "npm run build -- --watch",
+        "watch:coverage": "jest ./src --coverage --watch",
         "watch:test": "jest ./src --watch"
     },
     "types": "dist/index",

src/hooks/use-localization.test.tsx

@@ -0,0 +1,80 @@
+import React, { useEffect } from "react";
+import "jest-extended";
+import faker from "faker";
+import {
+    BaseEnglishUnitedStates,
+    Culture,
+    LocalizationUtils,
+} from "andculturecode-javascript-core";
+import { useLocalization } from "./use-localization";
+import { render, wait, waitFor } from "@testing-library/react";
+import { initReactI18next } from "react-i18next";
+
+describe("useLocalization", () => {
+    test("when invalid key, returns key", async () => {
+        // Arrange
+        const expectedKey = faker.random.word();
+        const culture: Partial<Culture<any>> = { resources: {} };
+        const EnglishUnitedStates = LocalizationUtils.cultureFactory<any>(
+            BaseEnglishUnitedStates,
+            culture
+        );
+
+        const TestComponent = () => {
+            const { t } = useLocalization<any>();
+
+            return <p>{t(expectedKey)}</p>;
+        };
+
+        const TestApp = () => {
+            LocalizationUtils.initialize(initReactI18next, [
+                EnglishUnitedStates,
+            ]);
+
+            return <TestComponent />;
+        };
+
+        // Act
+        const { getByText } = render(<TestApp />);
+
+        // Assert
+        await waitFor(() => {
+            expect(getByText(expectedKey)).toBeInTheDocument();
+        });
+    });
+
+    test("when valid key, returns translation", async () => {
+        // Arrange
+        const key = "testkey";
+        const expectedValue = faker.random.words();
+        const culture: Partial<Culture<any>> = { resources: {} };
+        culture.resources[key] = expectedValue;
+
+        const EnglishUnitedStates = LocalizationUtils.cultureFactory<any>(
+            BaseEnglishUnitedStates,
+            culture
+        );
+
+        const TestComponent = () => {
+            const { t } = useLocalization<any>();
+
+            return <p>{t(key)}</p>;
+        };
+
+        const TestApp = () => {
+            LocalizationUtils.initialize(initReactI18next, [
+                EnglishUnitedStates,
+            ]);
+
+            return <TestComponent />;
+        };
+
+        // Act
+        const { getByText } = render(<TestApp />);
+
+        // Assert
+        await waitFor(() => {
+            expect(getByText(expectedValue)).toBeInTheDocument();
+        });
+    });
+});

src/hooks/use-localization.ts

@@ -0,0 +1,18 @@
+import { useCallback } from "react";
+import { useTranslation } from "react-i18next";
+
+/**
+ * Typed wrapper of i18n `useTranslation` hook
+ */
+const useLocalization = <TKeys>() => {
+    const { t } = useTranslation();
+
+    const translate = <K extends keyof TKeys>(key: K, options?: object) =>
+        t(key as string, options);
+
+    return {
+        t: useCallback(translate, [t]),
+    };
+};
+
+export { useLocalization };

src/index.ts

@@ -20,7 +20,16 @@ export {
 } from "./components/routing/nested-routes-by-property";
 export { Redirects, RedirectsProps } from "./components/routing/redirects";
 
-//#endregion Components
+// #endregion Components
+
+// -----------------------------------------------------------------------------------------
+// #region Hooks
+// -----------------------------------------------------------------------------------------
+
+export { useCancellablePromise } from "./hooks/use-cancellable-promise";
+export { useLocalization } from "./hooks/use-localization";
+
+// #endregion
 
 // -----------------------------------------------------------------------------------------
 // #region Interfaces
@@ -30,23 +39,23 @@ export { RedirectDefinition } from "./interfaces/redirect-definition";
 export { RouteDefinition } from "./interfaces/route-definition";
 export { RouteMap } from "./interfaces/route-map";
 
-//#endregion Interfaces
+// #endregion Interfaces
 
 // -----------------------------------------------------------------------------------------
 // #region Services
 // -----------------------------------------------------------------------------------------
 
 export { ServiceFactory } from "./services/service-factory";
 
-//#endregion Services
+// #endregion Services
 
 // -----------------------------------------------------------------------------------------
 // #region Utilities
 // -----------------------------------------------------------------------------------------
 
 export { RouteUtils } from "./utilities/route-utils";
 
-//#endregion Utilities
+// #endregion Utilities
 
 // -----------------------------------------------------------------------------------------
 // #region Vendor
@@ -56,26 +65,26 @@ export { RouteUtils } from "./utilities/route-utils";
 // specific component or function for their own implemention alongside our library.
 export {
     generatePath,
-    Prompt,
+    match,
+    matchPath,
     MemoryRouter,
+    Prompt,
     RedirectProps,
     Redirect,
     RouteChildrenProps,
     RouteComponentProps,
     RouteProps,
     Route,
     Router,
+    RouterChildContext,
     StaticRouter,
-    SwitchProps,
     Switch,
-    match,
-    matchPath,
-    withRouter,
-    RouterChildContext,
+    SwitchProps,
     useHistory,
     useLocation,
     useParams,
     useRouteMatch,
+    withRouter,
 } from "react-router-dom";
 
-//#endregion Vendor
+// #endregion Vendor