shiyue/kan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add not found states for board and card views with conditional … (#41)

Browse Source 
* feat: add not found states for board and card views with conditional rendering

* refactor: move out of nested ternary
This commit is contained in:
LovelessCodes
2025-06-06 00:40:37 +02:00
committed by GitHub
parent ce2ef1b1d4
commit f64549f743
2 changed files with 65 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
apps/web/src/views/board/index.tsx
View File

@@ -240,11 +240,12 @@ export default function BoardPage() {
<div className="relative flex h-full flex-col"> <div className="relative flex h-full flex-col">
<PatternedBackground /> <PatternedBackground />
<div className="z-10 flex w-full justify-between p-8"> <div className="z-10 flex w-full justify-between p-8">
{isLoading ? ( {isLoading && !boardData && (
<div className="flex space-x-2"> <div className="flex space-x-2">
<div className="h-[2.3rem] w-[150px] animate-pulse rounded-[5px] bg-light-200 dark:bg-dark-100" /> <div className="h-[2.3rem] w-[150px] animate-pulse rounded-[5px] bg-light-200 dark:bg-dark-100" />
</div> </div>
) : ( )}
{boardData && (
<form <form
onSubmit={handleSubmit(onSubmit)} onSubmit={handleSubmit(onSubmit)}
className="focus-visible:outline-none" className="focus-visible:outline-none"
@@ -258,20 +259,23 @@ export default function BoardPage() {
/> />
</form> </form>
)} )}
{!boardData && !isLoading && (
<p className="block p-0 py-0 font-bold leading-[2.3rem] tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">Board not found</p>
)}
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<VisibilityButton <VisibilityButton
visibility={boardData?.visibility ?? "private"} visibility={boardData?.visibility ?? "private"}
boardPublicId={boardId ?? ""} boardPublicId={boardId ?? ""}
queryParams={queryParams} queryParams={queryParams}
isLoading={isLoading} isLoading={!boardData}
isAdmin={workspace.role === "admin"} isAdmin={workspace.role === "admin"}
/> />
<Filters <Filters
labels={boardData?.labels ?? []} labels={boardData?.labels ?? []}
members={boardData?.workspace.members ?? []} members={boardData?.workspace.members ?? []}
position="left" position="left"
isLoading={isLoading} isLoading={!boardData}
/> />
<Button <Button
iconLeft={ iconLeft={
@@ -283,11 +287,11 @@ export default function BoardPage() {
onClick={() => { onClick={() => {
if (boardId) openNewListForm(boardId); if (boardId) openNewListForm(boardId);
}} }}
disabled={isLoading} disabled={!boardData}
> >
New list New list
</Button> </Button>
<BoardDropdown isLoading={isLoading} /> <BoardDropdown isLoading={!boardData} />
</div> </div>
</div> </div>
@@ -298,7 +302,7 @@ export default function BoardPage() {
<div className="0 mr-5 h-[275px] w-[18rem] animate-pulse rounded-md bg-light-200 dark:bg-dark-100" /> <div className="0 mr-5 h-[275px] w-[18rem] animate-pulse rounded-md bg-light-200 dark:bg-dark-100" />
<div className="0 mr-5 h-[375px] w-[18rem] animate-pulse rounded-md bg-light-200 dark:bg-dark-100" /> <div className="0 mr-5 h-[375px] w-[18rem] animate-pulse rounded-md bg-light-200 dark:bg-dark-100" />
</div> </div>
) : ( ) : boardData ? (
<> <>
{boardData?.lists.length === 0 ? ( {boardData?.lists.length === 0 ? (
<div className="z-10 flex h-full w-full flex-col items-center justify-center space-y-8 pb-[150px]"> <div className="z-10 flex h-full w-full flex-col items-center justify-center space-y-8 pb-[150px]">
@@ -370,13 +374,12 @@ export default function BoardPage() {
}} }}
key={card.publicId} key={card.publicId}
href={`/cards/${card.publicId}`} href={`/cards/${card.publicId}`}
className={`mb-2 flex !cursor-pointer flex-col ${ className={`mb-2 flex !cursor-pointer flex-col ${card.publicId.startsWith(
card.publicId.startsWith( "PLACEHOLDER",
"PLACEHOLDER", )
) ? "pointer-events-none"
? "pointer-events-none" : ""
: "" }`}
}`}
ref={provided.innerRef} ref={provided.innerRef}
{...provided.draggableProps} {...provided.draggableProps}
{...provided.dragHandleProps} {...provided.dragHandleProps}
@@ -404,7 +407,7 @@ export default function BoardPage() {
</DragDropContext> </DragDropContext>
)} )}
</> </>
)} ) : null}
</div> </div>
<Modal modalSize={modalContentType === "NEW_CARD" ? "md" : "sm"}> <Modal modalSize={modalContentType === "NEW_CARD" ? "md" : "sm"}>
{modalContentType === "DELETE_BOARD" && ( {modalContentType === "DELETE_BOARD" && (

84
apps/web/src/views/card/index.tsx
View File

@@ -148,12 +148,13 @@ export default function CardPage() {
<div className="flex h-full w-full flex-col overflow-hidden"> <div className="flex h-full w-full flex-col overflow-hidden">
<div className="h-full max-h-[calc(100vh-4rem)] overflow-y-auto p-8"> <div className="h-full max-h-[calc(100vh-4rem)] overflow-y-auto p-8">
<div className="mb-8 flex w-full items-center justify-between"> <div className="mb-8 flex w-full items-center justify-between">
{isLoading ? ( {!card && isLoading && (
<div className="flex space-x-2"> <div className="flex space-x-2">
<div className="h-[2.3rem] w-[150px] animate-pulse rounded-[5px] bg-light-300 dark:bg-dark-300" /> <div className="h-[2.3rem] w-[150px] animate-pulse rounded-[5px] bg-light-300 dark:bg-dark-300" />
<div className="h-[2.3rem] w-[300px] animate-pulse rounded-[5px] bg-light-300 dark:bg-dark-300" /> <div className="h-[2.3rem] w-[300px] animate-pulse rounded-[5px] bg-light-300 dark:bg-dark-300" />
</div> </div>
) : ( )}
{card && (
<> <>
<Link <Link
className="whitespace-nowrap font-bold leading-[2.3rem] tracking-tight text-light-900 dark:text-dark-900 sm:text-[1.2rem]" className="whitespace-nowrap font-bold leading-[2.3rem] tracking-tight text-light-900 dark:text-dark-900 sm:text-[1.2rem]"
@@ -184,40 +185,49 @@ export default function CardPage() {
</div> </div>
</> </>
)} )}
{!card && !isLoading && (
<p className="block p-0 py-0 font-bold leading-[2.3rem] tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
Card not found
</p>
)}
</div> </div>
<div className="mb-10 flex w-full max-w-2xl justify-between"> {card && (
<form <>
onSubmit={handleSubmit(onSubmit)} <div className="mb-10 flex w-full max-w-2xl justify-between">
className="w-full space-y-6" <form
> onSubmit={handleSubmit(onSubmit)}
<div className="mt-2"> className="w-full space-y-6"
<ContentEditable >
placeholder="Add description..." <div className="mt-2">
html={watch("description")} <ContentEditable
disabled={false} placeholder="Add description..."
onChange={(e) => setValue("description", e.target.value)} html={watch("description")}
onBlur={handleSubmit(onSubmit)} disabled={false}
className="block w-full border-0 bg-transparent py-1.5 text-light-900 focus-visible:outline-none dark:text-dark-1000 sm:text-sm sm:leading-6" onChange={(e) => setValue("description", e.target.value)}
/> onBlur={handleSubmit(onSubmit)}
className="block w-full border-0 bg-transparent py-1.5 text-light-900 focus-visible:outline-none dark:text-dark-1000 sm:text-sm sm:leading-6"
/>
</div>
</form>
</div> </div>
</form> <div className="border-t-[1px] border-light-600 pt-12 dark:border-dark-400">
</div> <h2 className="text-md pb-4 font-medium text-light-900 dark:text-dark-1000">
<div className="border-t-[1px] border-light-600 pt-12 dark:border-dark-400"> Activity
<h2 className="text-md pb-4 font-medium text-light-900 dark:text-dark-1000"> </h2>
Activity <div>
</h2> <ActivityList
<div> cardPublicId={cardId}
<ActivityList activities={activities ?? []}
cardPublicId={cardId} isLoading={!card}
activities={activities ?? []} isAdmin={workspace.role === "admin"}
isLoading={isLoading} />
isAdmin={workspace.role === "admin"} </div>
/> <div className="mt-6">
</div> <NewCommentForm cardPublicId={cardId} />
<div className="mt-6"> </div>
<NewCommentForm cardPublicId={cardId} /> </div>
</div> </>
</div> )}
</div> </div>
</div> </div>
<div className="w-[475px] border-l-[1px] border-light-600 bg-light-200 p-8 text-light-900 dark:border-dark-400 dark:bg-dark-100 dark:text-dark-900"> <div className="w-[475px] border-l-[1px] border-light-600 bg-light-200 p-8 text-light-900 dark:border-dark-400 dark:bg-dark-100 dark:text-dark-900">
@@ -226,7 +236,7 @@ export default function CardPage() {
<ListSelector <ListSelector
cardPublicId={cardId} cardPublicId={cardId}
lists={formattedLists} lists={formattedLists}
isLoading={isLoading} isLoading={!card}
/> />
</div> </div>
<div className="mb-4 flex w-full"> <div className="mb-4 flex w-full">
@@ -234,7 +244,7 @@ export default function CardPage() {
<LabelSelector <LabelSelector
cardPublicId={cardId} cardPublicId={cardId}
labels={formattedLabels} labels={formattedLabels}
isLoading={isLoading} isLoading={!card}
/> />
</div> </div>
<div className="flex w-full"> <div className="flex w-full">
@@ -242,7 +252,7 @@ export default function CardPage() {
<MemberSelector <MemberSelector
cardPublicId={cardId} cardPublicId={cardId}
members={formattedMembers} members={formattedMembers}
isLoading={isLoading} isLoading={!card}
/> />
</div> </div>
</div> </div>