fix formatting

app/client/web/src/access/Access.tsx

@@ -11,15 +11,21 @@ import {
   PasswordInput,
   TextInput,
 } from '@mantine/core'
-import { useDisclosure } from '@mantine/hooks';
+import { useDisclosure } from '@mantine/hooks'
 import login from '../images/login.png'
-import { IconLock, IconUser, IconSettings, IconServer, IconKey } from '@tabler/icons-react'
+import {
+  IconLock,
+  IconUser,
+  IconSettings,
+  IconServer,
+  IconKey,
+} from '@tabler/icons-react'
 
 export function Access() {
   const { state, actions } = useAccess()
-  const [opened, { open, close }] = useDisclosure(false);
+  const [opened, { open, close }] = useDisclosure(false)
 
-console.log("AVAILABLE: ", state.availableSet);
+  console.log('AVAILABLE: ', state.availableSet)
 
   return (
     <div className={classes.split}>
@@ -53,11 +59,9 @@ console.log("AVAILABLE: ", state.availableSet);
             <>
               <Title order={3}>{state.strings.login}</Title>
               <Space h="md" />
-              <Button
-                size="compact-sm"
-                variant="transparent"
-                onClick={open}
-              >{ state.hostname }</Button>
+              <Button size="compact-sm" variant="transparent" onClick={open}>
+                {state.hostname}
+              </Button>
               <TextInput
                 className={classes.input}
                 size="md"
@@ -101,21 +105,19 @@ console.log("AVAILABLE: ", state.availableSet);
             <>
               <Title order={3}>{state.strings.accessAccount}</Title>
               <Space h="md" />
-              <Button
-                size="compact-sm"
-                variant="transparent"
-                onClick={open}
-              >{ state.hostname }</Button>
-                <TextInput
-                  className={classes.input}
-                  size="md"
-                  leftSectionPointerEvents="none"
-                  leftSection={<IconKey />}
-                  placeholder={state.strings.accessCode}
-                  onChange={(event) =>
-                    actions.setToken(event.currentTarget.value)
-                  }
-                />
+              <Button size="compact-sm" variant="transparent" onClick={open}>
+                {state.hostname}
+              </Button>
+              <TextInput
+                className={classes.input}
+                size="md"
+                leftSectionPointerEvents="none"
+                leftSection={<IconKey />}
+                placeholder={state.strings.accessCode}
+                onChange={(event) =>
+                  actions.setToken(event.currentTarget.value)
+                }
+              />
               <Space h="md" />
               <Button variant="filled" className={classes.submit}>
                 {state.strings.login}
@@ -129,18 +131,14 @@ console.log("AVAILABLE: ", state.availableSet);
               </Button>
             </>
           )}
-
-
           {state.mode === 'create' && (
             <>
               <Title order={3}>{state.strings.createAccount}</Title>
               <Space h="md" />
-              <Button
-                size="compact-sm"
-                variant="transparent"
-                onClick={open}
-              >{ state.hostname }</Button>
-              { (state.available === 0 || !state.availableSet) && (
+              <Button size="compact-sm" variant="transparent" onClick={open}>
+                {state.hostname}
+              </Button>
+              {(state.available === 0 || !state.availableSet) && (
                 <TextInput
                   className={classes.input}
                   size="md"
@@ -185,7 +183,11 @@ console.log("AVAILABLE: ", state.availableSet);
               <Button variant="filled" className={classes.submit}>
                 {state.strings.create}
               </Button>
-              <Button variant="subtle" onClick={() => actions.setMode('login')} size="compact-sm">
+              <Button
+                variant="subtle"
+                onClick={() => actions.setMode('login')}
+                size="compact-sm"
+              >
                 {state.strings.accountLogin}
               </Button>
             </>
@@ -194,11 +196,9 @@ console.log("AVAILABLE: ", state.availableSet);
             <>
               <Title order={3}>{state.strings.admin}</Title>
               <Space h="md" />
-              <Button
-                size="compact-sm"
-                variant="transparent"
-                onClick={open}
-              >{ state.hostname }</Button>
+              <Button size="compact-sm" variant="transparent" onClick={open}>
+                {state.hostname}
+              </Button>
               <PasswordInput
                 className={classes.input}
                 size="md"
@@ -237,9 +237,7 @@ console.log("AVAILABLE: ", state.availableSet);
           leftSection={<IconServer />}
           placeholder={state.strings.host}
           value={state.node}
-          onChange={(event) =>
-            actions.setNode(event.currentTarget.value)
-          }
+          onChange={(event) => actions.setNode(event.currentTarget.value)}
         />
       </Modal>
     </div>

app/client/web/src/access/useAccess.hook.ts

@@ -4,7 +4,7 @@ import { AppContext } from '../context/AppContext'
 import { ContextType } from '../context/ContextType'
 
 export function useAccess() {
-  const debounce = useRef(null);
+  const debounce = useRef(setTimeout(() => {}, 0))
   const app = useContext(AppContext) as ContextType
   const settings = useContext(SettingsContext) as ContextType
   const [state, setState] = useState({
@@ -32,41 +32,38 @@ export function useAccess() {
 
   useEffect(() => {
     const { protocol, hostname, port } = location
-    setUrl(`${protocol}//${hostname}:${port}`);
+    setUrl(`${protocol}//${hostname}:${port}`)
   }, [])
 
   const setUrl = (node: string) => {
     try {
-      const url = new URL(node);
-      const { protocol, hostname, port } = url;
-      getAvailable(`${hostname}:${port}`, protocol === 'https:');
-      updateState({ node, hostname: hostname });
-    }
-    catch(err) {
-      console.log(err);
-      const { protocol, hostname, port } = location;
-      getAvailable(`${hostname}:${port}`, protocol === 'https:');
-      updateState({ node, hostname: location.hostname });
+      const url = new URL(node)
+      const { protocol, hostname, port } = url
+      getAvailable(`${hostname}:${port}`, protocol === 'https:')
+      updateState({ node, hostname: hostname })
+    } catch (err) {
+      console.log(err)
+      const { protocol, hostname, port } = location
+      getAvailable(`${hostname}:${port}`, protocol === 'https:')
+      updateState({ node, hostname: location.hostname })
     }
   }
 
   const getAvailable = (node: string, secure: boolean) => {
-    updateState({ availableSet: false });
-    clearTimeout(debounce.current);
+    updateState({ availableSet: false })
+    clearTimeout(debounce.current)
     debounce.current = setTimeout(async () => {
       try {
-        const available = await app.actions.getAvailable(node, secure);
+        const available = await app.actions.getAvailable(node, secure)
 
-console.log("AVAILABLE: ", available);
+        console.log('AVAILABLE: ', available)
 
-        updateState({ available, availableSet: true });
+        updateState({ available, availableSet: true })
+      } catch (err) {
+        console.log(err)
       }
-      catch (err) {
-        console.log(err);
-      }
-    }, 1000);
+    }, 1000)
   }
-   
 
   useEffect(() => {
     const { display, strings, themes, theme, languages, language } =
@@ -98,7 +95,7 @@ console.log("AVAILABLE: ", available);
       updateState({ token })
     },
     setNode: (node: string) => {
-      setUrl(node);
+      setUrl(node)
     },
     setLanguage: (code: string) => {
       settings.actions.setLanguage(code)
@@ -106,8 +103,7 @@ console.log("AVAILABLE: ", available);
     setTheme: (theme: string) => {
       settings.actions.setTheme(theme)
     },
-    login: () => {
-    },
+    login: () => {},
   }
 
   return { state, actions }

app/client/web/src/constants/Strings.ts

@@ -222,7 +222,7 @@ export const fr = {
   ok: 'OK',
   cancel: 'Annuler',
   enableNotifications: 'Notifications Push',
-  accessCode: 'Code d\'Accès',
+  accessCode: "Code d'Accès",
   forgotPassword: 'Mot de Passe Oublié',
 
   new: 'Nouveau',

app/client/web/src/context/useAppContext.hook.ts

@@ -50,17 +50,15 @@ export function useAppContext() {
     },
     accountLogout: async () => {
       if (state.session) {
-        await sdk.current.logout(state.session, false);
+        await sdk.current.logout(state.session, false)
         updateState({ session: null })
       }
     },
     getAvailable: async (node: string, secure: boolean) => {
-      return await sdk.current.available(node, secure);
-    },
-    adminLogin: async () => {
-    },
-    adminLogout: async () => {
+      return await sdk.current.available(node, secure)
     },
+    adminLogin: async () => {},
+    adminLogout: async () => {},
   }
 
   return { state, actions }

app/client/web/src/session/Session.tsx

@@ -1,12 +1,10 @@
 import React, { useContext } from 'react'
 import { Button } from '@mantine/core'
-import { AppContext } from '../context/AppContext';
-import { ContextType } from '../context/ContextType';
+import { AppContext } from '../context/AppContext'
+import { ContextType } from '../context/ContextType'
 
 export function Session() {
-  const app = useContext(AppContext) as ContextType;
+  const app = useContext(AppContext) as ContextType
 
-  return (
-    <Button onClick={app.actions.accountLogout}>Session Logout</Button>
-  )
+  return <Button onClick={app.actions.accountLogout}>Session Logout</Button>
 }