chore: reverting page to basic example

src/app/core/routes/ContentTypeMappings.js

@@ -21,16 +21,6 @@ export default [
       loading: Loading,
     }),
   },
-  {
-    contentTypeID: 'thEvent',
-    component: Loadable({
-      loader: () => {
-        return import('~/pages/Events/EventPage');
-        //return import('~/features/contactDetails/ContactDetails');
-      },
-      loading: Loading,
-    }),
-  },
   {
     contentTypeID: 'genericPage',
     component: Loadable({

src/app/core/routes/StaticRoutes.js

@@ -17,14 +17,6 @@ export default [
       loading: Loading,
     }),
   },
-  {
-    path: '/events-listing',
-    exact: true,
-    component: Loadable({
-      loader: () => import('~/pages/Listings/EventsListing.page'),
-      loading: Loading,
-    }),
-  },
   // ********************************
   // ˅˅ Do not delete these routes ˅˅
   {

src/app/features/eventListing/components/EventCard.js

@@ -5,24 +5,10 @@ import { Link } from 'react-router-dom';
 
 import EventCardStyled from '../components.styled/EventCard.styled';
 
-const EventCard = ({ title, summary, image, uri, className }) => {
-  return (
-    <Link to={uri}>
-      <EventCardStyled className={className}>
-        <img src={image.asset.sys.uri} alt={image.altText} />
-        <h3>{title}</h3>
-        <p>{summary}</p>
-      </EventCardStyled>
-    </Link>
-  );
+const EventCard = () => {
+  return <p>Event card will go here</p>;
 };
 
-EventCard.propTypes = {
-  title: PropTypes.string,
-  summary: PropTypes.string,
-  image: PropTypes.object,
-  uri: PropTypes.string,
-  className: PropTypes.string,
-};
+EventCard.propTypes = {};
 
 export default EventCard;

src/app/features/eventListing/components/EventRecord.js

@@ -4,9 +4,6 @@ import PropTypes from 'prop-types';
 import EVentRecordStyled from '../components.styled/EventRecord.styled';
 
 import ContentComposer from '~/features/composer/components/Composer';
-import Map from '~/features/map/Map';
-import formatDate from '../util/formatDate';
-import ContactDetails from '~/features/contactDetails/ContactDetails';
 
 const EventRecord = ({ className, entry }) => {
   if (!entry) return null;
@@ -14,35 +11,13 @@ const EventRecord = ({ className, entry }) => {
   return (
     <EVentRecordStyled className={className}>
       <div className="container">
-        {entry.bannerImage && (
-          <img
-            src={entry.bannerImage.asset.sys.uri}
-            alt={entry.bannerImage.altText}
-          />
+        {entry.image && (
+          <img src={entry.image.asset.sys.uri} alt={entry.image.altText} />
         )}
 
         <div className="eventContent">
           <h1 className="pageTitle">{entry.entryTitle}</h1>
-          <h2>Location</h2>
-
-          <Map lat={entry.location.lat} lon={entry.location.lon} />
-
-          <p>
-            <strong>Event date: </strong>
-            {formatDate(entry.datetime, 'dd/MMMM/yyyy')}
-          </p>
-
-          <h2>Contact details</h2>
-          <ContactDetails
-            name={entry.contactComponent.name}
-            phone={entry.contactComponent.phone}
-            email={entry.contactComponent.email}
-            website={entry.contactComponent.websiteAddress}
-          />
-
-          {entry.eventDetails && (
-            <ContentComposer composer={entry.eventDetails} />
-          )}
+          {entry.content && <ContentComposer composer={entry.content} />}
         </div>
       </div>
     </EVentRecordStyled>

src/app/features/eventListing/components/EventsListing.js

-/* eslint-disable no-unused-vars */
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useSelector } from 'react';
 import PropTypes from 'prop-types';
-import { Link } from 'react-router-dom';
-import { useSelector } from 'react-redux';
 
 import { selectVersionStatus } from '~/core/redux/selectors';
 import { Op, Query } from 'contensis-delivery-api';
 import { cachedSearch } from '~/core/util/ContensisDeliveryApi';
 
-import EventsListingStyled from '../components.styled/EventListing.styled';
-import EventCard from './EventCard';
+import EventListingStyled from '../components.styled/EventListing.styled';
 
 const fetchEntries = async versionStatus => {
   const triggerSearch = async versionStatus => {
     try {
-      //DELIVERY API QUERY START//
       let query = new Query(
-        Op.equalTo('sys.contentTypeId', 'thEvent'),
+        Op.equalTo('sys.contentTypeId', 'exampleCT'),
         Op.equalTo('sys.versionStatus', versionStatus)
       );
       query.pageSize = 3;
-      query.fields = ['title', 'description', 'bannerImage'];
-      //DELIVERY API QUERY END//
-
-      //DELIVERY API SEARCH START//
+      query.fields = ['title', 'summary', 'image', 'sys'];
       return await cachedSearch.search(query, 1);
-      //DELIVERY API SEARCH END//
     } catch (error) {
       throw new Error(error);
     }
@@ -34,60 +25,49 @@ const fetchEntries = async versionStatus => {
   return entries;
 };
 
-const BlogListing = ({ className }) => {
+const EventsListing = ({ className }) => {
   const [results, setResults] = useState();
-  //GET VERSION STATUS
   const versionStatus = useSelector(selectVersionStatus);
-  //const versionStatus = 'latest';
   useEffect(() => {
-    fetchEntries(versionStatus).then(results => {
-      setResults(results);
+    fetchEntries(versionStatus).then(entries => {
+      setResults(entries.items);
     });
   }, [versionStatus]);
 
   let resultsInfo = null;
 
-  //DELIVERY API PAGING INFO START//
-  if (results && results.totalCount > 0) {
+  if (results && results.totalCount > 1) {
     const start = results.pageIndex * results.pageSize + 1;
     let end = results.pageSize;
     if (end > results.totalCount) end = results.totalCount;
 
     resultsInfo = `Displaying ${start}-${end} of ${results.totalCount} results`;
   }
-  //DELIVERY API PAGING INFO END//
 
   return (
-    <EventsListingStyled className={className}>
+    <EventListingStyled className={className}>
+      <h1 className="pageTitle">Example listing title</h1>
       {resultsInfo && (
-        <p
+        <div
           className="resultsInfo"
           dangerouslySetInnerHTML={{ __html: resultsInfo }}
         />
       )}
-      {/* DELIVERY API RENDER ENTRIES START */}
-      {results &&
-        results.items &&
-        results.items.map((entry, idx) => {
-          return (
-            <EventCard
-              title={entry.title}
-              summary={entry.description}
-              image={entry.bannerImage}
-              uri={entry.sys.uri}
-              key={idx}
-            />
-          );
-        })}
 
+      {results && (
+        <ul>
+          {results.map((entry, idx) => {
+            return <li key={idx}>{entry.title}</li>;
+          })}
+        </ul>
+      )}
       {!results || (results.length < 1 && <p>No results found.</p>)}
-      {/* DELIVERY API RENDER ENTRIES END */}
-    </EventsListingStyled>
+    </EventListingStyled>
   );
 };
 
-BlogListing.propTypes = {
+EventsListing.propTypes = {
   className: PropTypes.string,
 };
 
-export default BlogListing;
+export default EventsListing;

src/app/pages/Events/EventPage.js

-import React from 'react';
-import PropTypes from 'prop-types';
-import MainLayout from '~/layouts/Main.layout';
-import EventRecord from '~/features/eventListing/components/EventRecord';
-import { Loading } from '~/core/routes/Loading';
-
-const EventPage = ({ entry }) => {
-  if (!entry) return <Loading />;
-
-  return (
-    <MainLayout>
-      <EventRecord entry={entry} />
-    </MainLayout>
-  );
-};
-
-EventPage.propTypes = {
-  entry: PropTypes.object,
-};
-
-export default EventPage;

src/app/pages/Listings/EventsListing.page.js

-import React from 'react';
-import PropTypes from 'prop-types';
-import MainLayout from '~/layouts/Main.layout';
-import EventsListing from '~/features/eventListing/components/EventsListing';
-
-const EventsListingPage = () => {
-  return (
-    <MainLayout>
-      <h1 className="pageTitle">Events listing</h1>
-      <EventsListing />
-    </MainLayout>
-  );
-};
-
-EventsListingPage.propTypes = {
-  entry: PropTypes.object,
-};
-
-export default EventsListingPage;