Test listing page working and styled using image API

src/app/core/routes/ContentTypeMappings.js

@@ -21,6 +21,15 @@ export default [
       loading: Loading,
     }),
   },
+  {
+    contentTypeID: 'andyLambTest',
+    component: Loadable({
+      loader: () => {
+        return import('~/pages/AndyTestPage/AndyTestPage');
+      },
+      loading: Loading,
+    }),
+  },
   {
     contentTypeID: 'thEvent',
     component: Loadable({

src/app/core/routes/StaticRoutes.js

@@ -26,7 +26,7 @@ export default [
     }),
   },
   {
-    path: '/andy-test',
+    path: '/andy-test-listing',
     exact: true,
     component: Loadable({
       loader: () => import('~/pages/Listings/AndyTestListing.page'),

src/app/features/andyTest/components.styled/AndyListingCard.styled.js

 import styled, { css } from 'styled-components';
 
-const AndyListingCardStyled = styled.article`
-  ${() => {
+const AndyListingCardStyled = styled.div`
+  ${({ bg }) => {
     return css`
       display: block;
       width: 100%;
-      max-width: 550px;
-      margin-bottom: 80px;
+      padding: 30px;
+      margin-bottom: 30px;
+      background-image: ${bg};
+      background-size: cover;
+      border-radius: 40px;
+
       &:hover {
         cursor: pointer;
       }
+      .inner {
+        display: flex;
+        padding: 30px;
+        flex: 1 1 auto;
+        background-color: rgba(255, 255, 255, 0.9);
+        border-radius: 20px;
+      }
+      .imgWrapper {
+        display: flex;
+        min-width: 150px;
+        max-height: 150px;
+      }
+      .textWrapper {
+      }
       h3 {
-        margin: 10px 0;
-        font-size: 24px;
+        margin: 0 0 20px 20px;
+        font-size: 28px;
         font-weight: 700;
-        line-height: 1.3;
+        line-height: 1.6;
       }
       p {
-        margin: 0;
-        margin-bottom: 30px;
-        font-size: 16px;
-        line-height: 1.7;
+        margin: 0 0 20px 20px;
+        font-size: 18px;
+        line-height: 1.6;
       }
       img {
         width: 100%;

src/app/features/andyTest/components.styled/AndyTestListing.styled.js

@@ -16,16 +16,7 @@ const AndyTestListingStyled = styled.div`
       a {
         text-decoration: none;
         width: 100%;
-        margin: 20px;
-        @media only screen and (min-width: 550px) {
-          margin: 0;
-          width: calc(50% - 15px);
-        }
-
-        @media only screen and (min-width: 1100px) {
-          margin: 0;
-          width: calc(33% - 15px);
-        }
+        margin: 0;
 
         p {
           text-decoration: none;

src/app/features/andyTest/components/AndyListingCard.js

@@ -2,22 +2,27 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 
-import AndyListingCardStyled from '../components.styled/AndyListingCard.styled';
+import AndyListingCardStyled from '~/features/andyTest/components.styled/AndyListingCard.styled';
 
-const AndyListingCard = ({ title, description, image, uri, className }) => {
+const AndyListingCard = ({ title, image, uri, excerpt, className }) => {
+  const blurredBg = `url(${image.asset.sys.uri}?width=800&blur=40)`;
   return (
     <Link to={uri}>
-      <AndyListingCardStyled className={className}>
-        {image && (
-          <img
-            src={`${image.asset.sys.uri}?width=500&height=300&fit=crop`}
-            alt={image.asset.altText}
-          />
-        )}
-
-        <h3>{title}</h3>
-
-        {description && <p>{description}</p>}
+      <AndyListingCardStyled className={className} bg={blurredBg}>
+        <div className="inner">
+          <div className="imgWrapper">
+            {image && (
+              <img
+                src={`${image.asset.sys.uri}?width=150&height=150&fit=crop`}
+                alt={image.asset.altText}
+              />
+            )}
+          </div>
+          <div className="textWrapper">
+            <h3>{title}</h3>
+            {excerpt && <p>{excerpt}</p>}
+          </div>
+        </div>
       </AndyListingCardStyled>
     </Link>
   );
@@ -26,7 +31,7 @@ const AndyListingCard = ({ title, description, image, uri, className }) => {
 AndyListingCard.propTypes = {
   className: PropTypes.string,
   title: PropTypes.string,
-  description: PropTypes.string,
+  excerpt: PropTypes.string,
   image: PropTypes.object,
   uri: PropTypes.string,
 };

src/app/features/andyTest/components/AndyTestListing.js

@@ -14,11 +14,11 @@ const fetchEntries = async versionStatus => {
     try {
       //DELIVERY API QUERY START//
       let query = new Query(
-        Op.equalTo('sys.contentTypeId', 'blogPost'),
+        Op.equalTo('sys.contentTypeId', 'andyLambTest'),
         Op.equalTo('sys.versionStatus', versionStatus)
       );
       query.pageSize = 3;
-      query.fields = ['title', 'summary', 'image', 'sys'];
+      query.fields = ['title', 'exerpt', 'image', 'sys'];
       //DELIVERY API QUERY END//
 
       //DELIVERY API SEARCH START//
@@ -33,7 +33,7 @@ const fetchEntries = async versionStatus => {
   return entries;
 };
 
-const BlogListing = ({ className }) => {
+const AndyTestListing = ({ className }) => {
   const [results, setResults] = useState();
   //GET VERSION STATUS
   const versionStatus = useSelector(selectVersionStatus);
@@ -72,7 +72,7 @@ const BlogListing = ({ className }) => {
           return (
             <AndyListingCard
               title={entry.title}
-              description={entry.summary}
+              excerpt={entry.exerpt}
               image={entry.image}
               uri={entry.sys && entry.sys.uri}
               key={idx}
@@ -85,8 +85,8 @@ const BlogListing = ({ className }) => {
   );
 };
 
-BlogListing.propTypes = {
+AndyTestListing.propTypes = {
   className: PropTypes.string,
 };
 
-export default BlogListing;
+export default AndyTestListing;