From 47846e264171bbe4b8dc2e9607e149a105b49142 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Sun, 27 Feb 2022 17:17:05 +0100
Subject: [PATCH] fix(ui) - metadata in offline session

---
 .../Session_/EventsBlock/Metadata/Metadata.js    | 16 +++++++++-------
 .../EventsBlock/Metadata/MetadataItem.js         |  2 +-
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/frontend/app/components/Session_/EventsBlock/Metadata/Metadata.js b/frontend/app/components/Session_/EventsBlock/Metadata/Metadata.js
index b0dca0956..0992c0f88 100644
--- a/frontend/app/components/Session_/EventsBlock/Metadata/Metadata.js
+++ b/frontend/app/components/Session_/EventsBlock/Metadata/Metadata.js
@@ -10,13 +10,15 @@ export default connect(state => ({
   metadata: state.getIn([ 'sessions', 'current', 'metadata' ]),
 }))(function Metadata ({ metadata }) {
   const [ visible, setVisible ] = useState(false);
-  const toggle = useCallback(() => metadata.length > 0 && setVisible(v => !v), []);
+  const metaLenth = Object.keys(metadata).length;
+  const toggle = useCallback(() => metaLenth > 0 && setVisible(v => !v), []);
+  
   return (
     <>
       <Popup
         trigger={
           <IconButton
-            className={cn("w-full", { 'opacity-25' : metadata.length === 0 })}
+            className={cn("w-full", { 'opacity-25' : metaLenth === 0 })}
             onClick={ toggle }
             icon="id-card"
             plain
@@ -33,17 +35,17 @@ export default connect(state => ({
           </div>
         }
         on="click"
-        disabled={metadata.length > 0}
+        disabled={metaLenth > 0}
         size="tiny"
         inverted
         position="top center"
       />
       { visible && 
         <div className={ stl.modal } >
-          <NoContent show={ metadata.size === 0 } size="small">
-            { metadata.map((i) => {
-              const key = Object.keys(i)[0]
-              const value = i[key]
+          <NoContent show={ metaLenth === 0 } size="small">
+            { Object.keys(metadata).map((key) => {
+              // const key = Object.keys(i)[0]
+              const value = metadata[key]
               return <MetadataItem item={ { value, key } } key={ key } />
             }) }
           </NoContent>
diff --git a/frontend/app/components/Session_/EventsBlock/Metadata/MetadataItem.js b/frontend/app/components/Session_/EventsBlock/Metadata/MetadataItem.js
index 8abd1913c..76cf459b0 100644
--- a/frontend/app/components/Session_/EventsBlock/Metadata/MetadataItem.js
+++ b/frontend/app/components/Session_/EventsBlock/Metadata/MetadataItem.js
@@ -49,7 +49,7 @@ export default class extends React.PureComponent {
 					content={ open && <SessionList similarSessions={ similarSessions } loading={ loading } /> }
           onClose={ open ? this.switchOpen : () => null }
         />
-				<div className={ cn("flex justify-between items-center p-3", stl.field) } >
+				<div className={ cn("flex justify-between items-center p-3 capitalize", stl.field) } >
 	        <div>
 						<div className={ stl.key }>{ item.key }</div>
 						<TextEllipsis