FEAT: Added variable to keep track of user subscription within VideoPage

FIX: Added .env back into frontend

docker-compose.yml

@@ -38,6 +38,8 @@ services:
       - app_network
     environment:
       - VITE_API_URL=/api
+    env_file:
+      - .env
     depends_on:
       - web_server
 

frontend/src/pages/VideoPage.tsx

@@ -35,6 +35,7 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
   const [showCheckout, setShowCheckout] = useState(false);
   const showReturn = window.location.search.includes("session_id");
   const navigate = useNavigate();
+  const [isSubscribed, setIsSubscribed] = useState(false);
 
   useEffect(() => {
     // Prevent scrolling when checkout is open
@@ -95,6 +96,19 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
     setIsChatOpen((prev) => !prev);
   };
 
+  // Checks if user is subscribed
+  useEffect(() => {
+    fetch(`/api/user/subscription/${streamerName}/expiration`)
+      .then(response => response.json())
+      .then(data => {
+        console.log(data.remaining_time);
+        if (data.remaining_time > 0) {
+          setIsSubscribed(true);
+        }
+      })
+      .catch(error => console.error("Error fetching subscription:", error));
+  }, [streamerName]);
+
   return (
     <SocketProvider>
       <div id="videoPage" className="w-full">
@@ -102,9 +116,8 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
 
         <div
           id="container"
-          className={`grid ${
-            isChatOpen ? "w-[100vw]" : "w-[125vw]"
-          } grid-rows-[auto_1fr] bg-gray-900 h-full grid-cols-[auto_25vw] transition-all`}
+          className={`grid ${isChatOpen ? "w-[100vw]" : "w-[125vw]"
+            } grid-rows-[auto_1fr] bg-gray-900 h-full grid-cols-[auto_25vw] transition-all`}
         >
           <div className="relative">
             <VideoPlayer />
@@ -197,9 +210,9 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
               <span className="text-[0.75em]">
                 {streamData
                   ? `${Math.floor(
-                      (Date.now() - new Date(streamData.startTime).getTime()) /
-                        3600000
-                    )} hours ago`
+                    (Date.now() - new Date(streamData.startTime).getTime()) /
+                    3600000
+                  )} hours ago`
                   : "Loading..."}
               </span>
             </div>

web_server/blueprints/user.py

@@ -23,24 +23,26 @@ def user_data(username: str):
 
 ## Subscription Routes
 @login_required
-@user_bp.route('/user/subscription/<int:subscribed_id>')
-def user_subscribed(subscribed_id: int):
+@user_bp.route('/user/subscription/<string:streamer_name>')
+def user_subscribed(streamer_name: str):
     """
     Checks to see if user is subscribed to another user
     """
     user_id = session.get("user_id")
+    subscribed_id = get_user_id(streamer_name)
     if is_subscribed(user_id, subscribed_id):
         return jsonify({"subscribed": True})
     return jsonify({"subscribed": False})
 
 @login_required
-@user_bp.route('/user/subscription/<int:subscribed_id>/expiration')
-def user_subscription_expiration(subscribed_id: int):
+@user_bp.route('/user/subscription/<string:streamer_name>/expiration')
+def user_subscription_expiration(streamer_name: str):
     """
     Returns remaining time until subscription expiration
     """
 
     user_id = session.get("user_id")
+    subscribed_id = get_user_id(streamer_name)
     remaining_time = subscription_expiration(user_id, subscribed_id)
     # Remove any expired subscriptions from the table
     if remaining_time == 0: