feat: reset config button.

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