Added documentation to the profile screens

screens/profile/ChangeEmailScreen.js

@@ -24,6 +24,14 @@ import {
   toast500
 } from "../../constants/toasts"; 
 
+/**
+ * This component renders the screen where a user can change their email. To do this, the user has to re-authenicate due to it being a critical 
+ * feature. 
+ * 
+ * @param {*} props - used for redux and navigation. 
+ * 
+ * @returns the component. 
+ */
 const _ChangeEmailScreen = (props) => {
   const { userReducer, onEditEmail } = props;
   const [email, setEmail] = useState("");
@@ -32,7 +40,7 @@ const _ChangeEmailScreen = (props) => {
 
   const { user } = userReducer;
 
-  // for navigation to work on android
+  // To make the back-button on android behave correctly and not go to the VerifyPasswordScreen
   useEffect(() => {
     props.navigation.addListener('beforeRemove', (e) => {
       e.preventDefault();

screens/profile/ChangeNameScreen.js

@@ -21,6 +21,14 @@ import {
   toast500
 } from "../../constants/toasts"; 
 
+/**
+ * This component renders the screen where a user can change their name in the system. The name is simply for aesthetic reasons, and is not used for 
+ * anything other than being shown to the user. Can be used in future releases. 
+ * 
+ * @param {*} props - used for redux and navigation. 
+ * 
+ * @returns the component. 
+ */
 const _ChangeNameScreen = (props) => {
   const { userReducer, onEditName } = props;
 

screens/profile/ChangePasswordScreen.js

@@ -20,6 +20,14 @@ import {
   toast500
 } from "../../constants/toasts"; 
 
+/**
+ * This component renders the screen where a user can change their password. The user needs to re-authenticate to access this
+ * feature, due to it being critical. 
+ * 
+ * @param {*} navigation - extracted from props and used for navigation. 
+ *  
+ * @returns the component. 
+ */
 const ChangePasswordScreen = ({ navigation }) => {
   const [password, setPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");

screens/profile/DeleteAccountScreen.js

@@ -12,6 +12,14 @@ import {
   toast500
 } from "../../constants/toasts";
 
+/**
+ * This component renders the screen where the user can delete their account from the system. The user needs to re-authenticate
+ * to access this feature, due to it being critical. To delete their account, they have to confirm the decision.
+ * 
+ * @param {*} props - used for redux and navigation.
+ * 
+ * @returns the component. 
+ */
 const _DeleteAccountScreen = (props) => {
   const { signOutApp } = React.useContext(AuthContext);
 

screens/profile/ProfileScreen.js

@@ -7,6 +7,15 @@ import CustomTouchableOpacity from "../../components/CustomTouchableOpacity";
 import { AuthContext } from "../../constants/context";
 import { onUserSignOut } from "../../redux/actions/UserActions";
 
+/**
+ * This component renders the profile screen where the user can access all features regarding data in the system. Some features are
+ * restricted to role, and some featuers require re-authentication to get access. The user can also log out of the application through
+ * this screen. 
+ * 
+ * @param {*} props - used for redux and navigation. 
+ * 
+ * @returns the component. 
+ */
 const _ProfileScreen = (props) => {
   const { userReducer, onUserSignOut } = props;