feat: add alerts component and global alerts store

src/App.tsx

@@ -2,15 +2,20 @@ import './utils/i18n';
 import Home from './pages/Home';
 import { Route, Router, Routes } from "@solidjs/router"; // 👈 Import the router
 import Connection from './pages/Connection';
+import { StoreProvider } from './services/Context';
+import { Alerts } from './components/Alerts';
 
 function App() {
   return (
-    <Router>
-      <Routes>
-        <Route path="/" component={Home} />
-        <Route path="/connection" component={Connection} />
-      </Routes>
-    </Router>
+    <StoreProvider>
+      <Router>
+        <Routes>
+          <Route path="/" component={Home} />
+          <Route path="/connection" component={Connection} />
+        </Routes>
+      </Router>
+      <Alerts />
+    </StoreProvider>
   );
 }
 

src/components/AddConnectionForm.tsx

@@ -7,12 +7,13 @@ import { invoke } from '@tauri-apps/api';
 
 import { Alert, Button, TextInput, Select, ColorCircle } from './UI';
 import {
-  ConnectionColor, PORTS_MAP, Schemes, AvailableConnectionModes, SocketPathDefaults,
+  PORTS_MAP, Schemes, AvailableConnectionModes, SocketPathDefaults,
   connectionColors, ConnectionMode, connectionModes, schemes, HostCredentials, SocketCredentials, FileCredentials
 } from '../interfaces';
 import { titleCase } from '../utils/formatters';
 import { FileInput } from './UI/FileInput';
 import { omit } from '../utils/utils';
+import { useAppSelector } from '../services/Context';
 
 const MIN_LENGTH_STR = 2;
 const MAX_LENGTH_STR = 255;
@@ -75,6 +76,7 @@ const defaultValues = {
 }
 
 const AddConnectionForm = () => {
+  const { errorService: { addError } } = useAppSelector()
   const formHandler = useFormHandler(zodSchema(ConnectionFormSchema));
   const { formData, isFormInvalid, setFieldDefaultValue, getFormErrors, setFieldValue } = formHandler;
 
@@ -92,6 +94,7 @@ const AddConnectionForm = () => {
       await invoke('add_connection', { name, color, scheme })
     } catch (error) {
       console.error(error);
+      addError((error as any).message);
     }
   };
 

src/components/Alerts.tsx

@@ -0,0 +1,19 @@
+import { For } from "solid-js"
+import { useAppSelector } from "../services/Context"
+
+export const Alerts = () => {
+  const { errorService: { errors } } = useAppSelector()
+  return (
+    <div class="absolute">
+      <div class="toast">
+        <For each={errors}>
+          {error => (
+            <div class="alert alert-error">
+              <span>{error.message}</span>
+            </div>
+          )}
+        </For>
+      </div>
+    </div>
+  )
+}

src/services/Context.tsx

@@ -0,0 +1,20 @@
+import { createContext, ParentComponent, useContext } from "solid-js"
+import { ErrorService } from "./Error"
+
+
+export type RootState = {
+  errorService: ReturnType<typeof ErrorService>
+}
+
+
+const rootState: RootState = {
+  errorService: ErrorService()
+}
+
+const StoreContext = createContext<RootState>()
+
+export const useAppSelector = () => useContext(StoreContext)!
+
+export const StoreProvider: ParentComponent = (props) => {
+  return <StoreContext.Provider value={rootState}> {props.children} </StoreContext.Provider>
+}

src/services/Error.ts

@@ -0,0 +1,24 @@
+import { createStore } from "solid-js/store"
+import { randomId } from "../utils/utils";
+
+type Error = {
+  message: string;
+  id: string;
+}
+
+const errorStore = createStore<Error[]>([]);
+
+export const ErrorService = () => {
+  const [errors, setErrors] = errorStore
+
+  const addError = (error: string) => {
+    const id = randomId()
+    setErrors(errors.concat({ message: error, id }))
+
+    setTimeout(() => {
+      setErrors(errors.filter(e => e.id !== id))
+    }, 5000)
+  }
+
+  return { errors, addError }
+}

src/utils/utils.ts

@@ -8,3 +8,5 @@ export const firstKey = (obj: Record<string, any>) => {
   for (const key in obj) return key;
 }
 
+export const randomId = () => Math.random().toString(36).substring(12);
+