global updates (change theme picker, add error ui, global annotations)

sherlock-iremus · Jan 10, 2024 · bf5052a · bf5052a
1 parent 53c4603
commit bf5052a
Show file tree

Hide file tree

Showing 9 changed files with 37 additions and 78 deletions.
diff --git a/index.html b/index.html
@@ -11,7 +11,6 @@
   </head>
 
   <body style="margin: 0">
-    <noscript>You need to enable JavaScript to run the Tonalities webapp.</noscript>
     <div id="app"></div>
     <script type="module" src="/src/index.jsx"></script>
   </body>

diff --git a/src/App.jsx b/src/App.jsx
@@ -3,14 +3,15 @@ import { ScoreAnnotator } from './features/score/ScoreAnnotator'
 import { useMemo } from 'react'
 import { Landing } from './features/Landing'
 import { ThemeProvider, createTheme } from '@mui/material'
-import { colors } from './features/ThemePicker'
 import { useSelector } from 'react-redux'
 import { RouterProvider, createBrowserRouter } from 'react-router-dom'
+import { Error } from './features/Error'
+import { colors } from './utils'
 
 const router = createBrowserRouter(
   [
-    { path: '*', element: <Landing />  },
-    { path: '/project/:projectId/score/:scoreId', element: <ScoreAnnotator /> },
+    { path: '*', element: <Landing />, errorElement: <Error /> },
+    { path: '/project/:projectId/score/:scoreId', element: <ScoreAnnotator />, errorElement: <Error /> },
   ],
   {
     basename: '/tonalities',

diff --git a/src/features/AccountMenu.jsx b/src/features/AccountMenu.jsx
@@ -5,6 +5,7 @@ import {
   DialogActions,
   DialogContent,
   DialogTitle,
+  Grid,
   IconButton,
   ListItemIcon,
   MenuItem,
@@ -14,16 +15,19 @@ import { Box } from '@mui/system'
 import { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { Menu } from '../components/Menu'
-import { getIri } from '../utils'
+import { colors, getIri } from '../utils'
 import { ContributorItem } from './items/ContributorItem'
 import { BASE_API_URL, useGetUserIdQuery } from '../services/service'
+import { useDispatch } from 'react-redux'
+import { setColorIndex } from '../services/globals'
 
 export const AccountMenu = () => {
   const { data: userId } = useGetUserIdQuery()
   const [anchorEl, setAnchorEl] = useState(null)
   const [isEditing, setIsEditing] = useState(false)
   const open = Boolean(anchorEl)
   const navigate = useNavigate()
+  const dispatch = useDispatch()
 
   const handleClose = () => setAnchorEl(null)
 
@@ -75,7 +79,13 @@ export const AccountMenu = () => {
       </Menu>
       <Dialog open={isEditing} onClose={() => setIsEditing(false)}>
         <DialogTitle>My Sherlock profile</DialogTitle>
-        <DialogContent></DialogContent>
+        <DialogContent>
+          <Grid container>
+            {colors.map((color, index) => (
+              <IconButton size='large' key={index} sx={{ bgcolor: color[500] }} onClick={() => dispatch(setColorIndex(index))} />
+            ))}
+          </Grid>
+        </DialogContent>
       </Dialog>
     </Box>
   )

diff --git a/src/features/Error.jsx b/src/features/Error.jsx
@@ -0,0 +1,9 @@
+import { Alert, Dialog, Stack } from '@mui/material'
+
+export const Error = () => (
+  <Stack height="100vh" justifyContent="center">
+    <Dialog open>
+      <Alert severity="error">An error occured</Alert>
+    </Dialog>
+  </Stack>
+)
diff --git a/src/features/Landing.jsx b/src/features/Landing.jsx
@@ -22,14 +22,13 @@ import { useEffect, useState } from 'react'
 import { Intro } from './Intro'
 import { useGetUserIdQuery } from '../services/service'
 import scores from '../config/scores.json'
-import { ThemePicker } from './ThemePicker'
 import { Projects } from './Projects'
 import { PersonalProjects } from './PersonalProjects'
 import { Input } from '../components/Input'
 
 export const Landing = () => {
   const [isOpen, setIsOpen] = useState(false)
-  const [selectedScoreIri, setSelectedScoreIri] = useState(null)
+  const [selectedScoreIri, setSelectedScoreIri] = useState('')
   const [upload, setUpload] = useState(null)
   const [filter, setFilter] = useState('')
   const [selectedComposers, setSelectedComposers] = useState([])
@@ -43,6 +42,10 @@ export const Landing = () => {
     if (selectedScoreIri && isRecentOpen) setIsRecentOpen(false)
   }, [selectedScoreIri])
 
+  useEffect(() => {
+    if (selectedScoreIri && isRecentOpen) setSelectedScoreIri('')
+  }, [isRecentOpen])
+
   return (
     <Stack height="100vh" justifyContent="space-between" alignItems="center" bgcolor="secondary.light">
       <NewProject
@@ -52,7 +55,6 @@ export const Landing = () => {
       <Stack alignSelf="stretch" direction="row" padding={2} justifyContent="space-between" alignItems="center">
         <img src={PolifoniaLogo} width="100px" />
         <AccountMenu />
-        <ThemePicker />
       </Stack>
       <Stack borderRadius={3} bgcolor="white" boxShadow={1} marginX={4} minHeight={0}>
         <Stack direction="row" minHeight={0}>
@@ -93,7 +95,7 @@ export const Landing = () => {
                   onChange={e => setFilter(e.target.value)}
                   placeholder="Search score by title..."
                 />
-                <Grid padding={1} rowSpacing={1} columnSpacing={1}>
+                <Grid padding={1}>
                   {composers.map((composer, index) => (
                     <Chip
                       key={index}
@@ -125,7 +127,7 @@ export const Landing = () => {
                       >
                         <ListItemButton
                           selected={selectedScoreIri === scoreIri}
-                          onClick={() => setSelectedScoreIri(selectedScoreIri === scoreIri ? null : scoreIri)}
+                          onClick={() => setSelectedScoreIri(selectedScoreIri === scoreIri ? '' : scoreIri)}
                         >
                           <ListItemIcon>
                             <AudioFile />

diff --git a/src/features/ThemePicker.jsx b/src/features/ThemePicker.jsx
diff --git a/src/features/edition/Project.jsx b/src/features/edition/Project.jsx
@@ -64,7 +64,7 @@ export const Project = () => {
                 Object.entries(annotationsByPage).map(([page, pageAnnotations]) => (
                   <Stack direction="row" key={page}>
                     <Typography padding={1.5} noWrap fontSize={10}>
-                      Page {page}
+                      {page === '0' ? 'Global' : 'Page ' + page}
                     </Typography>
                     <TimelineSeparator>
                       <TimelineDot />

diff --git a/src/features/score/MeiViewer.jsx b/src/features/score/MeiViewer.jsx
@@ -13,7 +13,6 @@ import { Editor } from '../edition/Editor'
 import { Model } from '../navigator/Model'
 import { Project } from '../edition/Project'
 import { StyleNote } from './StyleNote'
-import { ThemePicker } from '../ThemePicker'
 import { useTheme } from '@mui/material/styles'
 import { Loader } from '../../components/Loader'
 import { getId } from '../../utils'
@@ -161,7 +160,6 @@ export const MeiViewer = ({ file }) => {
           </Tooltip>
         </Stack>
         <Stack flex={1} direction="row" justifyContent="end" alignItems="center" spacing={2}>
-          <ThemePicker />
           {import.meta.env.DEV && <Alert severity="warning">Test environment</Alert>}
           <AccountMenu />
         </Stack>

diff --git a/src/utils.js b/src/utils.js
@@ -1,3 +1,5 @@
+import { blue, blueGrey, brown, deepOrange, deepPurple, indigo, pink, purple, red, teal } from '@mui/material/colors'
+
 export const stringToColor = string => {
   /* eslint-disable no-bitwise */
   let hash = 0
@@ -50,3 +52,5 @@ export const timeSince = date => {
 }
 
 const extractSparql = obj => Object.fromEntries(Object.entries(obj).map(([key, { value }]) => [key, value]))
+
+export const colors = [blue, blueGrey, brown, deepOrange, deepPurple, indigo, pink, purple, red, teal]