chore: develop-to-staging-19122024 (#515)

* fix: Fixed VH button and add new member button positon * chore: small fix * feat: Changed position of the AddNewMember Button * feat/ipfs-volume * volume * feat: Changed title Latest Updates to Voting Updates * feat: Changed naming of latest updates to voting updates --------- Co-authored-by: MGukic <[email protected]> Co-authored-by: MGukic <[email protected]> Co-authored-by: nike-getto <[email protected]> Co-authored-by: Sava Stanisic <[email protected]>
IntersectMBO · Dec 19, 2024 · d4ff599 · d4ff599
1 parent 6088b01
commit d4ff599
Show file tree

Hide file tree

Showing 18 changed files with 197 additions and 200 deletions.
diff --git a/docker-compose.yaml b/docker-compose.yaml
@@ -39,7 +39,7 @@ services:
       - "5001:5001"
       - "8080:8080"
     volumes:
-      - ipfs_data:/ipfs/datastore
+      - ipfs_data:/app/ipfs/
     networks:
       - bloxico_local
     extra_hosts:

diff --git a/frontend/messages/de.json b/frontend/messages/de.json
@@ -27,11 +27,11 @@
     "addNewMember": "Add new member",
     "card": {
       "joined": "Joined",
-      "latestUpdates": "Latest updates"
+      "votingUpdates": "Voting updates"
     }
   },
-  "LatestUpdates": {
-    "title": "Latest Updates",
+  "VotingUpdates": {
+    "title": "Voting Updates",
     "govAction": "Governance Action",
     "govActionCategoryShort": "GA Category",
     "voted": "Voted",
@@ -285,7 +285,7 @@
       "title": "No members found",
       "description": "There are currently no members. Please check back later for updates"
     },
-    "latestUpdates": {
+    "votingUpdates": {
       "title": "No votes found",
       "description": "There are currently no votes. Please check back later for updates"
     },

diff --git a/frontend/messages/en.json b/frontend/messages/en.json
@@ -27,11 +27,11 @@
     "addNewMember": "Add new member",
     "card": {
       "joined": "Joined",
-      "latestUpdates": "Latest updates"
+      "votingUpdates": "Voting updates"
     }
   },
-  "LatestUpdates": {
-    "title": "Latest Updates",
+  "VotingUpdates": {
+    "title": "Voting Updates",
     "govAction": "Governance Action",
     "govActionCategoryShort": "GA Category",
     "voted": "Voted",
@@ -285,7 +285,7 @@
       "title": "No members found",
       "description": "There are currently no members. Please check back later for updates"
     },
-    "latestUpdates": {
+    "votingUpdates": {
       "title": "No votes found",
       "description": "There are currently no votes. Please check back later for updates"
     },

diff --git a/.../src/app/[locale]/latest-updates/page.tsx → .../src/app/[locale]/voting-updates/page.tsx b/.../src/app/[locale]/latest-updates/page.tsx → .../src/app/[locale]/voting-updates/page.tsx
@@ -1,39 +1,39 @@
 import React, { Suspense } from "react";
 
 import { unstable_setRequestLocale } from "next-intl/server"; // Import function to set the request-specific locale (unstable API).
-import { Footer, LatestUpdates, NotFound, TopNav } from "@organisms";
+import { Footer, VotingUpdates, NotFound, TopNav } from "@organisms";
 import { Loading } from "@molecules";
-import { getLatestUpdates } from "@/lib/api";
+import { getVotingUpdates } from "@/lib/api";
 import { isEmpty, isResponseErrorI } from "@utils";
 import { ContentWrapper } from "@atoms";
 
-export default async function LatestUpdatesPage({
+export default async function VotingUpdatesPage({
   params: { locale },
   searchParams,
 }) {
   unstable_setRequestLocale(locale); // Sets the locale for the request. Use cautiously due to its unstable nature.
-  const latestUpdates = await getLatestUpdates({
+  const votingUpdates = await getVotingUpdates({
     search: searchParams?.search,
     govActionType: searchParams?.govActionType,
     vote: searchParams?.vote,
     sortBy: searchParams?.sortBy,
   });
-  const hasError = isResponseErrorI(latestUpdates);
+  const hasError = isResponseErrorI(votingUpdates);
   return (
     <>
       <TopNav />
       <ContentWrapper>
         <Suspense fallback={<Loading />}>
-          {(isEmpty(latestUpdates) || hasError) && isEmpty(searchParams) ? (
+          {(isEmpty(votingUpdates) || hasError) && isEmpty(searchParams) ? (
             <NotFound
-              title="latestUpdates.title"
-              description="latestUpdates.description"
+              title="votingUpdates.title"
+              description="votingUpdates.description"
             />
           ) : (
-            <LatestUpdates
-              latestUpdates={!hasError && latestUpdates?.data}
-              paginationMeta={!hasError && latestUpdates?.meta}
-              error={hasError && latestUpdates.error}
+            <VotingUpdates
+              votingUpdates={!hasError && votingUpdates?.data}
+              paginationMeta={!hasError && votingUpdates?.meta}
+              error={hasError && votingUpdates.error}
             />
           )}
         </Suspense>

diff --git a/frontend/src/components/organisms/Constitution/Constitution.tsx b/frontend/src/components/organisms/Constitution/Constitution.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { ContentWrapper, Typography } from "@/components/atoms";
+import { Button, ContentWrapper, Typography } from "@/components/atoms";
 import { customPalette, IMAGES } from "@consts";
 import { useScreenDimension } from "@hooks";
 import { Box, Grid, IconButton } from "@mui/material";
@@ -20,16 +20,21 @@ import {
   ListItem,
   NavDrawerDesktop,
   Paragraph,
-  TABLE_OF_CONTENTS_WRAPPER_STYLE_PROPS
+  TABLE_OF_CONTENTS_WRAPPER_STYLE_PROPS,
 } from "./MDXComponents";
 import { TocAccordion } from "./TOCAccordion";
 import TOCLink from "./TOCLink";
+import PermissionChecker from "../PermissionChecker";
+import { useAppContext, useModal } from "@/context";
 
 export function Constitution({ constitution, metadata }: ConstitutionProps) {
   const { screenWidth } = useScreenDimension();
   const [isOpen, setIsOpen] = useState(false);
   const isMobile = screenWidth < 1025;
   const t = useTranslations("Constitution");
+  const { userSession } = useAppContext();
+  const { openModal } = useModal();
+  const uploadConstitution = () => openModal({ type: "uploadConstitution" });
 
   const onTOCLinkClick = () => {
     if (isMobile) {
@@ -72,7 +77,7 @@ export function Constitution({ constitution, metadata }: ConstitutionProps) {
         return <TOCLink {...props} callback={onTOCLinkClick} />;
       }
       return <a {...props} />;
-    }
+    },
   };
 
   return (
@@ -102,13 +107,27 @@ export function Constitution({ constitution, metadata }: ConstitutionProps) {
                 bgcolor={customPalette.bgWhite}
               >
                 <Typography variant="headline4">{t("title")}</Typography>
+                <PermissionChecker
+                  permissions={userSession?.permissions}
+                  requiredPermission="add_constitution_version"
+                >
+                  <Button
+                    variant="contained"
+                    size="extraLarge"
+                    type="submit"
+                    onClick={uploadConstitution}
+                    data-testid="admin-top-nav-upload-constitution-button"
+                  >
+                    {t("drawer.uploadNewVersion")}
+                  </Button>
+                </PermissionChecker>
                 <IconButton
                   data-testid="open-constitution-drawer-button"
                   onClick={() => setIsOpen(true)}
                   sx={{
                     bgcolor: customPalette.arcticWhite,
                     display: { xxs: "flex", lg: "none" },
-                    justifyContent: "center"
+                    justifyContent: "center",
                   }}
                 >
                   <img src={IMAGES.docSearch} />

diff --git a/frontend/src/components/organisms/Constitution/MDXComponents.tsx b/frontend/src/components/organisms/Constitution/MDXComponents.tsx
@@ -8,7 +8,6 @@ import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { ReactNode } from "react";
-import PermissionChecker from "../PermissionChecker";
 
 const Anchor = ({ id, offset = "-20vh " }) => {
   return (
@@ -18,7 +17,7 @@ const Anchor = ({ id, offset = "-20vh " }) => {
         display: "block",
         position: "relative",
         top: offset,
-        visibility: "hidden"
+        visibility: "hidden",
       }}
     />
   );
@@ -38,7 +37,7 @@ export const Heading1 = ({ children, id }) => (
         marginTop: "24px",
         marginBottom: "16px",
         lineHeight: "1.25em",
-        fontSize: { xxs: 20, md: 32 }
+        fontSize: { xxs: 20, md: 32 },
       }}
       variant="headline4"
     >
@@ -57,7 +56,7 @@ export const Heading2 = ({ children, id }) => (
         fontWeight: 600,
         fontSize: { xxs: 16, md: 20 },
 
-        lineHeight: "1.25em"
+        lineHeight: "1.25em",
       }}
     >
       {children}
@@ -74,7 +73,7 @@ export const Heading3 = ({ children, id }) => (
         marginBottom: "16px",
         fontWeight: 600,
         fontSize: { xxs: 14, md: 18 },
-        lineHeight: "1.25em"
+        lineHeight: "1.25em",
       }}
     >
       {children}
@@ -91,7 +90,7 @@ export const Heading5 = ({ children }) => (
       fontWeight: 800,
       fontSize: { xxs: 12, md: 14 },
       lineHeight: "1em",
-      overflowWrap: "break-word"
+      overflowWrap: "break-word",
     }}
   >
     {children}
@@ -105,7 +104,7 @@ export const Paragraph = ({ children, id }) => (
         lineHeight: "1.5",
         marginBottom: "16px",
         fontSize: "14px",
-        color: customPalette.textGray
+        color: customPalette.textGray,
       }}
       variant="caption"
     >
@@ -124,7 +123,7 @@ export const ListItem = ({ children, id }) => (
       flexDirection: "column",
       alignItems: "flex-start",
       justifyContent: "center",
-      wordBreak: "break-all"
+      wordBreak: "break-all",
     }}
   >
     {children}
@@ -140,7 +139,7 @@ export const Code = ({ children }) => (
       margin: 0,
       whiteSpace: "break-spaces",
       backgroundColor: "#afb8c133",
-      borderRadius: "6px"
+      borderRadius: "6px",
     }}
   >
     {children}
@@ -152,20 +151,20 @@ export const TABLE_OF_CONTENTS_WRAPPER_STYLE_PROPS = {
   borderRadius: "16px",
   padding: "12px",
   "& ol.toc-level": {
-    margin: 0
+    margin: 0,
   },
   "& ol.toc-level-1": {
     paddingInlineStart: "20px",
 
     "& li": {
       listStyle: "outside !important",
       "& a.toc-link-h1": {
-        fontWeight: 600
-      }
-    }
+        fontWeight: 600,
+      },
+    },
   },
   "& ol.toc-level-2": {
-    margin: "10px 0px 10px 0px"
+    margin: "10px 0px 10px 0px",
   },
   "& li": {
     width: "100%",
@@ -176,9 +175,9 @@ export const TABLE_OF_CONTENTS_WRAPPER_STYLE_PROPS = {
       fontSize: "1rem",
       fontWeight: 400,
       lineHeight: "56px",
-      color: customPalette.textBlack
-    }
-  }
+      color: customPalette.textBlack,
+    },
+  },
 };
 export const DrawerNav = () => {
   const t = useTranslations("Constitution");
@@ -193,26 +192,9 @@ export const DrawerNav = () => {
   const buttonEndIcon = pathname.includes(PATHS.versionHistory)
     ? ICONS.arrowLeft
     : ICONS.documentSearch;
-  const { openModal } = useModal();
-  const { userSession } = useAppContext();
-  const uploadConstitution = () => openModal({ type: "uploadConstitution" });
-  return (
-    <Grid container direction="column" gap={1} p={2}>
-      <PermissionChecker
-        permissions={userSession?.permissions}
-        requiredPermission="add_constitution_version"
-      >
-        <Button
-          variant="contained"
-          size="extraLarge"
-          type="submit"
-          onClick={uploadConstitution}
-          data-testid="admin-top-nav-upload-constitution-button"
-        >
-          {t("drawer.uploadNewVersion")}
-        </Button>
-      </PermissionChecker>
 
+  return (
+    <Grid container direction="column" p={0} pt={1.5} px={2} marginTop="auto">
       <Link href={linkPath}>
         <Button fullWidth variant="outlined">
           <img src={buttonEndIcon} style={{ marginRight: 8 }} />
@@ -226,7 +208,7 @@ export const NavDrawerDesktop = ({
   children,
   left = 0,
   top = { xxs: 75, md: 90 },
-  dataTestId
+  dataTestId,
 }: {
   children: ReactNode;
   left: number;
@@ -247,17 +229,19 @@ export const NavDrawerDesktop = ({
         borderRadius: "16px",
         height: { xxs: "95vh", md: "calc(100vh - 118px)" },
         zIndex: 1,
-        ...TABLE_OF_CONTENTS_WRAPPER_STYLE_PROPS
+        display: "flex",
+        flexDirection: "column",
+        ...TABLE_OF_CONTENTS_WRAPPER_STYLE_PROPS,
       }}
     >
       <Box
         sx={{
-          height: { xxs: "90vh", md: "calc(100vh - 250px)" },
+          height: { xxs: "90vh", md: "calc(100vh - 150px)" },
           overflowY: "scroll",
           borderRadiusTop: "16px 16px 0 0",
           "&::-webkit-scrollbar": {
-            display: "none"
-          }
+            display: "none",
+          },
         }}
         data-testid="nav-drawer-collapse-container"
       >
@@ -275,7 +259,7 @@ export const NavCard = ({
   hash,
   url,
   isActive,
-  isLatest
+  isLatest,
 }) => {
   return (
     <Grid
@@ -335,7 +319,7 @@ export const NavCard = ({
           sx={{
             display: "flex",
             justifyContent: "center",
-            alignItems: "center"
+            alignItems: "center",
           }}
         >
           <Link
@@ -360,7 +344,7 @@ export const NavCard = ({
         sx={{
           display: "flex",
           justifyContent: "center",
-          alignItems: "center"
+          alignItems: "center",
         }}
       >
         {!isActive && !isLatest && (

diff --git a/frontend/src/components/organisms/MembersCard/MembersCard.tsx b/frontend/src/components/organisms/MembersCard/MembersCard.tsx
@@ -108,7 +108,7 @@ export const MembersCard = ({
           data-testid={`members-${id}-latest-updates`}
           endIcon={<img src={ICONS.arrowUpRight} />}
         >
-          {t("card.latestUpdates")}
+          {t("card.votingUpdates")}
         </Button>
         */}
       </Box>