Axios Dependency Update

.vscode/settings.json

@@ -0,0 +1,14 @@
+{
+  "sqltools.connections": [
+    {
+      "previewLimit": 50,
+      "server": "localhost",
+      "port": 5432,
+      "askForPassword": true,
+      "driver": "PostgreSQL",
+      "name": "NEIIST DATABASE",
+      "database": "neiist",
+      "username": "nelsontr"
+    }
+  ]
+}

README.md

@@ -94,20 +94,23 @@ To get a local copy up and running follow these simple example steps.
 
 <!-- This is an example of how to list things you need to use the software and how to install them. -->
 
-* NPM
+* **Node.js** (Version 21.4.0)
   ```sh
-  sudo apt install npm
+  sudo apt install nodejs
   ```
 
-* Node.js
+* **NPM** (Version 10.2.4)
   ```sh
-  sudo apt install nodejs
+  sudo apt install npm
   ```
 
-* PostgreSQL
+> ❗ You can also use Node Version Manager ([NVM](https://github.com/nvm-sh/nvm)) to install Node.js and NPM
+
+* **PostgreSQL**
   ```sh
   sudo apt install postgresql
   ```
+  ...or use Docker ([see below](?tab=readme-ov-file#alternative-docker-for-database))
 
 ### Installation
 
@@ -122,7 +125,7 @@ To get a local copy up and running follow these simple example steps.
    ```
 3. Clone the repo
    ```sh
-	cd folder-where-i-keep-my-repos/
+   cd folder-where-i-keep-my-repos/
    git clone https://github.com/neiist-dev/neiist-website.git
    ```
 4. Server: Install NPM packages

client/package.json

@@ -1,10 +1,11 @@
 {
   "name": "neiist-website-client",
   "proxy": "http://localhost:3001",
+  "type": "module",
   "dependencies": {
     "@mantine/core": "^6.0.8",
     "@mantine/hooks": "^6.0.8",
-    "axios": "0.27.2",
+    "axios": "1.6.0",
     "bootstrap": "5.3.2",
     "html-react-parser": "^3.0.12",
     "react": "18.2.0",
@@ -42,5 +43,10 @@
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0"
+  },
+  "jest": {
+    "moduleNameMapper": {
+      "axios": "axios/dist/node/axios.cjs"
+    }
   }
 }

client/src/App.jsx

@@ -9,23 +9,23 @@ import {
 import "./App.css";
 import "bootstrap/dist/css/bootstrap.min.css"; // importing required bootstrap styles
 
-import UserDataContext from "./UserDataContext";
-
-import Layout from "./components/Layout";
-import LoadSpinner from "./hooks/loadSpinner";
-
-const HomePage = lazy(() => import("./pages/HomePage"));
-const AboutPage = lazy(() => import("./pages/AboutPage"));
-const RulesPage = lazy(() => import("./pages/RulesPage"));
-const ContactsPage = lazy(() => import("./pages/ContactsPage"));
-const ThesisMasterPage = lazy(() => import("./pages/ThesisMasterPage"));
-const MemberPage = lazy(() => import("./pages/MemberPage"));
-const AdminMenuPage = lazy(() => import("./pages/AdminMenuPage"));
-const AdminAreasPage = lazy(() => import("./pages/AdminAreasPage"));
-const AdminThesesPage = lazy(() => import("./pages/AdminThesesPage"));
-const AdminElectionsPage = lazy(() => import("./pages/AdminElectionsPage"));
-const GacPage = lazy(() => import("./pages/GacPage"));
-const CollabsPage = lazy(() => import("./pages/CollabsPage"));
+import UserDataContext from "./UserDataContext.js";
+
+import Layout from "./components/Layout.jsx";
+import LoadSpinner from "./hooks/loadSpinner.jsx";
+
+const HomePage = lazy(() => import("./pages/HomePage.jsx"));
+const AboutPage = lazy(() => import("./pages/AboutPage.jsx"));
+const RulesPage = lazy(() => import("./pages/RulesPage.jsx"));
+const ContactsPage = lazy(() => import("./pages/ContactsPage.jsx"));
+const ThesisMasterPage = lazy(() => import("./pages/ThesisMasterPage.jsx"));
+const MemberPage = lazy(() => import("./pages/MemberPage.jsx"));
+const AdminMenuPage = lazy(() => import("./pages/AdminMenuPage.jsx"));
+const AdminAreasPage = lazy(() => import("./pages/AdminAreasPage.jsx"));
+const AdminThesesPage = lazy(() => import("./pages/AdminThesesPage.jsx"));
+const AdminElectionsPage = lazy(() => import("./pages/AdminElectionsPage.jsx"));
+const GacPage = lazy(() => import("./pages/GacPage.jsx"));
+const CollabsPage = lazy(() => import("./pages/CollabsPage.jsx"));
 
 const Error = ({ error, errorDescription }) => (
 	<>

client/src/components/Layout.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import NavBar from "./NavBar";
-import Footer from "./Footer";
+import NavBar from "./NavBar.jsx";
+import Footer from "./Footer.jsx";
 
 import '../App.css';
 

client/src/components/NavBar.jsx

@@ -3,7 +3,7 @@ import Navbar from "react-bootstrap/Navbar";
 import Nav from "react-bootstrap/Nav";
 import { Link } from "react-router-dom";
 import logo from "../images/neiist_logo.png";
-import UserDataContext from "../UserDataContext";
+import UserDataContext from "../UserDataContext.js";
 import { GoSignOut } from "react-icons/go";
 import {
 	summarizeName,
@@ -15,7 +15,7 @@ import { isMobile } from "react-device-detect";
 
 import style from "./css/NavBar.module.css";
 import { useEffect } from "react";
-import { fetchMemberStatus } from "../Api.service";
+import { fetchMemberStatus } from "../Api.service.js";
 
 const NavBar = () => {
   const { userData, setUserData } = useContext(UserDataContext);

client/src/components/aboutPage/OurTeamsDiv.jsx

@@ -8,7 +8,7 @@ import { VscFeedback } from 'react-icons/vsc';
 import React,{ lazy } from 'react';
 import { Button } from 'react-bootstrap';
 
-import { allTeamNames } from '../functions/collabsGeneral';
+import { allTeamNames } from '../functions/collabsGeneral.jsx';
 import style from '../../pages/css/AboutPage.module.css'
 
 const CreateTeamModal = lazy(() => import('./TeamModal'));

client/src/components/aboutPage/TeamModal.jsx

@@ -1,7 +1,7 @@
 import parse from 'html-react-parser';
 import { Modal } from 'react-bootstrap';
 import DivPersonCard from './CollabCard';
-import { getCollabImage } from '../functions/collabsGeneral';
+import { getCollabImage } from '../functions/collabsGeneral.jsx';
 
 import style from '../../pages/css/AboutPage.module.css'
 

client/src/components/collabs/ManageCollabs.jsx

@@ -9,18 +9,18 @@ import FloatingLabel from 'react-bootstrap/FloatingLabel';
 import Badge from 'react-bootstrap/Badge';
 import Button from 'react-bootstrap/Button';
 
-import axios from 'axios';
 import Select from 'react-select';
-import LoadSpinner from "../../hooks/loadSpinner";
+import LoadSpinner from "../../hooks/loadSpinner.jsx";
 import style from '../../pages/css/CollabsPage.module.css';
 
 import DivPersonCard from "./CollabCard";
 import { FcDownload } from 'react-icons/fc';
-import { summarizeName } from '../functions/dataTreatment';
-import { getCollabImage, allTeamNames } from "../functions/collabsGeneral";
-import { downloadCurrentCollabsFile } from '../functions/exportXLSX';
-import { fetchAllCollabs } from '../../Api.service';
+import { summarizeName } from '../functions/dataTreatment.jsx';
+import { getCollabImage, allTeamNames } from "../functions/collabsGeneral.jsx";
+import { downloadCurrentCollabsFile } from '../functions/exportXLSX.js';
+import { fetchAllCollabs } from '../../Api.service.js';
 
+import axios from 'axios';
 
 const ManageCollabs = ({ selectedKey }) => {
   const [allMembers, setAllMembers] = useState(null);

client/src/components/functions/collabsGeneral.jsx

@@ -1,4 +1,4 @@
-import { fenixPhoto, normalizeName } from './dataTreatment';
+import { fenixPhoto, normalizeName } from './dataTreatment.jsx';
 
 export const allTeamNames = {
   CEQ: "Controlo & Qualidade",

client/src/components/functions/exportXLSX.js

@@ -1,6 +1,6 @@
 import { utils as XLSXUtils, write as XLSXWrite } from 'xlsx';
-import { extendedTeamAndCoorNames } from './collabsGeneral';
-import { fetchActiveMembers, fetchAllCollabs, fetchAllMembers } from '../../Api.service';
+import { extendedTeamAndCoorNames } from './collabsGeneral.jsx';
+import { fetchActiveMembers, fetchAllCollabs, fetchAllMembers } from '../../Api.service.js';
 
 function s2ab(s) {
   const buf = new ArrayBuffer(s.length);

client/src/components/gacPage/AllMembersPage.jsx

@@ -1,12 +1,12 @@
 import React, { useState, useEffect } from "react";
-import LoadSpinner from '../../hooks/loadSpinner';
-import { MembersTable } from "./MembersTable";
+import LoadSpinner from '../../hooks/loadSpinner.jsx';
+import { MembersTable } from "./MembersTable.jsx";
 
 import style from '../../pages/css/GacPage.module.css';
 import { Button, Tooltip } from "@mantine/core";
-import { downloadAllMembersFile } from "../functions/exportXLSX";
+import { downloadAllMembersFile } from "../functions/exportXLSX.js";
 import { MdDownload } from "react-icons/md";
-import { fetchAllMembers } from "../../Api.service";
+import { fetchAllMembers } from "../../Api.service.js";
 
 export const AllMembersPage = ({ keySelected }) => {
   const [allMembers, setMembers] = useState(null);

client/src/components/gacPage/EmailsAndRenewalButtons.jsx

@@ -3,10 +3,10 @@ import { MdEmail, MdAutorenew, MdDownload } from "react-icons/md";
 import { Button, Tooltip } from "@mantine/core";
 
 import style from "../../pages/css/GacPage.module.css";
-import { CreateEmailsModal } from "./modals/EmailsModal";
-import { CreateRenewMembersModal } from "./modals/RenewMembersModal";
-import { downloadActiveMembersFile } from "../functions/exportXLSX";
-import useWindowSize from "../../hooks/useWindowSize";
+import { CreateEmailsModal } from "./modals/EmailsModal.jsx";
+import { CreateRenewMembersModal } from "./modals/RenewMembersModal.jsx";
+import { downloadActiveMembersFile } from "../functions/exportXLSX.js";
+import useWindowSize from "../../hooks/useWindowSize.jsx";
 
 export const EmailsAndRenewalButtons = ({ members }) => {
   const [showRenewMembers, setshowRenewMembers] = useState(false);

client/src/components/gacPage/MembersRow.jsx

@@ -13,7 +13,7 @@ import {
 } from "@mantine/core";
 
 import style from "../../pages/css/GacPage.module.css"
-import { fenixPhoto, summarizeName } from "../functions/dataTreatment";
+import { fenixPhoto, summarizeName } from "../functions/dataTreatment.jsx";
 
 const colorStatus = {
   NaoSocio: "dark",

client/src/components/gacPage/MembersTable.jsx

@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from "react";
 import { memberRow } from "./MembersRow";
 import { Table, ScrollArea } from "@mantine/core";
-import { CreateMoreInfoModal } from "./modals/InformationalModal";
+import { CreateMoreInfoModal } from "./modals/InformationalModal.jsx";
 
 import style from "../../pages/css/GacPage.module.css";
-import { fetchCollabsResume } from "../../Api.service";
+import { fetchCollabsResume } from "../../Api.service.js";
 
 export function MembersTable({ members }) {
   const [collabs, setCollabs] = useState(null);

client/src/components/gacPage/SearchMembers.jsx

@@ -1,13 +1,13 @@
 import { useEffect, useState } from "react";
-import { CreateEmailsModal } from "./modals/EmailsModal";
+import { CreateEmailsModal } from "./modals/EmailsModal.jsx";
 import { Badge, Button } from "@mantine/core";
 
-import LoadSpinner from "../../hooks/loadSpinner";
-import useWindowSize from "../../hooks/useWindowSize";
-import { CreateMoreInfoModal } from "./modals/InformationalModal";
+import LoadSpinner from "../../hooks/loadSpinner.jsx";
+import useWindowSize from "../../hooks/useWindowSize.jsx";
+import { CreateMoreInfoModal } from "./modals/InformationalModal.jsx";
 
 import style from "../../pages/css/GacPage.module.css";
-import { fetchAllMembers } from "../../Api.service";
+import { fetchAllMembers } from "../../Api.service.js";
 
 export const SearchMembers = ({ keySelected }) => {
 	const [allMembers, setMembers] = useState(null);

client/src/components/gacPage/modals/InformationalModal.jsx

@@ -4,9 +4,11 @@ import Form from "react-bootstrap/Form";
 import Button from "react-bootstrap/Button";
 
 import style from '../../../pages/css/GacPage.module.css';
-import { fenixPhoto } from "../../functions/dataTreatment";
-import LoadSpinner from "../../../hooks/loadSpinner";
-import { fetchMember } from "../../../Api.service";
+import { fenixPhoto } from "../../functions/dataTreatment.jsx";
+import LoadSpinner from "../../../hooks/loadSpinner.jsx";
+import { fetchMember } from "../../../Api.service.js";
+
+import axios from 'axios';
 
 export const CreateMoreInfoModal = ({ show, handleClose, username }) => {
   const [error, setError] = useState(null);

client/src/components/gacPage/modals/RenewMembersModal.jsx

@@ -3,14 +3,15 @@ import Button from 'react-bootstrap/Button';
 import Modal from "react-bootstrap/Modal";
 import Spinner from "react-bootstrap/Spinner";
 
-import axios from "axios";
 import {
   fenixPhoto,
   summarizeName,
-} from "../../functions/dataTreatment";
+} from "../../functions/dataTreatment.jsx";
 
 import style from '../../../pages/css/GacPage.module.css';
-import { fetchMemberRenewalNotifications } from "../../../Api.service";
+import { fetchMemberRenewalNotifications } from "../../../Api.service.js";
+
+import axios from 'axios';
 
 export const CreateRenewMembersModal = ({ show, handleClose, members }) => {
   var nonActiveEmails = "";

client/src/components/homepage/Activities.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
-import ActivityItem from './ActivityItem';
-import BlueWhiteBox from './BlueWhiteBox';
+import ActivityItem from './ActivityItem.jsx';
+import BlueWhiteBox from './BlueWhiteBox.jsx';
 
 import Carousel from 'react-multi-carousel';
 import 'react-multi-carousel/lib/styles.css';

client/src/components/homepage/Mission.jsx

@@ -1,4 +1,4 @@
-import BlueWhiteBox from './BlueWhiteBox';
+import BlueWhiteBox from './BlueWhiteBox.jsx';
 import style from '../../pages/css/HomePage.module.css'
 
 const Mission = () => {

client/src/components/homepage/Objectives.jsx

@@ -1,5 +1,5 @@
-import BlueWhiteBox from './BlueWhiteBox';
-import ObjectiveItem from './ObjectiveItem';
+import BlueWhiteBox from './BlueWhiteBox.jsx';
+import ObjectiveItem from './ObjectiveItem.jsx';
 import style from '../../pages/css/HomePage.module.css'
 
 const Objectives = () => {

client/src/pages/AboutPage.jsx

@@ -1,19 +1,19 @@
 import React, { useState, useEffect, lazy } from "react";
 
 import { BsQuestionLg } from "react-icons/bs";
-import LoadSpinner from "../hooks/loadSpinner";
+import LoadSpinner from "../hooks/loadSpinner.jsx";
 
 import allMembers from "../images/colaboradores/all.png";
-import { getCollabImage } from "../components/functions/collabsGeneral";
+import { getCollabImage } from "../components/functions/collabsGeneral.jsx";
 
-const OurTeamsDiv = lazy(() => import("../components/aboutPage/OurTeamsDiv"));
-const DivPersonCard = lazy(() => import("../components/aboutPage/CollabCard"));
+const OurTeamsDiv = lazy(() => import("../components/aboutPage/OurTeamsDiv.jsx"));
+const DivPersonCard = lazy(() => import("../components/aboutPage/CollabCard.jsx"));
 
 import "./../App.css";
 import style from "./css/AboutPage.module.css";
 import collabs from "../images/colaboradores/collaborators.json";
-import { normalizeJob } from "../components/functions/dataTreatment";
-import { fetchCollabsResume } from "../Api.service";
+import { normalizeJob } from "../components/functions/dataTreatment.jsx";
+import { fetchCollabsResume } from "../Api.service.js";
 
 const lectiveYear = collabs.anoLetivo;
 

client/src/pages/AdminAreasPage.jsx

@@ -1,11 +1,12 @@
 import React, { useState, useEffect } from 'react';
-import LoadSpinner from "../hooks/loadSpinner";
+import LoadSpinner from "../hooks/loadSpinner.jsx";
 import Button from 'react-bootstrap/Button';
 import Modal from 'react-bootstrap/Modal';
 import Card from 'react-bootstrap/Card';
 import Form from 'react-bootstrap/Form';
+import { fetchThesisAreas } from '../Api.service.js';
+
 import axios from 'axios';
-import { fetchThesisAreas } from '../Api.service';
 
 const AdminAreasPage = () => (
   <>

client/src/pages/AdminElectionsPage.jsx

@@ -1,11 +1,12 @@
 import React, { useState, useEffect } from 'react';
-import LoadSpinner from "../hooks/loadSpinner";
+import LoadSpinner from "../hooks/loadSpinner.jsx";
 import Button from 'react-bootstrap/Button';
 import Modal from 'react-bootstrap/Modal';
 import Card from 'react-bootstrap/Card';
 import Form from 'react-bootstrap/Form';
+import { fetchAdminElections } from '../Api.service.js';
+
 import axios from 'axios';
-import { fetchAdminElections } from '../Api.service';
 
 const AdminElectionsPage = () => (
   <>