team members loaded and mobile fix

Author: burtonjong

amplify/data/resource.ts

@@ -25,7 +25,12 @@ const schema = a
             allow.ownerDefinedIn("profileOwner").to(["read", "create"]),
             allow.groups(["Admin"]).to(["read", "update", "create"]),
           ]),
-        email: a.string(),
+        email: a
+          .string()
+          .authorization((allow) => [
+            allow.ownerDefinedIn("profileOwner").to(["read", "create"]),
+            allow.groups(["Admin"]).to(["read", "create"]),
+          ]),
         institution: a.string(),
         completedRegistration: a.boolean(),
         allergies: a.string(),

src/components/UserProfile/TeamForm.tsx

@@ -1,4 +1,9 @@
+"use client";
+
+import { generateClient } from "aws-amplify/api";
+
 import { type Schema } from "@/amplify/data/resource";
+import { useQuery } from "@tanstack/react-query";
 
 const INPUT_STYLES =
   "rounded-full border-4 placeholder-black border-white bg-[#FFFFFF] bg-white/30 ps-3 py-2 my-2 text-sm md:text-md backdrop-opacity-30";
@@ -17,7 +22,23 @@ export default function TeamForm({ data, teamMutation }: TeamFormProp) {
     teamMutation.mutate(data);
   };
 
+  const client = generateClient<Schema>();
+
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { data: teamData, isFetching } = useQuery({
+    initialData: null,
+    initialDataUpdatedAt: 0,
+    queryKey: ["TeamWithMembers"],
+    queryFn: async () => {
+      const { data: teamWithMembers } = await client.models.Team.get(
+        { id: data.id },
+        { selectionSet: ["id", "members.*"] },
+      );
+
+      return teamWithMembers;
+    },
+    enabled: !!data,
+  });
 
   return (
     <>
@@ -40,16 +61,24 @@ export default function TeamForm({ data, teamMutation }: TeamFormProp) {
             />
             <label>Team Members</label>
             <div className="flex flex-col">
-              {Array.isArray(data.members) &&
-                data.members.map((member: Schema["User"]["type"]) => (
-                  <input
-                    key={member.id}
-                    className={INPUT_STYLES}
-                    type="text"
-                    value={`${member.firstName} ${member.lastName}`}
-                    disabled
-                  />
-                ))}
+              {isFetching ? (
+                <h1 className={INPUT_STYLES}>Loading...</h1>
+              ) : (
+                <>
+                  {Array.isArray(teamData?.members) &&
+                    teamData?.members.map(
+                      (member: Partial<Schema["User"]["type"]>) => (
+                        <input
+                          key={member.id}
+                          className={INPUT_STYLES}
+                          type="text"
+                          value={`${member.firstName} ${member.lastName}`}
+                          disabled
+                        />
+                      ),
+                    )}
+                </>
+              )}
             </div>
           </form>
           <div className="mb-10 mt-3 flex justify-end md:mx-10">

src/components/UserProfile/TeamProfile.tsx

@@ -16,25 +16,13 @@ const TEAM_INSTRUCTION_STYLES =
 const TeamProfile = () => {
   const queryClient = useQueryClient();
 
-  const userId = useUser().currentUser.username as string;
+  const userTeamId = useUser().currentUser.teamId as string;
 
   const { data, isFetching } = useQuery({
     initialData: {} as Schema["Team"]["type"],
     initialDataUpdatedAt: 0,
-    queryKey: ["Team", userId],
+    queryKey: ["Team", userTeamId],
     queryFn: async () => {
-      const userResponse = await client.models.User.get({
-        id: userId,
-      });
-
-      if (userResponse.errors) throw new Error(userResponse.errors[0].message);
-
-      const userTeamId = userResponse.data?.teamId as string;
-
-      if (!userTeamId) {
-        return {} as Schema["Team"]["type"];
-      }
-
       const teamResponse = await client.models.Team.get({
         id: userTeamId,
       });
@@ -43,27 +31,28 @@ const TeamProfile = () => {
 
       return teamResponse.data;
     },
+    enabled: !!userTeamId,
   });
 
   const teamMutation = useMutation({
     mutationFn: async () => {
       try {
-        await client.models.User.update({ id: userId, teamId: null });
+        await client.models.User.update({ id: userTeamId, teamId: null });
       } catch (error) {
         console.error("Error updating ids", error);
         throw error;
       }
     },
     onSuccess: () => {
       queryClient.invalidateQueries({
-        queryKey: ["Team", userId],
+        queryKey: ["Team", userTeamId],
       });
     },
   });
 
   return (
     <>
-      {isFetching ? (
+      {isFetching || !userTeamId ? (
         <div className="flex h-screen w-full items-center justify-center bg-fuzzy-peach">
           <LoadingRing />
         </div>

src/components/admin/Judging/JudgingTimeline.tsx

@@ -41,9 +41,9 @@ export default function JudgingTimeline({
             colorField: "color",
           }}
           day={{
-            startHour: 15, // will have to be edited when we know what times to capture
-            endHour: 18,
-            step: 15,
+            startHour: 12, // will have to be edited when we know what times to capture
+            endHour: 17,
+            step: 10,
           }}
           deletable={false}
           viewerExtraComponent={(fields, event) => {

src/components/contexts/UserContext.tsx

@@ -96,6 +96,7 @@ export function UserContextProvider({ children }: Props) {
             populated: true,
             completedProfile: response.data?.completedRegistration ?? false,
             email: response.data?.email ?? "",
+            teamId: response.data?.teamId ?? "",
             firstName: response.data?.firstName ?? "",
             lastName: response.data?.lastName ?? "",
             JUDGE_roomId: response.data?.JUDGE_roomId,