Small UI adjustments
This commit is contained in:
Atridad Lahiji
parent
79b189bdc9
commit
f2e4ac2575
13 changed files with 229 additions and 228 deletions
|
|
@ -6,9 +6,9 @@ const Footer: React.FC = () => {
|
|||
<footer className="footer footer-center h-12 p-2 bg-base-100 text-base-content">
|
||||
<div>
|
||||
<p>
|
||||
Made with{" "}
|
||||
<GiTechnoHeart className="inline-block text-primary text-lg animate-pulse" />{" "}
|
||||
by{" "}
|
||||
Made with{ " " }
|
||||
<GiTechnoHeart className="inline-block text-primary text-lg animate-pulse" />{ " " }
|
||||
by{ " " }
|
||||
<a
|
||||
className="link link-primary link-hover"
|
||||
href="https://atri.dad"
|
||||
|
|
@ -16,15 +16,15 @@ const Footer: React.FC = () => {
|
|||
target="_blank"
|
||||
>
|
||||
Atridad Lahiji
|
||||
</a>{" "}
|
||||
-{" "}
|
||||
</a>{ " " }
|
||||
-{ " " }
|
||||
<a
|
||||
className="link link-primary link-hover"
|
||||
href={`https://github.com/atridadl/sprintpadawan/releases/tag/${packagejson.version}`}
|
||||
href={ `https://github.com/atridadl/sprintpadawan/releases/tag/${packagejson.version}` }
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
v{packagejson.version}
|
||||
v{ packagejson.version }
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ const Navbar: React.FC<NavbarProps> = ({ title }) => {
|
|||
);
|
||||
} else if (sessionStatus === "unauthenticated") {
|
||||
return (
|
||||
<button className="btn btn-secondary" onClick={() => void signIn()}>
|
||||
<button className="btn btn-secondary" onClick={ () => void signIn() }>
|
||||
Sign In
|
||||
</button>
|
||||
);
|
||||
|
|
@ -40,40 +40,40 @@ const Navbar: React.FC<NavbarProps> = ({ title }) => {
|
|||
className="md:mr-2"
|
||||
src="/logo.webp"
|
||||
alt="Nav Logo"
|
||||
width={32}
|
||||
height={32}
|
||||
width={ 32 }
|
||||
height={ 32 }
|
||||
priority
|
||||
/>
|
||||
<span className="hidden md:inline-flex">
|
||||
{title}
|
||||
{env.NEXT_PUBLIC_APP_ENV === "development" && " >> Staging"}
|
||||
{ title }
|
||||
{ env.NEXT_PUBLIC_APP_ENV === "development" && " >> Staging" }
|
||||
</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{sessionStatus === "loading" ? (
|
||||
{ sessionStatus === "loading" ? (
|
||||
<div className="flex items-center justify-center">
|
||||
<span className="loading loading-dots loading-lg"></span>
|
||||
</div>
|
||||
) : (
|
||||
navigationMenu()
|
||||
)}
|
||||
) }
|
||||
|
||||
{sessionData?.user.image && (
|
||||
{ sessionData?.user.image && (
|
||||
<div className="flex-none gap-2">
|
||||
<div className="dropdown dropdown-end">
|
||||
<label tabIndex={0} className="btn btn-ghost btn-circle avatar">
|
||||
<label tabIndex={ 0 } className="btn btn-ghost btn-circle avatar">
|
||||
<div className="w-10 rounded-full">
|
||||
<Image
|
||||
src={sessionData.user.image}
|
||||
src={ sessionData.user.image }
|
||||
alt="Profile picture."
|
||||
height={32}
|
||||
width={32}
|
||||
height={ 32 }
|
||||
width={ 32 }
|
||||
/>
|
||||
</div>
|
||||
</label>
|
||||
<ul
|
||||
tabIndex={0}
|
||||
tabIndex={ 0 }
|
||||
className="mt-3 p-2 shadow menu menu-compact dropdown-content bg-base-100 rounded-box z-50"
|
||||
>
|
||||
<li>
|
||||
|
|
@ -85,7 +85,7 @@ const Navbar: React.FC<NavbarProps> = ({ title }) => {
|
|||
Profile
|
||||
</Link>
|
||||
</li>
|
||||
{sessionData.user.role === "ADMIN" && (
|
||||
{ sessionData.user.role === "ADMIN" && (
|
||||
<li>
|
||||
<Link
|
||||
about="Admin Page"
|
||||
|
|
@ -95,16 +95,16 @@ const Navbar: React.FC<NavbarProps> = ({ title }) => {
|
|||
Admin
|
||||
</Link>
|
||||
</li>
|
||||
)}
|
||||
) }
|
||||
<li>
|
||||
<a onClick={() => void signOut({ callbackUrl: "/" })}>
|
||||
<a onClick={ () => void signOut({ callbackUrl: "/" }) }>
|
||||
Sign Out
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
) }
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ const RoomList: React.FC = () => {
|
|||
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center gap-8">
|
||||
{/* Modal for Adding Rooms */}
|
||||
{/* Modal for Adding Rooms */ }
|
||||
<input type="checkbox" id="new-room-modal" className="modal-toggle" />
|
||||
<div className="modal modal-bottom sm:modal-middle">
|
||||
<div className="modal-box flex-col flex text-center justify-center items-center">
|
||||
|
|
@ -72,30 +72,30 @@ const RoomList: React.FC = () => {
|
|||
type="text"
|
||||
placeholder="Type here"
|
||||
className="input input-bordered w-full max-w-xs"
|
||||
onChange={(event) => {
|
||||
onChange={ (event) => {
|
||||
setRoomName(event.target.value);
|
||||
}}
|
||||
} }
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="modal-action">
|
||||
{roomName.length > 0 && (
|
||||
{ roomName.length > 0 && (
|
||||
<label
|
||||
htmlFor="new-room-modal"
|
||||
className="btn btn-primary"
|
||||
onClick={() => createRoomHandler()}
|
||||
onClick={ () => createRoomHandler() }
|
||||
>
|
||||
Submit
|
||||
</label>
|
||||
)}
|
||||
) }
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{roomsFromDb && roomsFromDb.length > 0 && (
|
||||
{ roomsFromDb && roomsFromDb.length > 0 && (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="table text-center">
|
||||
{/* head */}
|
||||
{/* head */ }
|
||||
<thead>
|
||||
<tr className="border-white">
|
||||
<th>Room Name</th>
|
||||
|
|
@ -103,43 +103,43 @@ const RoomList: React.FC = () => {
|
|||
</tr>
|
||||
</thead>
|
||||
<tbody className="">
|
||||
{roomsFromDb?.map((room) => {
|
||||
{ roomsFromDb?.map((room) => {
|
||||
return (
|
||||
<tr key={room.id} className="hover border-white">
|
||||
<tr key={ room.id } className="hover border-white">
|
||||
<td className="break-all max-w-[200px] md:max-w-[400px]">
|
||||
{room.roomName}
|
||||
{ room.roomName }
|
||||
</td>
|
||||
<td>
|
||||
<Link
|
||||
className="m-2 no-underline"
|
||||
href={`/room/${room.id}`}
|
||||
href={ `/room/${room.id}` }
|
||||
>
|
||||
<IoEnterOutline className="text-xl inline-block hover:text-secondary" />
|
||||
</Link>
|
||||
|
||||
<button
|
||||
className="m-2"
|
||||
onClick={() => deleteRoomHandler(room.id)}
|
||||
onClick={ () => deleteRoomHandler(room.id) }
|
||||
>
|
||||
<IoTrashBinOutline className="text-xl inline-block hover:text-error" />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
}) }
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
) }
|
||||
<label htmlFor="new-room-modal" className="btn btn-secondary">
|
||||
New Room
|
||||
</label>
|
||||
|
||||
{roomsFromDb === undefined && (
|
||||
{ roomsFromDb === undefined && (
|
||||
<div className="flex items-center justify-center">
|
||||
<span className="loading loading-dots loading-lg"></span>
|
||||
</div>
|
||||
)}
|
||||
) }
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
import * as React from "react";
|
||||
import {
|
||||
Body,
|
||||
Container,
|
||||
Head,
|
||||
Heading,
|
||||
Html,
|
||||
Preview,
|
||||
Text,
|
||||
Hr,
|
||||
Tailwind,
|
||||
Section,
|
||||
Html,
|
||||
Img,
|
||||
Preview,
|
||||
Section,
|
||||
Tailwind,
|
||||
Text,
|
||||
} from "@react-email/components";
|
||||
import * as React from "react";
|
||||
|
||||
interface GoodbyeTemplateProps {
|
||||
name: string;
|
||||
|
|
@ -30,15 +30,15 @@ export const Goodbye: React.FC<Readonly<GoodbyeTemplateProps>> = ({ name }) => (
|
|||
<Container className="border border-solid border-[#eaeaea] rounded my-[40px] mx-auto p-[20px] w-[465px]">
|
||||
<Section className="mt-[32px]">
|
||||
<Img
|
||||
src={`${baseUrl}/logo.webp`}
|
||||
src={ `${baseUrl}/logo.webp` }
|
||||
width="40"
|
||||
height="37"
|
||||
alt={`Sprint Padawan Logo`}
|
||||
alt={ `Sprint Padawan Logo` }
|
||||
className="my-0 mx-auto"
|
||||
/>
|
||||
</Section>
|
||||
<Heading className="text-4xl">Farewell, {name}...</Heading>
|
||||
<Text>{"Were sorry to see you go."}</Text>
|
||||
<Heading className="text-4xl">Farewell, { name }...</Heading>
|
||||
<Text>{ "Were sorry to see you go." }</Text>
|
||||
<Text>
|
||||
Your data has been deleted, including all room history, user data,
|
||||
votes, etc.
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
import {
|
||||
Body,
|
||||
Container,
|
||||
Head,
|
||||
Heading,
|
||||
Hr,
|
||||
Html,
|
||||
Img,
|
||||
Preview,
|
||||
Section,
|
||||
Tailwind,
|
||||
Text,
|
||||
Body,
|
||||
Container,
|
||||
Head,
|
||||
Heading,
|
||||
Hr,
|
||||
Html,
|
||||
Img,
|
||||
Preview,
|
||||
Section,
|
||||
Tailwind,
|
||||
Text,
|
||||
} from "@react-email/components";
|
||||
import * as React from "react";
|
||||
|
||||
|
|
@ -30,18 +30,18 @@ export const Welcome: React.FC<Readonly<WelcomeTemplateProps>> = ({ name }) => (
|
|||
<Container className="border border-solid border-[#eaeaea] rounded my-[40px] mx-auto p-[20px] w-[465px]">
|
||||
<Section className="mt-[32px]">
|
||||
<Img
|
||||
src={`${baseUrl}/logo.webp`}
|
||||
src={ `${baseUrl}/logo.webp` }
|
||||
width="40"
|
||||
height="37"
|
||||
alt={`Sprint Padawan Logo`}
|
||||
alt={ `Sprint Padawan Logo` }
|
||||
className="my-0 mx-auto"
|
||||
/>
|
||||
</Section>
|
||||
<Heading className="text-black text-[24px] font-normal text-center p-0 my-[30px] mx-0">
|
||||
🎉 Welcome to Sprint Padawan, <strong>{name}</strong>! 🎉
|
||||
🎉 Welcome to Sprint Padawan, <strong>{ name }</strong>! 🎉
|
||||
</Heading>
|
||||
<Text className="text-black text-[14px] leading-[24px]">
|
||||
Hello {name},
|
||||
Hello { name },
|
||||
</Text>
|
||||
<Text>Thank you for signing up for Sprint Padawan!</Text>
|
||||
<Text>
|
||||
|
|
|
|||
|
|
@ -38,15 +38,15 @@ const MyApp: AppType<{ session: Session | null }> = ({
|
|||
}, [router.events]);
|
||||
|
||||
return (
|
||||
<SessionProvider session={session}>
|
||||
<SessionProvider session={ session }>
|
||||
<div className="block h-[100%]">
|
||||
<Navbar title="Sprint Padawan" />
|
||||
<div className="flex flex-row items-center justify-center min-h-[calc(100%-114px)]">
|
||||
{pageLoading ? (
|
||||
{ pageLoading ? (
|
||||
<span className="loading loading-dots loading-lg"></span>
|
||||
) : (
|
||||
<Component {...pageProps} />
|
||||
)}
|
||||
<Component { ...pageProps } />
|
||||
) }
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -158,70 +158,70 @@ const AdminBody: React.FC = () => {
|
|||
<div className="stat">
|
||||
<div className="stat-title">Users</div>
|
||||
<div className="stat-value">
|
||||
{usersCountLoading || usersCountFetching ? (
|
||||
{ usersCountLoading || usersCountFetching ? (
|
||||
<span className="loading loading-dots loading-lg"></span>
|
||||
) : (
|
||||
<>{usersCount ? usersCount : "0"}</>
|
||||
)}
|
||||
<>{ usersCount ? usersCount : "0" }</>
|
||||
) }
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="stat">
|
||||
<div className="stat-title">Rooms</div>
|
||||
<div className="stat-value">
|
||||
{roomsCountLoading || roomsCountFetching ? (
|
||||
{ roomsCountLoading || roomsCountFetching ? (
|
||||
<span className="loading loading-dots loading-lg"></span>
|
||||
) : (
|
||||
<>{roomsCount ? roomsCount : "0"}</>
|
||||
)}
|
||||
<>{ roomsCount ? roomsCount : "0" }</>
|
||||
) }
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="stat">
|
||||
<div className="stat-title">Votes</div>
|
||||
<div className="stat-value">
|
||||
{votesCountLoading || votesCountFetching ? (
|
||||
{ votesCountLoading || votesCountFetching ? (
|
||||
<span className="loading loading-dots loading-lg"></span>
|
||||
) : (
|
||||
<>{votesCount ? votesCount : "0"}</>
|
||||
)}
|
||||
<>{ votesCount ? votesCount : "0" }</>
|
||||
) }
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{usersCountFetching ||
|
||||
usersFetching ||
|
||||
roomsCountFetching ||
|
||||
votesCountFetching ? (
|
||||
{ usersCountFetching ||
|
||||
usersFetching ||
|
||||
roomsCountFetching ||
|
||||
votesCountFetching ? (
|
||||
<span className="loading loading-dots loading-lg"></span>
|
||||
) : (
|
||||
<div className="flex flex-row flex-wrap text-center items-center justify-center gap-2">
|
||||
<button
|
||||
className="btn btn-primary m-2"
|
||||
onClick={() => void clearSessionsHandler()}
|
||||
onClick={ () => void clearSessionsHandler() }
|
||||
>
|
||||
Delete All Sessions
|
||||
</button>
|
||||
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
onClick={() => void refetchData()}
|
||||
onClick={ () => void refetchData() }
|
||||
>
|
||||
Re-fetch
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
) }
|
||||
|
||||
<div className="card max-w-[80vw] bg-neutral shadow-xl m-4">
|
||||
<div className="card-body">
|
||||
<h2 className="card-title">Users:</h2>
|
||||
|
||||
{usersLoading || usersFetching ? (
|
||||
{ usersLoading || usersFetching ? (
|
||||
<span className="loading loading-dots loading-lg"></span>
|
||||
) : (
|
||||
<div className="overflow-x-scroll">
|
||||
<table className="table text-center">
|
||||
{/* head */}
|
||||
{/* head */ }
|
||||
<thead>
|
||||
<tr className="border-white">
|
||||
<th>ID</th>
|
||||
|
|
@ -233,55 +233,55 @@ const AdminBody: React.FC = () => {
|
|||
</tr>
|
||||
</thead>
|
||||
<tbody className="">
|
||||
{users
|
||||
{ users
|
||||
?.sort((user1, user2) =>
|
||||
user2.createdAt > user1.createdAt ? 1 : -1
|
||||
)
|
||||
.map((user) => {
|
||||
return (
|
||||
<tr key={user.id} className="hover">
|
||||
<tr key={ user.id } className="hover">
|
||||
<td className="max-w-[100px] break-words">
|
||||
{user.id}
|
||||
{ user.id }
|
||||
</td>
|
||||
|
||||
<td className="max-w-[100px] break-normal">
|
||||
{user.name}
|
||||
{ user.name }
|
||||
</td>
|
||||
<td className="max-w-[100px] break-normal">
|
||||
{user.createdAt.toLocaleDateString()}
|
||||
{ user.createdAt.toLocaleDateString() }
|
||||
</td>
|
||||
<td className="max-w-[100px] break-normal">
|
||||
{user.sessions.length}
|
||||
{ user.sessions.length }
|
||||
</td>
|
||||
<td className="max-w-[100px] break-normal">
|
||||
{getProviders(user).includes("google") && (
|
||||
{ getProviders(user).includes("google") && (
|
||||
<SiGoogle className="text-xl m-1 inline-block hover:text-secondary" />
|
||||
)}
|
||||
{getProviders(user).includes("github") && (
|
||||
) }
|
||||
{ getProviders(user).includes("github") && (
|
||||
<SiGithub className="text-xl m-1 inline-block hover:text-secondary" />
|
||||
)}
|
||||
) }
|
||||
</td>
|
||||
<td>
|
||||
<button className="m-2">
|
||||
{user.role === "ADMIN" ? (
|
||||
{ user.role === "ADMIN" ? (
|
||||
<FaShieldAlt
|
||||
className="text-xl inline-block text-primary"
|
||||
onClick={() =>
|
||||
onClick={ () =>
|
||||
void setUserRoleHandler(user.id, "USER")
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<FaShieldAlt
|
||||
className="text-xl inline-block"
|
||||
onClick={() =>
|
||||
onClick={ () =>
|
||||
void setUserRoleHandler(user.id, "ADMIN")
|
||||
}
|
||||
/>
|
||||
)}
|
||||
) }
|
||||
</button>
|
||||
<button
|
||||
className="m-2"
|
||||
onClick={() =>
|
||||
onClick={ () =>
|
||||
void clearSessionsByUserHandler(user.id)
|
||||
}
|
||||
>
|
||||
|
|
@ -289,18 +289,18 @@ const AdminBody: React.FC = () => {
|
|||
</button>
|
||||
<button
|
||||
className="m-2"
|
||||
onClick={() => void deleteUserHandler(user.id)}
|
||||
onClick={ () => void deleteUserHandler(user.id) }
|
||||
>
|
||||
<IoTrashBinOutline className="text-xl inline-block hover:text-error" />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
}) }
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
) }
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -11,9 +11,9 @@ export default createNextApiHandler({
|
|||
onError:
|
||||
env.NODE_ENV === "development"
|
||||
? ({ path, error }) => {
|
||||
console.error(
|
||||
`❌ tRPC failed on ${path ?? "<no-path>"}: ${error.message}`,
|
||||
);
|
||||
}
|
||||
console.error(
|
||||
`❌ tRPC failed on ${path ?? "<no-path>"}: ${error.message}`,
|
||||
);
|
||||
}
|
||||
: undefined,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -57,20 +57,20 @@ const HomePageBody: React.FC = () => {
|
|||
return (
|
||||
<>
|
||||
<h1 className="flex flex-row flex-wrap text-center justify-center items-center gap-1 text-4xl font-bold mx-auto">
|
||||
Hi, {sessionData?.user.name}!{" "}
|
||||
{sessionData?.user.role === "ADMIN" && (
|
||||
Hi, { sessionData?.user.name }!{ " " }
|
||||
{ sessionData?.user.role === "ADMIN" && (
|
||||
<FaShieldAlt className="inline-block text-primary" />
|
||||
)}
|
||||
) }
|
||||
</h1>
|
||||
<div className="tabs tabs-boxed border-2 border-cyan-500 mb-4">
|
||||
<a
|
||||
className={
|
||||
tabIndex === 0 ? "tab no-underline tab-active" : "tab no-underline"
|
||||
}
|
||||
onClick={() => {
|
||||
onClick={ () => {
|
||||
setTabIndex(0);
|
||||
localStorage.setItem("dashboardTabIndex", "0");
|
||||
}}
|
||||
} }
|
||||
>
|
||||
Join a Room
|
||||
</a>
|
||||
|
|
@ -78,36 +78,36 @@ const HomePageBody: React.FC = () => {
|
|||
className={
|
||||
tabIndex === 1 ? "tab no-underline tab-active" : "tab no-underline"
|
||||
}
|
||||
onClick={() => {
|
||||
onClick={ () => {
|
||||
setTabIndex(1);
|
||||
localStorage.setItem("dashboardTabIndex", "1");
|
||||
}}
|
||||
} }
|
||||
>
|
||||
Room List
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{tabIndex === 0 && (
|
||||
{ tabIndex === 0 && (
|
||||
<>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Enter Room ID"
|
||||
className="input input-bordered input-primary mb-4"
|
||||
onChange={(event) => {
|
||||
onChange={ (event) => {
|
||||
console.log(event.target.value);
|
||||
setJoinRoomTextBox(event.target.value);
|
||||
}}
|
||||
} }
|
||||
/>
|
||||
<Link
|
||||
href={joinRoomTextBox.length > 0 ? `/room/${joinRoomTextBox}` : "/"}
|
||||
href={ joinRoomTextBox.length > 0 ? `/room/${joinRoomTextBox}` : "/" }
|
||||
className="btn btn-secondary"
|
||||
>
|
||||
Join Room
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
) }
|
||||
|
||||
{tabIndex === 1 && <RoomList />}
|
||||
{ tabIndex === 1 && <RoomList /> }
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -21,22 +21,22 @@ const HomePageBody: React.FC = () => {
|
|||
return (
|
||||
<>
|
||||
<h1 className="text-6xl font-bold">
|
||||
Sprint{" "}
|
||||
Sprint{ " " }
|
||||
<span className="bg-gradient-to-br from-pink-600 to-cyan-400 bg-clip-text text-transparent box-decoration-clone">
|
||||
Padawan
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
<h2 className="my-4 text-3xl font-bold">
|
||||
A{" "}
|
||||
A{ " " }
|
||||
<span className="bg-gradient-to-br from-pink-600 to-pink-400 bg-clip-text text-transparent box-decoration-clone">
|
||||
scrum poker{" "}
|
||||
</span>{" "}
|
||||
tool that helps{" "}
|
||||
scrum poker{ " " }
|
||||
</span>{ " " }
|
||||
tool that helps{ " " }
|
||||
<span className="bg-gradient-to-br from-purple-600 to-purple-400 bg-clip-text text-transparent box-decoration-clone">
|
||||
agile teams{" "}
|
||||
</span>{" "}
|
||||
plan their sprints in{" "}
|
||||
agile teams{ " " }
|
||||
</span>{ " " }
|
||||
plan their sprints in{ " " }
|
||||
<span className="bg-gradient-to-br from-cyan-600 to-cyan-400 bg-clip-text text-transparent box-decoration-clone">
|
||||
real-time
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,14 @@
|
|||
import { type NextPage } from "next";
|
||||
import Image from "next/image";
|
||||
import { type GetServerSideProps, type NextPage } from "next";
|
||||
import Head from "next/head";
|
||||
import { type GetServerSideProps } from "next";
|
||||
import Image from "next/image";
|
||||
|
||||
import { getServerAuthSession } from "../../server/auth";
|
||||
import { api } from "~/utils/api";
|
||||
import { signIn, useSession } from "next-auth/react";
|
||||
import { useRouter } from "next/router";
|
||||
import { useEffect, useState } from "react";
|
||||
import { SiGoogle, SiGithub } from "react-icons/si";
|
||||
import { FaShieldAlt } from "react-icons/fa";
|
||||
import { SiGithub, SiGoogle } from "react-icons/si";
|
||||
import { api } from "~/utils/api";
|
||||
import { getServerAuthSession } from "../../server/auth";
|
||||
|
||||
export const getServerSideProps: GetServerSideProps = async (ctx) => {
|
||||
const session = await getServerAuthSession(ctx);
|
||||
|
|
@ -104,7 +103,7 @@ const ProfileBody: React.FC = () => {
|
|||
<label
|
||||
htmlFor="delete-user-modal"
|
||||
className="btn btn-error"
|
||||
onClick={() => void deleteCurrentUser()}
|
||||
onClick={ () => void deleteCurrentUser() }
|
||||
>
|
||||
I am sure!
|
||||
</label>
|
||||
|
|
@ -115,76 +114,79 @@ const ProfileBody: React.FC = () => {
|
|||
<div className="card w-90 bg-neutral shadow-xl">
|
||||
<div className="card-body">
|
||||
<h2 className="card-title">Profile:</h2>
|
||||
{sessionData.user.image && (
|
||||
{ sessionData.user.image && (
|
||||
<div className="indicator mx-auto m-4">
|
||||
<span className="indicator-item indicator-bottom badge badge-primary">
|
||||
<div className="tooltip tooltip-primary" data-tip="Admin">
|
||||
<FaShieldAlt className="text-xl" />
|
||||
</div>
|
||||
</span>
|
||||
{ sessionData.user.role === "ADMIN" && (
|
||||
<span className="indicator-item indicator-bottom badge badge-primary">
|
||||
<div className="tooltip tooltip-primary" data-tip="Admin">
|
||||
<FaShieldAlt className="text-xl" />
|
||||
</div>
|
||||
</span>
|
||||
) }
|
||||
|
||||
<Image
|
||||
className="mx-auto"
|
||||
src={sessionData.user.image}
|
||||
src={ sessionData.user.image }
|
||||
alt="Profile picture."
|
||||
height={100}
|
||||
width={100}
|
||||
height={ 100 }
|
||||
width={ 100 }
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
) }
|
||||
|
||||
{providersLoading ? (
|
||||
{ providersLoading ? (
|
||||
<div className="mx-auto">
|
||||
<span className="loading loading-dots loading-lg"></span>{" "}
|
||||
<span className="loading loading-dots loading-lg"></span>{ " " }
|
||||
</div>
|
||||
) : (
|
||||
<div className="mx-auto">
|
||||
<button
|
||||
className={`btn btn-square btn-outline mx-2`}
|
||||
disabled={providers?.includes("github")}
|
||||
onClick={() => void signIn("github")}
|
||||
className={ `btn btn-square btn-outline mx-2` }
|
||||
disabled={ providers?.includes("github") }
|
||||
onClick={ () => void signIn("github") }
|
||||
>
|
||||
<SiGithub />
|
||||
</button>
|
||||
|
||||
<button
|
||||
className={`btn btn-square btn-outline mx-2`}
|
||||
disabled={providers?.includes("google")}
|
||||
onClick={() => void signIn("google")}
|
||||
className={ `btn btn-square btn-outline mx-2` }
|
||||
disabled={ providers?.includes("google") }
|
||||
onClick={ () => void signIn("google") }
|
||||
>
|
||||
<SiGoogle />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
) }
|
||||
|
||||
{sessionData.user.name && (
|
||||
{ sessionData.user.name && (
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Name"
|
||||
className="input input-bordered"
|
||||
value={nameText}
|
||||
onChange={(event) => setNameText(event.target.value)}
|
||||
value={ nameText }
|
||||
onChange={ (event) => setNameText(event.target.value) }
|
||||
/>
|
||||
)}
|
||||
) }
|
||||
|
||||
{sessionData.user.email && (
|
||||
{ sessionData.user.email && (
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Email"
|
||||
className="input input-bordered"
|
||||
value={sessionData.user.email}
|
||||
value={ sessionData.user.email }
|
||||
disabled
|
||||
/>
|
||||
)}
|
||||
) }
|
||||
|
||||
<button
|
||||
onClick={() => void saveUser()}
|
||||
onClick={ () => void saveUser() }
|
||||
className="btn btn-secondary"
|
||||
>
|
||||
Save Account
|
||||
</button>
|
||||
|
||||
{/* <button className="btn btn-error">Delete Account</button> */}
|
||||
{/* <button className="btn btn-error">Delete Account</button> */ }
|
||||
|
||||
<label htmlFor="delete-user-modal" className="btn btn-error">
|
||||
Delete Account
|
||||
|
|
|
|||
|
|
@ -6,14 +6,14 @@ import { useEffect, useState } from "react";
|
|||
import { useSession } from "next-auth/react";
|
||||
import { useRouter } from "next/router";
|
||||
import {
|
||||
IoCheckmarkCircleOutline,
|
||||
IoCopyOutline,
|
||||
IoDownloadOutline,
|
||||
IoEyeOffOutline,
|
||||
IoEyeOutline,
|
||||
IoHourglassOutline,
|
||||
IoReloadOutline,
|
||||
IoSaveOutline,
|
||||
IoCheckmarkCircleOutline,
|
||||
IoCopyOutline,
|
||||
IoDownloadOutline,
|
||||
IoEyeOffOutline,
|
||||
IoEyeOutline,
|
||||
IoHourglassOutline,
|
||||
IoReloadOutline,
|
||||
IoSaveOutline,
|
||||
} from "react-icons/io5";
|
||||
import { z } from "zod";
|
||||
import { api } from "~/utils/api";
|
||||
|
|
@ -224,7 +224,7 @@ const RoomBody: React.FC = () => {
|
|||
|
||||
if (visible) {
|
||||
if (!!matchedVote) {
|
||||
return <p>{matchedVote.value}</p>;
|
||||
return <p>{ matchedVote.value }</p>;
|
||||
} else {
|
||||
return <IoHourglassOutline className="text-xl mx-auto text-red-400" />;
|
||||
}
|
||||
|
|
@ -243,39 +243,39 @@ const RoomBody: React.FC = () => {
|
|||
if (roomFromDb === undefined) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center text-center">
|
||||
<span className="loading loading-dots loading-lg"></span>{" "}
|
||||
<span className="loading loading-dots loading-lg"></span>{ " " }
|
||||
</div>
|
||||
);
|
||||
// Room has been loaded
|
||||
} else if (roomFromDb) {
|
||||
return (
|
||||
<span className="text-center">
|
||||
<div className="text-2xl">{roomFromDb.roomName}</div>
|
||||
<div className="text-2xl">{ roomFromDb.roomName }</div>
|
||||
<div className="flex flex-row flex-wrap text-center justify-center items-center gap-1 text-md mx-auto">
|
||||
<div>ID:</div>
|
||||
<div>{roomFromDb.id}</div>
|
||||
<div>{ roomFromDb.id }</div>
|
||||
|
||||
<button>
|
||||
{copied ? (
|
||||
{ copied ? (
|
||||
<IoCheckmarkCircleOutline className="mx-1 text-green-400 animate-bounce" />
|
||||
) : (
|
||||
<IoCopyOutline
|
||||
className="mx-1 hover:text-primary"
|
||||
onClick={copyRoomURLHandler}
|
||||
onClick={ copyRoomURLHandler }
|
||||
></IoCopyOutline>
|
||||
)}
|
||||
) }
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{roomFromDb && (
|
||||
{ roomFromDb && (
|
||||
<div className="card card-compact bg-neutral shadow-xl mx-auto m-4">
|
||||
<div className="card-body">
|
||||
<h2 className="card-title mx-auto">
|
||||
Story: {roomFromDb.storyName}
|
||||
Story: { roomFromDb.storyName }
|
||||
</h2>
|
||||
|
||||
<ul className="p-0 mx-auto flex flex-row flex-wrap justify-center items-center text-ceter gap-4">
|
||||
{presenceData &&
|
||||
{ presenceData &&
|
||||
presenceData
|
||||
.filter(
|
||||
(value, index, self) =>
|
||||
|
|
@ -288,73 +288,72 @@ const RoomBody: React.FC = () => {
|
|||
.map((presenceItem) => {
|
||||
return (
|
||||
<li
|
||||
key={presenceItem.clientId}
|
||||
key={ presenceItem.clientId }
|
||||
className="flex flex-row items-center justify-center gap-2"
|
||||
>
|
||||
<div className="w-10 rounded-full avatar mx-auto">
|
||||
<Image
|
||||
src={presenceItem.data.image}
|
||||
alt={`${presenceItem.data.name}'s Profile Picture`}
|
||||
height={32}
|
||||
width={32}
|
||||
src={ presenceItem.data.image }
|
||||
alt={ `${presenceItem.data.name}'s Profile Picture` }
|
||||
height={ 32 }
|
||||
width={ 32 }
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p className="flex flex-row flex-wrap text-center justify-center items-center gap-1 text-md mx-auto">
|
||||
{presenceItem.data.name}{" "}
|
||||
{presenceItem.data.role === "ADMIN" && (
|
||||
{ presenceItem.data.name }{ " " }
|
||||
{ presenceItem.data.role === "ADMIN" && (
|
||||
<div
|
||||
className="tooltip tooltip-primary"
|
||||
data-tip="Admin"
|
||||
>
|
||||
<FaShieldAlt className="inline-block text-primary" />
|
||||
</div>
|
||||
)}{" "}
|
||||
{presenceItem.clientId === roomFromDb.userId && (
|
||||
) }{ " " }
|
||||
{ presenceItem.clientId === roomFromDb.userId && (
|
||||
<div
|
||||
className="tooltip tooltip-warning"
|
||||
data-tip="Room Owner"
|
||||
>
|
||||
<RiVipCrownFill className="inline-block text-yellow-500" />
|
||||
</div>
|
||||
)}
|
||||
{" : "}
|
||||
) }
|
||||
{ " : " }
|
||||
</p>
|
||||
|
||||
{roomFromDb &&
|
||||
{ roomFromDb &&
|
||||
votesFromDb &&
|
||||
voteString(
|
||||
roomFromDb.visible,
|
||||
votesFromDb,
|
||||
presenceItem.data
|
||||
)}
|
||||
) }
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
}) }
|
||||
</ul>
|
||||
|
||||
<div className="join md:btn-group-horizontal mx-auto">
|
||||
{roomFromDb.scale.split(",").map((scaleItem, index) => {
|
||||
{ roomFromDb.scale.split(",").map((scaleItem, index) => {
|
||||
return (
|
||||
<button
|
||||
key={index}
|
||||
className={`join-item ${
|
||||
getVoteForCurrentUser()?.value === scaleItem
|
||||
key={ index }
|
||||
className={ `join-item ${getVoteForCurrentUser()?.value === scaleItem
|
||||
? "btn btn-active btn-primary"
|
||||
: "btn"
|
||||
}`}
|
||||
onClick={() => setVote(scaleItem)}
|
||||
}` }
|
||||
onClick={ () => setVote(scaleItem) }
|
||||
>
|
||||
{scaleItem}
|
||||
{ scaleItem }
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
}) }
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
) }
|
||||
|
||||
{sessionData &&
|
||||
{ sessionData &&
|
||||
!!roomFromDb &&
|
||||
roomFromDb.userId === sessionData.user.id && (
|
||||
<>
|
||||
|
|
@ -363,38 +362,38 @@ const RoomBody: React.FC = () => {
|
|||
<h2 className="card-title mx-auto">Room Settings</h2>
|
||||
|
||||
<label className="label mx-auto">
|
||||
{"Vote Scale (Comma Separated):"}{" "}
|
||||
{ "Vote Scale (Comma Separated):" }{ " " }
|
||||
</label>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Scale (Comma Separated)"
|
||||
className="input input-bordered m-auto"
|
||||
value={roomScale}
|
||||
onChange={(event) => {
|
||||
value={ roomScale }
|
||||
onChange={ (event) => {
|
||||
setRoomScale(event.target.value);
|
||||
}}
|
||||
} }
|
||||
/>
|
||||
|
||||
<label className="label mx-auto">{"Story Name:"} </label>
|
||||
<label className="label mx-auto">{ "Story Name:" } </label>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Story Name"
|
||||
className="input input-bordered m-auto"
|
||||
value={storyNameText}
|
||||
onChange={(event) => {
|
||||
value={ storyNameText }
|
||||
onChange={ (event) => {
|
||||
setStoryNameText(event.target.value);
|
||||
}}
|
||||
} }
|
||||
/>
|
||||
|
||||
<div className="flex flex-row flex-wrap text-center items-center justify-center gap-2">
|
||||
<div>
|
||||
<button
|
||||
onClick={() => saveRoom(!roomFromDb.visible, false)}
|
||||
onClick={ () => saveRoom(!roomFromDb.visible, false) }
|
||||
className="btn btn-primary inline-flex"
|
||||
>
|
||||
{roomFromDb.visible ? (
|
||||
{ roomFromDb.visible ? (
|
||||
<>
|
||||
<IoEyeOffOutline className="text-xl mr-1" />
|
||||
Hide
|
||||
|
|
@ -404,13 +403,13 @@ const RoomBody: React.FC = () => {
|
|||
<IoEyeOutline className="text-xl mr-1" />
|
||||
Show
|
||||
</>
|
||||
)}
|
||||
) }
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button
|
||||
onClick={() =>
|
||||
onClick={ () =>
|
||||
saveRoom(
|
||||
false,
|
||||
true,
|
||||
|
|
@ -427,8 +426,8 @@ const RoomBody: React.FC = () => {
|
|||
).length <= 1
|
||||
}
|
||||
>
|
||||
{roomFromDb.storyName === storyNameText ||
|
||||
votesFromDb?.length === 0 ? (
|
||||
{ roomFromDb.storyName === storyNameText ||
|
||||
votesFromDb?.length === 0 ? (
|
||||
<>
|
||||
<IoReloadOutline className="text-xl mr-1" /> Reset
|
||||
</>
|
||||
|
|
@ -436,16 +435,16 @@ const RoomBody: React.FC = () => {
|
|||
<>
|
||||
<IoSaveOutline className="text-xl mr-1" /> Save
|
||||
</>
|
||||
)}
|
||||
) }
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{votesFromDb &&
|
||||
{ votesFromDb &&
|
||||
(roomFromDb.logs.length > 0 ||
|
||||
votesFromDb.length > 0) && (
|
||||
<div>
|
||||
<button
|
||||
onClick={() => downloadLogs()}
|
||||
onClick={ () => downloadLogs() }
|
||||
className="btn btn-primary inline-flex hover:animate-pulse"
|
||||
>
|
||||
<>
|
||||
|
|
@ -453,12 +452,12 @@ const RoomBody: React.FC = () => {
|
|||
</>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
) }
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
) }
|
||||
</span>
|
||||
);
|
||||
// Room does not exist
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue