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
+);