Refactor Functions in Settings.jsx for Better Code Organization

[sohammk08]

Issue Description

In the current codebase, the Settings.jsx file contains multiple functions related to user settings. To improve code organization and maintainability, we should consider refactoring this file by moving these functions into individual files within a "func" folder in the "components" directory. Each function should have its own dedicated file.

Proposed Changes

1. Create a new folder named "func" inside the "components" directory.
2. Within the "func" folder, create separate files for each of the functions currently present in the Settings.jsx file. Name these files according to the function's purpose (e.g., changeUsername.js, addAboutMe.js, addIgLink.js, deleteAccount.js).
3. Move the corresponding function code into each of these new files, ensuring that each file exports its respective function.
4. In the Settings.jsx file, replace the function code with imports from the new files, thus modularizing the code.
5. Update the import statements in Settings.jsx to reference the new files in the "func" folder.

Benefits

• Improved code organization: Breaking down the functions into individual files makes the codebase more organized and easier to navigate.
• Enhanced code maintainability: Individual function files make it simpler to locate and modify specific functionality.
• Better separation of concerns: Each function is isolated in its own file, following the principle of single responsibility.

Additional Information

This change will make the codebase cleaner and more maintainable. It aligns with best practices for organizing code in a modular and structured way.

Note: After completing this refactoring, the Settings.jsx file should include only the UI-related logic and JSX, while the actual functionality is organized into separate files within the "func" folder.

Reference File: Settings.jsx