expand / collapse

client/src/features/info/Info.jsx

@@ -37,9 +37,9 @@ export default function Info() {
 
     // Handle selection data
     socket.on('selected', (data) => {
-      const formatedCurrent = `${data.index != null ? data.index + 1 : '-'}/${
-        data.total != null ? data.total : '-'
-      }`;
+      const formatedCurrent = `Event ${
+        data.index != null ? data.index + 1 : '-'
+      }/${data.total != null ? data.total : '-'}`;
 
       setSelected(formatedCurrent);
     });
@@ -51,6 +51,7 @@ export default function Info() {
     };
   }, [socket]);
 
+  // TODO: Put this in use effect
   // prepare data
   const titlesNow = {
     title: titles.titleNow,
@@ -68,10 +69,10 @@ export default function Info() {
 
   return (
     <>
-      <div className={style.main}>{`Event ${selected}`}</div>
+      <div className={style.main}>{selected}</div>
+      <InfoLogger logData={logData} />
       <InfoTitle title={'Now'} data={titlesNow} />
       <InfoTitle title={'Next'} data={titlesNext} />
-      <InfoLogger logData={logData} />
     </>
   );
 }

client/src/features/info/Info.module.css

@@ -6,7 +6,6 @@
   border: 1px solid rgba(0, 0, 0, 0.05);
   border-radius: 4px;
   padding: 8px;
-  overflow-y: scroll;
 }
 
 .main {
@@ -36,6 +35,11 @@ ul > li {
   color: #fff;
 }
 
+.log {
+  overflow-y: scroll;
+  height: 40vh;
+}
+
 .info {
   color: #fff;
 }
@@ -55,9 +59,11 @@ ul > li {
 }
 
 .moreExpanded {
-  transform: rotate(0deg);
+  transform: scaleY(-1);
+  transition: transform 0.3s;
 }
 
 .moreCollapsed {
-  transform: rotate(180deg);
+  transform: scaleY(1);
+  transition: transform 0.3s;
 }

client/src/features/info/InfoLogger.jsx

@@ -1,30 +1,35 @@
 import { Icon } from '@chakra-ui/react';
+import { useState } from 'react';
 import { FiChevronUp } from 'react-icons/fi';
 import style from './Info.module.css';
 
 export default function InfoLogger(props) {
+  const [collapsed, setCollapsed] = useState(false);
+
   const { logData } = props;
+
   return (
     <div className={style.container}>
       <div className={style.header}>
         Log
         <Icon
-          className={style.moreCollapsed}
+          className={collapsed ? style.moreCollapsed : style.moreExpanded}
           as={FiChevronUp}
-          marginTop='-0.5em'
-          // onClick={() => props.setCollapsed(true)}
+          onClick={() => setCollapsed((c) => !c)}
         />
       </div>
-      <ul className={style.log}>
-        <li className={style.info}>10:35:23 [PLAYBACK] Next</li>
-        <li className={style.client}>
-          10:32:10 [CLIENT] New Socket client (Total now 3)
-        </li>
-        <li className={style.info}>10:28:23 [PLAYBACK] Next</li>
-        <li className={style.info}>10:25:23 [PLAYBACK] Play</li>
-        <li className={style.info}>10:23:13 [SERVER] Server Reconnected</li>
-        <li className={style.error}>10:23:10 [SERVER] Server Disconnected</li>
-      </ul>
+      {!collapsed && (
+        <ul className={style.log}>
+          <li className={style.info}>10:35:23 [PLAYBACK] Next</li>
+          <li className={style.client}>
+            10:32:10 [CLIENT] New socket client (total: 3)
+          </li>
+          <li className={style.info}>10:28:23 [PLAYBACK] Next</li>
+          <li className={style.info}>10:25:23 [PLAYBACK] Play</li>
+          <li className={style.info}>10:23:13 [SERVER] Server Reconnected</li>
+          <li className={style.error}>10:23:10 [SERVER] Server Disconnected</li>
+        </ul>
+      )}
     </div>
   );
 }

client/src/features/info/InfoTitle.jsx

@@ -1,37 +1,43 @@
 import { Icon } from '@chakra-ui/react';
+import { useState } from 'react';
 import { FiChevronUp } from 'react-icons/fi';
 import style from './Info.module.css';
 
 export default function InfoTitle(props) {
+  const [collapsed, setCollapsed] = useState(false);
+
   const { title, data } = props;
   return (
     <div className={style.container}>
       <div className={style.header}>
         {title}
         <Icon
-          className={style.moreExpanded}
+          className={collapsed ? style.moreCollapsed : style.moreExpanded}
           as={FiChevronUp}
-          marginTop='-0.5em'
-          // onClick={() => props.setCollapsed(true)}
+          onClick={() => setCollapsed((c) => !c)}
         />
       </div>
 
-      <div>
-        <span className={style.label}>Title: </span>
-        {data.title}
-      </div>
-      <div>
-        <span className={style.label}>Subtitle: </span>
-        {data.subtitle}
-      </div>
-      <div>
-        <span className={style.label}>Presenter: </span>
-        {data.presenter}
-      </div>
-      <div>
-        <span className={style.label}>Notes: </span>
-        {data.note}
-      </div>
+      {!collapsed && (
+        <>
+          <div>
+            <span className={style.label}>Title: </span>
+            {data.title}
+          </div>
+          <div>
+            <span className={style.label}>Presenter: </span>
+            {data.presenter}
+          </div>
+          <div>
+            <span className={style.label}>Subtitle: </span>
+            {data.subtitle}
+          </div>
+          <div>
+            <span className={style.label}>Notes: </span>
+            {data.note}
+          </div>
+        </>
+      )}
     </div>
   );
 }