Moved component logic for MdPreview into controller

client/src/components/MdPreview.jsx

@@ -1,21 +1,12 @@
-import { useForm } from 'contexts';
-import { useState } from 'react';
 import ReactMarkdown from 'react-markdown';
 import { Paper, Typography, Button } from '@mui/material';
 
-export default function MdPreview() {
-    const [preview, setPreview] = useState(false);
-    const { content } = useForm();
-
-    function handleClick() {
-        setPreview(!preview);
-    }
-
+export default function MdPreview({ show, toggleShow, content }) {
     return (
         <div>
             <Button
                 fullWidth
-                onClick={handleClick}
+                onClick={toggleShow}
                 type='submit'
                 variant='contained'
                 color='primary'
@@ -23,7 +14,7 @@ export default function MdPreview() {
             >
                 Show Markdown Preview
             </Button>
-            {preview && (
+            {show && (
                 <Paper variant='outlined'>
                     <Typography variant='h5'> Text Preview: </Typography>
                     <ReactMarkdown children={content} />

client/src/components/QAComponents/CreateAnswer.jsx

@@ -1,7 +1,7 @@
 import { Button, Card, CardContent, Tooltip } from '@mui/material';
 
 import { AnswerForm } from 'controllers/FormControllers';
-import MdPreview from 'components/MdPreview';
+import { MdPreview } from 'controllers';
 
 export default function CreateAnswer({ canAnswer, show, toggleShow }) {
     return (

client/src/containers/Ask.jsx

@@ -3,7 +3,7 @@ import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { AskForm } from 'controllers/FormControllers';
-import { MdPreview } from 'components';
+import { MdPreview } from 'controllers';
 import Cookies from 'js-cookie';
 
 export default function Ask() {

client/src/containers/Mail.jsx

@@ -3,7 +3,7 @@ import React, { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Inbox } from 'controllers';
 import { SendMail } from 'controllers/FormControllers';
-import { MdPreview } from 'components';
+import { MdPreview } from 'controllers';
 import Cookies from 'js-cookie';
 
 export default function Mail() {

client/src/controllers/MdPreviewController.jsx

@@ -0,0 +1,12 @@
+import { useForm } from 'contexts';
+import { useState } from 'react';
+import { MdPreview } from 'components';
+
+export default function MdPreviewController() {
+    const [show, setShow] = useState(false);
+    const { content } = useForm();
+
+    const toggleShow = () => setShow((initial) => !initial);
+
+    return <MdPreview {...{ show, toggleShow, content }} />;
+}

client/src/controllers/index.js

@@ -3,5 +3,6 @@ import Inbox from './InboxController';
 import Navbar from './NavbarController';
 import PaginatedList from './PaginatedListController';
 import SearchBar from './SearchBarController';
+import MdPreview from './MdPreviewController';
 
-export { CreationInfoTag, PaginatedList, Inbox, Navbar, SearchBar };
+export { CreationInfoTag, PaginatedList, Inbox, Navbar, SearchBar, MdPreview };