From e7fb9b67f87f94e08e279db11f920d5ae51a2030 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Wed, 27 Apr 2022 20:29:12 +0530
Subject: [PATCH] fix: duplicate files quota calls in preferences (#1006)

---
 .../Components/Preferences/Panes/Account/Files.tsx  | 13 +++----------
 .../Components/Preferences/Panes/Account/index.tsx  |  4 +++-
 2 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/app/assets/javascripts/Components/Preferences/Panes/Account/Files.tsx b/app/assets/javascripts/Components/Preferences/Panes/Account/Files.tsx
index 7861fda8c91..a38d97c2641 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Account/Files.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Account/Files.tsx
@@ -1,22 +1,15 @@
 import { WebApplication } from '@/UIModels/Application'
-import { AppState } from '@/UIModels/AppState'
 import { formatSizeToReadableString } from '@standardnotes/filepicker'
 import { SubscriptionSettingName } from '@standardnotes/snjs'
-import { observer } from 'mobx-react-lite'
 import { FunctionComponent } from 'preact'
 import { useEffect, useState } from 'preact/hooks'
 import { PreferencesGroup, PreferencesSegment, Subtitle, Title } from '../../PreferencesComponents'
 
 type Props = {
   application: WebApplication
-  appState: AppState
 }
 
-export const FilesSection: FunctionComponent<Props> = observer(({ application, appState }) => {
-  if (!application.getUser() || !appState.features.isEntitledToFiles) {
-    return null
-  }
-
+export const FilesSection: FunctionComponent<Props> = ({ application }) => {
   const [isLoading, setIsLoading] = useState(true)
   const [filesQuotaUsed, setFilesQuotaUsed] = useState<number>(0)
   const [filesQuotaTotal, setFilesQuotaTotal] = useState<number>(0)
@@ -41,7 +34,7 @@ export const FilesSection: FunctionComponent<Props> = observer(({ application, a
     }
 
     getFilesQuota().catch(console.error)
-  })
+  }, [application.settings])
 
   return (
     <PreferencesGroup>
@@ -69,4 +62,4 @@ export const FilesSection: FunctionComponent<Props> = observer(({ application, a
       </PreferencesSegment>
     </PreferencesGroup>
   )
-})
+}
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Account/index.tsx b/app/assets/javascripts/Components/Preferences/Panes/Account/index.tsx
index 4af12d87bd1..74b7ccd6d1a 100644
--- a/app/assets/javascripts/Components/Preferences/Panes/Account/index.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Account/index.tsx
@@ -25,7 +25,9 @@ export const AccountPreferences = observer(({ application, appState }: Props) =>
       </>
     )}
     <Subscription application={application} appState={appState} />
-    <FilesSection application={application} appState={appState} />
+    {application.hasAccount() && appState.features.isEntitledToFiles && (
+      <FilesSection application={application} />
+    )}
     <SignOutWrapper application={application} appState={appState} />
   </PreferencesPane>
 ))