diff --git a/package.json b/package.json index 649a500..48885ab 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "@tauri-apps/api": "^1.2.0", "clsx": "^1.2.1", "debug": "^4.3.4", + "notistack": "^2.0.8", "ramda": "^0.28.0", "react": "^18.2.0", "react-async-hook": "^4.0.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2e381a2..fcba154 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -28,6 +28,7 @@ specifiers: eslint-plugin-jsx-a11y: ^6.7.1 eslint-plugin-prettier: ^4.2.1 eslint-plugin-simple-import-sort: ^8.0.0 + notistack: ^2.0.8 postcss: ^8.4.21 prettier: ^2.8.3 ramda: ^0.28.0 @@ -50,6 +51,7 @@ dependencies: '@tauri-apps/api': 1.2.0 clsx: 1.2.1 debug: 4.3.4 + notistack: 2.0.8_22lfntuixnwi3ifma47z2sdegi ramda: 0.28.0 react: 18.2.0 react-async-hook: 4.0.0_react@18.2.0 @@ -2215,6 +2217,29 @@ packages: engines: {node: '>=0.10.0'} dev: true + /notistack/2.0.8_22lfntuixnwi3ifma47z2sdegi: + resolution: {integrity: sha512-/IY14wkFp5qjPgKNvAdfL5Jp6q90+MjgKTPh4c81r/lW70KeuX6b9pE/4f8L4FG31cNudbN9siiFS5ql1aSLRw==} + peerDependencies: + '@emotion/react': ^11.4.1 + '@emotion/styled': ^11.3.0 + '@mui/material': ^5.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + '@emotion/react': + optional: true + '@emotion/styled': + optional: true + dependencies: + '@emotion/react': 11.10.5_kzbn2opkn2327fwg5yzwzya5o4 + '@emotion/styled': 11.10.5_qvatmowesywn4ye42qoh247szu + '@mui/material': 5.11.4_lskpmcsdi7ipu6qpuapyu56ihm + clsx: 1.2.1 + hoist-non-react-statics: 3.3.2 + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 + dev: false + /object-assign/4.1.1: resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==} engines: {node: '>=0.10.0'} diff --git a/src/App.tsx b/src/App.tsx index d688bd5..0ef95b6 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,4 +1,4 @@ -import { useCallback, useEffect, useState } from 'react'; +import { useCallback, useState } from 'react'; import tw from 'twin.macro'; import { invoke } from '@tauri-apps/api/tauri'; import './App.css'; diff --git a/src/configurator/configurator.tsx b/src/configurator/configurator.tsx index 7f20802..5e8ac23 100644 --- a/src/configurator/configurator.tsx +++ b/src/configurator/configurator.tsx @@ -1,18 +1,19 @@ import { invoke } from '@tauri-apps/api'; -import { FC, useEffect, useMemo, useState } from 'react'; +import { FC, useCallback, useEffect, useMemo, useState } from 'react'; import tw, { styled } from 'twin.macro'; import { useAsync, useAsyncCallback } from 'react-async-hook'; import { DisplayWithLedStrips } from './components/display-with-led-strips'; import { PickerConfiguration } from './models/picker-configuration'; import { DisplayConfig } from './models/display-config'; import { ScreenshotDto } from './models/screenshot.dto'; -import { Alert, Snackbar } from '@mui/material'; +import { Alert, Fab, Snackbar } from '@mui/material'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faSpinner } from '@fortawesome/free-solid-svg-icons'; +import { faRotateBack, faSpinner } from '@fortawesome/free-solid-svg-icons'; import { update } from 'ramda'; import { CompletedLedStrip } from './components/completed-led-strip'; import { LedCountProvider } from './contents/led-count'; import debug from 'debug'; +import { useSnackbar } from 'notistack'; const logger = debug('app:configurator'); @@ -31,11 +32,14 @@ const writePickerConfig = async (config: PickerConfiguration) => { config, }); }; -const StyledConfiguratorContainer = styled.section(tw`flex flex-col items-stretch`); +const StyledConfiguratorContainer = styled.section( + tw`flex flex-col items-stretch relative`, +); const StyledDisplayContainer = styled.section(tw`overflow-auto`); const ConfiguratorInner: FC = () => { + const { enqueueSnackbar } = useSnackbar(); const { loading: pendingPickerConfig, result: savedPickerConfig } = useAsync( getPickerConfig, [], @@ -75,7 +79,16 @@ const ConfiguratorInner: FC = () => { })().then(); } }, [savedPickerConfig, onDisplayConfigChange, defaultScreenshotOfDisplays]); - useEffect(() => {}, [defaultScreenshotOfDisplays]); + + const resetBackToDefaultConfig = useCallback(() => { + if (defaultScreenshotOfDisplays) { + setScreenshotOfDisplays(defaultScreenshotOfDisplays); + } else { + enqueueSnackbar('Default Config was not found. please try again later.', { + variant: 'error', + }); + } + }, [setScreenshotOfDisplays, defaultScreenshotOfDisplays]); const displays = useMemo(() => { if (screenshotOfDisplays) { @@ -104,7 +117,15 @@ const ConfiguratorInner: FC = () => { screenshots={screenshotOfDisplays} onDisplayConfigChange={onDisplayConfigChange} /> - {displays}; + {displays} + + + } sx={{ width: '100%' }}> This is a success message! diff --git a/src/main.tsx b/src/main.tsx index 16c8ee2..b472b64 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,11 +1,14 @@ -import React from "react"; -import ReactDOM from "react-dom/client"; -import App from "./App"; +import { SnackbarProvider } from 'notistack'; +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import App from './App'; import GlobalStyles from './styles/global-styles'; ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( - + + + , -); \ No newline at end of file +);