Initial changes to helpers (scope creep)

This commit is contained in:
Atridad Lahiji 2023-08-13 11:17:08 -06:00
parent d4d70b5bc1
commit 19f2008617
No known key found for this signature in database
GPG key ID: 7CB8245F56BC3880
4 changed files with 110 additions and 99 deletions

View file

@ -8,6 +8,7 @@ import { useEffect, useState } from "react";
import { FaShieldAlt } from "react-icons/fa"; import { FaShieldAlt } from "react-icons/fa";
import { GiStarFormation } from "react-icons/gi"; import { GiStarFormation } from "react-icons/gi";
import { useUser } from "@clerk/nextjs"; import { useUser } from "@clerk/nextjs";
import { isAdmin, isVIP } from "~/utils/helpers";
const Home: NextPage = () => { const Home: NextPage = () => {
return ( return (
@ -43,10 +44,10 @@ const HomePageBody = () => {
<> <>
<h1 className="flex flex-row flex-wrap text-center justify-center items-center gap-1 text-4xl font-bold mx-auto"> <h1 className="flex flex-row flex-wrap text-center justify-center items-center gap-1 text-4xl font-bold mx-auto">
Hi, {user?.fullName}!{" "} Hi, {user?.fullName}!{" "}
{(user?.publicMetadata.isAdmin as boolean | undefined) && ( {isVIP(user?.publicMetadata) && (
<FaShieldAlt className="inline-block text-primary" /> <FaShieldAlt className="inline-block text-primary" />
)} )}
{(user?.publicMetadata.isVIP as boolean | undefined) && ( {isAdmin(user?.publicMetadata) && (
<GiStarFormation className="inline-block text-secondary" /> <GiStarFormation className="inline-block text-secondary" />
)} )}
</h1> </h1>

View file

@ -22,7 +22,7 @@ import Link from "next/link";
import { FaShieldAlt } from "react-icons/fa"; import { FaShieldAlt } from "react-icons/fa";
import { RiVipCrownFill } from "react-icons/ri"; import { RiVipCrownFill } from "react-icons/ri";
import { env } from "~/env.mjs"; import { env } from "~/env.mjs";
import { downloadCSV } from "~/utils/helpers"; import { downloadCSV, isAdmin, isVIP } from "~/utils/helpers";
import type { PresenceItem } from "~/utils/types"; import type { PresenceItem } from "~/utils/types";
import { useUser } from "@clerk/nextjs"; import { useUser } from "@clerk/nextjs";
@ -96,8 +96,8 @@ const RoomBody = ({}) => {
name: user?.fullName || "", name: user?.fullName || "",
image: user?.imageUrl || "", image: user?.imageUrl || "",
client_id: user?.id || "", client_id: user?.id || "",
isAdmin: (user?.publicMetadata.isAdmin as boolean | undefined) || false, isAdmin: isAdmin(user?.publicMetadata),
isVIP: (user?.publicMetadata.isVIP as boolean | undefined) || false, isVIP: isVIP(user?.publicMetadata),
} }
); );
@ -347,108 +347,111 @@ const RoomBody = ({}) => {
</div> </div>
)} )}
{isSignedIn && !!roomFromDb && roomFromDb.userId === user.id && ( {isSignedIn &&
<> !!roomFromDb &&
<div className="card card-compact bg-neutral shadow-xl mx-auto m-4"> (roomFromDb.userId === user.id || isAdmin(user?.publicMetadata)) && (
<div className="card-body flex flex-col flex-wrap"> <>
<h2 className="card-title mx-auto">Room Settings</h2> <div className="card card-compact bg-neutral shadow-xl mx-auto m-4">
<div className="card-body flex flex-col flex-wrap">
<h2 className="card-title mx-auto">Room Settings</h2>
<label className="label mx-auto"> <label className="label mx-auto">
{"Vote Scale (Comma Separated):"}{" "} {"Vote Scale (Comma Separated):"}{" "}
</label> </label>
<input <input
type="text" type="text"
placeholder="Scale (Comma Separated)" placeholder="Scale (Comma Separated)"
className="input input-bordered m-auto" className="input input-bordered m-auto"
value={roomScale} value={roomScale}
onChange={(event) => { onChange={(event) => {
setRoomScale(event.target.value); setRoomScale(event.target.value);
}} }}
/> />
<label className="label mx-auto">{"Story Name:"} </label> <label className="label mx-auto">{"Story Name:"} </label>
<input <input
type="text" type="text"
placeholder="Story Name" placeholder="Story Name"
className="input input-bordered m-auto" className="input input-bordered m-auto"
value={storyNameText} value={storyNameText}
onChange={(event) => { onChange={(event) => {
setStoryNameText(event.target.value); setStoryNameText(event.target.value);
}} }}
/> />
<div className="flex flex-row flex-wrap text-center items-center justify-center gap-2"> <div className="flex flex-row flex-wrap text-center items-center justify-center gap-2">
<div> <div>
<button <button
onClick={() => saveRoom(!roomFromDb.visible, false)} onClick={() => saveRoom(!roomFromDb.visible, false)}
className="btn btn-primary inline-flex" className="btn btn-primary inline-flex"
> >
{roomFromDb.visible ? ( {roomFromDb.visible ? (
<>
<IoEyeOffOutline className="text-xl mr-1" />
Hide
</>
) : (
<>
<IoEyeOutline className="text-xl mr-1" />
Show
</>
)}
</button>
</div>
<div>
<button
onClick={() =>
saveRoom(
false,
true,
roomFromDb.storyName === storyNameText ||
votesFromDb?.length === 0
? false
: true
)
}
className="btn btn-primary inline-flex"
disabled={
[...new Set(roomScale.split(","))].filter(
(item) => item !== ""
).length <= 1
}
>
{roomFromDb.storyName === storyNameText ||
votesFromDb?.length === 0 ? (
<>
<IoReloadOutline className="text-xl mr-1" /> Reset
</>
) : (
<>
<IoSaveOutline className="text-xl mr-1" /> Save
</>
)}
</button>
</div>
{votesFromDb &&
(roomFromDb.logs.length > 0 || votesFromDb.length > 0) && (
<div>
<button
onClick={() => downloadLogs()}
className="btn btn-primary inline-flex hover:animate-pulse"
>
<> <>
<IoDownloadOutline className="text-xl" /> <IoEyeOffOutline className="text-xl mr-1" />
Hide
</> </>
</button> ) : (
</div> <>
)} <IoEyeOutline className="text-xl mr-1" />
Show
</>
)}
</button>
</div>
<div>
<button
onClick={() =>
saveRoom(
false,
true,
roomFromDb.storyName === storyNameText ||
votesFromDb?.length === 0
? false
: true
)
}
className="btn btn-primary inline-flex"
disabled={
[...new Set(roomScale.split(","))].filter(
(item) => item !== ""
).length <= 1
}
>
{roomFromDb.storyName === storyNameText ||
votesFromDb?.length === 0 ? (
<>
<IoReloadOutline className="text-xl mr-1" /> Reset
</>
) : (
<>
<IoSaveOutline className="text-xl mr-1" /> Save
</>
)}
</button>
</div>
{votesFromDb &&
(roomFromDb.logs.length > 0 ||
votesFromDb.length > 0) && (
<div>
<button
onClick={() => downloadLogs()}
className="btn btn-primary inline-flex hover:animate-pulse"
>
<>
<IoDownloadOutline className="text-xl" />
</>
</button>
</div>
)}
</div>
</div> </div>
</div> </div>
</div> </>
</> )}
)}
</span> </span>
); );
// Room does not exist // Room does not exist

View file

@ -139,7 +139,6 @@ export const roomRouter = createTRPCRouter({
.update(rooms) .update(rooms)
.set({ .set({
storyName: input.name, storyName: input.name,
userId: ctx.auth.userId,
visible: input.visible, visible: input.visible,
scale: [...new Set(input.scale.split(","))] scale: [...new Set(input.scale.split(","))]
.filter((item) => item !== "") .filter((item) => item !== "")

View file

@ -15,3 +15,11 @@ export function downloadCSV(
link.click(); link.click();
document.body.removeChild(link); document.body.removeChild(link);
} }
export function isAdmin(meta: UserPublicMetadata | undefined) {
return (meta?.isAdmin as boolean | undefined) || false;
}
export function isVIP(meta: UserPublicMetadata | undefined) {
return (meta?.isVIP as boolean | undefined) || false;
}