✨ Inject language and helpers in useCrystallize

Author: Plopix

README.md

@@ -24,7 +24,7 @@ It provides a `CrystallizeProvider` on which you can get:
 import { CrystallizeProvider } from '@crystallize/reactjs-hooks';
 ReactDOM.render(
     <React.StrictMode>
-        <CrystallizeProvider tenantIdentifier="furniture">
+        <CrystallizeProvider language="en" tenantIdentifier="furniture">
             <App />
         </CrystallizeProvider>
     </React.StrictMode>,

package.json

@@ -32,5 +32,5 @@
     },
     "license": "MIT",
     "name": "@crystallize/reactjs-hooks",
-    "version": "0.2.1"
+    "version": "0.3.0"
 }

src/core/MainProvider/MainProvider.tsx

@@ -10,27 +10,44 @@ import { FunctionComponent } from 'react';
 import {
     ClientConfiguration,
     createClient,
-    ClientInterface
+    ClientInterface,
+    createNavigationByFoldersFetcher,
+    createNavigationByTopicsFetcher
 } from '@crystallize/js-api-client';
+import type { TreeFetcher } from '@crystallize/js-api-client';
 
 const StateContext = React.createContext<State | undefined>(undefined);
 const DispatchContext = React.createContext<Dispatch | undefined>(undefined);
 
-const initialState = (configuration: ClientConfiguration): State => {
+const initialState = (
+    configuration: ClientConfiguration,
+    language: string
+): State => {
     return {
         loading: false,
+        language: language,
         configuration: configuration
     };
 };
 
 const CrystallizeProvider: FunctionComponent<{
+    language: string;
     tenantIdentifier: string;
     accessTokenId?: string;
     accessTokenSecret?: string;
-}> = ({ tenantIdentifier, accessTokenId, accessTokenSecret, children }) => {
+}> = ({
+    tenantIdentifier,
+    accessTokenId,
+    accessTokenSecret,
+    language,
+    children
+}) => {
     const [state, dispatch] = React.useReducer(
         Reducer,
-        initialState({ tenantIdentifier, accessTokenId, accessTokenSecret })
+        initialState(
+            { tenantIdentifier, accessTokenId, accessTokenSecret },
+            language
+        )
     );
     return (
         <StateContext.Provider value={state}>
@@ -61,17 +78,61 @@ function useCrystallizeDispatch() {
     return context;
 }
 
+export type LanguageAwareTreeFetcher = (
+    path: string,
+    depth: number,
+    extraQuery?: any,
+    perLevel?: (currentLevel: number) => any
+) => Promise<any>;
+
 function useCrystallize(): {
+    helpers: {
+        createNavigationByFoldersFetcher: LanguageAwareTreeFetcher;
+        createNavigationByTopicsFetcher: LanguageAwareTreeFetcher;
+    };
     apiClient: ClientInterface;
     state: State;
     dispatch: Actions;
 } {
     const actions = mapToReducerActions(useCrystallizeDispatch());
     const state = useCrystallizeState();
+
+    const apiClient = createClient({
+        tenantIdentifier: state.configuration.tenantIdentifier
+    });
+
+    const helpers = {
+        createNavigationByFoldersFetcher: (
+            path: string,
+            depth: number = 1,
+            extraQuery?: any,
+            perLevel?: (currentLevel: number) => any
+        ) =>
+            createNavigationByFoldersFetcher(apiClient)(
+                path,
+                state.language,
+                depth,
+                extraQuery,
+                perLevel
+            ),
+        createNavigationByTopicsFetcher: (
+            path: string,
+            depth: number = 1,
+            extraQuery?: any,
+            perLevel?: (currentLevel: number) => any
+        ) =>
+            createNavigationByFoldersFetcher(apiClient)(
+                path,
+                state.language,
+                depth,
+                extraQuery,
+                perLevel
+            )
+    };
+
     return {
-        apiClient: createClient({
-            tenantIdentifier: state.configuration.tenantIdentifier
-        }),
+        helpers,
+        apiClient,
         state,
         dispatch: actions
     };

src/core/MainProvider/Reducer.ts

@@ -2,18 +2,21 @@ import { ClientConfiguration } from '@crystallize/js-api-client';
 
 type Action =
     | { type: 'LOADING'; state: boolean }
-    | { type: 'UPDATE_CONFIGURATION'; configuration: ClientConfiguration };
+    | { type: 'UPDATE_CONFIGURATION'; configuration: ClientConfiguration }
+    | { type: 'CHANGE_LANGUAGE'; language: string };
 
 export type Actions = {
     loading: (state: boolean) => void;
     updateConfiguration: (configuration: ClientConfiguration) => void;
+    changeLanguage: (language: string) => void;
 };
 
 export type Dispatch = (action: Action) => void;
 
 export type State = {
     configuration: ClientConfiguration;
     loading: boolean;
+    language: string;
 };
 
 export function Reducer(state: State, action: Action) {
@@ -24,6 +27,12 @@ export function Reducer(state: State, action: Action) {
                 loading: action.state
             };
         }
+        case 'CHANGE_LANGUAGE': {
+            return {
+                ...state,
+                language: action.language
+            };
+        }
         case 'UPDATE_CONFIGURATION': {
             return {
                 ...state,
@@ -39,6 +48,8 @@ export function Reducer(state: State, action: Action) {
 export function mapToReducerActions(dispatch: Dispatch): Actions {
     return {
         loading: (state: boolean) => dispatch({ type: 'LOADING', state }),
+        changeLanguage: (language: string) =>
+            dispatch({ type: 'CHANGE_LANGUAGE', language }),
         updateConfiguration: (configuration: ClientConfiguration) =>
             dispatch({ type: 'UPDATE_CONFIGURATION', configuration })
     };