From cf0cbd8f8e44b1334ad13c46b34f4d51bcbbe89b Mon Sep 17 00:00:00 2001
From: Mathias <mathias.skallerud@gmail.com>
Date: Tue, 6 Oct 2020 20:14:31 +0200
Subject: [PATCH] Show new subevent in frontend

---
 src/Frontend/Mainscreen/Event.jsx      | 21 ++++++++++++++++-----
 src/Frontend/Mainscreen/MainScreen.jsx |  2 +-
 src/Frontend/Mainscreen/Posts.jsx      | 21 +++++++++++++++++++++
 3 files changed, 38 insertions(+), 6 deletions(-)
 create mode 100644 src/Frontend/Mainscreen/Posts.jsx

diff --git a/src/Frontend/Mainscreen/Event.jsx b/src/Frontend/Mainscreen/Event.jsx
index 33d33e7..fa44c0b 100644
--- a/src/Frontend/Mainscreen/Event.jsx
+++ b/src/Frontend/Mainscreen/Event.jsx
@@ -4,11 +4,12 @@ import * as SolidIcons from '@fortawesome/free-solid-svg-icons';
 import IconLabel from './IconLabel';
 import { AppContext } from '../App';
 import { eventTimeComparator, selectField, selectTime, selectGroups } from '../utils';
+import Posts from "./Posts";
 import './event.scss';
 
-/****************************/
-/**** SubEvent component ****/
-/****************************/
+/***********************************/
+/**** Gammel SubEvent component ****/
+/***********************************/
 const SubEvent = ({ event, event: { google_maps }, lang }) => {
     const showUrl = google_maps && google_maps.startsWith('https');
 
@@ -26,8 +27,9 @@ const SubEvent = ({ event, event: { google_maps }, lang }) => {
 /*****************************/
 /****** Event component ******/
 /*****************************/
-const Event = ({ data }) => {
+const Event = ({ data, group }) => {
     const event = data;
+    const posts = data.posts
     const [ open, setOpen ] = useState(true);
     const [ state ] = useContext(AppContext);
     const lang = state.lang;
@@ -41,7 +43,7 @@ const Event = ({ data }) => {
     const link = data.link;
     const linkText = selectField(event, 'linkText', lang);
     const chevron = open ? SolidIcons["faChevronUp"] : SolidIcons["faChevronDown"];
-
+    
     return (
         <div className="event-wrapper">
             <div className="event">
@@ -52,12 +54,21 @@ const Event = ({ data }) => {
                 { open && from && <IconLabel icon="faComment" label={from} /> }
                 { open && link && linkText && <IconLabel icon="faLink" label={linkText} link={link}/> }
                 { open && description && <p className="event-description"> { description } </p> }
+                {/***********************************/
+                 /**** Gammel SubEvent component ****/}
                 { open && event.subEvents && event.subEvents.length > 0 && ( 
                     <div className="sub-event-wrapper">
                         { event.subEvents
                             .sort(eventTimeComparator)
                             .map(e => <SubEvent key={`${e.parent_event_id}-${e.title_NO}`} event={e} lang={lang}/>) }
                     </div>
+                )}
+                 {/***********************************/}
+
+                { open && posts && (
+                    <div className="sub-event-wrapper">
+                        { event.posts.map( e => <Posts key={e.id} post={e} lang={lang}/>) }
+                    </div>
                 )}
                 <div className="event-chevron" onClick={() => setOpen(!open)}>
                     <FontAwesomeIcon icon={chevron} />
diff --git a/src/Frontend/Mainscreen/MainScreen.jsx b/src/Frontend/Mainscreen/MainScreen.jsx
index e29c463..75f70ef 100644
--- a/src/Frontend/Mainscreen/MainScreen.jsx
+++ b/src/Frontend/Mainscreen/MainScreen.jsx
@@ -52,7 +52,7 @@ const MainScreen = ({ group, events, removeGroup }) => {
       .filter((e) => translateDayIdx(e.day_NO) === day)
       .filter((e) => eventForGroupFilter(e, group))
       .sort(eventTimeComparator)
-      .map((e) => <Event key={e.id} data={e} />)
+      .map((e) => <Event key={e.id} data={e} group={group}/>)
   ) : (
     <>
       {" "}
diff --git a/src/Frontend/Mainscreen/Posts.jsx b/src/Frontend/Mainscreen/Posts.jsx
new file mode 100644
index 0000000..a5b288b
--- /dev/null
+++ b/src/Frontend/Mainscreen/Posts.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+const Posts = ({ post, lang }) => {
+
+    const showUrl = post.googleMaps && post.googleMaps.startsWith('https');
+    const google_maps = post.googleMaps;
+
+    return (
+        <div className="sub-event">
+            <div className="sub-event-time-and-title">
+                <p className="sub-event-time"> rrrrrrr </p>
+                <p className="sub-event-title"> { post.title } </p>
+            </div>
+            {  showUrl && <a className="sub-event-address" href={google_maps} rel="noopener noreferrer" target="_blank"> { lang === 'NO' ? '(kart)' : '(map)' } </a> }
+            
+        </div>
+    )
+
+}
+
+export default Posts;
\ No newline at end of file