From 38466d0b26542855363e243812906778b0d42509 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bart=C5=82omiej=20Sworze=C5=84?= Date: Thu, 7 Mar 2024 17:49:56 +0100 Subject: [PATCH] [#364] add information storage screens --- .../src/components/molecules/LinkWithIcon.tsx | 1 + .../src/components/molecules/Step.tsx | 58 +++++++++ .../src/components/molecules/index.ts | 1 + .../src/components/molecules/types.ts | 7 + .../StorageInformation.tsx | 120 ++++++++++++++++++ .../StoreDataInfo.tsx | 70 ++++++++++ .../CreateGovernanceActionSteps/index.ts | 2 + .../ReviewCreatedGovernanceAction.tsx | 12 +- .../src/components/organisms/index.ts | 1 + .../forms/useCreateGovernanceActionForm.ts | 30 ++++- govtool/frontend/src/i18n/locales/en.ts | 13 ++ .../src/pages/CreateGovernanceAction.tsx | 4 + govtool/frontend/src/utils/index.ts | 7 +- govtool/frontend/src/utils/jsonUtils.ts | 8 ++ 14 files changed, 326 insertions(+), 8 deletions(-) create mode 100644 govtool/frontend/src/components/molecules/Step.tsx create mode 100644 govtool/frontend/src/components/organisms/CreateGovernanceActionSteps/StorageInformation.tsx create mode 100644 govtool/frontend/src/components/organisms/CreateGovernanceActionSteps/StoreDataInfo.tsx create mode 100644 govtool/frontend/src/components/organisms/CreateGovernanceActionSteps/index.ts create mode 100644 govtool/frontend/src/utils/jsonUtils.ts diff --git a/govtool/frontend/src/components/molecules/LinkWithIcon.tsx b/govtool/frontend/src/components/molecules/LinkWithIcon.tsx index 0b4f651a3..64960531d 100644 --- a/govtool/frontend/src/components/molecules/LinkWithIcon.tsx +++ b/govtool/frontend/src/components/molecules/LinkWithIcon.tsx @@ -18,6 +18,7 @@ export const LinkWithIcon = ({ alignItems: "center", cursor: "pointer", display: "flex", + width: "fit-content", ...sx, }} onClick={onClick} diff --git a/govtool/frontend/src/components/molecules/Step.tsx b/govtool/frontend/src/components/molecules/Step.tsx new file mode 100644 index 000000000..80af496f7 --- /dev/null +++ b/govtool/frontend/src/components/molecules/Step.tsx @@ -0,0 +1,58 @@ +import { Box } from "@mui/material"; + +import { Typography } from "@atoms"; +import { theme } from "@/theme"; + +import { StepProps } from "./types"; + +export const Step = ({ + component, + label, + layoutStyles, + stepNumber, +}: StepProps) => { + const { + palette: { boxShadow2 }, + } = theme; + + return ( + + + + {stepNumber} + + + + + + {label} + + {component} + + + ); +}; diff --git a/govtool/frontend/src/components/molecules/index.ts b/govtool/frontend/src/components/molecules/index.ts index 1f8dea57b..1ef9c4595 100644 --- a/govtool/frontend/src/components/molecules/index.ts +++ b/govtool/frontend/src/components/molecules/index.ts @@ -12,6 +12,7 @@ export * from "./GovernanceActionsSorting"; export * from "./GovernanceVotedOnCard"; export * from "./LinkWithIcon"; export * from "./OrderActionsChip"; +export * from "./Step"; export * from "./VoteActionForm"; export * from "./VotesSubmitted"; export * from "./WalletInfoCard"; diff --git a/govtool/frontend/src/components/molecules/types.ts b/govtool/frontend/src/components/molecules/types.ts index 32fad8cfa..5e817df41 100644 --- a/govtool/frontend/src/components/molecules/types.ts +++ b/govtool/frontend/src/components/molecules/types.ts @@ -6,3 +6,10 @@ export type LinkWithIconProps = { icon?: JSX.Element; sx?: SxProps; }; + +export type StepProps = { + component: JSX.Element; + label: string; + layoutStyles?: SxProps; + stepNumber: number | string; +}; diff --git a/govtool/frontend/src/components/organisms/CreateGovernanceActionSteps/StorageInformation.tsx b/govtool/frontend/src/components/organisms/CreateGovernanceActionSteps/StorageInformation.tsx new file mode 100644 index 000000000..38e9dbbcf --- /dev/null +++ b/govtool/frontend/src/components/organisms/CreateGovernanceActionSteps/StorageInformation.tsx @@ -0,0 +1,120 @@ +import { Dispatch, SetStateAction, useCallback, useState } from "react"; +import { Box } from "@mui/material"; +import OpenInNewIcon from "@mui/icons-material/OpenInNew"; + +import { Button, Spacer, Typography } from "@atoms"; +import { useCreateGovernanceActionForm, useTranslation } from "@hooks"; +import { Step } from "@molecules"; +import { BgCard, ControlledField } from "@organisms"; +import { downloadJson, openInNewTab } from "@utils"; + +export const StorageInformation = ({ + setStep, +}: { + setStep: Dispatch>; +}) => { + const { t } = useTranslation(); + const { + control, + errors, + createGovernanceAction, + generateJsonBody, + getValues, + watch, + } = useCreateGovernanceActionForm(); + const [isJsonDownloaded, setIsJsonDownloaded] = useState(false); + // TODO: change on correct file name + const fileName = getValues("governance_action_type"); + + // TODO: Change link to correct + const openGuideAboutStoringInformation = useCallback( + () => openInNewTab("https://sancho.network/"), + [] + ); + + const isActionButtonDisabled = !watch("storingURL") || !isJsonDownloaded; + + const onClickBack = useCallback(() => setStep(5), []); + + const onClickDowloadJson = () => { + const data = getValues(); + const jsonBody = generateJsonBody(data); + downloadJson(jsonBody, fileName); + setIsJsonDownloaded(true); + }; + + return ( + + + {t("createGovernanceAction.storingInformationTitle")} + + + {t("createGovernanceAction.storingInformationDescription")} + + + + {`${fileName}.jsonld`} + + } + label={t("createGovernanceAction.storingInformationStep1Label")} + stepNumber={1} + /> + + + } + onClick={openGuideAboutStoringInformation} + size="extraLarge" + sx={{ width: "fit-content" }} + variant="text" + > + {t("createGovernanceAction.storingInformationStep2Link")} + + } + label={t("createGovernanceAction.storingInformationStep2Label")} + stepNumber={2} + /> + + + } + label={t("createGovernanceAction.storingInformationStep3Label")} + stepNumber={3} + /> + + + ); +}; diff --git a/govtool/frontend/src/components/organisms/CreateGovernanceActionSteps/StoreDataInfo.tsx b/govtool/frontend/src/components/organisms/CreateGovernanceActionSteps/StoreDataInfo.tsx new file mode 100644 index 000000000..153b9a24c --- /dev/null +++ b/govtool/frontend/src/components/organisms/CreateGovernanceActionSteps/StoreDataInfo.tsx @@ -0,0 +1,70 @@ +import { Dispatch, SetStateAction } from "react"; +import { Box, Link } from "@mui/material"; + +import { Spacer, Typography } from "@atoms"; +import { + useCreateGovernanceActionForm, + useScreenDimension, + useTranslation, +} from "@hooks"; +import { BgCard, ControlledField } from "@organisms"; +import { openInNewTab } from "@utils"; + +export const StoreDataInfo = ({ + setStep, +}: { + setStep: Dispatch>; +}) => { + const { t } = useTranslation(); + const { control, errors, watch } = useCreateGovernanceActionForm(); + const { isMobile } = useScreenDimension(); + + // TODO: change link when available + const openLink = () => { + openInNewTab("https://www.google.com"); + }; + + const isContinueDisabled = !watch("storeData"); + + const onClickContinue = () => { + setStep(6); + }; + + const onClickBack = () => { + setStep(4); + }; + + return ( + + + {t("createGovernanceAction.storeDataTitle")} + + + {t("createGovernanceAction.storeDataLink")} + + + + + + ); +}; diff --git a/govtool/frontend/src/components/organisms/CreateGovernanceActionSteps/index.ts b/govtool/frontend/src/components/organisms/CreateGovernanceActionSteps/index.ts new file mode 100644 index 000000000..8a4cf44d1 --- /dev/null +++ b/govtool/frontend/src/components/organisms/CreateGovernanceActionSteps/index.ts @@ -0,0 +1,2 @@ +export * from "./StorageInformation"; +export * from "./StoreDataInfo"; diff --git a/govtool/frontend/src/components/organisms/ReviewCreatedGovernanceAction.tsx b/govtool/frontend/src/components/organisms/ReviewCreatedGovernanceAction.tsx index 4944804a1..f05db801e 100644 --- a/govtool/frontend/src/components/organisms/ReviewCreatedGovernanceAction.tsx +++ b/govtool/frontend/src/components/organisms/ReviewCreatedGovernanceAction.tsx @@ -4,7 +4,11 @@ import DriveFileRenameOutlineOutlinedIcon from "@mui/icons-material/DriveFileRen import { Button, Spacer, Typography } from "@atoms"; import { ICONS } from "@consts"; -import { useCreateGovernanceActionForm, useTranslation } from "@hooks"; +import { + defaulCreateGovernanceActionValues, + useCreateGovernanceActionForm, + useTranslation, +} from "@hooks"; import { LinkWithIcon } from "@molecules"; import { openInNewTab } from "@utils"; @@ -39,7 +43,11 @@ export const ReviewCreatedGovernanceAction = ({ const renderReviewFields = () => { return Object.entries(values) - .filter(([key]) => key !== "links") + .filter( + ([key]) => + !Object.keys(defaulCreateGovernanceActionValues).includes(key) || + key === "governance_action_type" + ) .map(([key, value]) => { const label = key.charAt(0).toUpperCase() + key.slice(1).replace(/_/g, " "); diff --git a/govtool/frontend/src/components/organisms/index.ts b/govtool/frontend/src/components/organisms/index.ts index ec58e2e2a..3d1a6b759 100644 --- a/govtool/frontend/src/components/organisms/index.ts +++ b/govtool/frontend/src/components/organisms/index.ts @@ -4,6 +4,7 @@ export * from "./ChooseStakeKeyPanel"; export * from "./ChooseWalletModal"; export * from "./ControlledField"; export * from "./CreateGovernanceActionForm"; +export * from "./CreateGovernanceActionSteps"; export * from "./DashboardCards"; export * from "./DashboardCards"; export * from "./DashboardDrawerMobile"; diff --git a/govtool/frontend/src/hooks/forms/useCreateGovernanceActionForm.ts b/govtool/frontend/src/hooks/forms/useCreateGovernanceActionForm.ts index f744484b2..7fe11839b 100644 --- a/govtool/frontend/src/hooks/forms/useCreateGovernanceActionForm.ts +++ b/govtool/frontend/src/hooks/forms/useCreateGovernanceActionForm.ts @@ -4,12 +4,16 @@ import { useFormContext } from "react-hook-form"; type createGovernanceActionValues = { governance_action_type: string; links?: { link: string }[]; + storeData?: boolean; + storingURL: string; }; export const defaulCreateGovernanceActionValues: createGovernanceActionValues = { governance_action_type: "", links: [{ link: "" }], + storeData: false, + storingURL: "", }; export const useCreateGovernanceActionForm = () => { @@ -26,9 +30,28 @@ export const useCreateGovernanceActionForm = () => { reset, } = useFormContext(); - const onSubmit = useCallback(async () => { - setIsLoading(true); + const generateJsonBody = (data: createGovernanceActionValues) => { + const filteredData = Object.entries(data).filter( + ([key]) => !Object.keys(defaulCreateGovernanceActionValues).includes(key) + ); + const references = data.links + ?.filter((link) => link.link) + .map((link) => { + // TODO: Label isnt available and harcoded Other for type + return { type: "Other", label: "Testlabel", uri: link.link }; + }); + const body = { ...Object.fromEntries(filteredData), references }; + + const jsonStr = JSON.stringify(body); + return jsonStr; + }; + + const onSubmit = useCallback(async (data: createGovernanceActionValues) => { try { + setIsLoading(true); + const jsonBody = generateJsonBody(data); + + return jsonBody; } catch (e: any) { } finally { setIsLoading(false); @@ -42,9 +65,10 @@ export const useCreateGovernanceActionForm = () => { isLoading, isValid, setValue, - submitForm: handleSubmit(onSubmit), + createGovernanceAction: handleSubmit(onSubmit), watch, register, reset, + generateJsonBody, }; }; diff --git a/govtool/frontend/src/i18n/locales/en.ts b/govtool/frontend/src/i18n/locales/en.ts index 02efcee00..6d08237c9 100644 --- a/govtool/frontend/src/i18n/locales/en.ts +++ b/govtool/frontend/src/i18n/locales/en.ts @@ -138,6 +138,19 @@ export const en = { formTitle: "Governance Action details", references: "References and Supporting Information", reviewSubmission: "Review your submission", + storeDataCheckboxLabel: + "I agree to store correctly this information and to maintain them over the years", + storeDataLink: "Learn more about storing information", + storeDataTitle: "Store and Maintain the Data Yourself", + storingInformationDescription: + "Download your file, save it to your chosen location, and enter the URL of that location in step 3", + storingInformationStep1Label: "Download this file", + storingInformationStep2Label: + "Save this file in a location that provides a public URL (ex. github)", + storingInformationStep2Link: "Read full guide", + storingInformationStep3Label: "Paste the URL here", + storingInformationTitle: "Information Storage Steps", + storingInformationURLPlaceholder: "URL", supportingLinks: "Supporting links", title: "Create a Governance Action", }, diff --git a/govtool/frontend/src/pages/CreateGovernanceAction.tsx b/govtool/frontend/src/pages/CreateGovernanceAction.tsx index e2c9cc8d3..43729f245 100644 --- a/govtool/frontend/src/pages/CreateGovernanceAction.tsx +++ b/govtool/frontend/src/pages/CreateGovernanceAction.tsx @@ -18,6 +18,8 @@ import { DashboardTopNav, Footer, ReviewCreatedGovernanceAction, + StorageInformation, + StoreDataInfo, WhatGovernanceActionIsAbout, } from "@organisms"; import { checkIsWalletConnected } from "@utils"; @@ -83,6 +85,8 @@ export const CreateGovernanceAction = () => { {step === 2 && } {step === 3 && } {step === 4 && } + {step === 5 && } + {step === 6 && } {isMobile &&