feat: reset config button.

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",

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'}

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';

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}
       />
-      <StyledDisplayContainer>{displays}</StyledDisplayContainer>;
+      <StyledDisplayContainer>{displays}</StyledDisplayContainer>
+      <Fab
+        aria-label="reset"
+        size="small"
+        tw="top-2 right-2 absolute"
+        onClick={resetBackToDefaultConfig}
+      >
+        <FontAwesomeIcon icon={faRotateBack} />
+      </Fab>
       <Snackbar open={pendingGetLedColorsByConfig} autoHideDuration={3000}>
         <Alert icon={<FontAwesomeIcon icon={faSpinner} />} sx={{ width: '100%' }}>
           This is a success message!

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(
   <React.StrictMode>
     <GlobalStyles />
-    <App />
+    <SnackbarProvider maxSnack={3}>
+      <App />
+    </SnackbarProvider>
   </React.StrictMode>,
-);
+);