Add detail pages

Habil99 · Jul 24, 2021 · c110ecd · c110ecd
1 parent 1eb9ab3
commit c110ecd
Show file tree

Hide file tree

Showing 5 changed files with 225 additions and 131 deletions.
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
@@ -312,23 +312,76 @@ body {
   margin: 4rem 0 6.25rem 0;
   border-radius: var(--radius);
   background-color: var(--color-bg-indigo);
-
+
+  &.skeleton {
+    .news-banner-inner {
+      align-items: stretch;
+    }
+    .news-banner-img {
+      @include background-gradient(
+        var(--base-skeleton-color),
+        var(--base-skeleton-shine)
+      );
+      animation: shine-lines 1s infinite linear;
+      width: calc(100% - 40vw);
+      height: 300px;
+      border-radius: var(--radius);
+    }
+    .news-banner-content-title {
+      @include background-gradient(
+        var(--base-skeleton-color),
+        var(--base-skeleton-shine)
+      );
+      animation: shine-lines 1s infinite linear;
+      width: 100%;
+      height: 30px;
+      margin-top: 30px !important;
+      border-radius: var(--radius);
+
+      &-2 {
+        width: 40%
+      }
+    }
+    .news-banner-content-info {
+      @include background-gradient(
+        var(--base-skeleton-color),
+        var(--base-skeleton-shine)
+      );
+      animation: shine-lines 1s infinite linear;
+      width: 100%;
+      height: 30px;
+      margin-top: 30px !important;
+      border-radius: var(--radius);
+    }
+    .news-banner-content-date {
+      @include background-gradient(
+        var(--base-skeleton-color),
+        var(--base-skeleton-shine)
+      );
+      animation: shine-lines 1s infinite linear;
+      width: 30%;
+      height: 20px;
+      margin-top: 30px !important;
+      border-radius: var(--radius);
+    }
+  }
+
   &-inner {
     padding: 1.25rem;
     display: flex;
     align-items: center;
   }
-  
+
   &-img {
     flex: 0.4;
     border-radius: var(--radius);
     overflow: hidden;
-    
+
     img {
       width: 100%;
     }
   }
-  
+
   &-content {
     flex: 0.6;
     color: var(--color-white);
@@ -345,7 +398,7 @@ body {
     &-info {
       @include font_size(1.125, rem, 400);
       padding-bottom: 2.5rem;
-      color: var(--color-white)
+      color: var(--color-white);
     }
 
     &-date {
@@ -567,19 +620,19 @@ body {
   .byline {
     border-radius: var(--radius);
     padding: 8px 30px;
-    background-color: #4447E2;
+    background-color: #4447e2;
     color: var(--color-white);
     width: max-content;
     margin-bottom: 18px;
   }
 
   &-bottom {
     width: 100%;
-    
+
     .source-date {
       display: flex;
       align-items: center;
       color: #fff;
     }
   }
-}
+}
diff --git a/src/components/News/BannerSkeleton.js b/src/components/News/BannerSkeleton.js
@@ -0,0 +1,18 @@
+const BannerSkeleton = () => {
+  return (
+    <div className="news-banner skeleton">
+      <div className="news-banner-inner">
+        <div className="news-banner-img">
+        </div>
+        <div className="news-banner-content">
+          <div className="news-banner-content-title"></div>
+          <div className="news-banner-content-title news-banner-content-title-2"></div>
+          <div className="news-banner-content-info"></div>
+          <div className="news-banner-content-date"></div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BannerSkeleton;
diff --git a/src/pages/News/PopularDetail.js b/src/pages/News/PopularDetail.js
@@ -6,77 +6,71 @@ import { popularNews, popularNewsStatus } from "../../redux/news.selector";
 import { getMostPopularNews } from "../../redux/newsSlice";
 import Image from "../../shared/Image";
 import Widget from "../../shared/Widget";
-import { compareTime } from '../../assets/utils'
+import { compareTime } from "../../assets/utils";
 
 const PopularDetail = () => {
-    const status = useSelector(popularNewsStatus);
-    const news = useSelector(popularNews);
-    const dispatch = useDispatch();
+  const status = useSelector(popularNewsStatus);
+  const news = useSelector(popularNews);
+  const dispatch = useDispatch();
 
-    useEffect(() => {
-        if (news.length < 1) {
-            if (status === "idle") {
-                dispatch(getMostPopularNews());
-            } else {
-                console.log(news);
-            }
-        }
-    }, [dispatch, news, status]);
+  useEffect(() => {
+    if (news.length < 1) {
+      if (status === "idle") {
+        dispatch(getMostPopularNews());
+      } else {
+        console.log(news);
+      }
+    }
+  }, [dispatch, news, status]);
 
-    return (
-        <>
-            {status === "fulfilled" &&
-                news?.map((n) => (
-                    <div className="news-detail" key={uuid()}>
-                        <div className="news-banner">
-                            <div className="news-banner-inner">
-                                <div className="news-banner-img">
-                                    <Image source={n.media[0]["media-metadata"][2].url} />
-                                </div>
-                                <div className="news-banner-content">
-                                    <p className="news-banner-content-title">{n.title}</p>
-                                    <a
-                                        href={n.url}
-                                        className="open-remote"
-                                        target="_blank"
-                                        rel="noreferrer noopener"
-                                    >
-                                        Open remote link
-                                    </a>
-                                    <div className="widgets">
-                                        <Widget data={[n.section, n.subsection]} />
-                                    </div>
-                                </div>
-                                {/* <p className="news-banner-content-date">
-                                        {formatDate(n.published_date)}
-                                    </p> */}
-                            </div>
-                            <div className="news-banner-inner flex-column align-items-start">
-                                <p className="news-banner-content-info">
-                                    {n.abstract}
-                                </p>
-                                <div className="news-detail-bottom">
-                                    <div className="byline">
-                                        Byline: {n.byline}
-                                    </div>
-                                    <div className="source-date">
-                                        <div className="source">
-                                            <small>Source:</small> {n.source}
-                                        </div>
-                                        <p className="news-banner-content-date ms-auto me-4">
-                                            <small>Published date:</small> {formatDate(n.published_date)}
-                                        </p>
-                                        <p className="news-banner-content-date">
-                                            <small>Updated:</small> {compareTime(n.updated)}
-                                        </p>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
+  return (
+    <div>
+      {status === "fulfilled" &&
+        news?.map((n) => (
+          <div className="news-detail" key={uuid()}>
+            <div className="news-banner">
+              <div className="news-banner-inner">
+                <div className="news-banner-img">
+                  <Image source={n.media[0]["media-metadata"][2].url} />
+                </div>
+                <div className="news-banner-content">
+                  <p className="news-banner-content-title">{n.title}</p>
+                  <a
+                    href={n.url}
+                    className="open-remote"
+                    target="_blank"
+                    rel="noreferrer noopener"
+                  >
+                    Open remote link
+                  </a>
+                  <div className="widgets">
+                    <Widget data={[n.section, n.subsection]} />
+                  </div>
+                </div>
+              </div>
+              <div className="news-banner-inner flex-column align-items-start">
+                <p className="news-banner-content-info">{n.abstract}</p>
+                <div className="news-detail-bottom">
+                  <div className="byline">Byline: {n.byline}</div>
+                  <div className="source-date">
+                    <div className="source">
+                      <small>Source:</small> {n.source}
                     </div>
-                ))}
-        </>
-    );
+                    <p className="news-banner-content-date ms-auto me-4">
+                      <small>Published date:</small>{" "}
+                      {formatDate(n.published_date)}
+                    </p>
+                    <p className="news-banner-content-date">
+                      <small>Updated:</small> {compareTime(n.updated)}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        ))}
+    </div>
+  );
 };
 
 export default PopularDetail;