refactor(Proposer): improve code readability and formatting

Author: m6hdix

src/Pages/Profile/Tabs/suggestion-tab/recieved/Proposer.jsx

@@ -1,15 +1,25 @@
 import Button from "../../../../../Components/Button";
 import ConfettiExplosion from "react-confetti-explosion";
 import { MdOutlineKeyboardArrowUp } from "react-icons/md";
-import { convertToPersian, getFieldTranslationByNames } from "../../../../../Services/Utility/index";
+import {
+  convertToPersian,
+  getFieldTranslationByNames,
+} from "../../../../../Services/Utility/index";
 import line from "../../../../../Assets/images/profile/Line.png";
 import person from "../../../../../Assets/images/profile/slide.png";
 import pscpng from "../../../../../Assets/images/profile/psc.gif";
 import rialpng from "../../../../../Assets/images/profile/rial.gif";
 import styled from "styled-components";
 import { useState, useEffect, useRef } from "react";
 import { useLanguage } from "../../../../../Services/Reducers/LanguageContext";
-import { Info, proposerContainer, BasePrice, Prices, RejectButton, Text } from "../suggestionStyles";
+import {
+  Info,
+  proposerContainer,
+  BasePrice,
+  Prices,
+  RejectButton,
+  Text,
+} from "../suggestionStyles";
 import useRequest from "../../../../../Services/Hooks/useRequest/index";
 import { useNavigate } from "react-router-dom";
 import { useAccountSecurity } from "../../../../../Services/Reducers/accountSecurityContext";
@@ -48,7 +58,7 @@ const Time = styled.div`
     font-weight: 600;
   }
   h3 {
-    color:${(props) => (props.theme.colors.newColors.shades[30])};
+    color: ${(props) => props.theme.colors.newColors.shades[30]};
     font-size: 18px;
     font-weight: 500;
     margin-top: 4px;
@@ -61,9 +71,11 @@ const Days = styled.div`
   align-items: center;
   gap: 16px;
   padding-bottom: 16px;
-  border-bottom: 1px solid ${(props) => (props.theme.colors.newColors.otherColors.inputBorder)};
+  border-bottom: 1px solid
+    ${(props) => props.theme.colors.newColors.otherColors.inputBorder};
   button {
-    background-color: ${(props) => (props.theme.colors.newColors.otherColors.iconBg)};
+    background-color: ${(props) =>
+      props.theme.colors.newColors.otherColors.iconBg};
     white-space: nowrap;
     font-size: 16px;
     padding: 8px;
@@ -97,7 +109,6 @@ const Remained = styled.div`
   font-weight: 400;
 `;
 const StyledArrowUp = styled(MdOutlineKeyboardArrowUp)`
-
   color: ${({ percent }) => (percent > 0 ? "#18C08F" : "#FF0000")};
   rotate: ${({ percent }) => (percent > 0 ? "" : "180deg")};
 `;
@@ -111,7 +122,7 @@ const Proposer = ({
   onReject,
   onAccept,
   property,
-  id
+  id,
 }) => {
   const { selectedItemId } = useAccountSecurity();
   const itemRef = useRef(null);
@@ -135,28 +146,47 @@ const Proposer = ({
     if (!id) return console.error("Error: id is undefined!");
 
     try {
-      await Request(`buy-requests/add-grace-period/${id}`, "POST", new FormData().append("grace_period", selectedDay.toString()), {
-        headers: { "Content-Type": "multipart/form-data" },
-      }, "production");
+      await Request(
+        `buy-requests/add-grace-period/${id}`,
+        "POST",
+        new FormData().append("grace_period", selectedDay.toString()),
+        {
+          headers: { "Content-Type": "application/json" },
+        },
+        "production"
+      );
       setDay(selectedDay);
     } catch (error) {
       console.error("Error caught:", error);
       navigate("/metaverse/confirmation", {
-        state: { locationPage: "profile-4", sectionId: "received-suggestion", itemId: id },
+        state: {
+          locationPage: "profile-4",
+          sectionId: "received-suggestion",
+          itemId: id,
+        },
       });
     }
   };
 
-
   return (
     <Container>
       <Info isPersian={isPersian}>
         <Header>
           <Person>
-            <img src={property.profile_photo} alt={code} width={60} height={60} />
+            <img
+              src={property.profile_photo}
+              alt={code}
+              width={60}
+              height={60}
+            />
             <div>
               <p>{getFieldTranslationByNames("768")}</p>
-              <a target="blank" href={`https://rgb.irpsc.com/fa/citizen/${code}`}>{code.toUpperCase()}</a>
+              <a
+                target="blank"
+                href={`https://rgb.irpsc.com/fa/citizen/${code}`}
+              >
+                {code.toUpperCase()}
+              </a>
             </div>
           </Person>
           <Time>
@@ -191,13 +221,14 @@ const Proposer = ({
               <>
                 {isExpanded ? information : `${information.slice(0, 277)}...`}{" "}
                 <span onClick={handleToggle}>
-                  {isExpanded ? getFieldTranslationByNames("884") : getFieldTranslationByNames("774")}
+                  {isExpanded
+                    ? getFieldTranslationByNames("884")
+                    : getFieldTranslationByNames("774")}
                 </span>
               </>
             ) : (
               information || ""
             )}
-
           </p>
         </Text>
       </Info>
@@ -208,7 +239,9 @@ const Proposer = ({
               onClick={() => {
                 handleGracePeriod(7);
               }}
-              label={`${convertToPersian(7)} ${getFieldTranslationByNames("772")} `}
+              label={`${convertToPersian(7)} ${getFieldTranslationByNames(
+                "772"
+              )} `}
               color="#3B3B3B"
               textColor="#949494"
               full
@@ -217,18 +250,20 @@ const Proposer = ({
               onClick={() => {
                 handleGracePeriod(1);
               }}
-              label={`${convertToPersian(1)} ${getFieldTranslationByNames("772")} `}
+              label={`${convertToPersian(1)} ${getFieldTranslationByNames(
+                "772"
+              )} `}
               color="#3B3B3B"
               textColor="#949494"
               full
             />
           </Days>
-
-
         )}
         {day !== 0 && (
           <Div>
-            <Remained>{convertToPersian(day)} {getFieldTranslationByNames("1413")}</Remained>
+            <Remained>
+              {convertToPersian(day)} {getFieldTranslationByNames("1413")}
+            </Remained>
           </Div>
         )}
         <Buttons>
@@ -249,51 +284,48 @@ const Proposer = ({
                 height="100vh"
                 width={400}
                 style={{
-                  position: "absolute", 
-                  left: "50%",          
-                  top: "50%",           
-                  transform: "translate(-50%, -50%)", 
+                  position: "absolute",
+                  left: "50%",
+                  top: "50%",
+                  transform: "translate(-50%, -50%)",
                 }}
               />
-
-
             )}
           </RejectButton>
-          <div style={{position:"relative"}}>
-          <Button
-            label={getFieldTranslationByNames("776")}
-            color="#18C08F"
-            textColor="#FFFFFF"
-            onClick={() => {
-              setIsExplodingAccept(true);
+          <div style={{ position: "relative" }}>
+            <Button
+              label={getFieldTranslationByNames("776")}
+              color="#18C08F"
+              textColor="#FFFFFF"
+              onClick={() => {
+                setIsExplodingAccept(true);
 
-              onAccept();
-            }}
-            full
-          />
+                onAccept();
+              }}
+              full
+            />
 
-        {isExplodingAccept && (
-         
-         <ConfettiExplosion
-         zIndex={10}
-         particleCount={150}
-         duration={3000}
-         colors={["#18C08F"]}
-         particleSize={5}
-         height="100vh"
-         width={400}
-         style={{
-           position: "absolute", 
-           left: "50%",          
-           top: "50%",           
-           transform: "translate(-50%, -50%)", 
-         }}
-       />
-        )}
-         </div>
+            {isExplodingAccept && (
+              <ConfettiExplosion
+                zIndex={10}
+                particleCount={150}
+                duration={3000}
+                colors={["#18C08F"]}
+                particleSize={5}
+                height="100vh"
+                width={400}
+                style={{
+                  position: "absolute",
+                  left: "50%",
+                  top: "50%",
+                  transform: "translate(-50%, -50%)",
+                }}
+              />
+            )}
+          </div>
         </Buttons>
       </ProposalStatus>
-    </Container >
+    </Container>
   );
 };