style cleanup + tweaks

Title <> Subtitle relationships
Animat ein

client/src/features/editors/list/ActionButtons.jsx

@@ -1,13 +1,13 @@
 import { Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/menu';
 import { IconButton } from '@chakra-ui/button';
-import { FiZap, FiPlus, FiMinus, FiMinusCircle, FiClock } from 'react-icons/fi';
+import { FiZap, FiPlus, FiMinusCircle, FiClock } from 'react-icons/fi';
 
 export default function ActionButtons(props) {
-  const { showDel, showAdd, showDelay, showBlock } = props;
+  const { showAdd, showDelay, showBlock } = props;
 
   const menuStyle = {
     color: '#000000',
-    backgroundColor: 'rgba(255,255,255,0.67)',
+    backgroundColor: 'rgba(255,255,255,1)',
   };
 
   return (
@@ -23,26 +23,28 @@ export default function ActionButtons(props) {
         color={'orange.500'}
       />
       <MenuList style={menuStyle}>
-        {showDel && (
-          <MenuItem icon={<FiMinus />} onClick={props.deleteHandler}>
-            Delete
-          </MenuItem>
-        )}
-        {showAdd && (
-          <MenuItem icon={<FiPlus />} onClick={props.addHandler}>
-            Event next
-          </MenuItem>
-        )}
-        {showDelay && (
-          <MenuItem icon={<FiClock />} onClick={props.delayHandler}>
-            Delay next
-          </MenuItem>
-        )}
-        {showBlock && (
-          <MenuItem icon={<FiMinusCircle />} onClick={props.blockHandler}>
-            Block next
-          </MenuItem>
-        )}
+        <MenuItem
+          icon={<FiPlus />}
+          onClick={props.addHandler}
+          isDisabled={!showAdd}
+        >
+          Event next
+        </MenuItem>
+
+        <MenuItem
+          icon={<FiClock />}
+          onClick={props.delayHandler}
+          isDisabled={!showDelay}
+        >
+          Delay next
+        </MenuItem>
+        <MenuItem
+          icon={<FiMinusCircle />}
+          onClick={props.blockHandler}
+          isDisabled={!showBlock}
+        >
+          Block next
+        </MenuItem>
       </MenuList>
     </Menu>
   );

client/src/features/editors/list/EventBlock.jsx

@@ -11,7 +11,6 @@ import DeleteIconBtn from '../../../common/components/buttons/DeleteIconBtn';
 
 export default function EventBlock(props) {
   const { data, selected, next, delay, index, eventsHandler } = props;
-  const [visible, setVisible] = useState(false);
 
   const [more, setMore] = useState(false);
 
@@ -53,6 +52,11 @@ export default function EventBlock(props) {
     updateValues('presenter', v);
   };
 
+  const handleVisibleToggle = (v) => {
+    // setVisible(previousState => !previousState);
+    updateValues('isPublic', !data.isPublic);
+  };
+
   return (
     <div className={selected ? style.eventRowActive : style.eventRow}>
       <span className={style.drag}>
@@ -110,8 +114,8 @@ export default function EventBlock(props) {
       </div>
       <div className={style.actionOverlay}>
         <VisibleIconBtn
-          clickhandler={() => setVisible(!visible)}
-          active={visible || undefined}
+          clickhandler={handleVisibleToggle}
+          active={data.isPublic}
         />
         <DeleteIconBtn clickhandler={deleteHandler} />
         <ActionButtons

client/src/features/editors/list/EventList.jsx

@@ -5,6 +5,7 @@ import { useSocket } from '../../../app/context/socketContext';
 import tinykeys from 'tinykeys';
 import Empty from '../../../common/state/Empty';
 import EventListItem from './EventListItem';
+import { AnimatePresence, motion } from 'framer-motion';
 
 export default function EventList(props) {
   const { events, eventsHandler } = props;
@@ -78,14 +79,38 @@ export default function EventList(props) {
     return <Empty text='No Events' />;
   }
 
+  // motion
+  const cursorVariants = {
+    hidden: {
+      scale: 0,
+    },
+    visible: {
+      scale: 1,
+      transition: {
+        duration: 0.3,
+      },
+    },
+    exit: {
+      scale: 0,
+    },
+  };
+
   console.log('EventList: events in event list', events);
   let cumulativeDelay = 0;
 
-  console.log('debug next id', next)
-
   return (
     <div className={style.eventContainer}>
-      {cursor === -1 && <div className={style.cursor} />}
+      <AnimatePresence>
+        {cursor === -1 && (
+          <motion.div
+            className={style.cursor}
+            variants={cursorVariants}
+            initial='hidden'
+            animate='visible'
+            exit='exit'
+          />
+        )}
+      </AnimatePresence>
 
       {events.map((e, index) => {
         if (e.type === 'delay') cumulativeDelay += e.duration;
@@ -101,7 +126,17 @@ export default function EventList(props) {
               eventsHandler={eventsHandler}
               delay={cumulativeDelay}
             />
-            {cursor === index && <div className={style.cursor} />}
+            <AnimatePresence>
+              {cursor === index && (
+                <motion.div
+                  className={style.cursor}
+                  variants={cursorVariants}
+                  initial='hidden'
+                  animate='visible'
+                  exit='exit'
+                />
+              )}
+            </AnimatePresence>
           </div>
         );
       })}

client/src/features/editors/list/EventListWrapper.jsx

@@ -21,6 +21,7 @@ export default function EventListWrapper() {
     eventsNamespace,
     fetchAllEvents
   );
+
   const addEvent = useMutation(requestPost, {
     // we optimistically update here
     onMutate: async (newEvent) => {
@@ -29,10 +30,13 @@ export default function EventListWrapper() {
 
       // Snapshot the previous value
       let previousEvents = queryClient.getQueryData(eventsNamespace);
+      console.log('debug', previousEvents)
       if (previousEvents == null) {
-        await queryClient.refetchQueries();
+        refetch();
         previousEvents = queryClient.getQueryData(eventsNamespace);
       }
+      console.log('debug 2', previousEvents)
+
       // optimistically update object, temp ID until refetch
       let optimistic = [...previousEvents];
       optimistic.splice(newEvent.order, 0, {

client/src/features/editors/list/List.module.css

@@ -22,4 +22,6 @@
   background-color: #ff7597;
   border-radius: 2px;
   margin: 0 auto;
+  /* transition: 1s;
+  transition-property: all; */
 }