{showBackButton && (
-
-
- }
- onClick={() => setOpenDeletePage(true)}
- />
-
+ {isPageOwner && (
+
+
+ }
+ onClick={() => setOpenDeletePage(true)}
+ />
+
+ )}
}
>
diff --git a/apps/web/pages/pages/[page_id]/new.tsx b/apps/web/pages/pages/[page_id]/new.tsx
index fecb9c5..89e9dc1 100644
--- a/apps/web/pages/pages/[page_id]/new.tsx
+++ b/apps/web/pages/pages/[page_id]/new.tsx
@@ -13,14 +13,12 @@ import { ROUTES } from "../../../data/routes.data";
import { NewPostSchema } from "../../../data/schema";
import { track } from "../../../utils/analytics";
import { httpPost } from "../../../utils/http";
-import { getSupabaseServerClient } from "../../../utils/supabase/supabase-admin";
import { createOrRetrievePageSettings } from "../../../utils/useDatabase";
-export async function getServerSideProps({ params, req, res }) {
+export async function getServerSideProps({ params }) {
const { page_id } = params;
- const { user } = await getSupabaseServerClient({ req, res });
- const settings = await createOrRetrievePageSettings(user.id, String(page_id));
+ const settings = await createOrRetrievePageSettings(String(page_id));
return {
props: {
diff --git a/apps/web/pages/pages/[page_id]/settings/[activeTab].tsx b/apps/web/pages/pages/[page_id]/settings/[activeTab].tsx
index abe7c67..0e4cb0a 100644
--- a/apps/web/pages/pages/[page_id]/settings/[activeTab].tsx
+++ b/apps/web/pages/pages/[page_id]/settings/[activeTab].tsx
@@ -24,9 +24,9 @@ const IntegrationsSettings = dynamic(
export async function getServerSideProps({ req, res, params }) {
const { page_id } = params;
- const { user, supabase } = await getSupabaseServerClient({ req, res });
+ const { supabase } = await getSupabaseServerClient({ req, res });
const page = await getPage(supabase, page_id);
- const settings = await createOrRetrievePageSettings(user.id, String(page_id));
+ const settings = await createOrRetrievePageSettings(String(page_id));
return {
props: {
diff --git a/apps/web/pages/pages/index.tsx b/apps/web/pages/pages/index.tsx
index 84166ca..56677d4 100644
--- a/apps/web/pages/pages/index.tsx
+++ b/apps/web/pages/pages/index.tsx
@@ -1,5 +1,5 @@
import { PageType, PageTypeToLabel } from "@changes-page/supabase/types/page";
-import { PlusIcon } from "@heroicons/react/solid";
+import { PlusIcon, UserGroupIcon } from "@heroicons/react/solid";
import classNames from "classnames";
import { GetServerSidePropsContext, InferGetServerSidePropsType } from "next";
import { useRouter } from "next/router";
@@ -21,7 +21,14 @@ export async function getServerSideProps(ctx: GetServerSidePropsContext) {
const { data: pages, error } = await supabase
.from("pages")
- .select("*")
+ .select(
+ `*,
+ teams (
+ id,
+ name
+ )
+ `
+ )
.order("updated_at", { ascending: false });
return {
@@ -36,7 +43,7 @@ export default function Pages({
pages,
error,
}: InferGetServerSidePropsType
) {
- const { billingDetails } = useUserData();
+ const { billingDetails, user } = useUserData();
const router = useRouter();
useHotkeys("n", () => router.push(ROUTES.NEW_PAGE), [router]);
@@ -52,7 +59,7 @@ export default function Pages({
title={"My Pages"}
buttons={
}
@@ -64,10 +71,10 @@ export default function Pages({
>
{billingDetails?.has_active_subscription ? : null}
-
+
{!pages.length && (
+
{pages.map((page) => (
{PageTypeToLabel[page.type]}
@@ -144,17 +149,17 @@ export default function Pages({
-
+ {page.teams && page.user_id !== user?.id ? (
+
+
+
+ Editor ({page.teams.name})
+
+
+ ) : null}
))}
@@ -167,4 +172,3 @@ export default function Pages({
}
Pages.getLayout = (page: JSX.Element) =>
{page};
-Pages.getLayout = (page: JSX.Element) =>
{page};
diff --git a/apps/web/pages/teams/index.tsx b/apps/web/pages/teams/index.tsx
new file mode 100644
index 0000000..8bb95e2
--- /dev/null
+++ b/apps/web/pages/teams/index.tsx
@@ -0,0 +1,629 @@
+import { IPage } from "@changes-page/supabase/types/page";
+import { SpinnerWithSpacing } from "@changes-page/ui";
+import {
+ CheckCircleIcon,
+ OfficeBuildingIcon,
+ PlusIcon,
+ UserIcon,
+} from "@heroicons/react/solid";
+import { useRouter } from "next/router";
+import { useCallback, useEffect, useState } from "react";
+import toast from "react-hot-toast";
+import { useHotkeys } from "react-hotkeys-hook";
+import {
+ PrimaryButton,
+ SecondaryButton,
+} from "../../components/core/buttons.component";
+import { notifyError } from "../../components/core/toast.component";
+import ConfirmDeleteDialog from "../../components/dialogs/confirm-delete-dialog.component";
+import ManageTeamDialog from "../../components/dialogs/manage-team-dialog.component";
+import { EntityEmptyState } from "../../components/entity/empty-state";
+import AuthLayout from "../../components/layout/auth-layout.component";
+import Page from "../../components/layout/page.component";
+import Changelog from "../../components/marketing/changelog";
+import MemeberDetails from "../../components/teams/memeber-details";
+import { track } from "../../utils/analytics";
+import { getAppBaseURL } from "../../utils/helpers";
+import { httpPost } from "../../utils/http";
+import { useUserData } from "../../utils/useUser";
+
+export default function Teams() {
+ const { billingDetails } = useUserData();
+ const router = useRouter();
+ const { user, supabase } = useUserData();
+
+ const [teams, setTeams] = useState([]);
+ const [showTeamModal, setShowTeamModal] = useState(false);
+ const [selectedTeam, setSelectedTeam] = useState(null);
+ const [isLoading, setIsLoading] = useState(true);
+ const [teamToDelete, setTeamToDelete] = useState(null);
+ const [isDeleting, setIsDeleting] = useState(false);
+
+ const [pages, setPages] = useState([]);
+ const [showAssignPage, setShowAssignPage] = useState
(null);
+ const [selectedPage, setSelectedPage] = useState(null);
+ const [assigningPage, setAssigningPage] = useState(false);
+
+ const fetchData = useCallback(async () => {
+ setIsLoading(true);
+
+ const [
+ { data: pages, error: pagesError },
+ { data: teams, error: teamsError },
+ ] = await Promise.all([
+ supabase.from("pages").select("*"),
+ supabase
+ .from("teams")
+ .select(
+ `
+ *,
+ pages (
+ id,
+ title,
+ created_at
+ ),
+ team_members (
+ id,
+ user_id,
+ role
+ ),
+ team_invitations(
+ id,
+ email,
+ role,
+ created_at
+ )
+ `
+ )
+ .eq("team_invitations.status", "pending"),
+ ]);
+
+ setPages(pages ?? []);
+ setTeams(teams ?? []);
+
+ if (pagesError) {
+ notifyError("Failed to fetch pages");
+ }
+
+ if (teamsError) {
+ notifyError("Failed to fetch teams");
+ }
+
+ setIsLoading(false);
+ }, [supabase]);
+
+ useEffect(() => {
+ fetchData();
+ }, [fetchData]);
+
+ useHotkeys(
+ "n",
+ () => {
+ setSelectedTeam(null);
+ setShowTeamModal(true);
+ },
+ [router]
+ );
+
+ const deleteTeam = async (teamId: string) => {
+ setIsDeleting(true);
+ const { error } = await supabase
+ .from("teams")
+ .delete()
+ .match({ id: teamId });
+
+ if (error) {
+ notifyError("Failed to delete team");
+ return;
+ }
+
+ track("DeleteTeam");
+ fetchData();
+ setTeamToDelete(null);
+ setIsDeleting(false);
+ };
+
+ const handleAssignPage = async (teamId: string, pageId: string) => {
+ setAssigningPage(true);
+
+ await supabase
+ .from("pages")
+ .update({
+ team_id: teamId,
+ })
+ .match({ id: pageId });
+
+ track("AssignPageToTeam");
+ fetchData();
+ setAssigningPage(false);
+ setShowAssignPage(null);
+ setSelectedPage(null);
+ };
+
+ const handleRemovePage = async (pageId: string) => {
+ await supabase
+ .from("pages")
+ .update({
+ team_id: null,
+ })
+ .match({ id: pageId });
+
+ track("RemovePageFromTeam");
+ fetchData();
+ };
+
+ const handleRemoveMember = async (teamId: string, userId: string) => {
+ await supabase.from("team_members").delete().match({
+ team_id: teamId,
+ user_id: userId,
+ });
+
+ track("RemoveTeamMember");
+ fetchData();
+ };
+
+ const handleRevokeInvite = async (inviteId: string) => {
+ await supabase.from("team_invitations").delete().match({ id: inviteId });
+
+ track("RevokeTeamInvitation");
+ fetchData();
+ };
+
+ const handleAcceptInvite = async (inviteId: string) => {
+ await toast.promise(
+ httpPost({
+ url: "/api/teams/invite/accept",
+ data: {
+ invite_id: inviteId,
+ },
+ }),
+ {
+ loading: "Joining team...",
+ success: "Joined team",
+ error: "Failed to join team",
+ }
+ );
+
+ track("AcceptTeamInvitation");
+ fetchData();
+ };
+
+ const handleLeaveTeam = async (teamId: string) => {
+ if (confirm("Are you sure you want to leave this team?")) {
+ await supabase.from("team_members").delete().match({
+ team_id: teamId,
+ user_id: user?.id,
+ });
+
+ track("LeaveTeam");
+ fetchData();
+ }
+ };
+
+ const handleInviteTeamMember = async (teamId: string) => {
+ const email = prompt("Enter email address");
+ if (!email) {
+ return;
+ }
+
+ if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+ notifyError("Invalid email address");
+ return;
+ }
+
+ await toast.promise(
+ httpPost({
+ url: "/api/teams/invite",
+ data: {
+ team_id: teamId,
+ email,
+ },
+ }),
+ {
+ loading: "Sending invitation...",
+ success: "Invitation sent",
+ error: "Failed to send invitation",
+ }
+ );
+
+ fetchData();
+ };
+
+ return (
+ <>
+ setShowTeamModal(true)}
+ icon={
+
+ }
+ upgradeRequired={!billingDetails?.has_active_subscription}
+ />
+ }
+ >
+ {billingDetails?.has_active_subscription ? : null}
+
+
+ {isLoading ? (
+
+ ) : !teams.length ? (
+
{
+ if (!billingDetails?.has_active_subscription) {
+ router.push(
+ `/api/billing/redirect-to-checkout?return_url=${getAppBaseURL()}/teams`
+ );
+ return;
+ }
+
+ setShowTeamModal(true);
+ }}
+ />
+ ) : (
+
+ {teams.map((team) =>
+ team.owner_id === user?.id ? (
+
+
+
+ {team.image ? (
+
+ ) : (
+
+
+
+ )}
+
+
+ {team.name}
+
+
+
+
+
+
+
+
+
+
+
+
-
+ Pages
+
+
-
+
+ {team.pages?.length > 0 ? (
+
+ {team.pages?.map(
+ (page: Pick) => (
+ -
+
+
+
+
+ {page.title}
+
+
+
+
+
+
+ )
+ )}
+
+ ) : (
+
+ No pages yet, add one to share with your team.
+
+ Once shared, all team members will have
+ complete access to the page.
+
+ )}
+
+
+ {showAssignPage === team.id ? (
+
+
+
+
+ handleAssignPage(team.id, selectedPage)
+ }
+ />
+
+ setShowAssignPage(null)}
+ />
+
+ ) : (
+
setShowAssignPage(team.id)}
+ />
+ )}
+
+
+
+
-
+ Members
+
+ {team.team_members?.length > 0 ? (
+
-
+
+ {team.team_members?.map((member) => (
+ -
+
+
+
+
+
+ {member.role}
+
+
+
+ ))}
+
+
+ ) : (
+
-
+ No members yet
+
+ )}
+
+
-
+ Invites
+
+
-
+ {team.team_invitations?.length > 0 ? (
+
+ ) : null}
+
+ handleInviteTeamMember(team.id)}
+ />
+
+
+
+
+ ) : (
+
+
+
+ {team.image ? (
+
+ ) : (
+
+
+
+ )}
+
+
+ {team.team_members?.[0]?.role
+ ? `${
+ team.name
+ } (${team.team_members[0].role.toUpperCase()})`
+ : `You've been invited to join ${team.name} team, would you like to join?`}
+
+
+ {team.team_invitations?.length > 0 ? (
+
+ ) : (
+
+ )}
+
+
+
+
+
+ )
+ )}
+