feat: platform context

src/components/FileExplorer.tsx

@@ -3,10 +3,10 @@ import { LoadingIndicator } from 'components/LoadingIndicator'
 import { Node } from 'components/Node'
 import { SearchBar } from 'components/SearchBar'
 import { useConfigs } from 'containers/ConfigsContext'
+import { usePlatform } from 'containers/PlatformContext'
 import { connect } from 'driver/connect'
 import { FileExplorerCore } from 'driver/core'
 import { ConnectorState, Props } from 'driver/core/FileExplorer'
-import { platform } from 'platforms'
 import * as React from 'react'
 import { useEvent, usePrevious } from 'react-use'
 import { FixedSizeList as List, ListChildComponentProps, ListProps } from 'react-window'
@@ -193,6 +193,7 @@ function ListView({
     }
   }, [listRef.current, focusedNode])
 
+  const platform = usePlatform()
   const lastNodeLength = usePrevious(nodes.length)
   React.useEffect(() => {
     if (listRef.current && !focusedNode && lastNodeLength !== nodes.length) {

src/components/Gitako.tsx

@@ -1,16 +1,19 @@
 import { SideBar } from 'components/SideBar'
 import { ConfigsContext, ConfigsContextWrapper } from 'containers/ConfigsContext'
+import { PlatformContextWrapper } from 'containers/PlatformContext'
 import * as React from 'react'
 import { ErrorBoundary } from './ErrorBoundary'
 
 export function Gitako() {
   return (
     <ErrorBoundary>
-      <ConfigsContextWrapper>
-        <ConfigsContext.Consumer>
-          {configContext => configContext && <SideBar configContext={configContext} />}
-        </ConfigsContext.Consumer>
-      </ConfigsContextWrapper>
+      <PlatformContextWrapper>
+        <ConfigsContextWrapper>
+          <ConfigsContext.Consumer>
+            {configContext => configContext && <SideBar configContext={configContext} />}
+          </ConfigsContext.Consumer>
+        </ConfigsContextWrapper>
+      </PlatformContextWrapper>
     </ErrorBoundary>
   )
 }

src/components/Resizable.tsx

@@ -1,6 +1,6 @@
 import { HorizontalResizeHandler } from 'components/ResizeHandler'
 import { useConfigs } from 'containers/ConfigsContext'
-import { platform } from 'platforms'
+import { usePlatform } from 'containers/PlatformContext'
 import * as React from 'react'
 import { useWindowSize } from 'react-use'
 import { cx } from 'utils/cx'
@@ -33,6 +33,7 @@ export function Resizable({ baseSize, className, children }: React.PropsWithChil
     configContext.set({ sideBarWidth: size })
   }, [size])
 
+  const platform = usePlatform()
   platform.useResizeStylesheets(size)
 
   const onResize = React.useCallback((size: number) => {

src/components/SideBar.tsx

@@ -3,9 +3,10 @@ import { FileExplorer } from 'components/FileExplorer'
 import { MetaBar } from 'components/MetaBar'
 import { Portal } from 'components/Portal'
 import { Resizable } from 'components/Resizable'
-import { SettingsBar } from 'components/SettingsBar'
+import { SettingsBar } from 'components/settings/SettingsBar'
 import { ToggleShowButton } from 'components/ToggleShowButton'
 import { useConfigs } from 'containers/ConfigsContext'
+import { usePlatform } from 'containers/PlatformContext'
 import { connect } from 'driver/connect'
 import { SideBarCore } from 'driver/core'
 import { ConnectorState, Props } from 'driver/core/SideBar'
@@ -22,6 +23,7 @@ import * as keyHelper from 'utils/keyHelper'
 const RawGitako: React.FC<Props & ConnectorState> = function RawGitako(props) {
   const configContext = useConfigs()
   const accessToken = props.configContext.val.access_token
+  const platform = usePlatform()
 
   const intelligentToggle = configContext.val.intelligentToggle
   React.useEffect(() => {

src/containers/PlatformContext.tsx

@@ -0,0 +1,17 @@
+import { resolvePlatformP } from 'platforms'
+import { dummyPlatformForTypeSafety } from 'platforms/dummyPlatformForTypeSafety'
+import * as React from 'react'
+
+const PlatformContext = React.createContext<Platform>(dummyPlatformForTypeSafety)
+
+export function PlatformContextWrapper({ children }: React.PropsWithChildren<{}>) {
+  const [platform, setPlatform] = React.useState(dummyPlatformForTypeSafety)
+  React.useEffect(() => {
+    resolvePlatformP.then(setPlatform)
+  }, [])
+  return <PlatformContext.Provider value={platform}>{children}</PlatformContext.Provider>
+}
+
+export function usePlatform() {
+  return React.useContext(PlatformContext)
+}

src/platforms/GitHub/index.ts

@@ -1,4 +1,4 @@
-import { platform } from 'platforms'
+import { usePlatform } from 'containers/PlatformContext'
 import { GITHUB_OAUTH } from 'env'
 import * as React from 'react'
 import { useEvent } from 'react-use'
@@ -164,6 +164,7 @@ export const GitHub: Platform = {
 }
 
 export function useGitHubAttachCopySnippetButton(copySnippetButton: boolean) {
+  const platform = usePlatform()
   const attachCopySnippetButton = React.useCallback(
     function attachCopySnippetButton() {
       if (platform !== GitHub) return
@@ -176,6 +177,7 @@ export function useGitHubAttachCopySnippetButton(copySnippetButton: boolean) {
 }
 
 export function useGitHubAttachCopyFileButton(copyFileButton: boolean) {
+  const platform = usePlatform()
   const attachCopyFileButton = React.useCallback(
     function attachCopyFileButton() {
       if (platform !== GitHub) return

src/platforms/Gitee/index.ts

@@ -1,4 +1,4 @@
-import { platform } from 'platforms'
+import { usePlatform } from 'containers/PlatformContext'
 import { GITEE_OAUTH } from 'env'
 import * as React from 'react'
 import { useEvent } from 'react-use'
@@ -164,6 +164,7 @@ export const Gitee: Platform = {
 }
 
 export function useGiteeAttachCopySnippetButton(copySnippetButton: boolean) {
+  const platform = usePlatform()
   const attachCopySnippetButton = React.useCallback(
     function attachCopySnippetButton() {
       if (platform !== Gitee) return