Added 2 swr hooks: useProject and useUsage & refactored code

components/app/custom-domain/index.tsx

@@ -12,10 +12,12 @@ import {
 import { useEditDomainModal } from "./edit-domain-modal";
 import { DomainVerificationStatusProps } from "@/lib/types";
 import DomainConfiguration from "./domain-configuration";
+import useProject from "@/lib/swr/use-project";
 
-export default function CustomDomain({ domain }: { domain: string }) {
+export default function CustomDomain() {
   const router = useRouter();
   const { slug } = router.query as { slug: string };
+  const { project: { domain } = {} } = useProject();
 
   const { data, isValidating } = useSWR<{
     status: DomainVerificationStatusProps;

components/app/link-card.tsx

@@ -9,7 +9,7 @@ import { LinkProps } from "@/lib/types";
 import Tooltip, { TooltipContent } from "@/components/shared/tooltip";
 import useProject from "@/lib/swr/use-project";
 import useUsage from "@/lib/swr/use-usage";
-import { useAddEditLinkModal } from "./add-link-modal";
+import { useAddEditLinkModal } from "./add-edit-link-modal";
 import { useDeleteLinkModal } from "./delete-link-modal";
 
 export default function LinkCard({ props }: { props: LinkProps }) {

components/app/plan-usage.tsx

@@ -12,15 +12,15 @@ import {
 } from "@/components/shared/icons";
 import { motion } from "framer-motion";
 import { getStripe } from "@/lib/stripe/client";
+import useProject from "@/lib/swr/use-project";
+import useUsage from "@/lib/swr/use-usage";
 
-export default function PlanUsage({ project }: { project: ProjectProps }) {
+export default function PlanUsage() {
   const router = useRouter();
   const { slug } = router.query as { slug: string };
 
-  const { data: usage } = useSWR<number>(
-    project && `/api/projects/${slug}/domains/${project.domain}/usage`,
-    fetcher
-  );
+  const { project } = useProject();
+  const { usage } = useUsage(project);
 
   const { data: linkCount } = useSWR<number>(
     project && `/api/projects/${slug}/domains/${project.domain}/links/count`,

lib/swr/use-usage.ts

@@ -11,7 +11,7 @@ export default function useUsage(project: ProjectProps) {
     slug: string;
   };
 
-  const { data: usage, error } = useSWR(
+  const { data: usage, error } = useSWR<number>(
     router.isReady &&
       project &&
       `/api/projects/${slug}/domains/${project.domain}/usage`,

pages/app/[slug]/[key].tsx

@@ -1,9 +1,7 @@
 import Stats from "@/components/stats";
 import AppLayout from "@/components/layout/app";
 import { useRouter } from "next/router";
-import useSWR from "swr";
-import { fetcher } from "@/lib/utils";
-import { ProjectProps } from "@/lib/types";
+import useProject from "@/lib/swr/use-project";
 import ErrorPage from "next/error";
 
 export default function StatsPage() {
@@ -12,10 +10,8 @@ export default function StatsPage() {
     slug: string;
   };
 
-  const { data: project, error } = useSWR<ProjectProps>(
-    router.isReady && `/api/projects/${slug}`,
-    fetcher
-  );
+  const { project, error } = useProject();
+
   // handle error page
   if (error && error.status === 404) {
     return <ErrorPage statusCode={404} />;

pages/app/[slug]/index.tsx

@@ -1,7 +1,7 @@
 import AppLayout from "components/layout/app";
 import useProject from "@/lib/swr/use-project";
 import MaxWidthWrapper from "@/components/shared/max-width-wrapper";
-import { useAddEditLinkModal } from "@/components/app/add-link-modal";
+import { useAddEditLinkModal } from "@/components/app/add-edit-link-modal";
 import LinksContainer from "@/components/app/links-container";
 import ErrorPage from "next/error";
 

pages/app/[slug]/settings.tsx

@@ -1,8 +1,6 @@
 import AppLayout from "components/layout/app";
 import { useRouter } from "next/router";
-import useSWR from "swr";
-import { fetcher } from "@/lib/utils";
-import { ProjectProps } from "@/lib/types";
+import useProject from "@/lib/swr/use-project";
 import MaxWidthWrapper from "@/components/shared/max-width-wrapper";
 import CustomDomain from "@/components/app/custom-domain";
 import PlanUsage from "@/components/app/plan-usage";
@@ -14,10 +12,7 @@ export default function ProjectLinks() {
     slug: string;
   };
 
-  const { data: project, error } = useSWR<ProjectProps>(
-    router.isReady && `/api/projects/${slug}`,
-    fetcher
-  );
+  const { project, error } = useProject();
 
   // handle error page
   if (error && error.status === 404) {
@@ -35,8 +30,8 @@ export default function ProjectLinks() {
       </div>
       <MaxWidthWrapper>
         <div className="py-10 grid gap-5">
-          <PlanUsage project={project} />
-          <CustomDomain domain={project?.domain || ""} />
+          <PlanUsage />
+          <CustomDomain />
         </div>
       </MaxWidthWrapper>
     </AppLayout>

pages/app/links/index.tsx

@@ -1,13 +1,10 @@
 import AppLayout from "components/layout/app";
 import MaxWidthWrapper from "@/components/shared/max-width-wrapper";
-import { useAddEditLinkModal } from "@/components/app/add-link-modal";
+import { useAddEditLinkModal } from "@/components/app/add-edit-link-modal";
 import LinksContainer from "@/components/app/links-container";
 
 export default function Links() {
-  const { AddEditLinkModal, AddEditLinkButton } = useAddEditLinkModal({
-    domainVerified: true,
-    exceededUsage: false,
-  });
+  const { AddEditLinkModal, AddEditLinkButton } = useAddEditLinkModal({});
 
   return (
     <AppLayout>
@@ -20,10 +17,7 @@ export default function Links() {
           </div>
         </MaxWidthWrapper>
       </div>
-      <LinksContainer
-        exceededUsage={false}
-        AddEditLinkButton={AddEditLinkButton}
-      />
+      <LinksContainer AddEditLinkButton={AddEditLinkButton} />
     </AppLayout>
   );
 }