Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
Workshops
Developer workshop
Commits
448b255c
Commit
448b255c
authored
Sep 17, 2020
by
Jon Moore
Browse files
added basic event listing and card
parent
c98265fb
Pipeline
#40369
passed with stage
in 6 minutes
Changes
7
Pipelines
2
Hide whitespace changes
Inline
Side-by-side
src/app/core/routes/StaticRoutes.js
View file @
448b255c
...
...
@@ -17,6 +17,14 @@ 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/blogListing/components/BlogListing.js
View file @
448b255c
...
...
@@ -10,8 +10,6 @@ import BlogListingStyled from '../components.styled/BlogListing.styled';
import
BlogCard
from
'
./BlogCard
'
;
const
fetchEntries
=
async
versionStatus
=>
{
const
entries
=
await
triggerSearch
(
versionStatus
);
const
triggerSearch
=
async
versionStatus
=>
{
try
{
//DELIVERY API QUERY START//
...
...
@@ -31,6 +29,7 @@ const fetchEntries = async versionStatus => {
}
};
const
entries
=
await
triggerSearch
(
versionStatus
);
return
entries
;
};
...
...
src/app/features/eventListing/components.styled/EventCard.styled.js
View file @
448b255c
...
...
@@ -2,7 +2,31 @@ import styled, { css } from 'styled-components';
const
EventCardStyled
=
styled
.
article
`
${()
=>
{
return
css
``
;
return
css
`
display: block;
width: 100%;
max-width: 550px;
margin-bottom: 80px;
&:hover {
cursor: pointer;
}
h3 {
margin: 10px 0;
font-size: 24px;
font-weight: 700;
line-height: 1.3;
}
p {
margin: 0;
margin-bottom: 30px;
font-size: 16px;
line-height: 1.7;
}
img {
width: 100%;
height: auto;
}
`
;
}}
;
`
;
...
...
src/app/features/eventListing/components/EventCard.js
View file @
448b255c
...
...
@@ -5,10 +5,21 @@ import { Link } from 'react-router-dom';
import
EventCardStyled
from
'
../components.styled/EventCard.styled
'
;
const
EventCard
=
()
=>
{
return
<
p
>
Event
card
will
go
here
<
/p>
;
const
EventCard
=
({
title
,
summary
,
image
,
className
})
=>
{
return
(
<
EventCardStyled
className
=
{
className
}
>
<
img
src
=
{
image
.
asset
.
sys
.
uri
}
alt
=
{
image
.
altText
}
/
>
<
h3
>
{
title
}
<
/h3
>
<
p
>
{
summary
}
<
/p
>
<
/EventCardStyled
>
);
};
EventCard
.
propTypes
=
{};
EventCard
.
propTypes
=
{
title
:
PropTypes
.
string
,
summary
:
PropTypes
.
string
,
image
:
PropTypes
.
object
,
className
:
PropTypes
.
string
,
};
export
default
EventCard
;
src/app/features/eventListing/components/EventsListing.js
View file @
448b255c
/* eslint-disable no-unused-vars */
import
React
,
{
useState
,
useEffect
}
from
'
react
'
;
import
PropTypes
from
'
prop-types
'
;
import
{
Link
}
from
'
react-router-dom
'
;
import
{
useSelector
}
from
'
react-redux
'
;
import
{
selectVersionStatus
}
from
'
~/core/redux/selectors
'
;
...
...
@@ -15,11 +16,11 @@ const fetchEntries = async versionStatus => {
try
{
//DELIVERY API QUERY START//
let
query
=
new
Query
(
Op
.
equalTo
(
'
sys.contentTypeId
'
,
'
blogPos
t
'
),
Op
.
equalTo
(
'
sys.contentTypeId
'
,
'
thEven
t
'
),
Op
.
equalTo
(
'
sys.versionStatus
'
,
versionStatus
)
);
query
.
pageSize
=
3
;
query
.
fields
=
[
'
title
'
,
'
summary
'
,
'
image
'
,
'
sys
'
];
query
.
fields
=
[
'
title
'
,
'
description
'
,
'
bannerImage
'
];
//DELIVERY API QUERY END//
//DELIVERY API SEARCH START//
...
...
@@ -69,7 +70,11 @@ const BlogListing = ({ className }) => {
{
results
&&
results
.
items
&&
(
<
ul
>
{
results
.
items
.
map
((
entry
,
idx
)
=>
{
return
<
li
key
=
{
idx
}
>
{
entry
.
title
}
<
/li>
;
return
(
<
li
key
=
{
idx
}
>
<
Link
to
=
{
entry
.
sys
.
uri
}
>
{
entry
.
title
}
<
/Link
>
<
/li
>
);
})}
<
/ul
>
)}
...
...
src/app/features/eventListing/stories/EventCard.stories.js
View file @
448b255c
...
...
@@ -2,16 +2,33 @@ import React from 'react';
import
{
storiesOf
}
from
'
@storybook/react
'
;
import
EventCard
from
'
~/features/eventListing/components/EventCard
'
;
import
{
text
}
from
'
@storybook/addon-knobs
'
;
import
{
text
,
object
}
from
'
@storybook/addon-knobs
'
;
storiesOf
(
'
Features |
Listing
s
'
,
module
).
add
(
storiesOf
(
'
Features |
Event
s
'
,
module
).
add
(
'
Event card
'
,
()
=>
{
const
image
=
{
altText
:
'
Some bad alt text
'
,
transformations
:
'
w=1200&h=800&crop=1200,600,0,100
'
,
caption
:
''
,
asset
:
{
entryDescription
:
null
,
sys
:
{
dataFormat
:
'
asset
'
,
contentTypeId
:
'
image
'
,
id
:
'
1c380b5e-cab4-4120-9581-e0d11db75544
'
,
uri
:
'
https://live-workshops-cte-master.cloud.contensis.com/image-library/images/CC585EEC5F.xed163892.jpg?w=1200&h=800&crop=1200,600,0,100
'
,
},
entryTitle
:
'
CC585EEC5F
'
,
},
};
return
(
<
EventCard
title
=
{
text
(
'
Title
'
,
'
Example title
'
)}
description
=
{
text
(
'
Description
'
,
'
Example description
'
)}
uri
=
{
text
(
'
URI
'
,
'
/events/example-event
'
)}
title
=
{
text
(
'
Title
'
,
'
Example
event
title
'
)}
summary
=
{
text
(
'
Summary
'
,
'
Example summary for the event
'
)}
image
=
{
object
(
'
Image
'
,
image
)}
/
>
);
},
...
...
src/app/pages/Listings/EventsListing.page.js
0 → 100644
View file @
448b255c
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
;
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment