Merge pull request #30 from sima-land/29-promotion-card-ssr

#29 PromotionCard: время теперь выводится только на клиенте
sima-land · Aug 26, 2021 · 39e3fa2 · 39e3fa2
2 parents 8c7c64a + 45e246a
commit 39e3fa2
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 40 deletions.
diff --git a/src/desktop/components/promotion-card/index.tsx b/src/desktop/components/promotion-card/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { PromotionType } from './types';
 import { BannerTitle } from './banner-title';
 import { Estimate } from './estimate';
@@ -42,49 +42,60 @@ export const PromotionCard = ({
   // div props
   className,
   ...restProps
-}: PromotionCardProps) => (
-  <div className={classNames(className, styles.root)} {...restProps}>
-    <a href={href} className={styles.link}>
-      <div className={styles.banner}>
-        <img src={imageSrc} alt={title} className={styles.image} />
+}: PromotionCardProps) => {
+  // время нужно выводить только на клиенте - вводим состояние
+  const [mounted, setMounted] = useState<boolean>(false);
 
-        {promotionType && (
-          <div className={styles['banner-content']}>
-            <BannerTitle
-              promotionType={promotionType}
-              volumeDiscount={volumeDiscount}
-              dueDate={dueDate}
-            />
-          </div>
-        )}
-      </div>
+  useEffect(() => {
+    setMounted(true);
+  }, []);
 
-      <div className={styles.info}>
-        <div className={styles.header}>
-          <h4 className={styles.title}>
-            {title}
-          </h4>
+  return (
+    <div className={classNames(className, styles.root)} {...restProps}>
+      <a href={href} className={styles.link}>
+        <div className={styles.banner}>
+          <img src={imageSrc} alt={title} className={styles.image} />
 
-          {subtitle && (
-            <p className={styles.subtitle}>
-              {subtitle}
-            </p>
+          {promotionType && (mounted || promotionType !== 'special') && (
+            <div className={styles['banner-content']}>
+              <BannerTitle
+                promotionType={promotionType}
+                volumeDiscount={volumeDiscount}
+                dueDate={dueDate}
+              />
+            </div>
           )}
         </div>
 
-        <div className={styles.footer}>
-          <time className={styles.timer}>
-            <WatchSVG className={styles['timer-svg']} />
-            <Estimate dueDate={dueDate} />
-          </time>
+        <div className={styles.info}>
+          <div className={styles.header}>
+            <h4 className={styles.title}>
+              {title}
+            </h4>
 
-          {postfix && (
-            <div className={styles.postfix}>
-              {postfix}
-            </div>
-          )}
+            {subtitle && (
+              <p className={styles.subtitle}>
+                {subtitle}
+              </p>
+            )}
+          </div>
+
+          <div className={styles.footer}>
+            {mounted && (
+              <time className={styles.timer}>
+                <WatchSVG className={styles['timer-svg']} />
+                <Estimate dueDate={dueDate} />
+              </time>
+            )}
+
+            {postfix && (
+              <div className={styles.postfix}>
+                {postfix}
+              </div>
+            )}
+          </div>
         </div>
-      </div>
-    </a>
-  </div>
-);
+      </a>
+    </div>
+  );
+};
diff --git a/src/mobile/components/recommendation-slider/recommended-item.module.scss b/src/mobile/components/recommendation-slider/recommended-item.module.scss
@@ -1,6 +1,8 @@
+@use 'sass:math';
+
 $smallSize: 160px;
 $largeSize: 194px;
-$itemIncreaseRatio: ($largeSize - $smallSize) / (720px - 320px);
+$itemIncreaseRatio: math.div($largeSize - $smallSize, 720px - 320px);
 
 .item {
   position: relative;