atridad/pollo
1
0
Fork 0
Code Activity Actions

Merge pull request #34 from atridadl/dev

Browse source 
1.2.7
✨ Shiny new stats on the front page
🚧 Small cleanup of react FC references...
This commit is contained in:
Atridad Lahiji 2023-08-08 22:41:56 -06:00 • committed by GitHub
commit ad0be32e52
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 163 additions and 95 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "sprintpadawan",
"version": "1.2.6",
"version": "1.2.7",
"description": "Plan. Sprint. Repeat.",
"private": true,
"scripts": {

16
src/components/Footer.tsx
View file

@ -1,14 +1,14 @@
import { GiTechnoHeart } from "react-icons/gi";
import packagejson from "../../package.json";
const Footer: React.FC = () => {
const Footer = () => {
return (
<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>

2
src/components/Navbar.tsx
View file

@ -8,7 +8,7 @@ interface NavbarProps {
title: string;
}
const Navbar: React.FC<NavbarProps> = ({ title }) => {
const Navbar = ({ title }: NavbarProps) => {
const { data: sessionData, status: sessionStatus } = useSession();
const router = useRouter();

36
src/components/RoomList.tsx
View file

@ -7,7 +7,7 @@ import { IoEnterOutline, IoTrashBinOutline } from "react-icons/io5";
import { env } from "~/env.mjs";
import { api } from "~/utils/api";
const RoomList: React.FC = () => {
const RoomList = () => {
const { data: sessionData } = useSession();
configureAbly({
@ -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>
);
};

83
src/components/Stats.tsx Normal file
View file

@ -0,0 +1,83 @@
import { configureAbly, useChannel } from "@ably-labs/react-hooks";
import { env } from "~/env.mjs";
import { api } from "~/utils/api";
const Stats = () => {
configureAbly({
key: env.NEXT_PUBLIC_ABLY_PUBLIC_KEY,
recover: (_, cb) => {
cb(true);
},
});
const [] = useChannel(
`${env.NEXT_PUBLIC_APP_ENV}-stats`,
() => void refetchData()
);
const {
data: usersCount,
isLoading: usersCountLoading,
isFetching: usersCountFetching,
refetch: refetchUsersCount,
} = api.rest.userCount.useQuery();
const {
data: roomsCount,
isLoading: roomsCountLoading,
isFetching: roomsCountFetching,
refetch: refetchRoomsCount,
} = api.rest.roomCount.useQuery();
const {
data: votesCount,
isLoading: votesCountLoading,
isFetching: votesCountFetching,
refetch: refetchVotesCount,
} = api.rest.voteCount.useQuery();
const refetchData = async () => {
await Promise.all([
refetchUsersCount(),
refetchRoomsCount(),
refetchVotesCount(),
]);
};
return (
<div className="stats stats-horizontal shadow bg-neutral m-4">
<div className="stat">
<div className="stat-title">Users</div>
<div className="stat-value">
{usersCountLoading || usersCountFetching ? (
<span className="loading loading-infinity loading-lg"></span>
) : (
<>{usersCount ? usersCount : "0"}</>
)}
</div>
</div>
<div className="stat">
<div className="stat-title">Rooms</div>
<div className="stat-value">
{roomsCountLoading || roomsCountFetching ? (
<span className="loading loading-infinity loading-lg"></span>
) : (
<>{roomsCount ? roomsCount : "0"}</>
)}
</div>
</div>
<div className="stat">
<div className="stat-title">Votes</div>
<div className="stat-value">
{votesCountLoading || votesCountFetching ? (
<span className="loading loading-infinity loading-lg"></span>
) : (
<>{votesCount ? votesCount : "0"}</>
)}
</div>
</div>
</div>
);
};
export default Stats;

68
src/pages/admin/index.tsx
View file

@ -8,6 +8,7 @@ import { SiGithub, SiGoogle } from "react-icons/si";
import { GiStarFormation } from "react-icons/gi";
import { api } from "~/utils/api";
import { getServerAuthSession } from "../../server/auth";
import Stats from "~/components/Stats";
export const getServerSideProps: GetServerSideProps = async (ctx) => {
const session = await getServerAuthSession(ctx);
@ -55,31 +56,13 @@ const Admin: NextPage = () => {
export default Admin;
const AdminBody: React.FC = () => {
const {
data: usersCount,
isLoading: usersCountLoading,
isFetching: usersCountFetching,
refetch: refetchUsersCount,
} = api.rest.userCount.useQuery();
const AdminBody = () => {
const {
data: users,
isLoading: usersLoading,
isFetching: usersFetching,
refetch: refetchUsers,
} = api.user.getAll.useQuery();
const {
data: roomsCount,
isLoading: roomsCountLoading,
isFetching: roomsCountFetching,
refetch: refetchRoomsCount,
} = api.rest.roomCount.useQuery();
const {
data: votesCount,
isLoading: votesCountLoading,
isFetching: votesCountFetching,
refetch: refetchVotesCount,
} = api.rest.voteCount.useQuery();
const getProviders = (user: {
createdAt: Date;
@ -153,57 +136,16 @@ const AdminBody: React.FC = () => {
};
const refetchData = async () => {
await Promise.all([
refetchUsers(),
refetchUsersCount(),
refetchRoomsCount(),
refetchVotesCount(),
]);
await Promise.all([refetchUsers()]);
};
return (
<>
<h1 className="text-4xl font-bold">Admin Panel</h1>
<div className="stats stats-horizontal shadow bg-neutral m-4">
<div className="stat">
<div className="stat-title">Users</div>
<div className="stat-value">
{usersCountLoading || usersCountFetching ? (
<span className="loading loading-dots loading-lg"></span>
) : (
<>{usersCount ? usersCount : "0"}</>
)}
</div>
</div>
<Stats />
<div className="stat">
<div className="stat-title">Rooms</div>
<div className="stat-value">
{roomsCountLoading || roomsCountFetching ? (
<span className="loading loading-dots loading-lg"></span>
) : (
<>{roomsCount ? roomsCount : "0"}</>
)}
</div>
</div>
<div className="stat">
<div className="stat-title">Votes</div>
<div className="stat-value">
{votesCountLoading || votesCountFetching ? (
<span className="loading loading-dots loading-lg"></span>
) : (
<>{votesCount ? votesCount : "0"}</>
)}
</div>
</div>
</div>
{usersCountFetching ||
usersFetching ||
roomsCountFetching ||
votesCountFetching ? (
{usersFetching ? (
<span className="loading loading-dots loading-lg"></span>
) : (
<div className="flex flex-row flex-wrap text-center items-center justify-center gap-2">

2
src/pages/dashboard/index.tsx
View file

@ -45,7 +45,7 @@ const Home: NextPage = () => {
export default Home;
const HomePageBody: React.FC = () => {
const HomePageBody = () => {
const { data: sessionData } = useSession();
const [joinRoomTextBox, setJoinRoomTextBox] = useState<string>("");
const [tabIndex, setTabIndex] = useState<number>();

10
src/pages/index.tsx
View file

@ -1,5 +1,6 @@
import { type NextPage } from "next";
import Head from "next/head";
import Stats from "~/components/Stats";
const Home: NextPage = () => {
return (
@ -17,7 +18,7 @@ const Home: NextPage = () => {
export default Home;
const HomePageBody: React.FC = () => {
const HomePageBody = () => {
return (
<>
<h1 className="text-3xl sm:text-6xl font-bold">
@ -54,6 +55,13 @@ const HomePageBody: React.FC = () => {
</ul>
</div>
</div>
<div className="card card-compact bg-secondary text-black font-bold text-left">
<div className="card-body">
<h2 className="card-title">Stats:</h2>
<Stats />
</div>
</div>
</>
);
};

2
src/pages/profile/index.tsx
View file

@ -48,7 +48,7 @@ const Profile: NextPage = () => {
export default Profile;
const ProfileBody: React.FC = () => {
const ProfileBody = () => {
const { data: sessionData } = useSession();
const [nameText, setNameText] = useState<string>("");
const router = useRouter();

2
src/pages/room/[id].tsx
View file

@ -65,7 +65,7 @@ const Room: NextPage = () => {
export default Room;
const RoomBody: React.FC = ({}) => {
const RoomBody = ({}) => {
const { data: sessionData } = useSession();
const { query } = useRouter();
const roomId = z.string().parse(query.id);

12
src/server/api/routers/room.ts
View file

@ -33,6 +33,12 @@ export const roomRouter = createTRPCRouter({
EventTypes.ROOM_LIST_UPDATE,
JSON.stringify(room)
);
await publishToChannel(
`stats`,
EventTypes.STATS_UPDATE,
JSON.stringify(room)
);
}
// happy path
return !!room;
@ -224,6 +230,12 @@ export const roomRouter = createTRPCRouter({
EventTypes.ROOM_UPDATE,
JSON.stringify(deletedRoom)
);
await publishToChannel(
`stats`,
EventTypes.STATS_UPDATE,
JSON.stringify(deletedRoom)
);
}
return !!deletedRoom;

8
src/server/api/routers/user.ts
View file

@ -3,6 +3,7 @@ import { Resend } from "resend";
import { z } from "zod";
import { Goodbye } from "~/components/templates/Goodbye";
import { env } from "~/env.mjs";
import { publishToChannel } from "~/server/ably";
import {
adminProcedure,
createTRPCRouter,
@ -10,6 +11,7 @@ import {
} from "~/server/api/trpc";
import { fetchCache, invalidateCache, setCache } from "~/server/redis";
import { EventTypes } from "~/utils/types";
const resend = new Resend(process.env.RESEND_API_KEY);
@ -118,6 +120,12 @@ export const userRouter = createTRPCRouter({
await invalidateCache(`kv_usercount_admin`);
await invalidateCache(`kv_userlist_admin`);
await publishToChannel(
`stats`,
EventTypes.STATS_UPDATE,
JSON.stringify(user)
);
}
return !!user;

6
src/server/api/routers/vote.ts
View file

@ -93,6 +93,12 @@ export const voteRouter = createTRPCRouter({
EventTypes.VOTE_UPDATE,
input.value
);
await publishToChannel(
`stats`,
EventTypes.STATS_UPDATE,
JSON.stringify(vote)
);
}
return !!vote;

8
src/server/auth.ts
View file

@ -12,6 +12,8 @@ import { env } from "~/env.mjs";
import { prisma } from "~/server/db";
import { Welcome } from "../components/templates/Welcome";
import { invalidateCache } from "./redis";
import { publishToChannel } from "./ably";
import { EventTypes } from "~/utils/types";
const resend = new Resend(process.env.RESEND_API_KEY);
@ -65,6 +67,12 @@ export const authOptions: NextAuthOptions = {
});
await invalidateCache(`kv_userlist_admin`);
await invalidateCache(`kv_usercount_admin`);
await publishToChannel(
`stats`,
EventTypes.STATS_UPDATE,
JSON.stringify(user)
);
}
},
async signIn({}) {

1
src/utils/types.ts
View file

@ -4,6 +4,7 @@ export const EventTypes = {
ROOM_LIST_UPDATE: "room.list.update",
ROOM_UPDATE: "room.update",
VOTE_UPDATE: "vote.update",
STATS_UPDATE: "stats.update",
} as const;
export type EventType = BetterEnum<typeof EventTypes>;