0
\$\begingroup\$

I'm learning react-typescript programming.
Developed a sample application, which supports in multi language.

github Souce: https://github.com/phanivaranasi/sownikbackend.git
Review the code and share suggestions, best approaches. I have gone through various blogs, tried my best for developing language context. Below is my work

  • Created react application by typescript template
    npx create-react-app --template typescript
  • Implemented react-redux store for login & change language
    react-redux redux
  • Login & change store are working properly
    login component
  • Implemented language context
    (I'm looking for efficient code by leveraging Typescript - as context is getting called multiple times console logs are available)

--English enter image description here

--Hindi enter image description here

Working Model

import React, { useReducer } from "react";
import { ILanguageModel, ILanguageProps } from "../model";
import { LangActionType, LangEnumShortName, } from "../state/action-types";
import reducer, { initialState } from '../state/reducer/lang.reducer';
import en from '../locales/en.json';
import hi from '../locales/hi.json';


interface ContextProps {
    state: ILanguageModel,
    dispatch: {
        setLanguage: (lang: ILanguageModel) => void;
        translate: (key: string) => string;
    }
}

export const LanguageContext = React.createContext({} as ContextProps);

const LanguageProvider: React.FC<ILanguageProps> = ({ children }) => {

    const [state, dispatch] = useReducer(reducer, initialState);


    const setLanguage = (lang: ILanguageModel) => {
        console.log('set lanauge', lang);
        dispatch({
            type: LangActionType.CHANGELANG,
            payload: lang
        });
    }
    const translate = (key: string): string => {
        console.log('translate key', key, ">", state);
        let _langData: { [key: string]: string } = {};
        switch (state.LangShortName) {
            case LangEnumShortName.EN:
                _langData = en
                break;
            case LangEnumShortName.HI:
                _langData = hi;
                break;

        }
        console.log("_langate", _langData);
        return _langData[key];
    }

    return (
        <LanguageContext.Provider value={{ state, dispatch: { setLanguage, translate } }}>
            {children}
        </LanguageContext.Provider>
    )
}

export default LanguageProvider;
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { BrowserRouter as Router } from 'react-router-dom'
import reportWebVitals from './reportWebVitals';
import './index.css';
import App from './App';
import { Store } from './state';
import LanguageProvider from './context/lang.context';



ReactDOM.render(
  <React.StrictMode>
    <Provider store={Store}>
      <LanguageProvider>
        <Router>
          <App />
        </Router>
      </LanguageProvider>
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

\$\endgroup\$
1
  • \$\begingroup\$ It would benefit reviewers to have a bit more information about the code in the description. From the help center page How to ask: "You will get more insightful reviews if you not only provide your code, but also give an explanation of what it does. The more detail, the better." \$\endgroup\$ Sep 1 '21 at 15:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.