refactor: format and lint codebase (#971)

2022-04-13 22:02:34 +05:30
parent dc9c1ea0fc
commit 8e467f9e6d
367 changed files with 13778 additions and 16093 deletions
--- a/app/assets/javascripts/Components/Preferences/Panes/General/Labs.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/General/Labs.tsx
@@ -0,0 +1,99 @@
+import { Switch } from '@/Components/Switch'
+import {
+  PreferencesGroup,
+  PreferencesSegment,
+  Subtitle,
+  Text,
+  Title,
+} from '@/Components/Preferences/PreferencesComponents'
+import { WebApplication } from '@/UIModels/Application'
+import { FeatureIdentifier, FeatureStatus, FindNativeFeature } from '@standardnotes/snjs'
+import { FunctionComponent } from 'preact'
+import { useCallback, useEffect, useState } from 'preact/hooks'
+import { usePremiumModal } from '@/Hooks/usePremiumModal'
+import { HorizontalSeparator } from '@/Components/Shared/HorizontalSeparator'
+
+type ExperimentalFeatureItem = {
+  identifier: FeatureIdentifier
+  name: string
+  description: string
+  isEnabled: boolean
+  isEntitled: boolean
+}
+
+type Props = {
+  application: WebApplication
+}
+
+export const LabsPane: FunctionComponent<Props> = ({ application }) => {
+  const [experimentalFeatures, setExperimentalFeatures] = useState<ExperimentalFeatureItem[]>([])
+
+  const reloadExperimentalFeatures = useCallback(() => {
+    const experimentalFeatures = application.features
+      .getExperimentalFeatures()
+      .map((featureIdentifier) => {
+        const feature = FindNativeFeature(featureIdentifier)
+        return {
+          identifier: featureIdentifier,
+          name: feature?.name ?? featureIdentifier,
+          description: feature?.description ?? '',
+          isEnabled: application.features.isExperimentalFeatureEnabled(featureIdentifier),
+          isEntitled:
+            application.features.getFeatureStatus(featureIdentifier) === FeatureStatus.Entitled,
+        }
+      })
+    setExperimentalFeatures(experimentalFeatures)
+  }, [application.features])
+
+  useEffect(() => {
+    reloadExperimentalFeatures()
+  }, [reloadExperimentalFeatures])
+
+  const premiumModal = usePremiumModal()
+
+  return (
+    <PreferencesGroup>
+      <PreferencesSegment>
+        <Title>Labs</Title>
+        <div>
+          {experimentalFeatures.map(
+            ({ identifier, name, description, isEnabled, isEntitled }, index: number) => {
+              const toggleFeature = () => {
+                if (!isEntitled) {
+                  premiumModal.activate(name)
+                  return
+                }
+
+                application.features.toggleExperimentalFeature(identifier)
+                reloadExperimentalFeatures()
+              }
+
+              const showHorizontalSeparator =
+                experimentalFeatures.length > 1 && index !== experimentalFeatures.length - 1
+
+              return (
+                <>
+                  <div className="flex items-center justify-between">
+                    <div className="flex flex-col">
+                      <Subtitle>{name}</Subtitle>
+                      <Text>{description}</Text>
+                    </div>
+                    <Switch onChange={toggleFeature} checked={isEnabled} />
+                  </div>
+                  {showHorizontalSeparator && <HorizontalSeparator classes="mt-5 mb-3" />}
+                </>
+              )
+            },
+          )}
+          {experimentalFeatures.length === 0 && (
+            <div className="flex items-center justify-between">
+              <div className="flex flex-col">
+                <Text>No experimental features available.</Text>
+              </div>
+            </div>
+          )}
+        </div>
+      </PreferencesSegment>
+    </PreferencesGroup>
+  )
+}