baby steps

frontend/src/Event/EventCallInfo.js

@@ -0,0 +1,28 @@
+import React, { useState } from "react";
+import { Link, useLocation, useParams, useNavigate } from 'react-router-dom';
+import {
+  Header,
+  Divider,
+  List,
+  Segment,
+  Statistic,
+  Icon,
+  Menu,
+  Tab
+} from "semantic-ui-react";
+import CallInfoPane from "../Call/components/CallInfoPane"
+// ----------------------------------------------------
+function EventCallInfo(props) {
+
+
+
+
+  return (
+    <Segment>
+        <CallInfoPane call={props.call} />
+    </Segment>
+   
+  );
+}
+
+export default EventCallInfo;

frontend/src/Event/EventPlayer.js

@@ -5,7 +5,7 @@ import MediaPlayer from "../Call/components/MediaPlayer";
 
 import SupportModal from "../Call/components/SupportModal";
 
-import CallInfo from "../Call/components/CallInfo";
+import EventCallInfo from "./EventCallInfo";
 import ListEventCalls from "./ListEventCalls";
 import { useSelector, useDispatch } from 'react-redux'
 
@@ -110,7 +110,7 @@ function EventPlayer(props) {
         </Sidebar.Pushable>
         <Rail position='right' className="desktop-only"  >
           <Sticky offset={60} context={positionRef}>
-            <CallInfo call={currentCall} />
+            <EventCallInfo call={currentCall} />
           </Sticky>
         </Rail>
       </Container>

frontend/src/Event/ViewEvent.js

@@ -123,7 +123,7 @@ function ViewEvent(props) {
         </Container>
       </Menu>
       <Grid style={{ paddingTop: '4em' }}>
-        <Grid.Column mobile={0} tablet={0} computer={1} ></Grid.Column>
+        <Grid.Column mobile={1} tablet={1} computer={1} ></Grid.Column>
         <Grid.Column mobile={16} tablet={8} computer={4}>
           <Container text >
             {eventData && eventData.description}
@@ -135,15 +135,15 @@ function ViewEvent(props) {
         <Grid.Column mobile={8} tablet={8} computer={2}>
         
           <Statistic>
-            <Statistic.Value>{eventData.numCalls}</Statistic.Value>
+            <Statistic.Value>{eventData && eventData.numCalls}</Statistic.Value>
             <Statistic.Label>Calls</Statistic.Label>
           </Statistic>
           </Grid.Column>
 
-        <Grid.Column mobile={0} tablet={0} computer={5}>
+        <Grid.Column mobile={1} tablet={1} computer={5}>
         </Grid.Column>
       </Grid>
-      <EventPlayer eventData={eventData} selectCallId={selectCallId} />
+      {eventData && <EventPlayer eventData={eventData} selectCallId={selectCallId} />}
     </div>
   );
 }