Fix redundand React fragment with only one child element

consdu · Nov 6, 2023 · a3a49a8 · a3a49a8
1 parent ded97d5
commit a3a49a8
Showing 1 changed file with 85 additions and 89 deletions.
diff --git a/src/pages/ContactDetailsPage/ContactDetailsPage.tsx b/src/pages/ContactDetailsPage/ContactDetailsPage.tsx
@@ -60,95 +60,91 @@ const ContactDetailsPage = (): React.ReactElement => {
   return (
     <ContainerStyled>
       <main>
-        {name && (
-          <>
-            <ContactDetailsPageStyled>
-              <article className="contact">
-                <header className="contact__header">
-                  <img
-                    src={`${avatar}`}
-                    alt={`Avatar of ${name} ${surname}`}
-                    width={80}
-                    height={80}
-                    className="contact__avatar"
-                  />
-                  <h2 className="contact__fullname">{`${name} ${surname}`}</h2>
-                  <button
-                    className="contact__update-button"
-                    aria-label="update contact"
-                    onClick={() => navigate("/update-contact")}
-                  >
-                    <IoPencilSharp />
-                  </button>
-                </header>
-                <address>
-                  <ul className="contact__details">
-                    <li className="contact__detail">
-                      <span className="contact__detail-icon">
-                        <IoCall />
-                      </span>
-                      <a href={`tel:${phoneNumber.mobile}`}>
-                        {phoneNumber.mobile}
-                      </a>
-                    </li>
-                    <li className="contact__detail">
-                      <span className="contact__detail-icon">
-                        <IoAtSharp />
-                      </span>
-                      <a href={`mailto:${email}`}>{email}</a>
-                    </li>
-                    <li className="contact__detail">
-                      <span className="contact__detail-icon">
-                        <IoLocationSharp />
-                      </span>
-                      <span>{address}</span>
-                    </li>
-                    <li className="contact__detail">
-                      <span className="contact__detail-icon">
-                        <IoGift />
-                      </span>
-                      <time
-                        dateTime={birthdayDate.toLocaleString().slice(0, 10)}
-                      >
-                        {birthdayDate.toLocaleDateString("en-UK", {
-                          day: "numeric",
-                          month: "long",
-                          year: "numeric",
-                        })}
-                      </time>
-                    </li>
-                  </ul>
-                  <footer className="contact__socials">
-                    {socials.twitter && (
-                      <a
-                        href={`https://twitter.com/${socials.twitter}`}
-                        aria-label="twitter profile"
-                      >
-                        <IoLogoTwitter />
-                      </a>
-                    )}
-                    {socials.linkedin && (
-                      <a
-                        href={`https://linkedin.com/in/${socials.linkedin}`}
-                        aria-label="linkedin profile"
-                      >
-                        <IoLogoLinkedin />
-                      </a>
-                    )}
-                    {socials.instagram && (
-                      <a
-                        href={`https://instagram.com/${socials.instagram}`}
-                        aria-label="instagram profile"
-                      >
-                        <IoLogoInstagram />
-                      </a>
-                    )}
-                  </footer>
-                </address>
-              </article>
-            </ContactDetailsPageStyled>
-          </>
-        )}
+        <ContactDetailsPageStyled>
+          {name && (
+            <article className="contact">
+              <header className="contact__header">
+                <img
+                  src={`${avatar}`}
+                  alt={`Avatar of ${name} ${surname}`}
+                  width={80}
+                  height={80}
+                  className="contact__avatar"
+                />
+                <h2 className="contact__fullname">{`${name} ${surname}`}</h2>
+                <button
+                  className="contact__update-button"
+                  aria-label="update contact"
+                  onClick={() => navigate("/update-contact")}
+                >
+                  <IoPencilSharp />
+                </button>
+              </header>
+              <address>
+                <ul className="contact__details">
+                  <li className="contact__detail">
+                    <span className="contact__detail-icon">
+                      <IoCall />
+                    </span>
+                    <a href={`tel:${phoneNumber.mobile}`}>
+                      {phoneNumber.mobile}
+                    </a>
+                  </li>
+                  <li className="contact__detail">
+                    <span className="contact__detail-icon">
+                      <IoAtSharp />
+                    </span>
+                    <a href={`mailto:${email}`}>{email}</a>
+                  </li>
+                  <li className="contact__detail">
+                    <span className="contact__detail-icon">
+                      <IoLocationSharp />
+                    </span>
+                    <span>{address}</span>
+                  </li>
+                  <li className="contact__detail">
+                    <span className="contact__detail-icon">
+                      <IoGift />
+                    </span>
+                    <time dateTime={birthdayDate.toLocaleString().slice(0, 10)}>
+                      {birthdayDate.toLocaleDateString("en-UK", {
+                        day: "numeric",
+                        month: "long",
+                        year: "numeric",
+                      })}
+                    </time>
+                  </li>
+                </ul>
+                <footer className="contact__socials">
+                  {socials.twitter && (
+                    <a
+                      href={`https://twitter.com/${socials.twitter}`}
+                      aria-label="twitter profile"
+                    >
+                      <IoLogoTwitter />
+                    </a>
+                  )}
+                  {socials.linkedin && (
+                    <a
+                      href={`https://linkedin.com/in/${socials.linkedin}`}
+                      aria-label="linkedin profile"
+                    >
+                      <IoLogoLinkedin />
+                    </a>
+                  )}
+                  {socials.instagram && (
+                    <a
+                      href={`https://instagram.com/${socials.instagram}`}
+                      aria-label="instagram profile"
+                    >
+                      <IoLogoInstagram />
+                    </a>
+                  )}
+                </footer>
+              </address>
+            </article>
+          )}
+        </ContactDetailsPageStyled>
       </main>
     </ContainerStyled>
   );