Add InputMask component helper

package-lock.json

@@ -18,6 +18,7 @@
         "dayjs": "^1.11.3",
         "react": "^18.1.0",
         "react-dom": "^18.1.0",
+        "react-number-format": "^5.0.0-beta.4",
         "react-pdf": "^5.7.2",
         "react-router-dom": "^6.3.0",
         "react-scripts": "5.0.1",
@@ -12326,6 +12327,18 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-number-format": {
+      "version": "5.0.0-beta.4",
+      "resolved": "https://registry.npmjs.org/react-number-format/-/react-number-format-5.0.0-beta.4.tgz",
+      "integrity": "sha512-uqQ5RvtFB3LmrBZANlh4M46eCIMDVV2btExt7naSg6mC9xZavGgZL+VVgAcVc8YiH3fBQlrxNF1ec4PtOt6U1A==",
+      "dependencies": {
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "react": "^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^18.0.0",
+        "react-dom": "^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-pdf": {
       "version": "5.7.2",
       "resolved": "https://registry.npmjs.org/react-pdf/-/react-pdf-5.7.2.tgz",
@@ -23850,6 +23863,14 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "react-number-format": {
+      "version": "5.0.0-beta.4",
+      "resolved": "https://registry.npmjs.org/react-number-format/-/react-number-format-5.0.0-beta.4.tgz",
+      "integrity": "sha512-uqQ5RvtFB3LmrBZANlh4M46eCIMDVV2btExt7naSg6mC9xZavGgZL+VVgAcVc8YiH3fBQlrxNF1ec4PtOt6U1A==",
+      "requires": {
+        "prop-types": "^15.7.2"
+      }
+    },
     "react-pdf": {
       "version": "5.7.2",
       "resolved": "https://registry.npmjs.org/react-pdf/-/react-pdf-5.7.2.tgz",

package.json

@@ -13,6 +13,7 @@
     "dayjs": "^1.11.3",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-number-format": "^5.0.0-beta.4",
     "react-pdf": "^5.7.2",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",

src/components/InputMask/index.js

@@ -0,0 +1,30 @@
+import { forwardRef } from 'react';
+import { PatternFormat } from 'react-number-format';
+
+/**
+ * This component relies on the placeholder prop
+ * So make sure that you passed the placeholder on the parent component.
+ */
+const InputMask = forwardRef((props, ref) => {
+  const { onChange, placeholder, ...other } = props;
+
+  return (
+    <PatternFormat
+      {...other}
+      getInputRef={ref}
+      onValueChange={values => {
+        onChange({
+          target: {
+            name: props.name,
+            value: values.value,
+          },
+        });
+      }}
+      valueIsNumericString={placeholder.includes('#')}
+      format={placeholder}
+    />
+  );
+});
+
+export default InputMask;
+// TODO: Add PropTypes to the project

src/screens/Register/View.js

@@ -17,6 +17,7 @@ import dayjs from 'dayjs';
 
 import SnackbarIndicator from '../../components/SnackbarIndicator';
 import LoadingIndicator from '../../components/LoadingIndicator';
+import InputMask from '../../components/InputMask';
 
 import logoImage from '../../assets/if-salas-logo.svg';
 
@@ -71,6 +72,10 @@ function View({
               type="text"
               value={data.ra}
               onChange={onChangeInput}
+              placeholder="00#####"
+              InputProps={{
+                inputComponent: InputMask,
+              }}
             />
             <FormControl sx={{ textAlign: 'start' }} fullWidth>
               <InputLabel variant="standard" id="course">
@@ -112,7 +117,9 @@ function View({
                 onChange={onChangeInput}
               >
                 {createArrayFrom1ToN(8).map(i => (
-                  <MenuItem value={i}>{currentYear - i}</MenuItem>
+                  <MenuItem key={i - 1} value={i - 1}>
+                    {currentYear - (i - 1)}
+                  </MenuItem>
                 ))}
               </Select>
             </FormControl>
@@ -125,6 +132,10 @@ function View({
               type="phone"
               value={data.phone}
               onChange={onChangeInput}
+              placeholder="(##) #####-####"
+              InputProps={{
+                inputComponent: InputMask,
+              }}
             />
             <TextField
               id="email"