Merge branch 'master' of github.com:w9jds/DeLorean-v88

w9jds · Nov 24, 2023 · c030c12 · c030c12
2 parents 55c4ab2 + 7fe92b4
commit c030c12
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 33 deletions.
diff --git a/src/controls/SessionSheet.scss b/src/controls/SessionSheet.scss
@@ -5,6 +5,11 @@
   &-header {
     display: flex;
     flex-direction: column;
+
+    h6 {
+      font-weight: 100;
+      opacity: 0.8;
+    }
   }
 
   &-content {
@@ -66,6 +71,6 @@
   border-radius: 0;
 
   .session-header {
-    padding: 12px 24px;
+    padding: 12px 16px;
   }
 }
diff --git a/src/controls/SessionSheet.tsx b/src/controls/SessionSheet.tsx
@@ -1,7 +1,8 @@
-import React, { FC } from 'react';
+import React, { FC, useMemo } from 'react';
 import { connect } from 'react-redux';
 import { Dispatch, bindActionCreators } from 'redux';
 import { DocumentReference, deleteDoc } from '@firebase/firestore';
+import { intervalToDuration } from 'date-fns/fp';
 import createDOMPurify from 'dompurify';
 
 import { Speaker } from 'models/speaker';
@@ -54,6 +55,9 @@ const SessionSheet: FC<SessionSheetProps> = ({
     editSession(reference, session);
   };
 
+  const hasDescription = useMemo(() => session.description.length > 0, [session.description]);
+  const hasSpeakers = useMemo(() => session.speakers.length > 0, [session.speakers]);
+
   const buildAdminActions = () => (
     <div className="edit-actions">
       <Tooltip title="Edit" placement="top">
@@ -69,11 +73,23 @@ const SessionSheet: FC<SessionSheetProps> = ({
     </div>
   );
 
+  const buildSessionHeader = () => {
+    return <div className="session-header">
+      <Typography variant="h5">{formatSessionTitle()}</Typography>
+      <Typography variant="subtitle1">{formatSessionLocation()}</Typography>
+      <Typography variant="subtitle2">{formatSessionDuration()}</Typography>
+    </div>
+  }
+
   const formatSessionTitle = () => {
     let title = '';
 
-    if (session.type) {
-      title += `[${session.type}] `;
+    switch (session.type) {
+      case SessionTypes.BREAK:
+      case SessionTypes.REGISTRATION:
+        break;
+      default:
+        title += `[${session.type}] `;
     }
 
     title += session.name;
@@ -92,53 +108,62 @@ const SessionSheet: FC<SessionSheetProps> = ({
     return `Room ${session.location}`;
   };
 
-  if (session.type === SessionTypes.BREAK || session.type === SessionTypes.REGISTRATION) {
+  const formatSessionDuration = () => {
+    if (!session.startTime || !session.endTime) return null;
+
+    const interval = intervalToDuration({
+      start: session.startTime.toDate(),
+      end: session.endTime.toDate()
+    });
+
+    if (interval.hours > 0) {
+      return `${interval.hours} hr ${interval.minutes} mins`;
+    } else {
+      return `${interval.minutes} mins`;
+    }
+  }
+
+  if (!hasDescription && !hasSpeakers) {
     return (
       <Paper square className="session-card">
         {isEditMode ? buildAdminActions() : null}
-        <div className="session-header">
-          <Typography variant="h5">{session.name}</Typography>
-          <Typography variant="subtitle1">{formatSessionLocation()}</Typography>
-        </div>
+        {buildSessionHeader()}
       </Paper>
     );
   } else {
     return (
       <Accordion className="session">
         <AccordionSummary expandIcon={<ExpandMore />} >
           {isEditMode ? buildAdminActions() : null}
-          <div className="session-header">
-            <Typography variant="h5">{formatSessionTitle()}</Typography>
-            <Typography variant="subtitle1">{formatSessionLocation()}</Typography>
-          </div>
+          {buildSessionHeader()}
         </AccordionSummary>
         <AccordionDetails>
           <div className="session-content">
-            <div dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(session.description)}} />
-
-            <Divider className="divider" />
-
-            <div className="speakers">
-              <Typography variant="h6" className="header">
-                Speakers
-              </Typography>
-              {
-                speakers.map(speaker => (
-                  <ListItem key={speaker.name} button onClick={onSpeakerClicked(speaker)}>
-                    <ListItemAvatar>
-                      <Avatar className="big-avatar" alt={speaker.name} src={speaker.portraitUrl} />
-                    </ListItemAvatar>
-                    <ListItemText primary={speaker.name} secondary={speaker.company || null} />
-                  </ListItem>
-                ))
-              }
-            </div>
+            { hasDescription ? <div dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(session.description)}} /> : null }
+            { hasDescription && hasSpeakers ? <Divider className="divider" /> : null }
+
+            { hasSpeakers ?
+              <div className="speakers">
+                <Typography variant="h6" className="header">
+                  Speakers
+                </Typography>
+                {
+                  speakers.map(speaker => (
+                    <ListItem key={speaker.name} button onClick={onSpeakerClicked(speaker)}>
+                      <ListItemAvatar>
+                        <Avatar className="big-avatar" alt={speaker.name} src={speaker.portraitUrl} />
+                      </ListItemAvatar>
+                      <ListItemText primary={speaker.name} secondary={speaker.company || null} />
+                    </ListItem>
+                  ))
+                }
+              </div> : null
+            }
           </div>
         </AccordionDetails>
       </Accordion>
     );
   }
-
 };
 
 const mapStateToProps = (state: ApplicationState) => ({