refactor: repo (#1070)

packages/web/src/javascripts/Components/FileView/FileView.tsx

@@ -0,0 +1,36 @@
+import { observer } from 'mobx-react-lite'
+import { useCallback, useEffect, useState } from 'react'
+import ProtectedItemOverlay from '@/Components/ProtectedItemOverlay/ProtectedItemOverlay'
+import FileViewWithoutProtection from './FileViewWithoutProtection'
+import { FileViewProps } from './FileViewProps'
+
+const FileView = ({ application, viewControllerManager, file }: FileViewProps) => {
+  const [shouldShowProtectedOverlay, setShouldShowProtectedOverlay] = useState(
+    file.protected && !application.hasProtectionSources(),
+  )
+
+  useEffect(() => {
+    setShouldShowProtectedOverlay(viewControllerManager.filesController.showProtectedOverlay)
+  }, [viewControllerManager.filesController.showProtectedOverlay])
+
+  const dismissProtectedWarning = useCallback(() => {
+    void viewControllerManager.filesController.toggleFileProtection(file)
+  }, [file, viewControllerManager.filesController])
+
+  return shouldShowProtectedOverlay ? (
+    <div aria-label="Note" className="section editor sn-component">
+      <div className="h-full flex justify-center items-center">
+        <ProtectedItemOverlay
+          viewControllerManager={viewControllerManager}
+          hasProtectionSources={application.hasProtectionSources()}
+          onViewItem={dismissProtectedWarning}
+          itemType={'note'}
+        />
+      </div>
+    </div>
+  ) : (
+    <FileViewWithoutProtection application={application} viewControllerManager={viewControllerManager} file={file} />
+  )
+}
+
+export default observer(FileView)

packages/web/src/javascripts/Components/FileView/FileViewProps.tsx

@@ -0,0 +1,9 @@
+import { WebApplication } from '@/Application/Application'
+import { ViewControllerManager } from '@/Services/ViewControllerManager'
+import { FileItem } from '@standardnotes/snjs/dist/@types'
+
+export type FileViewProps = {
+  application: WebApplication
+  viewControllerManager: ViewControllerManager
+  file: FileItem
+}

packages/web/src/javascripts/Components/FileView/FileViewWithoutProtection.tsx

@@ -0,0 +1,76 @@
+import { ElementIds } from '@/Constants/ElementIDs'
+import { observer } from 'mobx-react-lite'
+import { ChangeEventHandler, FormEventHandler, useCallback, useEffect, useState } from 'react'
+import AttachedFilesButton from '@/Components/AttachedFilesPopover/AttachedFilesButton'
+import FileOptionsPanel from '@/Components/FileContextMenu/FileOptionsPanel'
+import FilePreview from '@/Components/FilePreview/FilePreview'
+import { FileViewProps } from './FileViewProps'
+
+const FileViewWithoutProtection = ({ application, viewControllerManager, file }: FileViewProps) => {
+  const [name, setName] = useState(file.name)
+
+  useEffect(() => {
+    setName(file.name)
+  }, [file.name])
+
+  const onTitleChange: ChangeEventHandler<HTMLInputElement> = useCallback(async (event) => {
+    setName(event.target.value)
+  }, [])
+
+  const onFormSubmit: FormEventHandler = useCallback(
+    async (event) => {
+      event.preventDefault()
+
+      await application.items.renameFile(file, name)
+
+      void application.sync.sync()
+    },
+    [application.items, application.sync, file, name],
+  )
+
+  return (
+    <div className="sn-component section editor" aria-label="File">
+      <div className="flex flex-col">
+        <div className="content-title-bar section-title-bar w-full" id="file-title-bar">
+          <div className="flex items-center justify-between h-8">
+            <div className="flex-grow">
+              <form onSubmit={onFormSubmit} className="title overflow-auto">
+                <input
+                  className="input"
+                  id={ElementIds.FileTitleEditor}
+                  onChange={onTitleChange}
+                  onFocus={(event) => {
+                    event.target.select()
+                  }}
+                  spellCheck={false}
+                  value={name}
+                  autoComplete="off"
+                />
+              </form>
+            </div>
+            <div className="flex items-center">
+              <div className="mr-3">
+                <AttachedFilesButton
+                  application={application}
+                  featuresController={viewControllerManager.featuresController}
+                  filePreviewModalController={viewControllerManager.filePreviewModalController}
+                  filesController={viewControllerManager.filesController}
+                  navigationController={viewControllerManager.navigationController}
+                  notesController={viewControllerManager.notesController}
+                  selectionController={viewControllerManager.selectionController}
+                />
+              </div>
+              <FileOptionsPanel
+                filesController={viewControllerManager.filesController}
+                selectionController={viewControllerManager.selectionController}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <FilePreview file={file} application={application} key={file.uuid} />
+    </div>
+  )
+}
+
+export default observer(FileViewWithoutProtection)