Super Codas Tutorial Notes

Fixing Issues and Setting Up Environment

Navigation Issue to Category Page

• Problem: Sidebar not staying active when navigating to category page.
• Solution: Use useLocation from React to track URL changes and make sidebar active.
  • Import useLocation.
  • Add useEffect to trigger sidebar item activation on URL change.
  • Implemented in layout file.
  • Use dispatch to trigger changes in the reducer based on location.
  • Updated state to activate correct sidebar item.

Debugging and Validation

• Used Chrome developer tools (console) to verify paths and activation logic.
• Ensured that sidebar becomes active when switching between different sections (Add Category, Manage Category).

Additional Fixes and Enhancements

• Adjusted CSS in GlobalStyle.js for active sidebar elements in different themes (light, dark, blue, green, etc.).
  • Tweaked colors for active state to improve visibility and user experience.

Dynamic Form Issue

• Problem: Changing forms (e.g. from Add Category to Add Warehouse) was not displaying correct tabs/forms consistently.
• Solution: Refactored code to properly filter and set state for step items in dynamic forms.
  • Created helper functions to handle and fetch form types/items correctly.
  • Ensured consistent rendering by updating state management logic.

Environment Setup in Django

• Adopted environment variables to manage settings in Django project.
  • Installed python-dotenv to handle environment variables.
  • Updated settings to read from .env file (e.g., secret key, database configs).

Frontend Configuration

• Created .env file in React project for configuration such as API URLs.
  • Ensured variables start with REACT_APP_ prefix.
  • Consolidated API URLs in a config.js file.

Postman Configuration for API Testing

• Automated token handling in Postman for authenticated API requests.
  • Added scripts in Postman to capture and store tokens in global variables.
  • Configured Postman to automatically use the stored token for subsequent requests.

Final Checks

• Tested navigation, form rendering, and theme adjustments in the application.
• Verified seamless API interactions using Postman with automated token management.

Conclusion

• Achieved robust navigation and dynamic form handling in React application.
• Implemented structured and environment-based configuration management in both Django and React projects.
• Streamlined API testing workflow with Postman.

Please Like and Subscribe!

• Don’t forget to comment with questions or feedback.