From f1262fb8f7ba1781961bdda0d43753569530c6d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Leszczyk?= <michasko37@gmail.com>
Date: Fri, 4 Mar 2022 12:03:52 +0100
Subject: [PATCH] refactor(dashboard-v2): make CurrentPlan component use
 PlansProvider

---
 .../src/components/CurrentPlan/CurrentPlan.js |  4 +--
 .../dashboard-v2/src/hooks/useActivePlan.js   | 22 +++++++++++++++
 .../src/hooks/useSubscriptionPlans.js         | 28 -------------------
 packages/dashboard-v2/src/pages/index.js      |  5 ++--
 4 files changed, 27 insertions(+), 32 deletions(-)
 create mode 100644 packages/dashboard-v2/src/hooks/useActivePlan.js
 delete mode 100644 packages/dashboard-v2/src/hooks/useSubscriptionPlans.js

diff --git a/packages/dashboard-v2/src/components/CurrentPlan/CurrentPlan.js b/packages/dashboard-v2/src/components/CurrentPlan/CurrentPlan.js
index c5cdee36..86725c93 100644
--- a/packages/dashboard-v2/src/components/CurrentPlan/CurrentPlan.js
+++ b/packages/dashboard-v2/src/components/CurrentPlan/CurrentPlan.js
@@ -2,7 +2,7 @@ import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 
 import { useUser } from "../../contexts/user";
-import useSubscriptionPlans from "../../hooks/useSubscriptionPlans";
+import useActivePlan from "../../hooks/useActivePlan";
 
 import LatestPayment from "./LatestPayment";
 import SuggestedPlan from "./SuggestedPlan";
@@ -11,7 +11,7 @@ dayjs.extend(relativeTime);
 
 const CurrentPlan = () => {
   const { user, error: userError } = useUser();
-  const { activePlan, plans, error: plansError } = useSubscriptionPlans(user);
+  const { plans, activePlan, error: plansError } = useActivePlan(user);
 
   if (!user || !activePlan) {
     return (
diff --git a/packages/dashboard-v2/src/hooks/useActivePlan.js b/packages/dashboard-v2/src/hooks/useActivePlan.js
new file mode 100644
index 00000000..53e28b63
--- /dev/null
+++ b/packages/dashboard-v2/src/hooks/useActivePlan.js
@@ -0,0 +1,22 @@
+import { useEffect, useState } from "react";
+
+import freeTier from "../lib/tiers";
+import { usePlans } from "../contexts/plans";
+
+export default function useActivePlan(user) {
+  const { plans, error } = usePlans();
+
+  const [activePlan, setActivePlan] = useState(freeTier);
+
+  useEffect(() => {
+    if (user) {
+      setActivePlan(plans.find((plan) => plan.tier === user.tier));
+    }
+  }, [plans, user]);
+
+  return {
+    error,
+    plans,
+    activePlan,
+  };
+}
diff --git a/packages/dashboard-v2/src/hooks/useSubscriptionPlans.js b/packages/dashboard-v2/src/hooks/useSubscriptionPlans.js
deleted file mode 100644
index 26658df8..00000000
--- a/packages/dashboard-v2/src/hooks/useSubscriptionPlans.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import { useEffect, useState } from "react";
-import useSWR from "swr";
-import freeTier from "../lib/tiers";
-
-export default function useSubscriptionPlans(user) {
-  const { data: paidPlans, error, mutate } = useSWR("stripe/prices");
-  const [plans, setPlans] = useState([freeTier]);
-  const [activePlan, setActivePlan] = useState(freeTier);
-
-  useEffect(() => {
-    if (paidPlans) {
-      setPlans((plans) => [...plans, ...paidPlans].sort((planA, planB) => planA.tier - planB.tier));
-    }
-  }, [paidPlans]);
-
-  useEffect(() => {
-    if (user) {
-      setActivePlan(plans.find((plan) => plan.tier === user.tier));
-    }
-  }, [plans, user]);
-
-  return {
-    error,
-    mutate,
-    plans,
-    activePlan,
-  };
-}
diff --git a/packages/dashboard-v2/src/pages/index.js b/packages/dashboard-v2/src/pages/index.js
index 695e6ac3..4db97e04 100644
--- a/packages/dashboard-v2/src/pages/index.js
+++ b/packages/dashboard-v2/src/pages/index.js
@@ -2,6 +2,7 @@ import * as React from "react";
 import { useMedia } from "react-use";
 
 import theme from "../lib/theme";
+import { PlansProvider } from "../contexts/plans/PlansProvider";
 import { ArrowRightIcon } from "../components/Icons";
 import { Panel } from "../components/Panel";
 import { Tab, TabPanel, Tabs } from "../components/Tabs";
@@ -16,7 +17,7 @@ const IndexPage = () => {
   const showRecentActivity = useMedia(`(min-width: ${theme.screens.md})`);
 
   return (
-    <>
+    <PlansProvider>
       <div className="w-full">
         <Slider
           slides={[
@@ -60,7 +61,7 @@ const IndexPage = () => {
           <LatestActivity />
         </div>
       )}
-    </>
+    </PlansProvider>
   );
 };