Fix resend route logic and integrate SVG plugin for React

client/package.json

@@ -10,7 +10,6 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@svgr/rollup": "^8.1.0",
     "bootstrap": "^5.3.3",
     "firebase": "^10.12.3",
     "react": "^18.3.1",
@@ -25,10 +24,12 @@
     "@firebase/app-types": "^0.9.3",
     "@firebase/auth-types": "^0.12.3",
     "@firebase/database-types": "^1.0.8",
+    "@svgr/rollup": "^8.1.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "vite": "^5.3.3",
-    "vite-plugin-env": "^1.0.1"
+    "vite-plugin-env": "^1.0.1",
+    "vite-plugin-svgr": "^4.3.0"
   }
 }

client/src/components/header-components/Auth.tsx

@@ -13,9 +13,9 @@ import ShowPassword from '@/components/reusable/ShowPassword';
 import { UserContext } from '@/App';
 import ButtonClose from '@/components/reusable/ButtonClose';
 import Backdrop from '@/components/reusable/Backdrop';
-import '@/styles/modal-auth.css';
 import { NavigateFunction, useNavigate } from 'react-router';
 import { forgotPasword, handleInputChange } from '@/utilities/utilities';
+import '@/styles/modal-auth.css';
 
 const Auth = () => {
   // Enseña o esconde el modal

client/src/components/reusable/ShowPassword.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { type ShowPasswordProps } from 'types/types';
-import '../../styles/show-password.css';
 import { handleInputChange } from '@/utilities/utilities';
+import '../../styles/show-password.css';
 
 const ShowPassword: React.FC<ShowPasswordProps> = ({ password, setID }) => {
   const [isPasswordVisible, setIsPasswordVisible] = useState(true);

client/src/components/svg-component/Edit.tsx

@@ -1,53 +1,21 @@
 import { useContext } from 'react';
 import { UserContext } from '@/App';
 import { type EditType } from 'types/types';
+import EditSVG from '@/assets/svg/edit.svg';
+import CheckSVG from '@/assets/svg/check.svg';
 
 const Edit: React.FC<EditType> = ({ event, index, state }) => {
   const user = useContext(UserContext);
 
   return (
     <>
-      {state && user ? (
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          width="20px"
-          height="20px"
-          strokeWidth="5"
-          stroke="#23e66ccf"
-          className="svgIcons"
-          onClick={() => {
-            event(index);
-          }}
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            d="m4.5 12.75 6 6 9-13.5"
-          />
-        </svg>
-      ) : (
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          strokeWidth="1.5"
-          width="20px"
-          height="20px"
-          stroke="currentColor"
-          className="svgIcons"
-          onClick={() => {
-            event(index);
-          }}
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"
-          />
-        </svg>
-      )}
+      <span
+        onClick={() => {
+          event(index);
+        }}
+      >
+        {state && user ? <CheckSVG /> : <EditSVG />}
+      </span>
     </>
   );
 };

client/src/components/svg-component/Exit.tsx

@@ -1,6 +1,7 @@
 import { useNavigate, Link } from 'react-router-dom';
 import { handleScroll } from '@/scripts/modal';
 import { type ChildrenType, type OptionalClass } from 'types/types';
+import ExitSVG from '@/assets/svg/exit.svg';
 
 const Exit: React.FC<ChildrenType & OptionalClass> = ({
   children,
@@ -16,20 +17,7 @@ const Exit: React.FC<ChildrenType & OptionalClass> = ({
   return (
     <Link to="#" id="exit" onClick={goBack}>
       <div className={`menu-section ${optionalClass}`}>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          strokeWidth="1.5"
-          stroke="currentColor"
-          className="svgIcons"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15M12 9l-3 3m0 0 3 3m-3-3h12.75"
-          />
-        </svg>
+        <ExitSVG />
         {children}
       </div>
     </Link>

client/src/components/svg-component/ImgUser.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import DefaultUser from '@/assets/svg/default-user.svg';
 
 function ImgUser({ photoURL }: { photoURL: string | null }) {
   const [imgError, setImgError] = useState(false);
@@ -13,22 +14,7 @@ function ImgUser({ photoURL }: { photoURL: string | null }) {
           className="img-user"
         />
       ) : (
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          strokeWidth="1.5"
-          stroke="currentColor"
-          className="profile-icon"
-          height="40px"
-          width="40px"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            d="M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
-          />
-        </svg>
+        <DefaultUser />
       )}
     </>
   );

client/src/components/svg-component/OptionsComment.tsx

@@ -4,6 +4,7 @@ import { useContext, useEffect, useState } from 'react';
 import toast from 'react-hot-toast';
 import Button from '../reusable/Button';
 import { isComment } from '@/utilities/utilities-types';
+import OtionsComentSVG from '@/assets//svg/options-coment.svg';
 import { type OptionsCommentProps } from 'types/types';
 
 const OptionsComment: React.FC<OptionsCommentProps> = ({
@@ -104,24 +105,9 @@ const OptionsComment: React.FC<OptionsCommentProps> = ({
         </div>
       )}
       <div id="options">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="20"
-          height="20"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="1"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          className="icon icon-tabler icons-tabler-outline icon-tabler-dots-vertical"
-          onClick={() => setShowModal(!showModal)}
-        >
-          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-          <path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
-          <path d="M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
-          <path d="M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
-        </svg>
+        <span onClick={() => setShowModal(!showModal)}>
+          <OtionsComentSVG />
+        </span>
         {/* Mostramos el input de cambio de comentario */}
         {showModal && (
           <div className="modal-content">

client/src/components/svg-component/ReplyToComment.tsx

@@ -1,4 +1,5 @@
 import toast from 'react-hot-toast';
+import CommentSVG from '@/assets/svg/comment.svg';
 import { type CommentOptionsProps } from 'types/types';
 
 const ReplyToComment: React.FC<CommentOptionsProps> = ({
@@ -13,24 +14,8 @@ const ReplyToComment: React.FC<CommentOptionsProps> = ({
 
   return (
     <>
-      <div id="response">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          onClick={handleResponse}
-          viewBox="0 0 24 24"
-          strokeWidth="1.3"
-          stroke="currentColor"
-          className="svgIcons"
-          width="20"
-          height="20"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155"
-          />
-        </svg>
+      <div id="response" onClick={handleResponse}>
+        <CommentSVG />
       </div>
     </>
   );

client/src/components/svg-component/Settings.tsx

@@ -1,5 +1,6 @@
 import { useNavigate } from 'react-router-dom';
 import { isLogged } from '@/scripts/oauth2-0';
+import SettingsSVG from '@/assets/svg/settings.svg';
 import toast from 'react-hot-toast';
 
 const Settings = ({ children }: { children?: React.ReactNode }) => {
@@ -15,24 +16,7 @@ const Settings = ({ children }: { children?: React.ReactNode }) => {
     <>
       <a href="/account" onClick={goToAccount}>
         <div className="menu-section">
-          {children ? (
-            children
-          ) : (
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="none"
-              strokeWidth="1.5"
-              stroke="currentColor"
-              className="svgIcons"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M10.5 6h9.75M10.5 6a1.5 1.5 0 1 1-3 0m3 0a1.5 1.5 0 1 0-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-9.75 0h9.75"
-              />
-            </svg>
-          )}
+          {children ? children : <SettingsSVG />}
         </div>
       </a>
     </>