[REFACTOR] Comment lines deleted, added some short return in comp

ikascom · Jul 18, 2023 · 2444916 · 2444916
1 parent aed6984
commit 2444916
Show file tree

Hide file tree

Showing 9 changed files with 23 additions and 42 deletions.
diff --git a/ikas-theme/src/components/product-reviews/detail/index.tsx b/ikas-theme/src/components/product-reviews/detail/index.tsx
@@ -1,15 +1,12 @@
 import React from "react";
 import { observer } from "mobx-react-lite";
 
-// Types
 import { ProductReviewsProps } from "src/components/__generated__/types";
 
-// Components
 import Reviews from "./reviews";
 import ReviewsSummary from "./review-summary";
 import Pagination from "src/components/components/pagination";
 
-// Hooks
 import useProductReviews from "../useProductReviews";
 
 const Detail = (props: ProductReviewsProps) => {

diff --git a/ikas-theme/src/components/product-reviews/detail/review-form/index.tsx b/ikas-theme/src/components/product-reviews/detail/review-form/index.tsx
@@ -6,7 +6,6 @@ import {
   CustomerReviewForm,
 } from "@ikas/storefront";
 
-// Compontents
 import AlertComponent from "src/components/components/alert";
 import FormItem from "src/components/components/form/form-item";
 import Form from "src/components/components/form";
@@ -15,10 +14,8 @@ import TextArea from "src/components/components/textarea";
 import Button from "src/components/components/button";
 import Stars from "../stars";
 
-// Namespace for translation (i18n)
 import { NS } from "src/components/product-reviews";
 
-// Styles
 import * as S from "./style";
 
 const REVIEW_TITLE_MAX_LENGTH = 64;
@@ -81,7 +78,9 @@ const ReviewForm = (props: Props) => {
     }
   }, [visible]);
 
-  return visible ? (
+  if (!visible) return null;
+
+  return (
     <S.ReviewForm>
       <S.Wrapper>
         <S.Title>{t(`${NS}:formTitle`)}</S.Title>
@@ -148,7 +147,7 @@ const ReviewForm = (props: Props) => {
         )}
       </S.Wrapper>
     </S.ReviewForm>
-  ) : null;
+  );
 };
 
 export default observer(ReviewForm);
diff --git a/ikas-theme/src/components/product-reviews/detail/review-summary/index.tsx b/ikas-theme/src/components/product-reviews/detail/review-summary/index.tsx
@@ -1,22 +1,16 @@
 import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
 import { useTranslation } from "@ikas/storefront";
-
-// Types
 import { ProductReviewsProps } from "src/components/__generated__/types";
 
-// Components
 import ReviewForm from "../review-form";
 import Stars, { type StarType } from "../stars";
 import Button from "src/components/components/button";
 
-// Hooks
 import useProductReviews from "src/components/product-reviews/useProductReviews";
 
-// Namespace
-import { NS } from "../../";
+import { NS } from "src/components/product-reviews";
 
-// Styles
 import * as S from "./style";
 
 // prettier-ignore
@@ -42,24 +36,25 @@ const ReviewsSummary = (props: Props) => {
   const isWriteReviewButtonVisible =
     !isWriteReviewButtonHidden && productDetail.isCustomerReviewEnabled;
 
+  const isPreviewVisible =
+    customerReviewList && customerReviewList.data?.length > 0;
+
   return (
     <S.ReviewsSummary>
       <S.ReviewsHeader>
-        {customerReviewList && customerReviewList.data?.length ? (
+        {isPreviewVisible ? (
           <S.Preview>
             <Stars
               title={t(`${NS}:xStar`, {
-                x: productDetail.averageRating || "0",
-              })}
+                x: productDetail.averageRating || "0" })}
               editable={false}
               size="24px"
               star={(productDetail.averageRating as StarType) || 0}
             />
 
             <S.PreviewDesciption>
               {t(`${NS}:basedOnXReviews`, {
-                x: productDetail.reviewCount || "0",
-              })}
+                x: productDetail.reviewCount || "0" })}
             </S.PreviewDesciption>
           </S.Preview>
         ) : (

diff --git a/ikas-theme/src/components/product-reviews/detail/review-summary/style.ts b/ikas-theme/src/components/product-reviews/detail/review-summary/style.ts
@@ -25,12 +25,12 @@ export const Preview = styled.div`
 
 export const PreviewDesciption = styled.div`
   color: ${(props) => props.theme.color.secondaryText};
-  font-size: 1rem;
+  font-size: ${(props) => props.theme.fontSize.base};
   line-height: 1.5rem;
 `;
 
 export const PreviewEmpty = styled.div`
   color: ${(props) => props.theme.color.secondaryText};
-  font-size: 1rem;
+  font-size: ${(props) => props.theme.fontSize.base};
   line-height: 1.5rem;
 `;
diff --git a/ikas-theme/src/components/product-reviews/detail/reviews/index.tsx b/ikas-theme/src/components/product-reviews/detail/reviews/index.tsx
@@ -1,13 +1,10 @@
 import React from "react";
 import { observer } from "mobx-react-lite";
 
-// Components
 import Review from "./review";
 
-// Hooks
 import useProductReviews from "src/components/product-reviews/useProductReviews";
 
-// Styles
 import * as S from "./style";
 
 // prettier-ignore
@@ -18,13 +15,17 @@ type ReviewProps = {
 const Reviews = (props: ReviewProps) => {
   const { customerReviewList } = props;
 
-  return customerReviewList && customerReviewList.data?.length > 0 ? (
+  const isVisible = customerReviewList && customerReviewList.data?.length > 0;
+
+  if (!isVisible) return null;
+
+  return (
     <S.Reviews>
       {customerReviewList.data.map((review, index) => (
         <Review key={review.id + review.createdAt + index} review={review} />
       ))}
     </S.Reviews>
-  ) : null;
+  );
 };
 
 export default observer(Reviews);
diff --git a/ikas-theme/src/components/product-reviews/detail/reviews/review/index.tsx b/ikas-theme/src/components/product-reviews/detail/reviews/review/index.tsx
@@ -2,16 +2,12 @@ import React from "react";
 import { observer } from "mobx-react-lite";
 import { IkasCustomerReview, useTranslation } from "@ikas/storefront";
 
-// Components
 import Stars from "src/components/product-reviews/detail/stars";
 
-// Utils
-import getMonthName from "src/utils/getMonthName";
-
-// Namespace
 import { NS } from "src/components/product-reviews";
 
-// Styles
+import getMonthName from "src/utils/getMonthName";
+
 import * as S from "./style";
 
 type Props = {

diff --git a/ikas-theme/src/components/product-reviews/detail/reviews/review/style.ts b/ikas-theme/src/components/product-reviews/detail/reviews/review/style.ts
@@ -23,13 +23,12 @@ export const Header = styled.header`
 `;
 
 export const Title = styled.h3`
-  font-size: 1.125rem;
+  font-size: ${(props) => props.theme.fontSize.lg};
   line-height: 1.75rem;
   font-weight: 700;
 
   @media (min-width: ${breakpoints.md}) {
-    font-size: 1.25rem;
-    line-height: 1.75rem;
+    font-size: ${(props) => props.theme.fontSize.xl};
   }
 `;
 

diff --git a/ikas-theme/src/components/product-reviews/detail/stars/index.tsx b/ikas-theme/src/components/product-reviews/detail/stars/index.tsx
@@ -1,10 +1,8 @@
 import React, { useState } from "react";
 
-// Components
 import ImStarEmpty from "src/components/svg/im-star-empty";
 import ImStarFull from "src/components/svg/im-star-full";
 
-// Styles
 import * as S from "./style";
 
 export type StarType = 0 | 1 | 2 | 3 | 4 | 5;

diff --git a/ikas-theme/src/components/product-reviews/index.tsx b/ikas-theme/src/components/product-reviews/index.tsx
@@ -1,15 +1,11 @@
 import React from "react";
 import { observer } from "mobx-react-lite";
 import { useTranslation } from "@ikas/storefront";
-
-// Types
 import { ProductReviewsProps } from "../__generated__/types";
 
-// Components
 import { Container } from "src/components/components/container";
 import Detail from "./detail";
 
-// Styles
 import * as S from "./style";
 
 export const NS = "product-reviews"; // for translation (i18n)