Skip to content

Commit

Permalink
Resolved some technical debt (#32)
Browse files Browse the repository at this point in the history 
Co-authored-by: Mauro Escudero <[email protected]>
  • Loading branch information
@EehMauro
EehMauro and Mauro Escudero authored Oct 5, 2023
1 parent 28f8935 commit b1dd2e7
Show file tree
Hide file tree
Showing 4 changed files with 149 additions and 86 deletions.
194 changes: 113 additions & 81 deletions src/components/CertificationMetadataForm/components/ReportScriptForm.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,21 @@
import React from "react";
import React, { useState } from "react";

import { Box, Grid, Paper, Typography, TextField, Button } from "@mui/material";
import { Box, Grid, Typography, Button } from "@mui/material";
import AddIcon from "@mui/icons-material/Add";
import RemoveIcon from "@mui/icons-material/Remove";

import InputGroup from "compositions/InputGroup";
import Container from "compositions/InputGroup/components/Container";
import ReportScriptFormConfirmModal from "./ReportScriptFormConfirmModal";
import { getScriptFields, getScriptContractFields } from "../utils";

import type { FormState, UseFormRegister, UseFormGetFieldState, FieldArrayWithId, UseFieldArrayAppend, UseFieldArrayRemove } from "react-hook-form";
import type { ReportForm } from "../interface";
import type { FormState, UseFormRegister, UseFormGetFieldState, FieldArrayWithId, UseFieldArrayAppend, UseFieldArrayRemove, UseFormWatch } from "react-hook-form";
import type { ReportForm, ReportFormScript } from "../interface";

import "../index.css";

interface Props {
watch: UseFormWatch<ReportForm>;
formState: FormState<ReportForm>;
register: UseFormRegister<ReportForm>;
getFieldState: UseFormGetFieldState<ReportForm>;
Expand All @@ -31,90 +33,120 @@ interface InstanceProps {
onRemove: () => void;
}

const ReportScriptFormInstance = (props: InstanceProps) => {
return (
<Box className="p-4 mt-4 rounded-sm border-solid border-gray-inactive">
<Box className="flex flex-row items-center">
<Typography variant="subtitle2" className="text-main flex-1">
DAPP Script (#{props.index+1})
</Typography>
{props.index > 0 && (
<Button
variant="outlined" size="small" color="error" className="normal-case"
startIcon={<RemoveIcon />} onClick={props.onRemove}
>
Remove Script
</Button>
)}
</Box>
<Box className="mx-[-1em]">
<InputGroup
fields={getScriptFields(props.index)}
formState={props.formState}
register={props.register}
getFieldState={props.getFieldState}
/>
</Box>
<Typography variant="subtitle2" className="text-main mt-2">
SmartContract Information
const ReportScriptFormInstance = (props: InstanceProps) => (
<Box className="p-4 mt-4 rounded-sm border-solid border-gray-inactive">
<Box className="flex flex-row items-center">
<Typography variant="subtitle2" className="text-main flex-1">
DAPP Script (#{props.index+1})
</Typography>
<Grid container spacing={2}>
<Grid item xs={6}>
<Box className="mx-[-1em]">
<InputGroup
fields={getScriptContractFields(props.index).slice(0,4)}
formState={props.formState}
register={props.register}
getFieldState={props.getFieldState}
/>
</Box>
</Grid>
<Grid item xs={6}>
<Box className="mx-[-1em]">
<InputGroup
fields={getScriptContractFields(props.index).slice(4,7)}
formState={props.formState}
register={props.register}
getFieldState={props.getFieldState}
/>
</Box>
</Grid>
</Grid>
{props.index > 0 && (
<Button
variant="outlined" size="small" color="error" className="normal-case"
startIcon={<RemoveIcon />} onClick={props.onRemove}
>
Remove Script
</Button>
)}
</Box>
);
}

const ReportScriptForm = (props: Props) => (
<Container standalone={props.standalone}>
<Typography variant="subtitle1" className="text-main pt-4">
DAPP Scripts
</Typography>
{props.scriptFields.map((field, index) => (
<ReportScriptFormInstance
key={field.id}
index={index}
<Box className="mx-[-1em]">
<InputGroup
fields={getScriptFields(props.index)}
formState={props.formState}
register={props.register}
getFieldState={props.getFieldState}
onRemove={() => props.removeScript(index)}
/>
))}
<Box className="pt-4 text-right">
<Button
variant="outlined"
size="small"
className="button-outlined-main"
startIcon={<AddIcon />}
onClick={() => props.appendScript({
scriptHash: '',
contractAddress: '',
smartContractInfo: {}
})}
>
Add Script
</Button>
</Box>
</Container>
<Typography variant="subtitle2" className="text-main mt-2">
SmartContract Information
</Typography>
<Grid container spacing={2}>
<Grid item xs={6}>
<Box className="mx-[-1em]">
<InputGroup
fields={getScriptContractFields(props.index).slice(0,4)}
formState={props.formState}
register={props.register}
getFieldState={props.getFieldState}
/>
</Box>
</Grid>
<Grid item xs={6}>
<Box className="mx-[-1em]">
<InputGroup
fields={getScriptContractFields(props.index).slice(4,7)}
formState={props.formState}
register={props.register}
getFieldState={props.getFieldState}
/>
</Box>
</Grid>
</Grid>
</Box>
);

const ReportScriptForm = (props: Props) => {
const [currentIndex, setCurrentIndex] = useState<number|null>(null);

const isDirty = (script: ReportFormScript) => {
if (script.scriptHash.length > 0) return true;
if (script.contractAddress.length > 0) return true;
if (Object.keys(script.smartContractInfo).filter(key => (script as any).smartContractInfo[key]?.length > 0 ).length > 0) return true;
return false;
}

const onRemove = (index: number) => {
if (isDirty(props.watch(`scripts.${index}`))) {
setCurrentIndex(index);
} else {
props.removeScript(index);
}
}

const confirmRemove = () => {
props.removeScript(currentIndex!);
setCurrentIndex(null);
}

return (
<>
<Container standalone={props.standalone}>
<Typography variant="subtitle1" className="text-main pt-4">
DAPP Scripts
</Typography>
{props.scriptFields.map((field, index) => (
<ReportScriptFormInstance
key={field.id}
index={index}
formState={props.formState}
register={props.register}
getFieldState={props.getFieldState}
onRemove={() => onRemove(index)}
/>
))}
<Box className="pt-4 text-right">
<Button
variant="outlined"
size="small"
className="button-outlined-main"
startIcon={<AddIcon />}
onClick={() => props.appendScript({
scriptHash: '',
contractAddress: '',
smartContractInfo: {}
})}
>
Add Script
</Button>
</Box>
</Container>

<ReportScriptFormConfirmModal
show={currentIndex !== null}
onClose={() => setCurrentIndex(null)}
onConfirm={confirmRemove}
/>
</>
);
};

export default ReportScriptForm;
31 changes: 31 additions & 0 deletions src/components/CertificationMetadataForm/components/ReportScriptFormConfirmModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import React from "react";

import { Dialog, DialogTitle, DialogActions, Button } from "@mui/material";

import "../index.css";

interface Props {
show: boolean;
onConfirm: () => void;
onClose: () => void;
}

const ReportScriptFormConfirmModal = (props: Props) => {
return (
<Dialog open={props.show} onClose={props.onClose}>
<DialogTitle>
Do you want to delete the current script?
</DialogTitle>
<DialogActions>
<Button variant="contained" className="button-contained-main" onClick={props.onClose}>
Cancel
</Button>
<Button variant="contained" color="error" className="normal-case" onClick={props.onConfirm}>
Delete script
</Button>
</DialogActions>
</Dialog>
);
}

export default ReportScriptFormConfirmModal;
9 changes: 5 additions & 4 deletions src/components/CertificationMetadataForm/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
import { useForm, useFieldArray } from "react-hook-form";

import { Box, Grid, Paper, Button } from "@mui/material";
import SendIcon from "@mui/icons-material/Send";
import DownloadIcon from "@mui/icons-material/Download";

import { sendReport } from "store/slices/reportUpload.slice";
import { getResolver, getDefaultValues, getInformationFields, auditorFields } from "./utils";
Expand Down Expand Up @@ -33,7 +33,7 @@ const CertificationMetadataForm = (props: Props) => {
const { profile } = useAppSelector((state) => state.profile);
const { loading, success, errorMessage, onchain, offchain, subject, uuid } = useAppSelector((state) => state.reportUpload);

const { control, register, handleSubmit, getFieldState, formState } = useForm<ReportForm>({
const { control, register, handleSubmit, getFieldState, formState, watch } = useForm<ReportForm>({
defaultValues: getDefaultValues(profile), resolver: getResolver(props.isReviewCertification), mode: 'onBlur'
});
const { fields: scriptFields, append: appendScript, remove: removeScript } = useFieldArray({ name: 'scripts', control });
Expand Down Expand Up @@ -109,6 +109,7 @@ const CertificationMetadataForm = (props: Props) => {
</Grid>
<Grid item md={12} lg={props.standalone ? 6 : 12}>
<ReportScriptForm
watch={watch}
formState={formState}
register={register}
getFieldState={getFieldState}
Expand All @@ -123,10 +124,10 @@ const CertificationMetadataForm = (props: Props) => {
<Button
variant="outlined" size="large"
type="submit" className="button-outlined-highlighted"
endIcon={<SendIcon />}
endIcon={<DownloadIcon />}
disabled={loading}
>
Send Report
Download Metadata Files
</Button>
{props.isReviewCertification && (
<Button
Expand Down
1 change: 0 additions & 1 deletion src/components/CertificationMetadataForm/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { buildFormResolver } from "compositions/InputGroup/utils";

import type { ReportForm } from "./interface";
import type { UserProfile } from "store/slices/profile.slice";
import { Resolver } from "react-hook-form";

const internalInformationFields: Field[] = [
{
Expand Down

0 comments on commit b1dd2e7

Please sign in to comment.