Merge pull request #58 from AndrewCK24/11-state-use-swr

app/(protected)/notifications/page.jsx

@@ -0,0 +1,9 @@
+const NotificationsPage = () => {
+  return (
+    <div>
+      <h1>Notifications</h1>
+    </div>
+  );
+};
+
+export default NotificationsPage;

app/(protected)/team/[teamId]/edit/page.jsx

@@ -0,0 +1,31 @@
+"use client";
+import { useTeam } from "@/hooks/use-data";
+import { useRouter } from "next/navigation";
+import TeamForm from "@/components/team/form";
+
+const EditTeamPage = ({ params }) => {
+  const router = useRouter();
+  const { teamId } = params;
+  const { team, mutate } = useTeam(teamId);
+
+  const onSubmit = async (formData) => {
+    try {
+      const res = await fetch(`/api/teams/${teamId}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(formData),
+      });
+
+      const teamData = await res.json();
+      mutate({ ...team, ...teamData });
+      return router.push(`/team/${teamId}?tab=about`);
+    } catch (error) {
+      console.error(error);
+      // TODO: 改為彈出式警告
+    }
+  };
+
+  return <TeamForm team={team} onSubmit={onSubmit} className="w-full" />;
+};
+
+export default EditTeamPage;

app/(protected)/team/[teamId]/lineup/page.jsx

@@ -0,0 +1,33 @@
+"use client";
+import { useTeam, useTeamMembers } from "@/hooks/use-data";
+import Lineup from "@/components/team/lineup";
+
+const LineupPage = ({ params }) => {
+  const { teamId } = params;
+  const { team, mutate } = useTeam(teamId);
+  const { members } = useTeamMembers(teamId);
+
+  const handleSave = async (lineups) => {
+    try {
+      const response = await fetch(`/api/teams/${team._id}/lineup`, {
+        method: "PATCH",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(lineups),
+      });
+      const data = await response.json();
+      mutate({ ...team, lineup: data }, false);
+    } catch (error) {
+      console.log(error);
+    }
+    // if (isRecording) {
+    //   dispatch(matchActions.configMatchSet({ firstServe, lineup }));
+    //   router.push(`/match/${matchId}/confirm`);
+    // }
+  };
+
+  return <Lineup team={team} members={members} handleSave={handleSave} />;
+};
+
+export default LineupPage;

app/(protected)/team/[teamId]/matches/page.jsx

@@ -0,0 +1,9 @@
+import TeamMatches from "@/components/team/matches";
+
+const TeamMatchesPage = ({ params }) => {
+  const { teamId } = params;
+
+  return <TeamMatches teamId={teamId} className="w-full" />;
+};
+
+export default TeamMatchesPage;

app/(protected)/team/[teamId]/members/[memberId]/edit/page.jsx

@@ -0,0 +1,35 @@
+"use client";
+import { useRouter } from "next/navigation";
+import { useTeamMembers } from "@/hooks/use-data";
+import MemberForm from "@/components/team/members/form";
+
+const EditMemberPage = ({ params }) => {
+  const router = useRouter();
+  const { teamId, memberId } = params;
+  const { members, mutate } = useTeamMembers(teamId);
+  const member = members?.find((member) => member._id === memberId) || {};
+
+  const onSubmit = async (formData) => {
+    formData.team_id = teamId;
+    try {
+      const res = await fetch(`/api/members/${memberId}`, {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(formData),
+      });
+      const member = await res.json();
+      const memberIndex = members.findIndex(
+        (member) => member._id === memberId
+      );
+      members[memberIndex] = member;
+      mutate([...members], false);
+      return router.push(`/team/${teamId}/members/${memberId}`);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  return <MemberForm member={member} onSubmit={onSubmit} className="w-full" />;
+};
+
+export default EditMemberPage;

app/(protected)/team/[teamId]/members/[memberId]/page.jsx

@@ -0,0 +1,9 @@
+import MembersInfo from "@/components/team/members/info";
+
+const MemberPage = ({ params }) => {
+  const { teamId, memberId } = params;
+
+  return <MembersInfo teamId={teamId} memberId={memberId} className="w-full" />;
+};
+
+export default MemberPage;

app/(protected)/team/[teamId]/members/new/page.jsx

@@ -0,0 +1,30 @@
+"use client";
+import { useRouter } from "next/navigation";
+import { useTeamMembers } from "@/hooks/use-data";
+import MemberForm from "@/components/team/members/form";
+
+const MemberCreatePage = ({ params }) => {
+  const router = useRouter();
+  const { teamId } = params;
+  const { members, mutate } = useTeamMembers(teamId);
+
+  const onSubmit = async (formData) => {
+    formData.team_id = teamId;
+    try {
+      const res = await fetch("/api/members", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(formData),
+      });
+      const member = await res.json();
+      mutate([...members, member], false);
+      return router.push(`/team/${teamId}/members/${member._id}`);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  return <MemberForm onSubmit={onSubmit} className="w-full" />;
+};
+
+export default MemberCreatePage;

app/(protected)/team/[teamId]/page.jsx

@@ -0,0 +1,34 @@
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import TeamHero from "@/components/team/hero";
+import ConfirmInvitation from "@/components/team/confirmation";
+import LatestMatch from "@/components/team/feeds/latest-match";
+import TeamInfo from "@/components/team/info";
+import TeamMembers from "@/components/team/members";
+
+const TeamPage = ({ params, searchParams }) => {
+  const { teamId } = params;
+  const defaultTab = searchParams?.tab || "feeds";
+
+  return (
+    <Tabs defaultValue={defaultTab} className="relative w-full">
+      <ConfirmInvitation teamId={teamId} />
+      <TeamHero teamId={teamId} />
+      <TabsList className="sticky top-0 z-10 grid w-full grid-cols-3">
+        <TabsTrigger value="feeds">動態</TabsTrigger>
+        <TabsTrigger value="about">關於</TabsTrigger>
+        <TabsTrigger value="members">成員</TabsTrigger>
+      </TabsList>
+      <TabsContent value="feeds">
+        <LatestMatch teamId={teamId} />
+      </TabsContent>
+      <TabsContent value="about">
+        <TeamInfo teamId={teamId} />
+      </TabsContent>
+      <TabsContent value="members">
+        <TeamMembers teamId={teamId} />
+      </TabsContent>
+    </Tabs>
+  );
+};
+
+export default TeamPage;