Merge pull request #61 from CHORUS-TRE/refactor/store

small UI fixes

src/app/(home)/page.tsx

@@ -80,25 +80,40 @@ export default function Portal() {
               <Button
                 variant="ghost"
                 size="sm"
-                className="text-muted hover:bg-inherit hover:text-accent"
+                className={`border border-transparent text-muted hover:bg-inherit hover:text-accent ${showGrid ? 'border-accent' : ''}`}
                 onClick={() => setShowGrid(true)}
                 id="grid-button"
+                disabled={showGrid}
               >
                 <LayoutGrid />
               </Button>
               <Button
                 variant="ghost"
                 size="sm"
-                className="text-muted hover:bg-inherit hover:text-accent"
+                className={`border border-transparent text-muted hover:bg-inherit hover:text-accent ${!showGrid ? 'border-accent' : ''}`}
                 onClick={() => setShowGrid(false)}
                 id="table-button"
+                disabled={!showGrid}
               >
                 <Rows3 />
               </Button>
             </div>
           </div>
           <TabsContent value="all">
-            {!showGrid && <WorkspaceTable />}
+            {!showGrid && (
+              <WorkspaceTable
+                cb={() => {
+                  workspaceList()
+                    .then((response) => {
+                      if (response?.error) setError(response.error)
+                      if (response?.data) setWorkspaces(response.data)
+                    })
+                    .catch((error) => {
+                      setError(error.message)
+                    })
+                }}
+              />
+            )}
             {showGrid && (
               <div
                 className="grid gap-4 md:grid-cols-2 lg:grid-cols-3"

src/app/(workspaces)/workspaces/[workspaceId]/[appId]/preferences/page.tsx

@@ -1,36 +1,62 @@
-'use server'
+'use client'
 
+import { useEffect, useState } from 'react'
 import Link from 'next/link'
+import { useParams, useRouter } from 'next/navigation'
 import { CircleX } from 'lucide-react'
 
 import { workbenchGet } from '@/components/actions/workbench-view-model'
 import { WorksbenchDeleteForm } from '@/components/forms/workbench-forms'
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
 
-import { userMe } from '~/components/actions/user-view-model'
 import { Button } from '~/components/button'
-import { AppInstanceCreateForm } from '~/components/forms/app-instance-forms'
-import { Card, CardContent } from '~/components/ui/card'
+import { useNavigation } from '~/components/store/navigation-context'
+import { Workbench } from '~/domain/model'
 
-export default async function WorkbenchPage({
-  params,
-  searchParams
-}: {
-  params: { appId: string; workspaceId: string }
-  searchParams: { [key: string]: string | string[] | undefined }
-}) {
-  const workbench = await workbenchGet(params.appId)
-  const user = await userMe()
+export default function WorkbenchPreferencesPage() {
+  const [error, setError] = useState<string | null>(null)
+  const [workbench, setWorkbench] = useState<Workbench | null>(null)
+  const [deleted, setDeleted] = useState<boolean>(false)
+
+  const router = useRouter()
+  const params = useParams<{ workspaceId: string; appId: string }>()
+  const { setBackground } = useNavigation()
 
   const workspaceId = params?.workspaceId
   const workbenchId = params?.appId
 
+  useEffect(() => {
+    if (!workbenchId) return
+
+    workbenchGet(workbenchId)
+      .then((response) => {
+        if (response?.error) setError(response.error)
+        if (response?.data) setWorkbench(response?.data)
+      })
+      .catch((error) => {
+        setError(error.message)
+      })
+  }, [workbenchId])
+
   return (
     <div>
+      {deleted && (
+        <Alert className="absolute bottom-2 right-2 z-10 w-96 bg-white text-black">
+          <AlertTitle>Success !</AlertTitle>
+          <AlertDescription>
+            Workbench was deleted, redirecting to workspace...
+          </AlertDescription>
+        </Alert>
+      )}
+      {error && (
+        <Alert className="absolute bottom-2 right-2 z-10 w-96 bg-white text-black">
+          <AlertTitle>Error ! </AlertTitle>
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+      )}
       <div className="mb-6 flex items-center justify-between pb-2">
         <h2 className="mt-5 text-muted">
-          <span className="font-semibold text-white">
-            {workbench?.data?.name}
-          </span>
+          <span className="font-semibold text-white">{workbench?.name}</span>
         </h2>
         <Link
           href={`/workspaces/${workspaceId}/${workbenchId}`}
@@ -100,12 +126,15 @@ export default async function WorkbenchPage({
 
         </Menubar> */}
       <div className="mt-4 flex flex-col items-start justify-between gap-4">
-        <WorksbenchDeleteForm id={params.appId} />
-
-        <AppInstanceCreateForm
-          workbenchId={params.appId}
-          userId={user.data?.id}
-          workspaceId={params.workspaceId}
+        <WorksbenchDeleteForm
+          id={params.appId}
+          cb={() => {
+            setDeleted(true)
+            setTimeout(() => {
+              setBackground(undefined)
+              router.replace(`/workspaces/${workspaceId}`)
+            }, 2000)
+          }}
         />
       </div>
     </div>

src/app/workspaces/[workspaceId]/apps/page.tsx

@@ -12,8 +12,6 @@ export default async function Page({
   const workspaceId = params?.workspaceId
 
   return (
-    <div className="flex flex-col">
-      {workspaceId && <WorkbenchTable workspaceId={workspaceId} />}
-    </div>
+    <div className="flex flex-col">{workspaceId && <WorkbenchTable />}</div>
   )
 }

src/app/workspaces/[workspaceId]/page.tsx

@@ -3,16 +3,18 @@
 import { Suspense, useCallback, useEffect, useState } from 'react'
 import { useParams, useRouter } from 'next/navigation'
 
+import { userGet } from '@/components/actions/user-view-model'
 import { workbenchList } from '@/components/actions/workbench-view-model'
 import { workspaceGet } from '@/components/actions/workspace-view-model'
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
-import { Workspace as WorkspaceType } from '@/domain/model'
+import { User, Workspace as WorkspaceType } from '@/domain/model'
 
 import { Workspace } from '~/components/workspace'
 import { Workbench } from '~/domain/model/workbench'
 
 const WorkspacePage = () => {
   const [workspace, setWorkspace] = useState<WorkspaceType>()
+  const [user, setUser] = useState<User>()
   const [workbenches, setWorkbenches] = useState<Workbench[]>()
   const [error, setError] = useState<string>()
 
@@ -40,7 +42,12 @@ const WorkspacePage = () => {
     workspaceGet(workspaceId)
       .then((response) => {
         if (response?.error) setError(response.error)
-        if (response?.data) setWorkspace(response.data)
+        if (response?.data) {
+          setWorkspace(response.data)
+          userGet(response?.data?.ownerId).then((user) => {
+            setUser(user.data)
+          })
+        }
       })
       .catch((error) => {
         setError(error.message)
@@ -80,6 +87,7 @@ const WorkspacePage = () => {
           <Workspace
             workspace={workspace}
             workbenches={workbenches}
+            workspaceOwner={user}
             cb={(id) => {
               getWorkbenchList()
               router.push(`/workspaces/${workspaceId}/${id}`)

src/components/HUD.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useState, useTransition } from 'react'
+import { useCallback, useEffect, useState, useTransition } from 'react'
 import Link from 'next/link'
 import { useParams } from 'next/navigation'
 import { formatDistanceToNow } from 'date-fns'
@@ -21,32 +21,38 @@ import { useAuth } from './store/auth-context'
 import { useNavigation } from './store/navigation-context'
 
 export default function HUD() {
-  const params = useParams<{ workspaceId: string; appId: string }>()
   const [workbenches, setWorkbenches] = useState<Workbench[]>()
   const [workspaces, setWorkspaces] = useState<Workspace[]>()
   const [error, setError] = useState<string>()
 
+  const params = useParams<{ workspaceId: string; appId: string }>()
   const [isPending, startTransition] = useTransition()
   const { background, setBackground } = useNavigation()
   const { isAuthenticated } = useAuth()
 
   const workspaceId = params?.workspaceId
 
   useEffect(() => {
+    if (!isAuthenticated) {
+      setWorkspaces(undefined)
+      setWorkbenches(undefined)
+
+      return
+    }
     startTransition(async () => {
       workspaceList()
         .then((response) => {
           if (response?.error) setError(response.error)
           if (response?.data) setWorkspaces(response.data)
-        })
-        .catch((error) => {
-          setError(error.message)
-        })
 
-      workbenchList()
-        .then((response) => {
-          if (response?.error) setError(response.error)
-          if (response?.data) setWorkbenches(response.data)
+          workbenchList()
+            .then((response) => {
+              if (response?.error) setError(response.error)
+              if (response?.data) setWorkbenches(response.data)
+            })
+            .catch((error) => {
+              setError(error.message)
+            })
         })
         .catch((error) => {
           setError(error.message)
@@ -58,8 +64,8 @@ export default function HUD() {
     workbenches?.some((workbench) => workbench.workspaceId === workspace.id)
   )
 
-  const sortedWorkbenches = workspacesWithWorkbenches?.sort((a, b) =>
-    a.id === workspaceId ? 1 : 0
+  const sortedWorkspacesWithWorkbenches = workspacesWithWorkbenches?.sort(
+    (a, b) => (a.id === workspaceId ? 1 : 0)
   )
 
   return (
@@ -72,7 +78,7 @@ export default function HUD() {
         >
           <div className="flex items-center">
             <div className="flex flex-col items-start justify-center gap-3">
-              {sortedWorkbenches?.map((workspace) => (
+              {sortedWorkspacesWithWorkbenches?.map((workspace) => (
                 <div className="" key={workspace.id}>
                   {workbenches
                     ?.filter(
@@ -91,7 +97,7 @@ export default function HUD() {
                             <HoverCardTrigger asChild>
                               <Link
                                 href={`/workspaces/${workbench.workspaceId}/${workbench.id}`}
-                                className={`flex h-full items-center justify-center rounded-lg hover:bg-accent ${background?.workbenchId === workbench.id ? 'bg-accent' : workbench.workspaceId === workspaceId ? 'bg-accent' : 'bg-muted'} `}
+                                className={`flex h-full items-center justify-center rounded-lg ${background?.workbenchId === workbench.id ? 'hover:bg-primary' : 'hover:bg-accent'} ${background?.workbenchId === workbench.id ? 'bg-primary' : workbench.workspaceId === workspaceId ? 'bg-accent' : 'bg-muted'} `}
                                 onClick={() => {
                                   setBackground({
                                     workspaceId: workspace.id,
@@ -125,25 +131,30 @@ export default function HUD() {
                                   <h4
                                     className={`text-sm font-semibold ${background?.workbenchId === workbench.id ? 'text-primary' : ''} `}
                                   >
+                                    {background?.workbenchId === workbench.id &&
+                                      'Active: '}{' '}
                                     {workbench.name}
                                   </h4>
                                   <p className="pb-4 text-xs text-muted-foreground">
                                     {formatDistanceToNow(workbench.createdAt)}{' '}
                                     ago
                                   </p>
-                                  <p className="text-xs text-muted-foreground">
+                                  <Link
+                                    href={`/workspaces/${workbench.workspaceId}`}
+                                    className="border-b-2 border-accent text-xs hover:text-muted"
+                                  >
                                     {workspace.shortName}
-                                  </p>
+                                  </Link>
                                 </div>
                               </div>
                             </HoverCardContent>
                           </HoverCard>
                         </div>
                         {background?.workbenchId === workbench.id && (
-                          <h2 className="-mt-3 p-0 text-5xl text-accent">·</h2>
+                          <h2 className="-mt-3 p-0 text-5xl text-primary">·</h2>
                         )}
                         {background?.workbenchId !== workbench.id && (
-                          <h2 className="-mt-3 p-0 text-accent">&nbsp;</h2>
+                          <h2 className="-mt-3 p-0">&nbsp;</h2>
                         )}
                       </div>
                     ))}

src/components/actions/user-view-model.ts

@@ -10,20 +10,26 @@ import { UserRepositoryImpl } from '~/data/repository'
 import { UserResponse } from '~/domain/model'
 import { UserCreateSchema } from '~/domain/model/user'
 import { UserCreate } from '~/domain/use-cases/user/user-create'
+import { UserGet } from '~/domain/use-cases/user/user-get'
 import { UserMe } from '~/domain/use-cases/user/user-me'
 
 import { IFormState } from './utils'
 
+const getRepository = async () => {
+  const session = cookies().get('session')?.value || ''
+  const dataSource =
+    env.DATA_SOURCE === 'local'
+      ? await UserLocalStorageDataSourceImpl.getInstance(
+          env.DATA_SOURCE_LOCAL_DIR
+        )
+      : new UserApiDataSourceImpl(session)
+
+  return new UserRepositoryImpl(dataSource)
+}
+
 export async function userMe(): Promise<UserResponse> {
   try {
-    const session = cookies().get('session')?.value || ''
-    const dataSource =
-      env.DATA_SOURCE === 'local'
-        ? await UserLocalStorageDataSourceImpl.getInstance(
-            env.DATA_SOURCE_LOCAL_DIR
-          )
-        : new UserApiDataSourceImpl(session)
-    const userRepository = new UserRepositoryImpl(dataSource)
+    const userRepository = await getRepository()
     const useCase = new UserMe(userRepository)
 
     return await useCase.execute()
@@ -37,13 +43,7 @@ export async function userCreate(
   formData: FormData
 ): Promise<IFormState> {
   try {
-    const dataSource =
-      env.DATA_SOURCE === 'local'
-        ? await UserLocalStorageDataSourceImpl.getInstance(
-            env.DATA_SOURCE_LOCAL_DIR
-          )
-        : new UserApiDataSourceImpl('')
-    const userRepository = new UserRepositoryImpl(dataSource)
+    const userRepository = await getRepository()
     const useCase = new UserCreate(userRepository)
 
     const user = {
@@ -66,3 +66,14 @@ export async function userCreate(
     return { error: error.message }
   }
 }
+
+export async function userGet(id: string): Promise<UserResponse> {
+  try {
+    const userRepository = await getRepository()
+    const useCase = new UserGet(userRepository)
+
+    return await useCase.execute(id)
+  } catch (error) {
+    return { error: error.message }
+  }
+}

src/components/actions/workspace-view-model.ts

@@ -61,14 +61,7 @@ export async function workspaceDelete(
 
 export async function workspaceList(): Promise<WorkspacesResponse> {
   try {
-    const session = cookies().get('session')?.value || ''
-    const dataSource =
-      env.DATA_SOURCE === 'local'
-        ? await WorkspaceLocalStorageDataSourceImpl.getInstance(
-            env.DATA_SOURCE_LOCAL_DIR
-          )
-        : new WorkspaceDataSourceImpl(session)
-    const repository = new WorkspaceRepositoryImpl(dataSource)
+    const repository = await getRepository()
     const useCase = new WorkspacesList(repository)
 
     return await useCase.execute()