feat(desktop-app): redux + new routing system

desktop-app/.eslintrc.json

@@ -26,8 +26,8 @@
                 ]
             }
         ],
-        // "space-before-function-paren": "off",
         "@typescript-eslint/space-before-function-paren": "off",
-        "@typescript-eslint/indent": "off"
+        "@typescript-eslint/indent": "off",
+        "multiline-ternary": "off"
     }
 }

desktop-app/main/background.ts

@@ -4,6 +4,8 @@ import { createWindow } from './helpers'
 
 const isProd: boolean = process.env.NODE_ENV === 'production'
 
+process.env.ELECTRON_DISABLE_SECURITY_WARNINGS = 'true'
+
 if (isProd) {
   serve({ directory: 'app' })
 } else {

desktop-app/package.json

@@ -21,6 +21,7 @@
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toast": "^1.1.4",
     "@radix-ui/react-tooltip": "^1.0.6",
+    "@reduxjs/toolkit": "^1.9.5",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "date-fns": "^2.30.0",
@@ -31,6 +32,7 @@
     "prop-types": "^15.8.1",
     "react-day-picker": "^8.8.1",
     "react-hook-form": "^7.45.4",
+    "react-redux": "^8.1.2",
     "tailwind-merge": "^1.14.0",
     "tailwindcss-animate": "^1.0.6",
     "zod": "^3.22.2"
@@ -57,6 +59,6 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tailwindcss": "^3.1.8",
-    "typescript": "*"
+    "typescript": "5.2.2"
   }
 }

desktop-app/renderer/components/custom/headerPopover.tsx

@@ -3,34 +3,96 @@ import {
   PopoverContent,
   PopoverTrigger
 } from '@/components/ui/popover'
-import { Button } from '@/components/ui/button'
+import { Button, ClosePopover } from '@/components/ui/button'
+import type { ButtonProps } from '@/components/ui/button'
+import { Separator } from '@/components/ui/separator'
+import { useRouter } from 'next/router'
+import { useDispatch, useSelector } from 'react-redux'
+import type { RootStateType } from '@/redux/store'
+import {
+  SET_TAB,
+  SET_ID,
+  SET_CONTAINER_STATE
+} from '@/redux/reducers/headerStateSlice'
 
 export default function HeaderPopover({
   title,
-  onclick = () => {},
-  variant = 'popover'
+  route,
+  ids = []
 }: {
   title: string
-  onclick?: () => void
-  variant?: 'popover' | 'button'
+  route: string
+  ids?: string[]
 }): JSX.Element {
+  const router = useRouter()
+  const dispatch = useDispatch()
+  const { tab, id, isContainerMode } = useSelector(
+    (state: RootStateType) => state.headerState
+  )
+  const buttonProps: ButtonProps = {
+    variant: 'ghost',
+    className: 'w-full'
+  }
   return (
     <>
-      {variant === 'button' && (
-        <Button variant="ghost" onClick={onclick}>
-          {title}
-        </Button>
-      )}
-      {variant === 'popover' && (
-        <Popover>
-          <PopoverTrigger asChild>
-            <Button variant="ghost" onClick={onclick}>
-              {title}
-            </Button>
-          </PopoverTrigger>
-          <PopoverContent className="w-80"></PopoverContent>
-        </Popover>
-      )}
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button variant={tab === title ? 'secondary' : 'ghost'}>
+            {title}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-80">
+          <div className="flex flex-col items-center space-y-3">
+            {tab === title && !isContainerMode ? (
+              <ClosePopover {...buttonProps}>All {title}</ClosePopover>
+            ) : (
+              <Button
+                onClick={(e) => {
+                  router.push(route).catch((err) => {
+                    console.error(err)
+                  })
+                  dispatch(SET_CONTAINER_STATE(false))
+                  dispatch(SET_TAB(title))
+                  dispatch(SET_ID(''))
+                }}
+                {...buttonProps}
+              >
+                All {title}
+              </Button>
+            )}
+            <Separator orientation="horizontal" />
+            <div className="w-full text-start">
+              {ids.length > 0 ? `Secific ${title}:` : `No ${title} found`}
+            </div>
+            {ids.map((cuerrentId, index) => {
+              console.log(id, cuerrentId)
+              return (
+                <div key={index}>
+                  {id === cuerrentId ? (
+                    <ClosePopover {...buttonProps} variant="secondary">
+                      {cuerrentId}
+                    </ClosePopover>
+                  ) : (
+                    <Button
+                      onClick={() => {
+                        router.push(`${route}/${cuerrentId}`).catch((err) => {
+                          console.error(err)
+                        })
+                        dispatch(SET_CONTAINER_STATE(true))
+                        dispatch(SET_TAB(title))
+                        dispatch(SET_ID(cuerrentId))
+                      }}
+                      {...buttonProps}
+                    >
+                      {cuerrentId}
+                    </Button>
+                  )}
+                </div>
+              )
+            })}
+          </div>
+        </PopoverContent>
+      </Popover>
     </>
   )
 }

desktop-app/renderer/components/layout/contextHeader.tsx

@@ -5,27 +5,30 @@ import Image from 'next/image'
 import { useRouter } from 'next/router'
 import type { ReactNode } from 'react'
 import { ThemeButton } from '../custom/themeButton'
+import { useSelector } from 'react-redux'
+import type { RootStateType } from '@/redux/store'
 
 export default function ContextHeader({
   children,
-  isProvider = false,
+  isServer = false,
   isExchangeAccount = false,
   isSpace = false,
   isFleet = false,
   isBot = false
 }: {
   children: ReactNode
-  isProvider?: boolean
+  isServer?: boolean
   isExchangeAccount?: boolean
   isSpace?: boolean
   isFleet?: boolean
   isBot?: boolean
 }): JSX.Element {
-  isProvider = isProvider || isExchangeAccount || isSpace || isFleet || isBot
+  isServer = isServer || isExchangeAccount || isSpace || isFleet || isBot
   isExchangeAccount = isExchangeAccount || isSpace || isFleet || isBot
   isSpace = isSpace || isFleet || isBot
   isFleet = isFleet || isBot
   const router = useRouter()
+  const { spaceIds } = useSelector((state: RootStateType) => state.headerState)
   return (
     <>
       <div className="container flex h-20 flex-row items-center justify-between space-y-0 py-4">
@@ -39,81 +42,33 @@ export default function ContextHeader({
               })
             }}
           >
-            <Image src="/images/logo.svg" alt="Napse Logo" fill />
+            <Image src="/images/logo.svg" alt="Napse Logo" fill priority />
           </Button>
           <Separator className="relative h-2/3" orientation="vertical" />
         </div>
         <div className="flex w-full justify-start space-x-2">
-          {isProvider && (
-            <>
-              <HeaderPopover
-                title="Providers"
-                variant="button"
-                onclick={() => {
-                  router.push('/providers').catch((err) => {
-                    console.error(err)
-                  })
-                }}
-              />
-              {/* <Separator className="h-10" orientation="vertical" /> */}
-            </>
-          )}
-
           {isExchangeAccount && (
-            <>
-              <HeaderPopover
-                title="Exchange accounts"
-                variant="button"
-                onclick={() => {
-                  router.push('/').catch((err) => {
-                    console.error(err)
-                  })
-                }}
-              />
-              {/* <Separator className="h-10" orientation="vertical" /> */}
-            </>
+            <HeaderPopover
+              title="Exchange Accounts"
+              route="/exchangeAccounts"
+            />
           )}
           {isSpace && (
-            <>
-              <HeaderPopover
-                title="Spaces"
-                variant="button"
-                onclick={() => {
-                  router.push('/spaces').catch((err) => {
-                    console.error(err)
-                  })
-                }}
-              />
-              {/* <Separator className="h-10" orientation="vertical" /> */}
-            </>
-          )}
-          {isFleet && (
-            <>
-              <HeaderPopover
-                title="Fleets"
-                variant="button"
-                onclick={() => {
-                  router.push('/').catch((err) => {
-                    console.error(err)
-                  })
-                }}
-              />
-              {/* <Separator className="h-10" orientation="vertical" /> */}
-            </>
+            <HeaderPopover title="Spaces" route="/spaces" ids={spaceIds} />
           )}
-          {isBot && (
+          {isFleet && <HeaderPopover title="Fleets" route="/fleets" />}
+          {isBot && <HeaderPopover title="Bots" route="/bots" />}
+        </div>
+        <div className="flex  justify-start space-x-2">
+          {isServer && (
             <HeaderPopover
-              title="Bots"
-              variant="button"
-              onclick={() => {
-                router.push('/').catch((err) => {
-                  console.error(err)
-                })
-              }}
+              title="Servers"
+              route="/servers"
+              ids={['AWS - Tom JEANNESSON']}
             />
           )}
+          <ThemeButton />
         </div>
-        <ThemeButton />
       </div>
       <Separator className="h-[1px]" />
       <div>{children}</div>

desktop-app/renderer/components/providers/reduxProvider.tsx

@@ -0,0 +1,8 @@
+import { Provider } from 'react-redux'
+import type { ProviderProps } from 'react-redux'
+export default function ReduxProvider({
+  children,
+  ...props
+}: ProviderProps): JSX.Element {
+  return <Provider {...props}>{children}</Provider>
+}

desktop-app/renderer/components/theme-provider.tsx → desktop-app/renderer/components/providers/themeProvider.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import { ThemeProvider as NextThemesProvider } from 'next-themes'
 import { type ThemeProviderProps } from 'next-themes/dist/types'
 
-export function ThemeProvider({
+export default function ThemeProvider({
   children,
   ...props
 }: ThemeProviderProps): JSX.Element {

desktop-app/renderer/components/ui/button.tsx

@@ -3,6 +3,7 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import * as React from 'react'
 
 import { cn } from '@/lib/utils'
+import { Close } from '@radix-ui/react-popover'
 
 const buttonVariants = cva(
   'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
@@ -53,4 +54,17 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 )
 Button.displayName = 'Button'
 
-export { Button, buttonVariants }
+const ClosePopover = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    return (
+      <Close
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+ClosePopover.displayName = 'ClosePopover'
+
+export { Button, buttonVariants, ClosePopover }

desktop-app/renderer/pages/404.tsx

@@ -0,0 +1,23 @@
+import Error from 'next/error'
+import { useRouter } from 'next/router'
+import { Button } from '@/components/ui/button'
+
+export default function Custom404(): JSX.Element {
+  const router = useRouter()
+  return (
+    <div className="flex h-full flex-col">
+      <Button
+        className="h-10 w-32"
+        variant="ghost"
+        onClick={() => {
+          router.push('/').catch((err) => {
+            console.error(err)
+          })
+        }}
+      >
+        <p className="text-sm font-medium">Return Home</p>
+      </Button>
+      <Error statusCode={404} />
+    </div>
+  )
+}

desktop-app/renderer/pages/_app.tsx

@@ -3,19 +3,20 @@ import Header from '@/components/layout/header'
 
 import '@/styles/global.css'
 import Footer from '@/components/layout/footer'
-import { ThemeProvider } from '@/components/theme-provider'
-
+import ThemeProvider from '@/components/providers/themeProvider'
+import ReduxProvider from '@/components/providers/reduxProvider'
+import store from '../redux/store'
 function MyApp({ Component, pageProps }: AppProps): JSX.Element {
   return (
-    <>
-      <Header>
-        <Footer>
-          <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+    <ReduxProvider store={store}>
+      <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+        <Header>
+          <Footer>
             <Component {...pageProps} />
-          </ThemeProvider>
-        </Footer>
-      </Header>
-    </>
+          </Footer>
+        </Header>
+      </ThemeProvider>
+    </ReduxProvider>
   )
 }