Fixed inbox controller not working and rehashed to paginated list

client/src/controllers/FormControllers/SendMailController.js

@@ -5,9 +5,11 @@ import { useNavigate } from 'react-router-dom';
 import { Form } from 'controllers/FormControllers';
 import { composeMailFields } from 'services/fields';
 import { mailSchema } from 'services/schemas';
+import { postMail } from 'services/mailServices';
 
-export default function SendMailController({ sendMail }) {
+export default function SendMailController() {
     const navigate = useNavigate();
+
     useEffect(() => {
         if (!Cookies.get('token')) {
             navigate('/users/login', {
@@ -20,6 +22,11 @@ export default function SendMailController({ sendMail }) {
         }
     }, []);
 
+    const sendMail = async (fields) => {
+        const { error } = await postMail(fields);
+        if (!error) navigate('');
+    };
+
     return Form({
         fields: composeMailFields,
         onSubmit: sendMail,

client/src/controllers/InboxController.jsx

@@ -1,26 +1,9 @@
-import { Box } from '@mui/material';
-import { useEffect, useState } from 'react';
-
 import { MailUnit } from 'components';
+import { PaginatedList } from 'controllers';
 import { getMail } from 'services/mailServices';
 
 export default function InboxController() {
-    const [mail, setMail] = useState([]);
+    const getData = () => getMail().then(({ messages }) => messages);
 
-    const fetchMail = async () => {
-        const { messages } = await getMail();
-        setMail(messages);
-    };
-
-    useEffect(() => {
-        fetchMail();
-    }, []);
-
-    return (
-        <Box>
-            {mail.map((message) => (
-                <MailUnit {...message} key={message.id} />
-            ))}
-        </Box>
-    );
+    return <PaginatedList {...{ Component: MailUnit, getData, rowsPerPage: 15 }} />;
 }

client/src/controllers/PaginatedListController.jsx

@@ -3,9 +3,13 @@ import { useSearchParams } from 'react-router-dom';
 
 import { PaginatedList } from 'components';
 
-const rowsPerPage = 5;
-
-export default function PaginatedListController({ concat = false, count, Component, getData }) {
+export default function PaginatedListController({
+    concat = false,
+    count,
+    Component,
+    getData,
+    rowsPerPage = 5,
+}) {
     const [searchParams] = useSearchParams();
 
     const [data, setData] = useState([]);