From 31e226bd99ce648cb6ca9bb3056a275975d21c97 Mon Sep 17 00:00:00 2001
From: heronlancellot <heronlancellot@id.uff.br>
Date: Thu, 19 Oct 2023 01:01:53 -0300
Subject: [PATCH 1/2] Feat: Initial FormModal Structure

---
 src/components/Form/index.tsx    |  57 ++++++++++++++++
 src/components/Task/CardTask.tsx | 109 ++++++++++++++++++-------------
 2 files changed, 121 insertions(+), 45 deletions(-)
 create mode 100644 src/components/Form/index.tsx

diff --git a/src/components/Form/index.tsx b/src/components/Form/index.tsx
new file mode 100644
index 0000000..021c2ed
--- /dev/null
+++ b/src/components/Form/index.tsx
@@ -0,0 +1,57 @@
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+import { useEffect, useState } from 'react';
+
+export default function FormDialog(openForm, onSubmit) {
+    const [open, setOpen] = useState<boolean>(false)
+    const [descriptionReview, setDescriptionReview] = useState()
+
+    console.log('onSubmit', onSubmit);
+
+    const handleConfirmation = (event: { target: { value: any; }; }) => {
+        let description = event.target.value;
+        setDescriptionReview(description);
+    }
+
+    const handleClose = () => {
+        setOpen(false);
+    };
+
+    const handleSubmit = () => {
+        onSubmit(descriptionReview)
+        handleClose();
+    };
+
+    useEffect(() => {
+        setOpen(openForm)
+    }, [])
+
+    return (
+        <Dialog open={open} onClose={handleClose}>
+            <DialogTitle>Review Description</DialogTitle>
+            <DialogContent>
+                <DialogContentText>
+                    Add your Task Description
+                </DialogContentText>
+                <TextField
+                    autoFocus
+                    margin="dense"
+                    id="name"
+                    label="Well Done ! I like that approach. We should make that way. After that, increase the font size to 32. Any Help, contact-me on discord"
+                    fullWidth
+                    variant="standard"
+                    onChange={(event) => (handleConfirmation(event))}
+                />
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={handleClose}>Cancel</Button>
+                <Button onClick={handleSubmit}>Send</Button>
+            </DialogActions>
+        </Dialog>
+    );
+}
diff --git a/src/components/Task/CardTask.tsx b/src/components/Task/CardTask.tsx
index b2a3cc4..368f4e1 100644
--- a/src/components/Task/CardTask.tsx
+++ b/src/components/Task/CardTask.tsx
@@ -11,7 +11,7 @@ import Close from '@mui/icons-material/Close';
 import Check from '@mui/icons-material/Check';
 import { useSnackBar } from 'src/contexts/SnackBarContext';
 import { ethers } from 'ethers';
-import { set } from 'date-fns';
+import FormDialog from '../Form';
 
 /**
  * CardTasks Component
@@ -35,6 +35,20 @@ export const CardTask = ({ taskId, taskData, loading }: any) => {
     const [approvals, setApprovals] = useState<string>();
     const [isMember, setIsMember] = useState<boolean>(false);
     const [isLeader, setIsLeader] = useState<boolean>(false);
+    const [openForm, setOpenForm] = useState<boolean>(false);
+    const [dataForm, setDataForm] = useState<string>('');
+
+    const handleOpenForm = async () => {
+        setOpenForm(true);
+    };
+
+    const handleFormSubmit = (metadata: any) => {
+        setDataForm(metadata);
+        setOpenForm(false);
+    }
+
+    console.log('dataForm', dataForm)
+
     const theme = useTheme();
     const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
 
@@ -68,7 +82,8 @@ export const CardTask = ({ taskId, taskData, loading }: any) => {
                     handleSnackbar('Task Start process initiated with success!', 'info')
                     break;
                 case "Progress":
-                    await reviewTask(BigInt(taskId), "Hello, I already finished");
+                    handleOpenForm();
+                    await reviewTask(BigInt(taskId), dataForm);
                     handleSnackbar('Review Task process initiated with success!', 'info')
                     break;
                 case "Review":
@@ -114,7 +129,7 @@ export const CardTask = ({ taskId, taskData, loading }: any) => {
         } catch (error) {
             setError(error.message)
             setOpenError(true);
-        }        
+        }
     }
 
     useEffect(() => {
@@ -177,7 +192,6 @@ export const CardTask = ({ taskId, taskData, loading }: any) => {
                                                 variant="body2"
                                                 style={{
                                                     textAlign: isSmallScreen ? 'left' : 'center',
-                                                    // marginLeft: isSmallScreen ? 'auto' : 'unset',
                                                     backgroundColor: '#000000',
                                                 }}
                                             >
@@ -196,42 +210,42 @@ export const CardTask = ({ taskId, taskData, loading }: any) => {
                                                 {taskData.title}
                                             </Typography>
                                             <Box display={'flex'} justifyContent="space-between" alignItems="center">
-                                        
-                                            {
-                                                isLeader && taskData.status != "Canceled" &&
-                                                <Tooltip key={"top"} placement={"top"} title="Approvals">
-                                                    <Typography >                                                    
-                                                        {approvals}
-                                                    </Typography>
-                                                </Tooltip>
-                                            }                                            
-
-                                            {
-                                                isLeader && taskData.status != "Canceled" &&
-                                                <Tooltip key={"top"} placement={"top"} title="Complete Task">
-                                                    <IconButton color="primary" 
-                                                        onClick={handleConfirm}>
-                                                    <Check />
-                                                    </IconButton>
-                                                </Tooltip>
-                                            }
-                                                
-                                            {
-                                                isLeader && taskData.status != "Canceled" &&
-                                                <Tooltip key={"top"} placement={"top"} title="Cancel Task">
-                                                    <IconButton color="primary" 
-                                                        onClick={handleCancel}>
-                                                    <Close />
+
+                                                {
+                                                    isLeader && taskData.status != "Canceled" &&
+                                                    <Tooltip key={"top"} placement={"top"} title="Approvals">
+                                                        <Typography >
+                                                            {approvals}
+                                                        </Typography>
+                                                    </Tooltip>
+                                                }
+
+                                                {
+                                                    isLeader && taskData.status != "Canceled" &&
+                                                    <Tooltip key={"top"} placement={"top"} title="Complete Task">
+                                                        <IconButton color="primary"
+                                                            onClick={handleConfirm}>
+                                                            <Check />
+                                                        </IconButton>
+                                                    </Tooltip>
+                                                }
+
+                                                {
+                                                    isLeader && taskData.status != "Canceled" &&
+                                                    <Tooltip key={"top"} placement={"top"} title="Review Task">
+                                                        <IconButton color="primary"
+                                                            onClick={handleCancel}>
+                                                            <Close />
+                                                        </IconButton>
+                                                    </Tooltip>
+                                                }
+
+                                                <Tooltip key={"top"} placement={"top"} title="Share URL">
+                                                    <IconButton color="primary"
+                                                        onClick={copyContent}>
+                                                        <OpenInNewIcon />
                                                     </IconButton>
                                                 </Tooltip>
-                                            }
-
-                                            <Tooltip key={"top"} placement={"top"} title="Share URL">
-                                                <IconButton color="primary"
-                                                    onClick={copyContent}>
-                                                    <OpenInNewIcon />
-                                                </IconButton>
-                                            </Tooltip>
                                             </Box>
                                         </Box>
                                         <Typography gutterBottom variant='subtitle2' component="div">
@@ -255,14 +269,19 @@ export const CardTask = ({ taskId, taskData, loading }: any) => {
                                     <Box display={'flex'} justifyContent="space-between" mt={6} >
                                         {
                                             taskData.status != "Completed" && taskData.status != "Canceled" &&
-                                            <Button
+                                            <>
+                                                <Button
+                                                    variant="contained"
+                                                    component="span"
+                                                    onClick={handleAction}
+                                                >
+                                                    {action}
+                                                </Button>
+
+                                                {openForm && <FormDialog openForm={openForm} onSubmit={handleFormSubmit} />}
+
+                                            </>
 
-                                                variant="contained"
-                                                component="span"
-                                                onClick={handleAction}
-                                            >
-                                                {action}
-                                            </Button>
                                         }
                                         <Button
                                             startIcon={<AccessTime />}

From 7fe1f0b5d467c5442fdb82ad7a8f3f5911ea6fc9 Mon Sep 17 00:00:00 2001
From: heronlancellot <heronlancellot@id.uff.br>
Date: Thu, 19 Oct 2023 21:30:41 -0300
Subject: [PATCH 2/2] Initial Structure ReviewTask

---
 src/components/Form/index.tsx                 |  5 ++--
 src/components/Task/CardTask.tsx              | 21 ++++++-------
 .../Tasks/details/DetailsTask.tsx             | 30 +++++++++++--------
 3 files changed, 30 insertions(+), 26 deletions(-)

diff --git a/src/components/Form/index.tsx b/src/components/Form/index.tsx
index 021c2ed..3a1aca0 100644
--- a/src/components/Form/index.tsx
+++ b/src/components/Form/index.tsx
@@ -7,11 +7,10 @@ import DialogContentText from '@mui/material/DialogContentText';
 import DialogTitle from '@mui/material/DialogTitle';
 import { useEffect, useState } from 'react';
 
-export default function FormDialog(openForm, onSubmit) {
+export default function FormDialog({ openForm, onSubmit }) {
     const [open, setOpen] = useState<boolean>(false)
     const [descriptionReview, setDescriptionReview] = useState()
 
-    console.log('onSubmit', onSubmit);
 
     const handleConfirmation = (event: { target: { value: any; }; }) => {
         let description = event.target.value;
@@ -23,7 +22,7 @@ export default function FormDialog(openForm, onSubmit) {
     };
 
     const handleSubmit = () => {
-        onSubmit(descriptionReview)
+        onSubmit(descriptionReview);
         handleClose();
     };
 
diff --git a/src/components/Task/CardTask.tsx b/src/components/Task/CardTask.tsx
index 368f4e1..e127e20 100644
--- a/src/components/Task/CardTask.tsx
+++ b/src/components/Task/CardTask.tsx
@@ -26,7 +26,7 @@ import FormDialog from '../Form';
  */
 
 
-export const CardTask = ({ taskId, taskData, loading }: any) => {
+export const CardTask = ({ taskId, taskData, loading, setNewReview }: any) => {
     const { startTask, reviewTask, completeTask, cancelTask, hasMemberRole, hasLeaderRole, hasVoted, getMinQuorum, getQuorumApprovals } = useTaskService();
     const [openError, setOpenError] = useState(false);
     const [error, setError] = useState<string>();
@@ -36,18 +36,19 @@ export const CardTask = ({ taskId, taskData, loading }: any) => {
     const [isMember, setIsMember] = useState<boolean>(false);
     const [isLeader, setIsLeader] = useState<boolean>(false);
     const [openForm, setOpenForm] = useState<boolean>(false);
-    const [dataForm, setDataForm] = useState<string>('');
 
     const handleOpenForm = async () => {
         setOpenForm(true);
     };
 
-    const handleFormSubmit = (metadata: any) => {
-        setDataForm(metadata);
+    const handleFormSubmit = async (metadata: any) => {
+        console.log('metadata ', metadata);
         setOpenForm(false);
-    }
+        console.log('taskId HANDLEFORMSUBMIT - CARDTASK', taskId);
+        console.log('dataForm HANDLEFORMSUBMIT - CARDTASK', metadata)
+        await reviewTask(BigInt(taskId), metadata).then(result => { setNewReview(true), handleSnackbar('Review Task process initiated with success!', 'info'), console.log('result', result) });
 
-    console.log('dataForm', dataForm)
+    }
 
     const theme = useTheme();
     const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
@@ -83,12 +84,12 @@ export const CardTask = ({ taskId, taskData, loading }: any) => {
                     break;
                 case "Progress":
                     handleOpenForm();
-                    await reviewTask(BigInt(taskId), dataForm);
-                    handleSnackbar('Review Task process initiated with success!', 'info')
+
+
                     break;
                 case "Review":
-                    await reviewTask(BigInt(taskId), "Awesome, contact me on Discord!");
-                    handleSnackbar('Review Task process initiated with success!', 'info')
+                    handleOpenForm();
+
                     break;
                 default:
                     break;
diff --git a/src/content/applications/Tasks/details/DetailsTask.tsx b/src/content/applications/Tasks/details/DetailsTask.tsx
index 66b900e..55e0114 100644
--- a/src/content/applications/Tasks/details/DetailsTask.tsx
+++ b/src/content/applications/Tasks/details/DetailsTask.tsx
@@ -4,26 +4,30 @@ import { Helmet } from 'react-helmet-async';
 import SuspenseLoader from 'src/components/SuspenseLoader'
 import { useTaskService } from "src/services/tasks-service";
 import { useTaskServiceHook } from "src/hooks/TaskServiceHook";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import CardTasks from "../../../../components/Task/CardTask";
 
 const DetailsTask = () => {
     const theme = useTheme();
     const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
-
     const taskService = useTaskService();
     const { taskId } = useParams();
-
+    const [newReview, setNewReview] = useState<boolean>(false);
     const { handleTask, handleReview, taskData, taskReview, loading, error } = useTaskServiceHook(taskService);
 
-    useEffect(() => {
-        const fetchData = async () => {
-            await handleTask(Number(taskId));
-            await handleReview(Number(taskId));
-        };
+    const fetchData = async () => {
+        await handleTask(Number(taskId));
+        await handleReview(Number(taskId));
+        setNewReview(true)
+    };
 
+    useEffect(() => {
         fetchData();
-    }, []);
+        console.log('newReview = ', newReview);
+        if (newReview) {
+            fetchData()
+        }
+    }, [newReview]);
 
     return (
         <>
@@ -46,7 +50,7 @@ const DetailsTask = () => {
                                 (
                                     <>
                                         <Box width={isSmallScreen ? '100%' : 709} mt={isSmallScreen ? 2 : 0}>
-                                            <CardTasks taskId={taskId} taskData={taskData} loading={loading} />
+                                            <CardTasks taskId={taskId} taskData={taskData} loading={loading} setNewReview={setNewReview} />
 
                                             <Box mt={4} width={isSmallScreen ? '100%' : 679} display={'flex'} flexDirection={isSmallScreen ? 'column' : 'row'} justifyContent={isSmallScreen ? 'center' : 'space-between'} alignItems={'center'}>
                                                 <Card sx={{ width: isSmallScreen ? '100%' : 192, height: 119, justifyContent: 'center', marginBottom: isSmallScreen ? '16px' : '0' }}>
@@ -63,11 +67,11 @@ const DetailsTask = () => {
 
                                                 <Card sx={{ width: isSmallScreen ? '100%' : 434, height: 119, justifyContent: isSmallScreen ? 'center' : 'left' }}>
                                                     <CardContent style={{ maxHeight: '200px', overflowY: 'auto' }}>
-                                                    {/* <CardContent> */}
+                                                        {/* <CardContent> */}
                                                         <Typography gutterBottom variant="h4" textAlign={'left'} component="div">
                                                             Reviews
                                                         </Typography>
-                                                        <Divider />                                                 
+                                                        <Divider />
                                                         <Typography variant="h6" textAlign={'left'} mt={1} component="div">
                                                             {taskReview ? (taskReview.map((review: any) => {
                                                                 return (
@@ -78,7 +82,7 @@ const DetailsTask = () => {
                                                                     </Box>
                                                                 )
                                                             })) : 'No reviews provided for this task.'}
-                                                        </Typography>                                                        
+                                                        </Typography>
                                                     </CardContent>
                                                 </Card>
                                             </Box>