`} `; } function ActionsList({ actions }) { return html`

${actions.map(action => html` <${Action} action="${action}" key="${action._id}" /> `)}

`; } async function getActions() { const response = await fetch("https://wwf-actioncenteren.azurewebsites.net/api/pages"); const jsonData = await response.json(); console.log(jsonData); return jsonData; } function campaignAttributesIncludesPromos(campaignAttributes) { return campaignAttributes.includes('Promo 1') || campaignAttributes.includes('Promo 2') || campaignAttributes.includes('Promo 3'); } function App() { const [actions, setActions] = useState([]); const [loading, setLoading] = useState(true); useEffect(() => { const fetchActions = async () => { const actions = await getActions(); // create new data structure that pulls out promo campaignattributes const actionsTransformed = actions.map(action => { return { _id: action._id, publishDate: action.publishDate, campaignAttributes: action.campaignAttributes, promo: action.campaignAttributes.find(att => att.search('Promo') >= 0)?.slice(-1), featuredImage: action.featuredImage, featuredImageAttribution: action.featuredImageAttribution, excerpt: action.excerpt, title: action.title, url: action.url, progressBarId: action.progressBarId } }); // find just the actions marked promo and remove them from the list const promoActions = [] const promo1Index = actionsTransformed.findIndex(action => action.promo === '1'); promo1Index >= 0 ? promoActions.push(actionsTransformed.splice(promo1Index, 1)) : undefined; const promo2Index = actionsTransformed.findIndex(action => action.promo === '2'); promo2Index >= 0 ? promoActions.push(actionsTransformed.splice(promo2Index, 1)) : undefined; const promo3Index = actionsTransformed.findIndex(action => action.promo === '3'); promo3Index >= 0 ? promoActions.push(actionsTransformed.splice(promo3Index, 1)) : undefined; // sort promo actions by promo promoActions.sort((a, b) => a.promo - b.promo); //sort remaining actions actionsTransformed.sort((a, b) => b.publishDate - a.publishDate); // sort the attributes by Promo Number setActions((promoActions.flat().concat(actionsTransformed)).slice(0, 3)); setLoading(false); } const result = fetchActions().catch(console.error); }, []); return html` ${loading && html`

Loading...

`} ${!loading && actions.length > 0 && html`<${ActionsList} actions="${actions}" />`} `; } render(html` <${App} />`, document.querySelector('.action-list-js'));