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

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

* refactor: move out of nested ternary

apps/web/src/views/board/index.tsx

@@ -240,11 +240,12 @@ export default function BoardPage() {
       <div className="relative flex h-full flex-col">
         <PatternedBackground />
         <div className="z-10 flex w-full justify-between p-8">
-          {isLoading ? (
+          {isLoading && !boardData && (
             <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>
-          ) : (
+          )}
+          {boardData && (
             <form
               onSubmit={handleSubmit(onSubmit)}
               className="focus-visible:outline-none"
@@ -258,20 +259,23 @@ export default function BoardPage() {
               />
             </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">
             <VisibilityButton
               visibility={boardData?.visibility ?? "private"}
               boardPublicId={boardId ?? ""}
               queryParams={queryParams}
-              isLoading={isLoading}
+              isLoading={!boardData}
               isAdmin={workspace.role === "admin"}
             />
             <Filters
               labels={boardData?.labels ?? []}
               members={boardData?.workspace.members ?? []}
               position="left"
-              isLoading={isLoading}
+              isLoading={!boardData}
             />
             <Button
               iconLeft={
@@ -283,11 +287,11 @@ export default function BoardPage() {
               onClick={() => {
                 if (boardId) openNewListForm(boardId);
               }}
-              disabled={isLoading}
+              disabled={!boardData}
             >
               New list
             </Button>
-            <BoardDropdown isLoading={isLoading} />
+            <BoardDropdown isLoading={!boardData} />
           </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-[375px] w-[18rem] animate-pulse rounded-md bg-light-200 dark:bg-dark-100" />
             </div>
-          ) : (
+          ) : boardData ? (
             <>
               {boardData?.lists.length === 0 ? (
                 <div className="z-10 flex h-full w-full flex-col items-center justify-center space-y-8 pb-[150px]">
@@ -370,8 +374,7 @@ export default function BoardPage() {
                                           }}
                                           key={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",
                                           )
                                             ? "pointer-events-none"
@@ -404,7 +407,7 @@ export default function BoardPage() {
                 </DragDropContext>
               )}
             </>
-          )}
+          ) : null}
         </div>
         <Modal modalSize={modalContentType === "NEW_CARD" ? "md" : "sm"}>
           {modalContentType === "DELETE_BOARD" && (

apps/web/src/views/card/index.tsx

@@ -148,12 +148,13 @@ export default function CardPage() {
         <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="mb-8 flex w-full items-center justify-between">
-              {isLoading ? (
+              {!card && isLoading && (
                 <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-[300px] animate-pulse rounded-[5px] bg-light-300 dark:bg-dark-300" />
                 </div>
-              ) : (
+              )}
+              {card && (
                 <>
                   <Link
                     className="whitespace-nowrap font-bold leading-[2.3rem] tracking-tight text-light-900 dark:text-dark-900 sm:text-[1.2rem]"
@@ -184,7 +185,14 @@ export default function CardPage() {
                   </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>
+            {card && (
+              <>
                 <div className="mb-10 flex w-full max-w-2xl justify-between">
                   <form
                     onSubmit={handleSubmit(onSubmit)}
@@ -210,7 +218,7 @@ export default function CardPage() {
                     <ActivityList
                       cardPublicId={cardId}
                       activities={activities ?? []}
-                  isLoading={isLoading}
+                      isLoading={!card}
                       isAdmin={workspace.role === "admin"}
                     />
                   </div>
@@ -218,6 +226,8 @@ export default function CardPage() {
                     <NewCommentForm cardPublicId={cardId} />
                   </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">
@@ -226,7 +236,7 @@ export default function CardPage() {
             <ListSelector
               cardPublicId={cardId}
               lists={formattedLists}
-              isLoading={isLoading}
+              isLoading={!card}
             />
           </div>
           <div className="mb-4 flex w-full">
@@ -234,7 +244,7 @@ export default function CardPage() {
             <LabelSelector
               cardPublicId={cardId}
               labels={formattedLabels}
-              isLoading={isLoading}
+              isLoading={!card}
             />
           </div>
           <div className="flex w-full">
@@ -242,7 +252,7 @@ export default function CardPage() {
             <MemberSelector
               cardPublicId={cardId}
               members={formattedMembers}
-              isLoading={isLoading}
+              isLoading={!card}
             />
           </div>
         </div>