Skip to content

Commit

Permalink
Merge pull request #135 from IntersectMBO/feature/my-actions-page-UI
Browse files Browse the repository at this point in the history
Feature: My actions page UI and mocked data
  • Loading branch information
Kristina2103 authored Jun 21, 2024
2 parents a5279f0 + fdf238f commit bc13e4f
Show file tree
Hide file tree
Showing 32 changed files with 1,087 additions and 269 deletions.
24 changes: 21 additions & 3 deletions frontend/messages/de.json
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,19 @@
"notAvailable": "Not Available"
},
"MyActions": {
"title": "My Actions",
"actionTitle": "Manage"
"myVotesTab": "My Votes",
"gaTab": "Governance Actions",
"actionTitle": "Show more"
},
"GovernanceActions": {
"govAction": "Governance Action",
"govActionCategoryShort": "GA Category",
"status": "Status",
"abstract": "Abstract",
"actionTitle": "Show more",
"notAvailable": "Not Available",
"addReasoning": "Add Reasoning",
"updateReasoning": "Update Reasoning"
},
"Navigation": {
"addNewMember": "Add new member",
Expand Down Expand Up @@ -198,6 +209,9 @@
"heading": "Submission Date",
"paragraphOne": "The date when the governance action was submitted on-chain."
}
},
"alerts": {
"errorFetchingData": "Error fetching governance action data"
}
},
"govActionModal": {
Expand All @@ -219,11 +233,15 @@
},
"myActions": {
"title": "No votes found",
"description": "There is currently no actions. Please check back later for updates"
"description": "There is currently no votes. Please check back later for updates"
},
"constitution": {
"title": "No Constitution available",
"description": "There is currently no Constitution uploaded. Please check back later for updates"
},
"governanceAction": {
"title": "No governance actions available",
"description": "There is currently no governance actions. Please check back later for updates"
}
},
"Snackbar": {
Expand Down
24 changes: 21 additions & 3 deletions frontend/messages/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,19 @@
"notAvailable": "Not Available"
},
"MyActions": {
"title": "My Actions",
"actionTitle": "Manage"
"myVotesTab": "My Votes",
"gaTab": "Governance Actions",
"actionTitle": "Show more"
},
"GovernanceActions": {
"govAction": "Governance Action",
"govActionCategoryShort": "GA Category",
"status": "Status",
"abstract": "Abstract",
"actionTitle": "Show more",
"notAvailable": "Not Available",
"addReasoning": "Add Reasoning",
"updateReasoning": "Update Reasoning"
},
"Navigation": {
"addNewMember": "Add new member",
Expand Down Expand Up @@ -198,6 +209,9 @@
"heading": "Submission Date",
"paragraphOne": "The date when the governance action was submitted on-chain."
}
},
"alerts": {
"errorFetchingData": "Error fetching governance action data"
}
},
"govActionModal": {
Expand All @@ -219,11 +233,15 @@
},
"myActions": {
"title": "No votes found",
"description": "There is currently no actions. Please check back later for updates"
"description": "There is currently no votes. Please check back later for updates"
},
"constitution": {
"title": "No Constitution available",
"description": "There is currently no Constitution uploaded. Please check back later for updates"
},
"governanceAction": {
"title": "No governance actions available",
"description": "There is currently no governance actions. Please check back later for updates"
}
},
"Snackbar": {
Expand Down
4 changes: 4 additions & 0 deletions frontend/public/icons/GovAction.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
35 changes: 35 additions & 0 deletions frontend/src/app/[locale]/governance-actions/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import React, { Suspense } from "react";

import { unstable_setRequestLocale } from "next-intl/server";
import { Footer, TopNav, GovernanceActions } from "@organisms";
import { Loading } from "@molecules";
import { decodeUserToken, getGovernanceActions } from "@/lib/api";
import { ContentWrapper } from "@atoms";

export default async function GovernanceActionsPage({
params: { locale },
searchParams,
}) {
unstable_setRequestLocale(locale); // Sets the locale for the request. Use cautiously due to its unstable nature.
const user = await decodeUserToken();

const actions = await getGovernanceActions({
search: searchParams?.search,
govActionType: searchParams?.govActionType,
status: searchParams?.status,
sortBy: searchParams?.sortBy,
userId: user?.userId,
});

return (
<main>
<TopNav />
<ContentWrapper>
<Suspense fallback={<Loading />}>
<GovernanceActions actions={actions} />
</Suspense>
</ContentWrapper>
<Footer />
</main>
);
}
13 changes: 11 additions & 2 deletions frontend/src/app/[locale]/my-actions/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,20 @@ import { Loading } from "@molecules";
import { decodeUserToken, getUserVotes } from "@/lib/api";
import { ContentWrapper } from "@atoms";

export default async function MyActionsPage({ params: { locale } }) {
export default async function MyActionsPage({
params: { locale },
searchParams,
}) {
unstable_setRequestLocale(locale); // Sets the locale for the request. Use cautiously due to its unstable nature.
const user = await decodeUserToken();

const userActions = await getUserVotes(user.userId);
const userActions = await getUserVotes({
search: searchParams?.search,
govActionType: searchParams?.govActionType,
vote: searchParams?.vote,
sortBy: searchParams?.sortBy,
userId: user?.userId,
});

return (
<main>
Expand Down
49 changes: 49 additions & 0 deletions frontend/src/components/atoms/GovActionStatusPill.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import { Box, Typography } from "@mui/material";
import { GovActionStatus } from "../organisms";

export const GovActionStatusPill = ({
status,
width,
maxWidth,
}: {
status: GovActionStatus;
width?: number;
maxWidth?: number;
}) => {
const STATUS = status.toLowerCase();
return (
<Box
py={0.75}
px={2.25}
border={1}
borderColor={
STATUS === "voted"
? "#C0E4BA"
: STATUS === "unvoted"
? "#EDACAC"
: "#99ADDE"
}
bgcolor={
STATUS === "voted"
? "#F0F9EE"
: STATUS === "unvoted"
? "#FBEBEB"
: "#E6EBF7"
}
borderRadius={100}
textAlign="center"
minWidth="50px"
maxWidth={maxWidth ? `${maxWidth}px` : "auto"}
width={width ? `${width}px` : "auto"}
>
<Typography
textTransform="uppercase"
fontSize={12}
fontWeight={400}
lineHeight="16px"
>
{status}
</Typography>
</Box>
);
};
1 change: 1 addition & 0 deletions frontend/src/components/atoms/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,5 +22,6 @@ export * from "./VotePill";
export * from "./OutlinedLightButton";
export * from "./ClickOutside";
export * from "./ContentWrapper";
export * from "./GovActionStatusPill";

export * from "./types";
1 change: 1 addition & 0 deletions frontend/src/components/atoms/modal/ModalWrapper.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ export const BaseWrapper = styled("div")<{
}>`
box-shadow: 1px 2px 11px 0px #00123d5e;
max-height: 90vh;
min-height: 200px;
position: absolute;
top: 50%;
left: 50%;
Expand Down
5 changes: 4 additions & 1 deletion frontend/src/components/molecules/DataActionsBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { GovernanceActionsFilters, GovernanceActionsSorting } from "@molecules";
import { ClickOutside } from "@atoms";

import { OrderActionsChip } from "./OrderActionsChip";
import { FilterItem } from "./types";
import { FilterItem, FilterItems } from "./types";

type DataActionsBarProps = {
chosenFilters?: Record<string, string[]>;
Expand All @@ -24,6 +24,7 @@ type DataActionsBarProps = {
sortingActive: boolean;
sortOpen: boolean;
sortOptions: FilterItem[];
filterOptions?: Record<string, FilterItems>;
};

export const DataActionsBar: FC<DataActionsBarProps> = ({ ...props }) => {
Expand All @@ -43,6 +44,7 @@ export const DataActionsBar: FC<DataActionsBarProps> = ({ ...props }) => {
sortingActive,
sortOpen,
sortOptions,
filterOptions,
} = props;

return (
Expand All @@ -64,6 +66,7 @@ export const DataActionsBar: FC<DataActionsBarProps> = ({ ...props }) => {
<GovernanceActionsFilters
chosenFilters={chosenFilters}
setChosenFilters={setChosenFilters}
filterOptions={filterOptions}
/>
</ClickOutside>
)}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,19 @@ import {
Typography,
} from "@mui/material";

import { GOVERNANCE_ACTIONS_FILTERS } from "@consts";
import { useTranslations } from "next-intl";
import { FilterItems } from "./types";

interface Props {
chosenFilters: Record<string, string[]>;
setChosenFilters: Dispatch<SetStateAction<Record<string, string[]>>>;
filterOptions: Record<string, FilterItems>;
}

export const GovernanceActionsFilters = ({
chosenFilters,
setChosenFilters,
filterOptions,
}: Props) => {
const t = useTranslations();

Expand Down Expand Up @@ -68,7 +70,7 @@ export const GovernanceActionsFilters = ({
{t("Filters.clear")}
</Typography>
</Box>
{Object.values(GOVERNANCE_ACTIONS_FILTERS).map((filter) => {
{Object.values(filterOptions).map((filter) => {
return (
<Box>
<FormLabel
Expand Down
54 changes: 28 additions & 26 deletions frontend/src/components/molecules/Reasoning.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export const Reasoning = ({ title, description, link, hash }: ReasoningI) => {
const t = useTranslations("GovernanceAction");

return (
<Box display="flex" flexDirection="column" gap={1}>
<Box display="flex" flexDirection="column" gap={2}>
<Typography variant="body2" color={customPalette.neutralGray}>
{title}
</Typography>
Expand All @@ -22,32 +22,34 @@ export const Reasoning = ({ title, description, link, hash }: ReasoningI) => {
>
{description}
</Typography>
<Box display="flex" gap={2}>
<Box display="flex" flexDirection="column" gap={0.5}>
<Typography
variant="caption"
fontWeight={500}
color={customPalette.neutralGray}
>
{t("Link")}
</Typography>
<OutlinedLightButton nonInteractive={true}>
{link}
</OutlinedLightButton>
{link && hash && (
<Box display="flex" gap={2}>
<Box display="flex" flexDirection="column" gap={0.5}>
<Typography
variant="caption"
fontWeight={500}
color={customPalette.neutralGray}
>
{t("Link")}
</Typography>
<OutlinedLightButton nonInteractive={true}>
{link}
</OutlinedLightButton>
</Box>
<Box display="flex" flexDirection="column" gap={0.5}>
<Typography
variant="caption"
fontWeight={500}
color={customPalette.neutralGray}
>
{t("Hash")}
</Typography>
<OutlinedLightButton nonInteractive={true}>
{hash}
</OutlinedLightButton>
</Box>
</Box>
<Box display="flex" flexDirection="column" gap={0.5}>
<Typography
variant="caption"
fontWeight={500}
color={customPalette.neutralGray}
>
{t("Hash")}
</Typography>
<OutlinedLightButton nonInteractive={true}>
{hash}
</OutlinedLightButton>
</Box>
</Box>
)}
</Box>
);
};
2 changes: 1 addition & 1 deletion frontend/src/components/molecules/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ export interface FilterItem {
key: string;
label: string;
}
export interface GovernanceActionFilterItems {
export interface FilterItems {
key: string;
title: string;
items: FilterItem[];
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import React from "react";
import { Grid } from "@mui/material";
import { GovernanceActionTableI } from "../types";
import { GovActionTableRow } from "./GovActionTableRow";

interface Props {
govActions: GovernanceActionTableI[];
}

export const GovActionTable = ({ govActions }: Props) => {
return (
<Grid container direction="column" gap={0}>
{govActions.map((data, index) => {
return (
<Grid
key={index}
item
data-testid={`governance-actions-${data.gov_action_proposal_id}-card`}
>
<GovActionTableRow govActions={data} />
</Grid>
);
})}
</Grid>
);
};
Loading

0 comments on commit bc13e4f

Please sign in to comment.