Add AlertInfo to ScenesPage

YeonV · Aug 9, 2023 · 1813cce · 1813cce
1 parent 372d104
commit 1813cce
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 6 deletions.
diff --git a/.github/workflows/build-deploy.yml b/.github/workflows/build-deploy.yml
@@ -22,7 +22,7 @@ jobs:
       with:
         node-version: 20
     - name: Install NPM packages
-      run: yarn install --cache-folder .yarn_cache1
+      run: yarn install
 
     - name: Build project
       run: |

diff --git a/src/components/Integrations/Spotify/Widgets/SpotifyWidgetPro/SpWidgetPro.tsx b/src/components/Integrations/Spotify/Widgets/SpotifyWidgetPro/SpWidgetPro.tsx
@@ -1,6 +1,6 @@
-import Box from '@mui/material/Box'
-import Stack from '@mui/material/Stack'
+import { Stack, Box } from '@mui/material'
 
+import { Fragment } from 'react'
 import useStyle from './SpWidgetPro.styles'
 import SpControls from './SpControls'
 import SpTrack from './SpTrack'
@@ -15,7 +15,7 @@ const SpotifyWidgetPro = ({ drag }: { drag?: boolean }) => {
   const swSize = useStore((state) => state.spotify.swSize)
 
   return (
-    <Box component={drag ? SpFloating : undefined}>
+    <Box component={drag ? SpFloating : Fragment}>
       <div className={classes.Widget}>
         <Box className={`${classes.spWrapper} ${drag ? swSize : ''}`}>
           <SpTrack className={`${classes.spTrack} ${drag ? swSize : ''}`} />

diff --git a/src/pages/Scenes/Scenes.tsx b/src/pages/Scenes/Scenes.tsx
@@ -9,7 +9,9 @@ import {
   Typography,
   Grid,
   Chip,
-  useTheme
+  useTheme,
+  Alert,
+  Collapse
 } from '@mui/material'
 import useStore from '../../store/useStore'
 import NoYet from '../../components/NoYet'
@@ -61,6 +63,8 @@ const Scenes = () => {
   const scenes = useStore((state) => state.scenes)
   const features = useStore((state) => state.features)
   const activateScene = useStore((state) => state.activateScene)
+  const infoAlerts = useStore((state) => state.ui.infoAlerts)
+  const setInfoAlerts = useStore((state) => state.ui.setInfoAlerts)
   const sceneActiveTags = useStore((state) => state.ui.sceneActiveTags)
   const toggletSceneActiveTag = useStore(
     (state) => state.ui.toggletSceneActiveTag
@@ -98,6 +102,19 @@ const Scenes = () => {
           flexDirection: 'column'
         }}
       >
+        <Collapse in={infoAlerts.scenes}>
+          <Alert
+            severity="info"
+            onClose={() => {
+              setInfoAlerts('scenes', false)
+            }}
+          >
+            Head over to Devices-Page and adjust all effects for all devices.
+            <br />
+            You can then save everything as a scene by using the{' '}
+            <strong>+</strong> button
+          </Alert>
+        </Collapse>
         {scenes && Object.keys(scenes).length && features.scenetables ? (
           <Grid
             container

diff --git a/src/store/ui/storeUI.tsx b/src/store/ui/storeUI.tsx
@@ -24,7 +24,17 @@ const storeUI = (set: any) => ({
       false,
       'ui/darkmode'
     ),
-
+  infoAlerts: {
+    scenes: true
+  },
+  setInfoAlerts: (key: 'scenes', val: boolean): void =>
+    set(
+      produce((state: IStore) => {
+        state.ui.infoAlerts[key] = val
+      }),
+      false,
+      'ui/setInfoAlerts'
+    ),
   snackbar: {
     isOpen: false,
     messageType: 'error' as VariantType,