- Subscription Tracking App
+ Subscription overload? Subslify your life today!
- Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos ut
- doloremque sapiente nam perferendis neque, distinctio dolores omnis
- veniam blanditiis vel ducimus repellat aliquid unde error quasi
- praesentium non tempore!
+ With Subslify, you can easily track, organize, and understand your monthly subscriptions. No more surprise charges or hidden fees - Subslify has you covered. Try it now and take control of your subscription-based expenses!
Login/Register
diff --git a/client/src/pages/dashboard/Active.jsx b/client/src/pages/dashboard/Active.jsx
index 04eebba..b79c6a2 100644
--- a/client/src/pages/dashboard/Active.jsx
+++ b/client/src/pages/dashboard/Active.jsx
@@ -1,5 +1,77 @@
+import { useState } from 'react';
+import FormCard from '../../components/FormCard';
+import { Button } from '@mui/material';
+import SubCard from '../../components/SubCard';
+import Title from '../../components/Title';
+import '../../assets/styles/active.scss';
+import '../../assets/styles/sub-card2.scss';
+import { useEffect } from 'react';
+
const Active = () => {
- return
Active Subscription
;
+ //had to install a JSON Server package to https://www.npmjs.com/package/json-server
+ //IMPORTANT: MAKE SURE TO INSTALL LIKE THIS: npm install -g json-server
+ //Then to start the server json-server --watch db.json
+
+ //ALSO IMPORTANT, need to create a file with the "db.json" naming convention
+ const API_URL = 'http://localhost:3000/subs';
+
+ //pseduo state mangement
+ //start the subList with the Form Card to take in new subscription tracking and make the "last card" the form
+ const [subList, setSubList] = useState([]);
+
+ //fetchData function
+ const fetchData = () => {
+ fetch(API_URL)
+ .then((data) => data.json())
+ .then((data) => {
+ //updating state to have the SubCard the first in the array and making unshifting the previous to after
+
+ const subListBox = data.map((sub) => {
+ //reassign dates to the parsed version using moment to ensure proper formatting with in sub card
+
+ console.log('sub payment date', sub.name, sub.paymentDate);
+
+ console.log('sub activation date', sub.name, sub.activationDate);
+
+ return (
+