Hotfix no deploy do frontend

.github/playbooks/cd.yml

@@ -146,4 +146,6 @@
       become: true
       ansible.builtin.shell:
         cmd: |
-          docker compose --project-directory {{ repo_root }} up -d
+          docker compose --project-directory {{ repo_root }} up --no-deps frontend
+          docker compose --project-directory {{ repo_root }} up -d backend nginx certbot
+

docker-compose.yml

@@ -31,6 +31,8 @@ services:
     image: americanas_production_frontend
     container_name: americanas_production_frontend
     restart: "no"
+    environment:
+      - NODE_OPTIONS="--max-old-space-size=512"
     depends_on:
       - backend
     volumes:

frontend/src/pages/ReviewPage.tsx

@@ -1,108 +1,108 @@
 import React from 'react';
-import { useState,  } from 'react';
+import { useState } from 'react';
 import Rating from '@mui/material/Rating';
-import { ThumbUpOffAlt, ThumbDownOffAlt, ThumbUp, ThumbDown } from '@mui/icons-material';
+import { ThumbUpOffAlt, ThumbDownOffAlt } from '@mui/icons-material';
 import { useParams } from 'react-router-dom';
 import allProducts from '../assets/all_products';
 import './ReviewPage.css';
 import { Link } from 'react-router-dom';
 
 const ReviewPage: React.FC = () => {
   const { productId } = useParams<{ productId: string }>();
-  const product = allProducts.find(item => item.id.toString() === productId);
-  const [likeColor, setLikeColor] = useState("");
-  const [likeColor1, setLikeColor1] = useState("");
-  const [value, setValue] = useState("");
-  const [value1, setValue1] = useState("");
-  const [value2, setValue2] = useState("");
-  const [value3, setValue3] = useState("");
+  const product = allProducts.find((item) => item.id.toString() === productId);
+  const [likeColor, setLikeColor] = useState<'primary' | ''>('');
+  const [likeColor1, setLikeColor1] = useState<'primary' | ''>('');
+  const [value, setValue] = useState<number | null>(null);
+  const [value1, setValue1] = useState<number | null>(null);
+  const [value2, setValue2] = useState<number | null>(null);
+  const [value3, setValue3] = useState<number | null>(null);
 
   const handleLike = () => {
-    const color = likeColor ? "" : "primary";
+    const color = likeColor ? '' : 'primary';
     setLikeColor(color);
-    setLikeColor1("");
-   };
+    setLikeColor1('');
+  };
 
-   const handleDislike = () => {
-    const color = likeColor1 ? "" : "primary";
+  const handleDislike = () => {
+    const color = likeColor1 ? '' : 'primary';
     setLikeColor1(color);
-    setLikeColor("");
-   };
+    setLikeColor('');
+  };
 
   if (!product) {
     return <div>Produto não encontrado.</div>;
   }
 
   return (
-    <div className='review-main'>
+    <div className="review-main">
       <div className="review-page-container">
         <h1>Avalie o Produto</h1>
-        <div className='review-first'>
-          <div className='review-title'>
-            <img className='product-image' src={product.image} alt={product.name} />
+        <div className="review-first">
+          <div className="review-title">
+            <img className="product-image" src={product.image} alt={product.name} />
             <span>{product.name}</span>
           </div>
-          <div className='review-row'>
-            <div className='review-colum'>
+          <div className="review-row">
+            <div className="review-colum">
               <h3>o que você achou do produto?</h3>
-              <div className='ratting'>
+              <div className="ratting">
                 <Rating
                   name="simple-controlled"
-                  value ={value}
+                  value={value || 0}
                   onChange={(event, newValue) => {
                     setValue(newValue);
                   }}
                 />
               </div>
               <h3>custo-benefício</h3>
-              <div className='ratting'>
+              <div className="ratting">
                 <Rating
                   name="simple-controlled"
-                  value ={value1}
+                  value={value1 || 0}
                   onChange={(event, newValue) => {
                     setValue1(newValue);
                   }}
                 />
               </div>
               <h3>qualidade</h3>
-              <div className='ratting'>
+              <div className="ratting">
                 <Rating
                   name="simple-controlled"
-                  value ={value2}
+                  value={value2 || 0}
                   onChange={(event, newValue) => {
                     setValue2(newValue);
                   }}
                 />
               </div>
               <h3>tamanho</h3>
-              <div className='ratting'>
+              <div className="ratting">
                 <Rating
                   name="simple-controlled"
-                  value ={value3}
+                  value={value3 || 0}
                   onChange={(event, newValue) => {
                     setValue3(newValue);
                   }}
                 />
               </div>
             </div>
-            <div className='thumb'>
+            <div className="thumb">
               <h3>você recomendaria esse produto?</h3>
-              <div className='recomendation'>
-                <ThumbUpOffAlt className='up-off' onClick={handleLike} color={likeColor}/>
-                <ThumbDownOffAlt className='down-off' onClick={handleDislike} color={likeColor1}/>
+              <div className="recomendation">
+                <ThumbUpOffAlt className="up-off" onClick={handleLike} color={likeColor === 'primary' ? 'primary' : undefined} />
+                <ThumbDownOffAlt className="down-off" onClick={handleDislike} color={likeColor1 === 'primary' ? 'primary' : undefined} />
               </div>
             </div>
           </div>
         </div>
         <div className="review-form">
           <h3>escreva sua avaliação</h3>
-          <input type="text" id="title" name="title" placeholder='título da avaliação'/>
+          <input type="text" id="title" name="title" placeholder="título da avaliação" />
           <br />
-          <textarea id="comment" name="comment" placeholder='avaliação do produto' />
+          <textarea id="comment" name="comment" placeholder="avaliação do produto" />
         </div>
-        < Link to="/reviewdone">
+        <Link to="/reviewdone">
           <button>Enviar Avaliação</button>
-        </ Link>
+        </Link>
       </div>
     </div>
   );

frontend/vite.config.ts

@@ -3,8 +3,19 @@ import react from '@vitejs/plugin-react';
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  build: {
+    rollupOptions: {
+      onwarn(warning, warn) {
+        if (warning.code === 'MODULE_LEVEL_DIRECTIVE') {
+          return
+        }
+        warn(warning)
+      }
+    }
+  },
   plugins: [react()],
   server: {
     port: 3000,
   }
 });
+