Merge pull request #276 from IntersectMBO/feat/add-ipfs-link-on-const…

…itution-versions feature: Add ipfs link on Constitution versions
IntersectMBO · Aug 19, 2024 · 6ecbc70 · 6ecbc70
2 parents 8c7120d + 6875d92
commit 6ecbc70
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 7 deletions.
diff --git a/frontend/public/icons/ExternalLink.svg b/frontend/public/icons/ExternalLink.svg
diff --git a/frontend/src/components/organisms/Constitution/Constitution.tsx b/frontend/src/components/organisms/Constitution/Constitution.tsx
@@ -16,20 +16,22 @@ import {
 } from "./MDXComponents";
 import { ConstitutionMetadata, ConstitutionProps } from "../types";
 import { useTranslations } from "next-intl";
-import { useModal } from "@/context";
+import { useAppContext, useModal } from "@/context";
 import { Footer } from "../Footer";
 import { CONSTITUTION_SIDEBAR_TABS, customPalette } from "@consts";
 import { ContentWrapper } from "@/components/atoms";
 import { NotFound } from "../NotFound";
 import { PageTitleTabs } from "../PageTitleTabs";
+import { isAnyAdminRole } from "@utils";
 
 export function Constitution({ constitution, metadata }: ConstitutionProps) {
+  const { userSession } = useAppContext();
   const [isOpen, setIsOpen] = useState(true);
   const [tab, setTab] = useState("revisions");
   const { openModal } = useModal();
   const t = useTranslations("Constitution");
 
-  const onCompare = (target: Omit<ConstitutionMetadata, "version">) => {
+  const onCompare = (target: Omit<ConstitutionMetadata, "version" | "url">) => {
     openModal({
       type: "compareConstitutionModal",
       state: {
@@ -90,7 +92,7 @@ export function Constitution({ constitution, metadata }: ConstitutionProps) {
           {tab === "revisions" ? (
             <Grid item justifyContent="flex-end" px={{ xxs: 1, md: 0 }}>
               {metadata ? (
-                metadata.map(({ title, created_date, cid }) => {
+                metadata.map(({ title, created_date, cid, url }) => {
                   return (
                     <NavCard
                       onClick={() => {
@@ -106,6 +108,15 @@ export function Constitution({ constitution, metadata }: ConstitutionProps) {
                           ? t("drawer.latest")
                           : t("drawer.compare")
                       }
+                      url={
+                        userSession &&
+                        isAnyAdminRole(userSession?.role) &&
+                        userSession?.permissions.includes(
+                          "add_constitution_version"
+                        )
+                          ? url
+                          : null
+                      }
                       key={cid}
                     />
                   );

diff --git a/frontend/src/components/organisms/Constitution/MDXComponents.tsx b/frontend/src/components/organisms/Constitution/MDXComponents.tsx
@@ -4,6 +4,8 @@ import { getShortenedGovActionId } from "@utils";
 import { Button, CopyButton, Typography } from "@atoms";
 import { Box, Collapse, Grid } from "@mui/material";
 import React, { ReactNode } from "react";
+import Image from "next/image";
+import Link from "next/link";
 
 const Anchor = ({ id, offset = "-20vh " }) => {
   return (
@@ -203,19 +205,26 @@ export const NavDrawer = ({
   );
 };
 
-export const NavCard = ({ onClick, title, description, buttonLabel, hash }) => (
+export const NavCard = ({
+  onClick,
+  title,
+  description,
+  buttonLabel,
+  hash,
+  url,
+}) => (
   <Box mb={2}>
     <Card sx={{ px: 3, py: 2 }}>
       <Grid
         container
         justifyContent="space-between"
         alignItems={{ lg: "center" }}
       >
-        <Grid item xxs={6} lg={"auto"}>
+        <Grid item xxs={6} lg={4}>
           <Typography variant="body1">{title}</Typography>
           <Typography variant="caption">{description}</Typography>
         </Grid>
-        <Grid item xxs={6} lg="auto">
+        <Grid item xxs={6} lg={3}>
           <Box
             display="flex"
             alignItems={{ xxs: "center" }}
@@ -238,7 +247,28 @@ export const NavCard = ({ onClick, title, description, buttonLabel, hash }) => (
             </Box>
           </Box>
         </Grid>
-        <Grid item xxs={12} lg="auto" mt={{ xxs: 2, md: 0 }}>
+        {url && (
+          <Grid
+            item
+            xxs={6}
+            lg={2}
+            sx={{
+              display: "flex",
+              justifyContent: { xxs: "left", lg: "center" },
+            }}
+          >
+            <Link target="_blank" href={url} style={{ cursor: "pointer" }}>
+              <Image
+                alt="ipfs link"
+                src={ICONS.externalLink}
+                width={20}
+                height={20}
+              />
+            </Link>
+          </Grid>
+        )}
+
+        <Grid item xxs={12} lg={3} mt={{ xxs: 2, md: 0 }}>
           <Button
             sx={{ width: "100%" }}
             size="medium"

diff --git a/frontend/src/components/organisms/types.ts b/frontend/src/components/organisms/types.ts
@@ -14,6 +14,7 @@ export interface ConstitutionMetadata {
   title: string;
   version: string;
   created_date: string;
+  url: string;
 }
 
 export interface ConstitutionByCid {

diff --git a/frontend/src/constants/icons.ts b/frontend/src/constants/icons.ts
@@ -21,4 +21,5 @@ export const ICONS = {
   sortActive: "/icons/SortActive.svg",
   sortWhite: "/icons/SortWhite.svg",
   govAction: "/icons/GovAction.svg",
+  externalLink: "/icons/ExternalLink.svg",
 };