- {members.map(({ name, points }, i) => (
+ {members.map(({ preferredNames, points }, i) => (
-
{name}
+
{preferredNames}
{points} points
diff --git a/client/src/app/hacker/(main)/team/TeamBox.tsx b/client/src/app/hacker/(main)/team/team-box.tsx
similarity index 82%
rename from client/src/app/hacker/(main)/team/TeamBox.tsx
rename to client/src/app/hacker/(main)/team/team-box.tsx
index 65b26439..9f52d2f9 100644
--- a/client/src/app/hacker/(main)/team/TeamBox.tsx
+++ b/client/src/app/hacker/(main)/team/team-box.tsx
@@ -1,11 +1,14 @@
-import TeamName from "@/app/components/TeamName";
+"use client"
+
import { ShareIcon, XMarkIcon } from "@heroicons/react/24/outline";
import { useState } from "react";
-import useSWR from "swr";
-export default function TeamBox({ grow = true }: { grow?: boolean }) {
+import TeamName from "@/components/team-name";
+import { useMegateamsContext } from "@/hooks/use-megateams-context";
+
+export function TeamBox({ grow = true }: { grow?: boolean }) {
const [showTeamCode, setShowTeamCode] = useState(false);
- const { data: { team } = { team: null } } = useSWR("/user/team");
+ const { team } = useMegateamsContext()
function toggleTeamCode() {
setShowTeamCode(!showTeamCode);
diff --git a/client/src/app/hacker/layout.tsx b/client/src/app/hacker/layout.tsx
index fc16e840..62f69a5b 100644
--- a/client/src/app/hacker/layout.tsx
+++ b/client/src/app/hacker/layout.tsx
@@ -1,30 +1,24 @@
"use client";
+import * as React from "react";
import {
ChartBarIcon,
- CogIcon,
HomeIcon,
UserGroupIcon,
} from "@heroicons/react/24/outline";
-import TabbedPage from "@/app/components/TabbedPage";
-import useUser from "@/app/lib/useUser";
-import useSWR from "swr";
-import { fetchMegateamsApi } from "../lib/api";
+
+import { TabbedPage } from "@/components/tabbed-page";
+import { useMegateamsContext } from "@/hooks/use-megateams-context";
export default function HackerLayout({
children,
}: {
children: React.ReactNode;
}) {
- const { isLoading } = useUser({ redirectTo: "/" });
- const { data: { team } = { team: null } } = useSWR(
- "/user/team",
- fetchMegateamsApi
- );
-
- const hasTeam = team !== null;
+ const { team, userIsLoading, teamIsLoading } = useMegateamsContext();
- if (isLoading) return <>;
+ if (userIsLoading || teamIsLoading) return <>;
+ const hasTeam = team !== null
const tabs = [
{
@@ -39,11 +33,6 @@ export default function HackerLayout({
icon: UserGroupIcon,
path: "/hacker/team",
},
- // {
- // icon: CogIcon,
- // path: "https://durhack.com/",
- // openNewWindow: true,
- // },
];
return (
diff --git a/client/src/app/hacker/redeem/page.tsx b/client/src/app/hacker/redeem/page.tsx
index 777af57e..895d49a2 100644
--- a/client/src/app/hacker/redeem/page.tsx
+++ b/client/src/app/hacker/redeem/page.tsx
@@ -1,7 +1,5 @@
"use client";
-import { fetchMegateamsApi } from "@/app/lib/api";
-import useUser from "@/app/lib/useUser";
import {
ArrowPathIcon,
CheckIcon,
@@ -11,18 +9,23 @@ import Link from "next/link";
import { redirect, useSearchParams } from "next/navigation";
import { ReactNode, useEffect, useState } from "react";
+import { fetchMegateamsApi } from "@/lib/api";
+import { isHacker } from "@/lib/is-role";
+import { abortForRerender } from "@/lib/symbols";
+import { useMegateamsContext } from "@/hooks/use-megateams-context";
+
export default function RedeemPage() {
const [qrPoints, setQrPoints] = useState(null);
const [qrChecked, setQrChecked] = useState(false);
const searchParams = useSearchParams();
- const { user, isLoading } = useUser();
+ const { user, userIsLoading } = useMegateamsContext();
function makeSearchParams(params: Record) {
return new URLSearchParams(params).toString();
}
useEffect(() => {
- async function tryRedeemQR() {
+ async function tryRedeemQR(signal: AbortSignal) {
const uuid = searchParams.get("qr_id");
if (uuid && uuid !== "invalid") {
try {
@@ -30,30 +33,30 @@ export default function RedeemPage() {
method: "POST",
body: JSON.stringify({ uuid }),
headers: { "Content-Type": "application/json" },
+ signal,
});
setQrPoints(result.points);
- } catch {
+ } catch (error) {
+ if (error === abortForRerender) return
setQrChecked(true);
}
}
setQrChecked(true);
}
- tryRedeemQR();
+
+ const abortController = new AbortController()
+ void tryRedeemQR(abortController.signal);
+ return () => abortController.abort(abortForRerender);
}, [searchParams]);
- if (!isLoading && user?.role !== "hacker") {
- if (qrChecked) {
- return redirect("/");
- } else {
- const qr_id = searchParams.get("qr_id");
- return redirect(
- "/api/auth/durhack-live?" +
- makeSearchParams({
- referrer:
- "/hacker/redeem?" + makeSearchParams({ qr_id: qr_id ?? "" }),
- })
- );
- }
+ if (!userIsLoading && (user == null || !isHacker(user))) {
+ if (qrChecked) return redirect("/");
+
+ const qr_id = searchParams.get("qr_id");
+ const redemptionUrl = `/hacker/redeem?${makeSearchParams({ qr_id: qr_id ?? "" })}`
+ return redirect(
+ `/api/auth/keycloak/login?${makeSearchParams({ referrer: redemptionUrl })}`
+ );
}
function RedeemContainer({ children }: { children: ReactNode }) {
diff --git a/client/src/app/layout.tsx b/client/src/app/layout.tsx
index 845a70e9..71f3027b 100644
--- a/client/src/app/layout.tsx
+++ b/client/src/app/layout.tsx
@@ -1,5 +1,6 @@
import "./globals.scss";
import { Audiowide, Inter } from "next/font/google";
+import { MegateamsContextProvider } from "@/components/megateams-context-provider";
const headings = Audiowide({
subsets: ["latin"],
@@ -22,7 +23,9 @@ export default function RootLayout({
return (
- {children}
+
+ {children}
+
);
diff --git a/client/src/app/lib/useUser.ts b/client/src/app/lib/useUser.ts
deleted file mode 100644
index d23cec35..00000000
--- a/client/src/app/lib/useUser.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { useEffect } from "react";
-import { redirect } from "next/navigation";
-import useSWR from "swr";
-
-import { makeMegateamsApiRequest } from "./api";
-
-
-async function userFetcher(url: string) {
- const request = await makeMegateamsApiRequest(url);
- const response = await fetch(request);
-
- if (response.status === 401) return null;
- if (!response.ok) throw new Error("Couldn't fetch user!");
-
- return (await response.json()).data;
-}
-
-export default function useUser({redirectTo = "", redirectIfFound = false} = {}) {
- const {
- data: user,
- error,
- mutate: mutateUser,
- isLoading,
- } = useSWR("/user", userFetcher);
-
- useEffect(() => {
- // if no redirect needed, just return (example: already on /hacker)
- // if user data not yet there (fetch in progress, logged in or not) then don't do anything yet
- if ((!redirectTo && !redirectIfFound) || !user) return;
-
- // If redirectTo is set, redirect if the user was not found.
- if (redirectTo && !user) {
- redirect(redirectTo);
- }
- // If redirectIfFound is set, redirect if the user was found
- if (redirectIfFound && user) {
- if (user.role !== "hacker") {
- return redirect("/volunteer");
- }
- return redirect("/hacker");
- }
- }, [user, redirectIfFound, redirectTo]);
-
- return { user: user, mutateUser, error, isLoading };
-}
diff --git a/client/src/app/page.tsx b/client/src/app/page.tsx
index 9e3f8eaa..01c869dd 100644
--- a/client/src/app/page.tsx
+++ b/client/src/app/page.tsx
@@ -1,30 +1,23 @@
-"use client";
-
import Image from "next/image";
import Link from "next/link";
-import useUser from "./lib/useUser";
export default function Home() {
- const { isLoading } = useUser({ redirectIfFound: true });
-
return (
<>
- {!isLoading && (
-
-
-
-
DURHACK
-
-
+
+
+
+
DURHACK
+
+
+
+ Sign In
+
- )}
+
);
}
diff --git a/client/src/app/volunteer/(volunteer)/Custom.tsx b/client/src/app/volunteer/(volunteer)/custom.tsx
similarity index 98%
rename from client/src/app/volunteer/(volunteer)/Custom.tsx
rename to client/src/app/volunteer/(volunteer)/custom.tsx
index eebb79ae..89355e87 100644
--- a/client/src/app/volunteer/(volunteer)/Custom.tsx
+++ b/client/src/app/volunteer/(volunteer)/custom.tsx
@@ -1,6 +1,7 @@
import { ClockIcon } from "@heroicons/react/24/outline";
import { useState } from "react";
-import { fetchMegateamsApi } from "@/app/lib/api";
+
+import { fetchMegateamsApi } from "@/lib/api";
export default function Custom({
displayQR,
diff --git a/client/src/app/volunteer/(volunteer)/Manage.tsx b/client/src/app/volunteer/(volunteer)/manage.tsx
similarity index 98%
rename from client/src/app/volunteer/(volunteer)/Manage.tsx
rename to client/src/app/volunteer/(volunteer)/manage.tsx
index 7db946a7..af2b5c2d 100644
--- a/client/src/app/volunteer/(volunteer)/Manage.tsx
+++ b/client/src/app/volunteer/(volunteer)/manage.tsx
@@ -1,5 +1,3 @@
-import ButtonModal from "@/app/components/ButtonModal";
-import { fetchMegateamsApi } from "@/app/lib/api";
import {
ClockIcon,
MagnifyingGlassIcon,
@@ -15,6 +13,9 @@ import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
import useSWR from "swr";
import { Dialog } from "@headlessui/react";
+import { ButtonModal } from "@/components/button-modal";
+import { fetchMegateamsApi } from "@/lib/api";
+
export default function Manage({
displayQR,
}: {
diff --git a/client/src/app/volunteer/(volunteer)/Preset.tsx b/client/src/app/volunteer/(volunteer)/preset.tsx
similarity index 98%
rename from client/src/app/volunteer/(volunteer)/Preset.tsx
rename to client/src/app/volunteer/(volunteer)/preset.tsx
index 60ce1ad7..85cf6c05 100644
--- a/client/src/app/volunteer/(volunteer)/Preset.tsx
+++ b/client/src/app/volunteer/(volunteer)/preset.tsx
@@ -1,4 +1,4 @@
-import { fetchMegateamsApi } from "@/app/lib/api";
+import { fetchMegateamsApi } from "@/lib/api";
import { ClockIcon, InformationCircleIcon } from "@heroicons/react/24/outline";
import { useEffect, useState } from "react";
import useSWR from "swr";
diff --git a/client/src/app/volunteer/(volunteer)/VolunteerPage.tsx b/client/src/app/volunteer/(volunteer)/volunteer-page.tsx
similarity index 87%
rename from client/src/app/volunteer/(volunteer)/VolunteerPage.tsx
rename to client/src/app/volunteer/(volunteer)/volunteer-page.tsx
index c4d8ae93..21788688 100644
--- a/client/src/app/volunteer/(volunteer)/VolunteerPage.tsx
+++ b/client/src/app/volunteer/(volunteer)/volunteer-page.tsx
@@ -5,14 +5,18 @@ import { Fragment, useRef, useState } from "react";
import QRCode from "react-qr-code";
import { exportComponentAsJPEG } from "react-component-export-image";
import dateFormat from "dateformat";
-import useUser from "../../lib/useUser";
-import Preset from "./Preset";
-import Custom from "./Custom";
-import Manage from "./Manage";
import { useMediaQuery } from "react-responsive";
import resolveConfig from "tailwindcss/resolveConfig";
import tailwindConfig from "tailwindcss/defaultConfig";
+import { socketManager } from "@/lib/socket";
+import { isAdmin, isVolunteer } from "@/lib/is-role";
+import { useMegateamsContext } from "@/hooks/use-megateams-context";
+
+import Preset from "./preset";
+import Custom from "./custom";
+import Manage from "./manage";
+
export default function Volunteer() {
const [current, setCurrent] = useState("Preset");
const [open, setOpen] = useState(false);
@@ -29,9 +33,9 @@ export default function Volunteer() {
});
const { theme } = resolveConfig(tailwindConfig);
- const { user } = useUser();
- const isAdmin = user?.role === "admin";
- const isVolunteer = user?.role === "admin" || user?.role === "volunteer";
+ const { user } = useMegateamsContext();
+ const userIsAdmin = user != null && isAdmin(user);
+ const userIsVolunteer = user != null && isVolunteer(user)
function getClasses(name: string) {
let classes =
@@ -56,9 +60,15 @@ export default function Volunteer() {
});
}
- function displayQR(name: string, url: string, category: string) {
- setQR({ name, url, category, preset: category === "preset" });
- setOpen(true);
+ async function displayQR(name: string, url: string, category: string) {
+ // Should use socket to subscribe to QR updates
+ if (await socketManager.ensureConnected()) {
+ console.log("Socket is authenticated")
+ // setQR({ name, url, category, preset: category === "preset" });
+ // setOpen(true);
+ } else {
+ console.log("Failed to get socket")
+ }
}
const tabs = [
@@ -66,7 +76,7 @@ export default function Volunteer() {
name: "Preset",
content:
,
},
- ...(isVolunteer
+ ...(userIsVolunteer
? [
{
name: "Custom",
@@ -74,7 +84,7 @@ export default function Volunteer() {
},
]
: []),
- ...(isAdmin
+ ...(userIsAdmin
? [
{
name: "Manage",
diff --git a/client/src/app/volunteer/admin/AdminPage.tsx b/client/src/app/volunteer/admin/admin-page.tsx
similarity index 75%
rename from client/src/app/volunteer/admin/AdminPage.tsx
rename to client/src/app/volunteer/admin/admin-page.tsx
index 99293050..3cee32a6 100644
--- a/client/src/app/volunteer/admin/AdminPage.tsx
+++ b/client/src/app/volunteer/admin/admin-page.tsx
@@ -1,58 +1,58 @@
"use client";
-import ButtonModal from "@/app/components/ButtonModal";
-import { fetchMegateamsApi } from "@/app/lib/api";
import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
-import { useState } from "react";
+import * as React from "react";
import { useFormState } from "react-hooks-use-form-state";
import ReactPaginate from "react-paginate";
import Select from "react-select";
import useSWR from "swr";
-export default function Admin() {
- const { mutate: mutateUsers, data: usersData = { users: [] } } = useSWR<{
- users: any[];
- }>("/users");
- const [users, setUsers, resetForm] = useFormState(usersData.users);
+import { ButtonModal } from "@/components/button-modal";
+import { fetchMegateamsApi } from "@/lib/api";
+
+export function AdminPage() {
+ const itemsPerPage = 10;
+
+ const [message, setMessage] = React.useState("");
+ const [messageOpen, setMessageOpen] = React.useState(false);
+ const [localSearchQuery, setLocalSearchQuery] = React.useState("");
+ const [searchQuery, setSearchQuery] = React.useState("");
+ const [itemOffset, setItemOffset] = React.useState(0);
+ const [pageNumber, setPageNumber] = React.useState(0);
+
+ const { mutate: mutateUsers, data: usersData = { data: [], total_count: 0 } } = useSWR<{
+ data: any[]
+ total_count: number
+ }>(`/users?first=${itemOffset}&count=${itemsPerPage}&query=${searchQuery}`);
+ const [users, setUsers, resetForm] = useFormState(usersData.data);
+
const { data: { teams } = { teams: [] } } = useSWR<{
teams: any[];
}>("/teams");
- const [message, setMessage] = useState("");
- const [messageOpen, setMessageOpen] = useState(false);
- const [searchText, setSearchText] = useState("");
- const [searchTextActive, setSearchTextActive] = useState("");
- const [itemOffset, setItemOffset] = useState(0);
- const [pageNumber, setPageNumber] = useState(0);
-
- const lowerSearch = searchTextActive.toLowerCase();
- const filteredUsers = users.filter((users) => {
- if (users.preferred_name.toLowerCase().includes(lowerSearch)) return true;
- if (users.email.toLowerCase().includes(lowerSearch)) return true;
- return false;
- });
- const itemsPerPage = 50;
- const endOffset = itemOffset + itemsPerPage;
- const currentItems = filteredUsers.slice(itemOffset, endOffset);
- const pageCount = Math.ceil(filteredUsers.length / itemsPerPage);
+ const pageCount = Math.ceil(usersData.total_count / itemsPerPage);
function handlePageClick(event: { selected: number }) {
- const newOffset = (event.selected * itemsPerPage) % filteredUsers.length;
+ const newOffset = event.selected * itemsPerPage
setItemOffset(newOffset);
setPageNumber(event.selected);
}
- function handleSearchText(text: string) {
- setSearchText(text);
+ function onSearchTextChanged(text: string) {
+ // when the search text is changed, update the local search query in case of a rerender, but don't actually fetch anything yet
+ setLocalSearchQuery(text);
+
+ // if the search text changes to blank string, trigger a fetch and reset page number
if (!text) {
- setSearchTextActive(text);
+ setSearchQuery("");
setItemOffset(0);
setPageNumber(0);
}
}
function search() {
- setSearchTextActive(searchText);
+ // when the search text field is submitted / the magnifying glass is clicked, trigger a fetch and reset page number
+ setSearchQuery(localSearchQuery);
setItemOffset(0);
setPageNumber(0);
}
@@ -65,7 +65,7 @@ export default function Admin() {
try {
await fetchMegateamsApi("/points", {
method: "POST",
- body: JSON.stringify({ value: parseInt(points), redeemer_id: id }),
+ body: JSON.stringify({ value: parseInt(points), redeemerUserId: id }),
headers: { "Content-Type": "application/json" },
});
await mutateUsers();
@@ -105,8 +105,8 @@ export default function Admin() {
type="text"
className="dh-input w-full pl-10"
placeholder="Search for users..."
- value={searchText}
- onChange={(e) => handleSearchText(e.target.value)}
+ value={localSearchQuery}
+ onChange={(e) => onSearchTextChanged(e.target.value)}
/>