subscription setup frontend and refactor old code

Author: amitjimiwal

src/App.tsx

@@ -7,10 +7,12 @@ import Footer from "./components/Footer";
 import { useDispatch } from "react-redux";
 import { getUserInfo } from "./redux-store/slices/authSlice";
 import { AppDispatch } from "./redux-store/store";
+import { getSubscriptionInfo } from "./redux-store/slices/subscriptionslice";
 function App() {
   const dispatch: AppDispatch = useDispatch();
   useEffect(() => {
     dispatch(getUserInfo());
+    dispatch(getSubscriptionInfo());
   }, [dispatch]);
   return (
     <div className="min-h-screen w-full ">

src/api/axiosclient.ts

@@ -8,7 +8,5 @@ export const axiosClient=axios.create({
           'Content-Type': 'application/json',
           'Access-Control-Allow-Origin': String(import.meta.env.VITE_APP_FRONTEND_BASE_URL),
           "Access-Control-Allow-Methods": "GET,PUT,POST,DELETE,PATCH,OPTIONS",
-          // 'cache-control': 'private',
-          // 'E-Tag': Cookies.get('auth_token'),
      },
 });

src/components/ChartView.tsx

@@ -45,11 +45,11 @@ export default function App({ type }: { type: string }) {
     datasets: [
       {
         label: type,
-        data: type === "Score" ? chartdata.scoresval : chartdata.accuracyval,
+        data: type === "Wpm" ? chartdata.scoresval : chartdata.accuracyval,
         borderColor:
-          type === "Score" ? "rgb(54, 162, 235)" : "rgb(255, 159, 64)",
+          type === "Wpm" ? "rgb(54, 162, 235)" : "rgb(255, 159, 64)",
         backgroundColor:
-          type === "Score" ? "rgb(54, 162, 235)" : "rgb(255, 159, 64)",
+          type === "Wpm" ? "rgb(54, 162, 235)" : "rgb(255, 159, 64)",
         borderWidth: 1,
       },
     ],

src/components/History.tsx

@@ -0,0 +1,37 @@
+import { ResultData } from "@/redux-store/slices/resultslice";
+import React from "react";
+interface Props {
+  results: ResultData[] | undefined;
+}
+const History: React.FC<Props> = ({ results }) => {
+  if (!results) {
+    return <div>No Test Reesults</div>;
+  }
+  return (
+    <div className="w-full overflow-x-auto">
+      <table className="w-full table-auto border-collapse text-left dark:bg-gray-950 dark:text-gray-50">
+        <thead className="bg-gray-100 dark:bg-gray-800">
+          <tr>
+            <th className="px-4 py-3 font-medium">WPM</th>
+            <th className="px-4 py-3 font-medium">Accuracy</th>
+            <th className="px-4 py-3 font-medium">Date</th>
+          </tr>
+        </thead>
+        <tbody>
+          {results?.map((result) => (
+            <tr
+              key={result.id}
+              className="border-b border-gray-200 dark:border-gray-800"
+            >
+              <td className="px-4 py-3"> {result.score}</td>
+              <td className="px-4 py-3">{result.accuracy}</td>
+              <td className="px-4 py-3">{new Date(result.createdAt).getDate() +"/"+ new Date(result.createdAt).getMonth()+"/"+new Date(result.createdAt).getFullYear()}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default History;

src/components/Pricing.tsx

@@ -14,20 +14,20 @@ export default function Pricing() {
         <div>
           <h3 className="text-2xl font-bold text-center">Pro</h3>
           <div className="mt-4 text-center text-zinc-600 dark:text-zinc-400">
-            <span className="text-4xl font-bold">$59</span>/ month
+            <span className="text-4xl font-bold">&#8377; 1000</span>/ month
           </div>
           <ul className="mt-4 space-y-2">
             <li className="flex items-center dark:text-black">
               <CheckIcon className="text-white text-2xs bg-green-500 rounded-full mr-2 p-1 " />
-              100 daily Limit
+              Unlimited Test
             </li>
             <li className="flex items-center dark:text-black">
               <CheckIcon className="text-white text-xs bg-green-500 rounded-full mr-2 p-1" />
-              Unlimited Usage
+              Detailed Report of Wpm
             </li>
             <li className="flex items-center dark:text-black">
               <CheckIcon className="text-white text-xs bg-green-500 rounded-full mr-2 p-1" />
-              24/7 Support
+              Graphical Review of Accuracy and Wpm.
             </li>
           </ul>
         </div>

src/hooks/useSubscription.ts

@@ -0,0 +1,7 @@
+import { AuthState } from "@/redux-store/store";
+import { useSelector } from "react-redux"
+
+export const useSubscription = () => {
+     const { isLoadingSubscription, isProUser, subscriptionData } = useSelector((state: AuthState) => state.subscription);
+     return { isLoadingSubscription, isProUser, subscriptionData };
+}

src/pages/Dashboard/DashBoard.tsx

@@ -16,9 +16,12 @@ import { logoutUser } from "@/redux-store/slices/authSlice";
 import { calculateAverage } from "@/lib/helpers/calculateUserAverage";
 import ChartView from "@/components/ChartView";
 import { ModeToggle } from "@/components/ui/toggle-theme";
+import { useSubscription } from "@/hooks/useSubscription";
+import History from "@/components/History";
 
 export default function Component() {
   const dispatch = useAppDispatch();
+  const { isProUser } = useSubscription();
   const { user } = useAuthStatus();
   const { results } = useResultStatus();
   const [averagedata, setAverageData] = useState({
@@ -29,18 +32,20 @@ export default function Component() {
     if (user?.id) {
       dispatch(getResultsInfo(String(user?.id)));
     }
+  }, [dispatch, user?.id]);
+  useEffect(() => {
     if (results) {
       const res = calculateAverage(results);
       setAverageData(res);
     }
-  }, [results, user?.id, dispatch]);
+  }, [results]);
   return (
     <div className="flex h-screen w-full flex-col p-0">
       <div className="flex h-full flex-row">
         <div className="flex flex-col flex-1">
           <header className="h-16 px-4 border-b shrink-0 md:px-6 flex items-center">
             <div className="flex items-center justify-end w-full gap-4 md:ml-auto md:gap-2 lg:gap-4">
-              {!user?.isProUser && (
+              {!isProUser && (
                 <Link
                   className="text-gray-600 hover:text-gray-900 dark:text-gray-200"
                   to="/pricing"
@@ -86,12 +91,12 @@ export default function Component() {
               <Card>
                 <CardHeader className="flex flex-row items-center justify-between pb-2 space-y-0">
                   <CardTitle className="text-sm font-medium">
-                    Average score
+                    Average wpm
                   </CardTitle>
                 </CardHeader>
                 <CardContent>
                   <div className="text-2xl font-bold text-green-500">
-                    {averagedata.averageScore}
+                    {averagedata.averageScore.toFixed(1)}
                   </div>
                 </CardContent>
               </Card>
@@ -108,39 +113,53 @@ export default function Component() {
                 </CardContent>
               </Card>
             </div>
-            <div className="grid gap-4 md:grid-cols-2">
-              <Card>
-                <CardHeader className="pb-4">
-                  <CardTitle className="text-lg font-medium">
-                    Score Overview
-                  </CardTitle>
-                  <CardDescription>
-                    Your score's Variations in the typing test
-                  </CardDescription>
-                </CardHeader>
-                <CardContent className="">
-                  {/* Chart Component Here */}
-                  <ChartView type="Score" />
-                </CardContent>
-              </Card>
-              <Card>
-                <CardHeader className="pb-4">
-                  <CardTitle className="text-lg font-medium">
-                    Accuracy Overview
-                  </CardTitle>
-                  <CardDescription>
-                    Your accuracy Variations in the typing test
-                  </CardDescription>
-                </CardHeader>
-                <CardContent className="">
-                  {/* Chart Component Here */}
-                  <ChartView type="Accuracy" />
-                </CardContent>
-              </Card>
+            <div>
+              <h1 className="text-xl font-bold text-black dark:text-white mb-4">
+                Test History
+              </h1>
+              <History results={results} />
             </div>
+            {isProUser && (
+              <div className="grid gap-4 md:grid-cols-2">
+                <Card>
+                  <CardHeader className="pb-4">
+                    <CardTitle className="text-lg font-medium">
+                      Wpm Overview
+                    </CardTitle>
+                    <CardDescription>
+                      Your wpm Variations in the typing test
+                    </CardDescription>
+                  </CardHeader>
+                  <CardContent className="">
+                    {/* Chart Component Here */}
+                    <ChartView type="Wpm" />
+                  </CardContent>
+                </Card>
+                <Card>
+                  <CardHeader className="pb-4">
+                    <CardTitle className="text-lg font-medium">
+                      Accuracy Overview
+                    </CardTitle>
+                    <CardDescription>
+                      Your accuracy Variations in the typing test
+                    </CardDescription>
+                  </CardHeader>
+                  <CardContent className="">
+                    {/* Chart Component Here */}
+                    <ChartView type="Accuracy" />
+                  </CardContent>
+                </Card>
+              </div>
+            )}
           </main>
         </div>
       </div>
+      <Button
+        className="fixed bottom-7 left-10 object-cover w-fit shadow-2xl bg-gradient-to-r from-purple-400 to-fuchsia-600"
+        variant={"destructive"}
+      >
+        {isProUser ? "Manage Subscriptions" : "Go Pro"}
+      </Button>
     </div>
   );
 }

src/redux-store/slices/authSlice.ts

@@ -6,12 +6,12 @@ import { AxiosError } from "axios";
 import { ErrorResponse } from "@/types/interfaces";
 export interface User {
      id: number;
-     createdAt: string;
+     createdAt: Date;
      email: string;
      name: string;
-     password: string;
      isEmailVerified: boolean;
-     isProUser: boolean;
+     limit: number;
+     updatedAt: Date;
 }
 interface AuthState {
      isLoading: boolean;
@@ -110,7 +110,7 @@ const authSlice = createSlice({
                toast.error(response.message);
           });
           builder.addCase(logoutUser.fulfilled, (state, action) => {
-               state.user=undefined;
+               state.user = undefined;
                const response = action.payload.data;
                toast.success(response.message);
           })

src/redux-store/slices/resultslice.ts

@@ -24,7 +24,7 @@ const initialState: ResultState = {
 };
 export const getResultsInfo = createAsyncThunk("results/me", async (id: string, { rejectWithValue }) => {
      try {
-          const data = await axiosClient.get(`result/${id}`);
+          const data = await axiosClient.get(`/result/${id}`);
           return data;
      } catch (error) {
           const err = error as AxiosError;
@@ -49,7 +49,6 @@ const resultSlice = createSlice({
                state.isLoadingResults = false;
                const response = action.payload as ErrorResponse;
                toast.error(response.message);
-               console.log(response)
           });
      },
 })

src/redux-store/slices/subscriptionslice.ts

@@ -0,0 +1,58 @@
+import { axiosClient } from "@/api/axiosclient";
+import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
+import { AxiosError } from "axios";
+const DAY_IN_MS = 86_400_400;
+export interface SubscriptionData {
+     id: number;
+     userID: number;
+     stripeSubscriptionId: string;
+     stripeCustomerId: string;
+     stripePriceId: string;
+     stripeCurrentPeriodEnd: Date;
+}
+
+interface SubscriptionState {
+     isLoadingSubscription: boolean;
+     isProUser: boolean
+     subscriptionData: SubscriptionData | undefined;
+}
+
+const initialState: SubscriptionState = {
+     isLoadingSubscription: false,
+     isProUser: true,
+     subscriptionData: undefined,
+};
+export const getSubscriptionInfo = createAsyncThunk("mySubscription", async (_, { rejectWithValue }) => {
+     try {
+          const data = await axiosClient.get(`/mysubscription`);
+          return data;
+     } catch (error) {
+          const err = error as AxiosError;
+          return rejectWithValue(err.response?.data)
+     }
+})
+const resultSlice = createSlice({
+     name: 'subscription',
+     initialState,
+     reducers: {},
+     extraReducers: (builder) => {
+          builder.addCase(getSubscriptionInfo.pending, (state) => {
+               state.isLoadingSubscription = true;
+          });
+          builder.addCase(getSubscriptionInfo.fulfilled, (state, action) => {
+               state.isLoadingSubscription = false;
+               const response = action.payload.data;
+               state.subscriptionData = response.data;
+               if (state.subscriptionData?.stripePriceId && state.subscriptionData?.stripeCurrentPeriodEnd.getTime() + DAY_IN_MS > Date.now()) {
+                    state.isProUser = true;
+               }
+          });
+          builder.addCase(getSubscriptionInfo.rejected, (state) => {
+               state.isLoadingSubscription = false;
+               state.isProUser = false;
+               state.subscriptionData = undefined
+          });
+     },
+})
+
+export default resultSlice.reducer;

src/redux-store/store.ts

@@ -1,22 +1,24 @@
 import { configureStore } from "@reduxjs/toolkit";
 import authSlice from "./slices/authSlice";
 import resultSlice from "./slices/resultslice";
-const store=configureStore({
-     reducer:{
-          auth:authSlice,
-          result: resultSlice,
-     },
-     middleware: (getDefaultMiddleware) =>
+import subscriptionslice from "./slices/subscriptionslice";
+const store = configureStore({
+  reducer: {
+    auth: authSlice,
+    result: resultSlice,
+    subscription: subscriptionslice
+  },
+  middleware: (getDefaultMiddleware) =>
     getDefaultMiddleware({
       serializableCheck: {
         // Ignore these action types
-        ignoredActions: ['auth/me/fulfilled', 'auth/me/pending', 'auth/me/rejected',"results/me/fulfilled","results/me/pending","results/me/rejected","auth/login/fulfilled","auth/register/fulfilled","auth/logout/fulfilled"],
+        ignoredActions: ['auth/me/fulfilled', 'auth/me/pending', 'auth/me/rejected', "results/me/fulfilled", "results/me/pending", "results/me/rejected", "auth/login/fulfilled", "auth/register/fulfilled", "auth/logout/fulfilled", "mySubscription/pending", "mySubscription/rejected", "mySubscription/fulfilled"],
         // Ignore these field paths in all actions
         ignoredActionPaths: ['meta.arg', 'payload.timestamp'],
         // Ignore these paths in the state
         ignoredPaths: ['items.dates'],
       },
-    }), 
+    }),
 });
 
 export default store;