updating dependencies in prod

.github/workflows/main.yml

@@ -18,7 +18,7 @@ jobs:
         uses: actions/checkout@v4.1.7
 
       - name: Setup Node
-        uses: actions/setup-node@v4.0.2
+        uses: actions/setup-node@v4.0.3
         with:
           node-version: 21.4.0
 

client/package.json

@@ -3,25 +3,29 @@
   "proxy": "http://localhost:3001",
   "type": "module",
   "dependencies": {
-    "@mantine/core": "^6.0.8",
-    "@mantine/hooks": "^6.0.8",
-    "axios": "1.7.2",
+    "@mantine/core": "^7.12.2",
+    "@mantine/hooks": "^7.12.2",
+    "axios": "1.7.7",
     "bootstrap": "5.3.3",
     "html-react-parser": "^5.0.0",
     "react": "18.3.1",
-    "react-bootstrap": "2.10.2",
+    "react-bootstrap": "2.10.4",
     "react-device-detect": "^2.2.2",
     "react-dom": "18.3.1",
     "react-icons": "^5.0.0",
     "react-multi-carousel": "^2.8.2",
-    "react-router-dom": "6.23.1",
-
+    "react-router-dom": "6.26.2",
     "react-scripts": "^5.0.1",
     "react-select": "^5.7.0",
-    "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz"
+    "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz"
   },
   "overrides": {
-    "autoprefixer": "10.4.19"
+    "autoprefixer": ">=10.4.20",
+    "body-parser": ">=1.20.3",
+    "express": ">=4.21.0",
+    "path-to-regexp": ">=0.1.10",
+    "send": ">=0.19.0",
+    "serve-static": ">=1.16.0"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -42,8 +46,8 @@
     ]
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^14.0.0"
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^16.0.0"
   },
   "jest": {
     "moduleNameMapper": {

client/src/App.jsx

@@ -5,8 +5,10 @@ import {
   Route,
   Navigate
 } from "react-router-dom";
+import { MantineProvider } from '@mantine/core';
 
 import "./App.css";
+import '@mantine/core/styles.css'; // importing required mantine styles
 import "bootstrap/dist/css/bootstrap.min.css"; // importing required bootstrap styles
 
 import UserDataContext from "./UserDataContext.js";
@@ -100,13 +102,15 @@ const App = () => {
 
   return (
     <UserDataContext.Provider value={{ userData, setUserData }}>
-			<BrowserRouter>
-				<Layout>
-					<Suspense fallback={<LoadSpinner />}>
-						<DefinedRoutes />
-					</Suspense>
-				</Layout>
-			</BrowserRouter>
+      <MantineProvider>
+        <BrowserRouter>
+          <Layout>
+            <Suspense fallback={<LoadSpinner />}>
+              <DefinedRoutes />
+            </Suspense>
+          </Layout>
+        </BrowserRouter>
+      </MantineProvider>
 		</UserDataContext.Provider>
   );
 };

client/src/components/gacPage/EmailsAndRenewalButtons.jsx

@@ -55,7 +55,7 @@ export const EmailsAndRenewalButtons = ({ members }) => {
         label="Ver Emails de Sócios Regulares"
       >
         <Button
-          leftIcon={<MdEmail size="1.25em" />}
+          leftSection={<MdEmail size="1.25em" />}
           onClick={handleShowRegularEmails}
         >
           Sócios Regulares
@@ -68,7 +68,7 @@ export const EmailsAndRenewalButtons = ({ members }) => {
         label="Ver Emails de Sócios Eleitores"
       >
         <Button
-          leftIcon={<MdEmail size="1.25em" />}
+          leftSection={<MdEmail size="1.25em" />}
           onClick={handleShowRenewEmails}
         >
           Sócios Eleitores
@@ -82,7 +82,7 @@ export const EmailsAndRenewalButtons = ({ members }) => {
       >
         <Button
           color="red"
-          leftIcon={<MdAutorenew size="1.25em" />}
+          leftSection={<MdAutorenew size="1.25em" />}
           onClick={handleshowRenewMembers}
         >
           Renovações

client/src/components/gacPage/MembersRow.jsx

@@ -5,6 +5,7 @@ import {
   Avatar,
   Badge,
   Group,
+  Table,
   Text,
   Tooltip,
   Anchor,
@@ -25,10 +26,10 @@ const colorStatus = {
 
 export const memberRow = (members, collabs, handleMoreInfo) => {
   const rows = members?.map((member, index) => (
-    <tr key={member.username} className={style.tableClass} style={index % 2 === 1
+    <Table.Tr key={member.username} className={style.tableClass} style={index % 2 === 1
       ? { backgroundColor: "rgb(53, 209, 250,0.025)" }
       : { backgroundColor: "rgb(36, 139, 227,0.075)" }}>
-      <td style={{borderRadius: "1em 0 0 1em"}}>
+      <Table.Td style={{borderRadius: "1em 0 0 1em"}}>
         <Group spacing="md">
           <Avatar size={60} src={fenixPhoto(member.username)} radius={20} />
           <div>
@@ -56,16 +57,16 @@ export const memberRow = (members, collabs, handleMoreInfo) => {
             </Text>
           </div>
         </Group>
-      </td>
+      </Table.Td>
 
-      <td className={style.EmailTable}>
+      <Table.Td className={style.EmailTable}>
         <Anchor href={`mailto:${member.email}`} size="md">
           <Text fz="sm" fw={500}>
             {member.email}
           </Text>
         </Anchor>
-      </td>
-      <td>
+      </Table.Td>
+      <Table.Td>
         <Badge
           fullWidth
           size="lg"
@@ -76,9 +77,9 @@ export const memberRow = (members, collabs, handleMoreInfo) => {
         >
           {member.status.replace(/([A-Z])/g, " $1").trim()}
         </Badge>
-      </td>
-      <td style={{borderRadius: "0 1em 1em 0"}}>
-        <Group spacing={0} position="right">
+      </Table.Td>
+      <Table.Td style={{borderRadius: "0 1em 1em 0"}}>
+        <Group spacing={0} justify="center">
         <Tooltip
             position="top"
             withArrow
@@ -113,8 +114,8 @@ export const memberRow = (members, collabs, handleMoreInfo) => {
             </ActionIcon>
           </Tooltip>
         </Group>
-      </td>
-    </tr>
+      </Table.Td>
+    </Table.Tr>
   ));
 
   return rows;

client/src/components/gacPage/MembersTable.jsx

@@ -36,15 +36,15 @@ export function MembersTable({ members }) {
       />
       <ScrollArea>
         <Table verticalSpacing="sm">
-          <thead>
-            <tr>
-              <th>Nome</th>
-              <th className={style.EmailTable}>Email</th>
-              <th>Estado</th>
-              <th />
-            </tr>
-          </thead>
-          <tbody>{rows}</tbody>
+          <Table.Thead>
+            <Table.Tr>
+              <Table.Th>Nome</Table.Th>
+              <Table.Th className={style.EmailTable}>Email</Table.Th>
+              <Table.Th>Estado</Table.Th>
+              <Table.Th />
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>{rows}</Table.Tbody>
         </Table>
       </ScrollArea>
     </>

client/src/components/mantine/GradientSegmentedControl.jsx

@@ -1,33 +1,7 @@
-import { createStyles, SegmentedControl, rem } from '@mantine/core';
-
-const useStyles = createStyles((theme) => ({
-  root: {
-    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.white,
-    boxShadow: theme.shadows.md,
-    border: `${rem(1)} solid ${
-      theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[1]
-    }`,
-  },
-
-  indicator: {
-    backgroundImage: theme.fn.gradient({ from: 'var(--first-color)', to: 'var(--forth-color)' }),
-  },
-
-  control: {
-    border: '0 !important',
-  },
-
-  label: {
-    '&, &:hover': {
-      '&[data-active]': {
-        color: theme.white,
-      },
-    },
-  },
-}));
+import { SegmentedControl } from '@mantine/core';
+import classes from './GradientSegmentedControl.module.css';
 
 export function GradientSegmentedControl({ data, setValue }) {
-  const { classes } = useStyles();
   return (
     <SegmentedControl
       radius="xl"

client/src/components/mantine/GradientSegmentedControl.module.css

@@ -0,0 +1,28 @@
+.root {
+  background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-6));
+  box-shadow: var(--mantine-shadow-md);
+  border: rem(1px) solid light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-4));
+}
+
+.indicator {
+  background-image: linear-gradient(
+    to right,
+    #2863FD,
+    #5ee8fa
+  );
+}
+
+.control {
+  &::before {
+    display: none;
+  }
+}
+
+.label {
+  &,
+  &:hover {
+    &[data-active] {
+      color: var(--mantine-color-white);
+    }
+  }
+}

client/src/pages/GacPage.jsx

@@ -21,7 +21,7 @@ const GacPage = () => {
       variant="pills"
       color="gray"
       defaultValue="active"
-      onTabChange={setActiveTab}
+      onChange={setActiveTab}
     >
       <Tabs.List className={style.tabsList}>
         <Tabs.Tab style={{ fontWeight: "bold" }} value="active">

client/src/tests/integration/pages/MemberPage.test.jsx

@@ -1,10 +1,11 @@
 import "@testing-library/jest-dom";
-import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import { act } from "react";
 import { within } from "@testing-library/dom";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+
+import { electionsMock, userDataMock } from "../mockData/MemberPage";
 import MemberPage from "../../../pages/MemberPage";
 import UserDataContext from "../../../UserDataContext.js";
-import { act } from "react-dom/test-utils";
-import { electionsMock, userDataMock } from "../mockData/MemberPage";
 
 describe("MembersPage", () => {