From d7074814ae9b963666f2689e679a621ef3e24d3b Mon Sep 17 00:00:00 2001 From: Henry Date: Tue, 19 Nov 2024 18:14:37 +0000 Subject: [PATCH] feat: dynamic page title --- src/components/PageHead.tsx | 9 + src/views/auth/login/index.tsx | 47 +++-- src/views/auth/signup/index.tsx | 46 +++-- src/views/board/index.tsx | 346 ++++++++++++++++---------------- src/views/boards/index.tsx | 89 ++++---- src/views/card/index.tsx | 236 +++++++++++----------- src/views/members/index.tsx | 145 ++++++------- src/views/settings/index.tsx | 73 ++++--- 8 files changed, 523 insertions(+), 468 deletions(-) create mode 100644 src/components/PageHead.tsx diff --git a/src/components/PageHead.tsx b/src/components/PageHead.tsx new file mode 100644 index 00000000..a66adb18 --- /dev/null +++ b/src/components/PageHead.tsx @@ -0,0 +1,9 @@ +import Head from "next/head"; + +export const PageHead = ({ title }: { title: string }) => { + return ( + + {title} + + ); +}; diff --git a/src/views/auth/login/index.tsx b/src/views/auth/login/index.tsx index d7968232..7d57af80 100644 --- a/src/views/auth/login/index.tsx +++ b/src/views/auth/login/index.tsx @@ -1,6 +1,8 @@ import { useState } from "react"; // import { useRouter } from "next/navigation"; import { Auth } from "~/components/AuthForm"; +import { PageHead } from "~/components/PageHead"; + // import { api } from "~/utils/api"; export default function LoginPage() { @@ -24,28 +26,31 @@ export default function LoginPage() { // if (data?.id) router.push("/boards"); return ( -
-
-

- kan.bn -

-

- {isMagicLinkSent ? "Check your inbox" : "Welcome back"} -

- {isMagicLinkSent ? ( -
-

- {`Click on the link we've sent to ${magicLinkRecipient} to sign in.`} -

-
- ) : ( -
+ <> + +
+
+

+ kan.bn +

+

+ {isMagicLinkSent ? "Check your inbox" : "Welcome back"} +

+ {isMagicLinkSent ? (
- +

+ {`Click on the link we've sent to ${magicLinkRecipient} to sign in.`} +

-
- )} -
-
+ ) : ( +
+
+ +
+
+ )} + + + ); } diff --git a/src/views/auth/signup/index.tsx b/src/views/auth/signup/index.tsx index cba9e8be..18dfe3c3 100644 --- a/src/views/auth/signup/index.tsx +++ b/src/views/auth/signup/index.tsx @@ -1,6 +1,7 @@ import { useState } from "react"; // import { useRouter } from "next/navigation"; import { Auth } from "~/components/AuthForm"; +import { PageHead } from "~/components/PageHead"; // import { api } from "~/utils/api"; export default function SignupPage() { @@ -24,28 +25,31 @@ export default function SignupPage() { // if (data?.id) router.push("/boards"); return ( -
-
-

- kan.bn -

-

- {isMagicLinkSent ? "Check your inbox" : "Get started"} -

- {isMagicLinkSent ? ( -
-

- {`Click on the link we've sent to ${magicLinkRecipient} to sign in.`} -

-
- ) : ( -
+ <> + +
+
+

+ kan.bn +

+

+ {isMagicLinkSent ? "Check your inbox" : "Get started"} +

+ {isMagicLinkSent ? (
- +

+ {`Click on the link we've sent to ${magicLinkRecipient} to sign in.`} +

-
- )} -
-
+ ) : ( +
+
+ +
+
+ )} + + + ); } diff --git a/src/views/board/index.tsx b/src/views/board/index.tsx index e59fb2ab..791ab63f 100644 --- a/src/views/board/index.tsx +++ b/src/views/board/index.tsx @@ -15,7 +15,9 @@ import { api } from "~/utils/api"; import { formatToArray } from "~/utils/helpers"; import { useBoard } from "~/providers/board"; import { useModal } from "~/providers/modal"; +import { useWorkspace } from "~/providers/workspace"; +import { PageHead } from "~/components/PageHead"; import Modal from "~/components/modal"; import PatternedBackground from "~/components/PatternedBackground"; @@ -36,6 +38,7 @@ export default function BoardPage() { const params = useParams(); const router = useRouter(); const { boardData, setBoardData, updateCard, updateList } = useBoard(); + const { workspace } = useWorkspace(); const { openModal, modalContentType } = useModal(); const [selectedPublicListId, setSelectedPublicListId] = useState(""); @@ -135,181 +138,188 @@ export default function BoardPage() { }; return ( -
- -
- {isLoading ? ( -
-
-
- ) : ( -
- -
- )} - -
- - - -
-
- -
- {isLoading ? ( -
-
-
-
-
- ) : ( - - + +
+ +
+ {isLoading ? ( +
+
+
+ ) : ( +
- {(provided) => ( -
-
- {boardData?.lists?.map((list, index) => ( - - setSelectedPublicListId(publicListId) - } - > - - {(provided) => ( -
- {list.cards?.map((card, index) => ( - - {(provided) => ( - { - if ( + + + )} + +
+ + + +
+
+ +
+ {isLoading ? ( +
+
+
+
+
+ ) : ( + + + {(provided) => ( +
+
+ {boardData?.lists?.map((list, index) => ( + + setSelectedPublicListId(publicListId) + } + > + + {(provided) => ( +
+ {list.cards?.map((card, index) => ( + + {(provided) => ( + { + if ( + card.publicId.startsWith( + "PLACEHOLDER", + ) + ) + e.preventDefault(); + }} + key={card.publicId} + href={`/cards/${card.publicId}`} + className={`mb-2 flex !cursor-pointer flex-col rounded-md border border-light-200 bg-light-50 px-3 py-2 text-sm text-neutral-900 dark:border-dark-200 dark:bg-dark-300 dark:text-dark-1000 dark:hover:bg-dark-400 ${ card.publicId.startsWith("PLACEHOLDER") - ) - e.preventDefault(); - }} - key={card.publicId} - href={`/cards/${card.publicId}`} - className={`mb-2 flex !cursor-pointer flex-col rounded-md border border-light-200 bg-light-50 px-3 py-2 text-sm text-neutral-900 dark:border-dark-200 dark:bg-dark-300 dark:text-dark-1000 dark:hover:bg-dark-400 ${ - card.publicId.startsWith("PLACEHOLDER") - ? "pointer-events-none" - : "" - }`} - ref={provided.innerRef} - {...provided.draggableProps} - {...provided.dragHandleProps} - > -
{card.title}
- {(card.labels?.length ?? 0) || - (card.members?.length ?? 0) ? ( -
- {card.labels?.map((label) => ( - - -
{label.name}
- - ))} -
- {card.members?.map((member) => ( + ? "pointer-events-none" + : "" + }`} + ref={provided.innerRef} + {...provided.draggableProps} + {...provided.dragHandleProps} + > +
{card.title}
+ {(card.labels?.length ?? 0) || + (card.members?.length ?? 0) ? ( +
+ {card.labels?.map((label) => ( - - {member?.user?.name - ?.split(" ") - .map((namePart) => - namePart - .charAt(0) - .toUpperCase(), - ) - .join("")} - + +
{label.name}
 ))} +
+ {card.members?.map((member) => ( + + + {member?.user?.name + ?.split(" ") + .map((namePart) => + namePart + .charAt(0) + .toUpperCase(), + ) + .join("")} + + + ))} +
-
- ) : null} - - )} - - ))} - {provided.placeholder} -
- )} - - - ))} -
- {provided.placeholder} -
- )} - - - )} + ) : null} + + )} + + ))} + {provided.placeholder} +
+ )} + + + ))} +
+ {provided.placeholder} +
+ )} + + + )} +
+ + {modalContentType === "DELETE_BOARD" && } + {modalContentType === "DELETE_LIST" && ( + + )} + {modalContentType === "NEW_CARD" && ( + + )} + {modalContentType === "NEW_LIST" && ( + + )} + {modalContentType === "NEW_WORKSPACE" && } +
- - {modalContentType === "DELETE_BOARD" && } - {modalContentType === "DELETE_LIST" && ( - - )} - {modalContentType === "NEW_CARD" && ( - - )} - {modalContentType === "NEW_LIST" && ( - - )} - {modalContentType === "NEW_WORKSPACE" && } - -
+ ); } diff --git a/src/views/boards/index.tsx b/src/views/boards/index.tsx index 0e1f4270..d4192bfb 100644 --- a/src/views/boards/index.tsx +++ b/src/views/boards/index.tsx @@ -2,57 +2,66 @@ import { HiArrowDownTray, HiOutlinePlusSmall } from "react-icons/hi2"; import { BoardsList } from "./components/BoardsList"; import { useModal } from "~/providers/modal"; +import { useWorkspace } from "~/providers/workspace"; import Modal from "~/components/modal"; +import { PageHead } from "~/components/PageHead"; import { ImportBoardsForm } from "./components/ImportBoardsForm"; import { NewBoardForm } from "./components/NewBoardForm"; import { NewWorkspaceForm } from "~/components/NewWorkspaceForm"; export default function BoardsPage() { const { openModal, modalContentType } = useModal(); + const { workspace } = useWorkspace(); return ( -
-
-

- Boards -

-
- - + <> + +
+
+

+ Boards +

+
+ + +
+
+ + + {modalContentType === "NEW_BOARD" && } + {modalContentType === "IMPORT_BOARDS" && } + {modalContentType === "NEW_WORKSPACE" && } + + +
+
- - - {modalContentType === "NEW_BOARD" && } - {modalContentType === "IMPORT_BOARDS" && } - {modalContentType === "NEW_WORKSPACE" && } - - -
- -
-
+ ); } diff --git a/src/views/card/index.tsx b/src/views/card/index.tsx index 058bfc61..65d528e8 100644 --- a/src/views/card/index.tsx +++ b/src/views/card/index.tsx @@ -15,6 +15,7 @@ import { LabelForm } from "./components/LabelForm"; import { NewWorkspaceForm } from "~/components/NewWorkspaceForm"; import NewCommentForm from "./components/NewCommentForm"; +import { PageHead } from "~/components/PageHead"; import Modal from "~/components/modal"; import { useModal } from "~/providers/modal"; import { usePopup } from "~/providers/popup"; @@ -112,128 +113,133 @@ export default function CardPage() { if (!cardId) return <>; return ( -
-
-
-
- {isLoading ? ( -
-
-
-
- ) : ( - <> - - {board?.name} - - -
-
- -
-
-
- + <> + +
+
+
+
+ {isLoading ? ( +
+
+
- - )} -
-
-
-
- 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" + ) : ( + <> + + {board?.name} + + + +
+ +
+ +
+ +
+ + )} +
+
+
+
+ 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" + /> +
+
+
+
+

+ Activity +

+
+
- -
-
-

- Activity -

-
- -
-
- +
+ +
-
-
-
-

List

- +
+
+

List

+ +
+
+

Labels

+ +
+
+

Members

+ +
-
-

Labels

- -
-
-

Members

- -
-
- - {modalContentType === "NEW_LABEL" && ( - - )} - {modalContentType === "EDIT_LABEL" && ( - - )} - {modalContentType === "DELETE_LABEL" && ( - - )} - {modalContentType === "DELETE_CARD" && ( - - )} - {modalContentType === "NEW_WORKSPACE" && } - -
+ + {modalContentType === "NEW_LABEL" && ( + + )} + {modalContentType === "EDIT_LABEL" && ( + + )} + {modalContentType === "DELETE_LABEL" && ( + + )} + {modalContentType === "DELETE_CARD" && ( + + )} + {modalContentType === "NEW_WORKSPACE" && } + +
+ ); } diff --git a/src/views/members/index.tsx b/src/views/members/index.tsx index 38166bd7..e5dd8b93 100644 --- a/src/views/members/index.tsx +++ b/src/views/members/index.tsx @@ -3,6 +3,8 @@ import { twMerge } from "tailwind-merge"; import { useModal } from "~/providers/modal"; import { useWorkspace } from "~/providers/workspace"; + +import { PageHead } from "~/components/PageHead"; import Modal from "~/components/modal"; import { NewWorkspaceForm } from "~/components/NewWorkspaceForm"; @@ -136,82 +138,85 @@ export default function MembersPage() { }; return ( -
-
-

- Members -

-
- + <> + +
+
+

+ Members +

+
+ +
-
-
-
-
-
- - - - - - - - - {!isLoading && - data?.members.map((member, index) => ( - - ))} +
+
+
+
+
- User - - Role -
+ + + + + + + + {!isLoading && + data?.members.map((member, index) => ( + + ))} - {isLoading && ( - <> - - - - - )} - -
+ User + + Role +
+ {isLoading && ( + <> + + + + + )} + + +
-
- - {modalContentType === "NEW_WORKSPACE" && } - {modalContentType === "INVITE_MEMBER" && } - {modalContentType === "REMOVE_MEMBER" && } - -
+ + {modalContentType === "NEW_WORKSPACE" && } + {modalContentType === "INVITE_MEMBER" && } + {modalContentType === "REMOVE_MEMBER" && } + +
+ ); } diff --git a/src/views/settings/index.tsx b/src/views/settings/index.tsx index 6087b70f..186660e0 100644 --- a/src/views/settings/index.tsx +++ b/src/views/settings/index.tsx @@ -1,6 +1,7 @@ import Modal from "~/components/modal"; import Button from "~/components/Button"; +import { PageHead } from "~/components/PageHead"; import { DeleteWorkspaceConfirmation } from "./components/DeleteWorkspaceConfirmation"; import UpdateWorkspaceNameForm from "./components/UpdateWorkspaceNameForm"; @@ -12,41 +13,47 @@ export default function SettingsPage() { const { workspace } = useWorkspace(); return ( -
-
-

- Settings -

-
+ <> + +
+
+

+ Settings +

+
-
-

- Workspace name -

- -
+
+

+ Workspace name +

+ +
-
-

- Delete workspace -

-

- Once you delete your workspace, there is no going back. Please be - certain. -

- -
+
+

+ Delete workspace +

+

+ Once you delete your workspace, there is no going back. Please be + certain. +

+ +
- - {modalContentType === "DELETE_WORKSPACE" && ( - - )} - -
+ + {modalContentType === "DELETE_WORKSPACE" && ( + + )} + +
+ ); }