Skip to content

Commit

Permalink
[#364] add information storage screens
Browse files Browse the repository at this point in the history
  • Loading branch information
Sworzen1 authored and MSzalowski committed Mar 8, 2024
1 parent 5649541 commit 00e06d9
Show file tree
Hide file tree
Showing 14 changed files with 326 additions and 8 deletions.
1 change: 1 addition & 0 deletions govtool/frontend/src/components/molecules/LinkWithIcon.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ export const LinkWithIcon = ({
alignItems: "center",
cursor: "pointer",
display: "flex",
width: "fit-content",
...sx,
}}
onClick={onClick}
Expand Down
58 changes: 58 additions & 0 deletions govtool/frontend/src/components/molecules/Step.tsx
Original file line number Diff line number Diff line change
@@ -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 (
<Box
sx={{
flexDirection: "row",
display: "flex",
width: "100%",
...layoutStyles,
}}
>
<Box
sx={{
alignItems: "center",
borderRadius: "100%",
boxShadow: `2px 2px 20px 0px ${boxShadow2}`,
display: "flex",
height: 54,
justifyContent: "center",
width: 54,
}}
>
<Typography color="primary" fontWeight={400} variant="title2">
{stepNumber}
</Typography>
</Box>

<Box
sx={{
display: "flex",
flex: 1,
flexDirection: "column",
ml: 3,
}}
>
<Typography fontWeight={500} sx={{ mb: 1.5 }} variant="body1">
{label}
</Typography>
{component}
</Box>
</Box>
);
};
1 change: 1 addition & 0 deletions govtool/frontend/src/components/molecules/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
7 changes: 7 additions & 0 deletions govtool/frontend/src/components/molecules/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
};
Original file line number Diff line number Diff line change
@@ -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<SetStateAction<number>>;
}) => {
const { t } = useTranslation();
const {
control,
errors,
createGovernanceAction,
generateJsonBody,
getValues,
watch,
} = useCreateGovernanceActionForm();
const [isJsonDownloaded, setIsJsonDownloaded] = useState<boolean>(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 (
<BgCard
actionButtonLabel={t("continue")}
backButtonLabel={t("back")}
isActionButtonDisabled={isActionButtonDisabled}
onClickActionButton={createGovernanceAction}
onClickBackButton={onClickBack}
>
<Typography sx={{ textAlign: "center" }} variant="headline4">
{t("createGovernanceAction.storingInformationTitle")}
</Typography>
<Typography
fontWeight={400}
sx={{ mt: 1, textAlign: "center" }}
variant="body1"
>
{t("createGovernanceAction.storingInformationDescription")}
</Typography>
<Box sx={{ my: 4 }}>
<Step
// TODO: add onClick action when available
component={
<Button
onClick={onClickDowloadJson}
size="extraLarge"
sx={{ width: "fit-content" }}
>
{`${fileName}.jsonld`}
</Button>
}
label={t("createGovernanceAction.storingInformationStep1Label")}
stepNumber={1}
/>
<Spacer y={6} />
<Step
component={
<Button
endIcon={
<OpenInNewIcon
sx={{
color: "primary",
height: 17,
width: 17,
}}
/>
}
onClick={openGuideAboutStoringInformation}
size="extraLarge"
sx={{ width: "fit-content" }}
variant="text"
>
{t("createGovernanceAction.storingInformationStep2Link")}
</Button>
}
label={t("createGovernanceAction.storingInformationStep2Label")}
stepNumber={2}
/>
<Spacer y={6} />
<Step
component={
<ControlledField.Input
{...{ control, errors }}
name="storingURL"
placeholder={t(
"createGovernanceAction.storingInformationURLPlaceholder"
)}
/>
}
label={t("createGovernanceAction.storingInformationStep3Label")}
stepNumber={3}
/>
</Box>
</BgCard>
);
};
Original file line number Diff line number Diff line change
@@ -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<SetStateAction<number>>;
}) => {
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 (
<BgCard
actionButtonLabel={t("continue")}
isActionButtonDisabled={isContinueDisabled}
onClickActionButton={onClickContinue}
onClickBackButton={onClickBack}
>
<Typography sx={{ textAlign: "center" }} variant="headline4">
{t("createGovernanceAction.storeDataTitle")}
</Typography>
<Link
onClick={openLink}
sx={{
cursor: "pointer",
fontSize: 16,
fontWeight: 500,
fontFamily: "Poppins",
my: 4,
textAlign: "center",
textDecoration: "none",
}}
>
{t("createGovernanceAction.storeDataLink")}
</Link>
<ControlledField.Checkbox
{...{ control, errors }}
name="storeData"
label={t("createGovernanceAction.storeDataCheckboxLabel")}
/>
<Spacer y={isMobile ? 4 : 12.5} />
<Box display="flex" flex={1} />
</BgCard>
);
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export * from "./StorageInformation";
export * from "./StoreDataInfo";
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down Expand Up @@ -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, " ");
Expand Down
1 change: 1 addition & 0 deletions govtool/frontend/src/components/organisms/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
30 changes: 27 additions & 3 deletions govtool/frontend/src/hooks/forms/useCreateGovernanceActionForm.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => {
Expand All @@ -26,9 +30,28 @@ export const useCreateGovernanceActionForm = () => {
reset,
} = useFormContext<createGovernanceActionValues>();

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);
Expand All @@ -42,9 +65,10 @@ export const useCreateGovernanceActionForm = () => {
isLoading,
isValid,
setValue,
submitForm: handleSubmit(onSubmit),
createGovernanceAction: handleSubmit(onSubmit),
watch,
register,
reset,
generateJsonBody,
};
};
13 changes: 13 additions & 0 deletions govtool/frontend/src/i18n/locales/en.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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",
},
Expand Down
Loading

0 comments on commit 00e06d9

Please sign in to comment.