Language Toggle Feature Refactor Overview

Oct 18, 2024

Language Toggle Refactor Presentation Notes

Introduction

  • Speaker: Zach
  • Background: Self-taught web developer, working remotely for a Japanese software company in Japan.
  • Purpose: Refactoring code for a language toggle feature in a React Next.js TypeScript project.

Current Status of Language Toggle

  • The language toggle is functional, switching between Japanese and English across all pages.
  • Initial implementation was working, but issues were discovered later.

Issues Identified

  • State Management:
    • Issue with separate Japanese state for each page.
    • Need to lift the state up for global sharing across the site.
  • State Persistence:
    • Language state does not persist when navigating to a new page (defaulting back to Japanese).

Approach to Refactoring

  1. React Create Context:
    • Implementing React's Context API to manage language state globally.
  2. Local Storage:
    • State of the language will be stored in local storage to maintain persistence.
  3. Wrapping the App:
    • The entire app will be wrapped in a Language Provider to share context.
  4. Creating a Custom Hook:
    • Use useLanguageContext to access language state and toggle function in components.
  5. Code Cleanup:
    • Removing redundant isJapanese props and language toggle functions from individual components.

Steps Taken

  • Wrapped the app in the language provider in providers.tsx.
  • Implemented useEffect to handle local storage for language state.
  • Updated components to utilize the new context instead of props for language state.
  • Demonstrated the shift from multiple state variables to a single global state.

Challenges Faced

  • Encountered errors during implementation due to outdated code references.
  • Required careful tracking of components and where changes needed to be made.
  • Learning shortcuts like "Go to Definition" for finding component definitions quickly.

Next Steps

  • Fix minor errors and finalize the language toggle on remaining components (e.g., text boxes, benefits component).
  • Address lag issues when toggling languages (brief flash to default language).

Conclusion

  • Refactoring significantly improved the organization and maintainability of the code.
  • Encouragement for viewer engagement and open communication via Discord and Calendly.
  • Closing remark: "Let's go hard in the code!"