fix(ui): do not display negative remaining quota (#1859)

* fix(ui): do not display negative remaining quota

* fix: correct remaining quota count on API side

server/entity/User.ts

@@ -307,7 +307,7 @@ export class User {
         limit: movieQuotaLimit,
         used: movieQuotaUsed,
         remaining: movieQuotaLimit
-          ? movieQuotaLimit - movieQuotaUsed
+          ? Math.max(0, movieQuotaLimit - movieQuotaUsed)
           : undefined,
         restricted:
           movieQuotaLimit && movieQuotaLimit - movieQuotaUsed <= 0
@@ -318,7 +318,9 @@ export class User {
         days: tvQuotaDays,
         limit: tvQuotaLimit,
         used: tvQuotaUsed,
-        remaining: tvQuotaLimit ? tvQuotaLimit - tvQuotaUsed : undefined,
+        remaining: tvQuotaLimit
+          ? Math.max(0, tvQuotaLimit - tvQuotaUsed)
+          : undefined,
         restricted:
           tvQuotaLimit && tvQuotaLimit - tvQuotaUsed <= 0 ? true : false,
       },

src/components/RequestModal/QuotaDisplay/index.tsx

@@ -59,18 +59,14 @@ const QuotaDisplay: React.FC<QuotaDisplayProps> = ({
       <div className="flex items-center">
         <ProgressCircle
           className="w-8 h-8"
-          progress={Math.max(
+          progress={Math.round(
-            0,
+            ((remaining ?? quota?.remaining ?? 0) / (quota?.limit ?? 1)) * 100
-            Math.round(
-              ((remaining ?? quota?.remaining ?? 0) / (quota?.limit ?? 1)) * 100
-            )
           )}
           useHeatLevel
         />
         <div
           className={`flex items-end ${
-            Math.max(0, remaining ?? quota?.remaining ?? 0) === 0 ||
+            (remaining ?? quota?.remaining ?? 0) <= 0 || quota?.restricted
-            quota?.restricted
               ? 'text-red-500'
               : ''
           }`}
@@ -79,7 +75,7 @@ const QuotaDisplay: React.FC<QuotaDisplayProps> = ({
             {overLimit !== undefined
               ? intl.formatMessage(messages.notenoughseasonrequests)
               : intl.formatMessage(messages.requestsremaining, {
-                  remaining: Math.max(0, remaining ?? quota?.remaining ?? 0),
+                  remaining: remaining ?? quota?.remaining ?? 0,
                   type: intl.formatMessage(
                     mediaType === 'movie' ? messages.movie : messages.season
                   ),

src/components/UserProfile/index.tsx

@@ -134,13 +134,10 @@ const UserProfile: React.FC = () => {
                   {quota.movie.limit ? (
                     <>
                       <ProgressCircle
-                        progress={Math.max(
+                        progress={Math.round(
-                          0,
+                          ((quota?.movie.remaining ?? 0) /
-                          Math.round(
+                            (quota?.movie.limit ?? 1)) *
-                            ((quota?.movie.remaining ?? 0) /
+                            100
-                              (quota?.movie.limit ?? 1)) *
-                              100
-                          )
                         )}
                         useHeatLevel
                         className="w-8 h-8 mr-2"
@@ -193,13 +190,10 @@ const UserProfile: React.FC = () => {
                   {quota.tv.limit ? (
                     <>
                       <ProgressCircle
-                        progress={Math.max(
+                        progress={Math.round(
-                          0,
+                          ((quota?.tv.remaining ?? 0) /
-                          Math.round(
+                            (quota?.tv.limit ?? 1)) *
-                            ((quota?.tv.remaining ?? 0) /
+                            100
-                              (quota?.tv.limit ?? 1)) *
-                              100
-                          )
                         )}
                         useHeatLevel
                         className="w-8 h-8 mr-2"