Merge pull request #1427 from rit-construct-makerspace/cowsed/themefixes

Theme editing and deletion

Author: cowsed

client/eslint.config.js

@@ -14,7 +14,8 @@ export default tseslint.config(
       ecmaVersion: 2020,
       globals: globals.browser,
       parserOptions: {
-        project: "./tsconfig.json"
+        project: "./tsconfig.json",
+        tsconfigRootDir: import.meta.dirname
       },
 
     },

client/src/pages/site-settings/ManageThemePage.tsx

@@ -1,23 +1,25 @@
 import { useMutation, useQuery } from "@apollo/client/react";
 import { Button, LinearProgress, Stack, Typography } from "@mui/material";
-import { GET_THEME, MARK_DEFAULT_THEME, UPDATE_THEME } from "../../queries/themeQueries";
+import { GET_THEME, GET_THEMES, MARK_DEFAULT_THEME, UPDATE_THEME } from "../../queries/themeQueries";
 import { useNavigate, useParams } from "react-router-dom";
 import { ServerThemeData } from "../../types/site_settings/MakeTheme";
 import SaveIcon from '@mui/icons-material/Save';
 import NotInterestedIcon from '@mui/icons-material/NotInterested';
 import { toast } from "react-toastify";
 import { useMakeTheme } from "../../common/MakeThemeProvider";
-
 import StarIcon from '@mui/icons-material/Star';
 import ThemeEditor from "./ThemeEditor";
+import { ComponentProps } from "react";
 
 export default function ManageThemePage() {
   const { themeKey } = useParams<{ themeKey: string }>();
   const navigate = useNavigate();
   const makeTheme = useMakeTheme();
 
-  const [updateTheme] = useMutation(UPDATE_THEME, { refetchQueries: ["GetThemes"], awaitRefetchQueries: true });
-  const [markDefaultTheme] = useMutation(MARK_DEFAULT_THEME, { refetchQueries: ["GetThemes"], awaitRefetchQueries: true });
+  type ThemeEditorProps = ComponentProps<typeof ThemeEditor>;
+
+  const [updateTheme] = useMutation(UPDATE_THEME, { refetchQueries: [{ query: GET_THEMES, variables: {} }, { query: GET_THEME, variables: { key: themeKey } }], awaitRefetchQueries: true });
+  const [markDefaultTheme] = useMutation(MARK_DEFAULT_THEME, { refetchQueries: [{ query: GET_THEMES, variables: {} }, GET_THEME], awaitRefetchQueries: true });
 
   const themeResult = useQuery(GET_THEME, {
     variables: { key: themeKey },
@@ -28,15 +30,17 @@ export default function ManageThemePage() {
     muiThemeOptions: JSON.parse(themeResult.data?.getTheme.muiThemeOptions)
   } : undefined;
 
+  const updatedTheme = currentTheme
+
   async function handleUpdateTheme() {
     try {
       await updateTheme({
         variables: {
           key: themeKey,
-          themeName: themeName,
-          title: siteTitle,
-          muiThemeOptions: JSON.stringify(muiThemeOptions),
-          logo: logo
+          themeName: updatedTheme.themeName,
+          title: updatedTheme.title,
+          muiThemeOptions: JSON.stringify(updatedTheme.muiThemeOptions),
+          logo: updatedTheme.logo
         }
       })
       toast.success(`Updated Theme!`)
@@ -58,6 +62,36 @@ export default function ManageThemePage() {
     }
   }
 
+  async function themeChanged(theme: ThemeEditorProps) {
+    updatedTheme.logo = theme.logo
+    updatedTheme.muiThemeOptions = {
+      palette: {
+        primary: {
+          main: theme.primary
+        },
+        secondary: {
+          main: theme.secondary
+        },
+        error: {
+          main: theme.error,
+        },
+        warning: {
+          main: theme.warning
+        },
+        info: {
+          main: theme.info
+        },
+        success: {
+          main: theme.success
+        },
+        mode: theme.mode == "light" ? "light" : "dark"
+      }
+    }
+    updatedTheme.themeName = theme.themeName
+    updatedTheme.title = theme.siteTitle
+
+  }
+
   return (
     <Stack alignItems={"center"} spacing={3}>
       <title>{`Edit Theme | ${makeTheme.title}`}</title>
@@ -94,8 +128,10 @@ export default function ManageThemePage() {
       </Stack>
       {currentTheme
         ? <ThemeEditor
+          onChange={themeChanged}
+          themeKey={currentTheme.key}
           themeName={currentTheme.themeName}
-          siteTitle={currentTheme.themeName}
+          siteTitle={currentTheme.title}
           logo={currentTheme.logo}
 
           primary={currentTheme.muiThemeOptions.palette?.primary.main}

client/src/pages/site-settings/NewThemePage.tsx

@@ -1,4 +1,4 @@
-import { Alert, AppBar, Box, Button, Card, createTheme, Paper, Stack, TextField, ThemeOptions, ThemeProvider, ToggleButton, ToggleButtonGroup, Tooltip, Typography } from "@mui/material";
+import { AppBar, Box, Button, Card, createTheme, Paper, Stack, TextField, ThemeOptions, ThemeProvider, ToggleButton, ToggleButtonGroup, Tooltip, Typography } from "@mui/material";
 import { useNavigate } from "react-router-dom";
 import NotInterestedIcon from '@mui/icons-material/NotInterested';
 import { useState } from "react";
@@ -7,10 +7,11 @@ import styled from "styled-components";
 import { makeCDNLink } from "../../common/ImageFinder";
 import AddIcon from '@mui/icons-material/Add';
 import { useMutation } from "@apollo/client/react";
-import { CREATE_THEME } from "../../queries/themeQueries";
+import { CREATE_THEME, GET_THEMES } from "../../queries/themeQueries";
 import { toast } from "react-toastify";
 import { useMakeTheme } from "../../common/MakeThemeProvider";
 import AnnouncementIcon from '@mui/icons-material/Announcement';
+import ThemePreview from "./ThemePreview";
 
 const StyledImg = styled.img`
   padding: 12px;
@@ -22,7 +23,7 @@ const StyledImg = styled.img`
 export default function NewThemePage() {
   const navigate = useNavigate();
 
-  const [createMakeTheme] = useMutation(CREATE_THEME, { refetchQueries: ["GetThemes"], awaitRefetchQueries: true });
+  const [createMakeTheme] = useMutation(CREATE_THEME, { refetchQueries: [{ query: GET_THEMES, variables: {}} ], awaitRefetchQueries: true });
 
   const makeTheme = useMakeTheme();
 
@@ -76,9 +77,9 @@ export default function NewThemePage() {
     },
   });
 
-  async function handleCreateTheme() {
+  function handleCreateTheme() {
     try {
-      await createMakeTheme({
+      createMakeTheme({
         variables: {
           themeName: themeName,
           title: siteTitle,
@@ -236,122 +237,7 @@ export default function NewThemePage() {
                 onChange={(e) => setSuccess(e.target.value)}
               />
             </Stack>
-            <Stack direction={"row"} spacing={2}>
-              <Stack spacing={1} width={"100%"}>
-                <Typography variant="subtitle1">Primary Example</Typography>
-                <Button
-                  variant="contained"
-                  color="primary"
-                >
-                  I'm a Button!
-                </Button>
-                <Button
-                  variant="outlined"
-                  color="primary"
-                >
-                  I'm a Button!
-                </Button>
-              </Stack>
-              <Stack spacing={1} width={"100%"}>
-                <Typography variant="subtitle1">Secondary Example</Typography>
-                <Button
-                  variant="contained"
-                  color="secondary"
-                >
-                  I'm a Button!
-                </Button>
-                <Button
-                  variant="outlined"
-                  color="secondary"
-                >
-                  I'm a Button!
-                </Button>
-              </Stack>
-              <Stack spacing={1} width={"100%"}>
-                <Typography variant="subtitle1">Error Example</Typography>
-                <Button
-                  variant="contained"
-                  color="error"
-                >
-                  I'm a Button!
-                </Button>
-                <Button
-                  variant="outlined"
-                  color="error"
-                >
-                  I'm a Button!
-                </Button>
-                <Alert
-                  variant="filled"
-                  severity="error"
-                >
-                  Error!
-                </Alert>
-              </Stack>
-              <Stack spacing={1} width={"100%"}>
-                <Typography variant="subtitle1">Warning Example</Typography>
-                <Button
-                  variant="contained"
-                  color="warning"
-                >
-                  I'm a Button!
-                </Button>
-                <Button
-                  variant="outlined"
-                  color="warning"
-                >
-                  I'm a Button!
-                </Button>
-                <Alert
-                  variant="filled"
-                  severity="warning"
-                >
-                  Warning!
-                </Alert>
-              </Stack>
-              <Stack spacing={1} width={"100%"}>
-                <Typography variant="subtitle1">Info Example</Typography>
-                <Button
-                  variant="contained"
-                  color="info"
-                >
-                  I'm a Button!
-                </Button>
-                <Button
-                  variant="outlined"
-                  color="info"
-                >
-                  I'm a Button!
-                </Button>
-                <Alert
-                  variant="filled"
-                  severity="info"
-                >
-                  Info!
-                </Alert>
-              </Stack>
-              <Stack spacing={1} width={"100%"}>
-                <Typography variant="subtitle1">Success Example</Typography>
-                <Button
-                  variant="contained"
-                  color="success"
-                >
-                  I'm a Button!
-                </Button>
-                <Button
-                  variant="outlined"
-                  color="success"
-                >
-                  I'm a Button!
-                </Button>
-                <Alert
-                  variant="filled"
-                  severity="success"
-                >
-                  Success!
-                </Alert>
-              </Stack>
-            </Stack>
+            <ThemePreview />
           </Stack>
         </Stack>
       </Paper>

client/src/pages/site-settings/ThemeEditor.tsx

@@ -1,5 +1,5 @@
 import { AppBar, Box, Card, createTheme, PaletteMode, Paper, Stack, TextField, ThemeOptions, ThemeProvider, ToggleButton, ToggleButtonGroup, Tooltip, Typography } from "@mui/material";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import ThemePreview from "./ThemePreview";
 import FileUploadButton from "../../common/FileUploadButton";
 import { makeCDNLink } from "../../common/ImageFinder";
@@ -15,6 +15,8 @@ const StyledImg = styled.img`
 `;
 
 interface ThemeEditorProps {
+  onChange: (theme: ThemeEditorProps) => void
+  themeKey: string
   themeName: string;
   siteTitle: string;
   logo: string;
@@ -42,6 +44,32 @@ export default function ThemeEditor(props: ThemeEditorProps) {
   const [success, setSuccess] = useState(props.success);
   const [mode, setMode] = useState(props.mode);
 
+
+  useEffect(() => {
+    const new_props: ThemeEditorProps = {
+      onChange: props.onChange,
+      themeKey: props.themeKey,
+
+      themeName: themeName,
+      siteTitle: siteTitle,
+      logo: logo,
+      primary: primary,
+      secondary: secondary,
+      error: error,
+      warning: warning,
+      info: info,
+      success: success,
+      mode: mode,
+    }
+
+    if (props.onChange) {
+      props.onChange(new_props)
+    }
+
+  }, [props, themeName, siteTitle, logo, primary, secondary, error, warning, info, success, mode
+  ]);
+
+
   const muiThemeOptions: ThemeOptions = {
     palette: {
       primary: {