Github Sync: initial commit

2026-11-13 05:33:43 +01:00 · 2026-09-22 02:41:42 +02:00
parent ac73b428ff
commit de2744f834
36 changed files with 3969 additions and 10 deletions
@@ -0,0 +1,174 @@
+import { useCallback, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import getMeta from '@/utils/meta'
+import { getJSON, postJSON } from '@/infrastructure/fetch-json'
+import useAsync from '@/shared/hooks/use-async'
+import { debugConsole } from '@/utils/debugging'
+import OLButton from '@/shared/components/ol/ol-button'
+import {
+  OLModal,
+  OLModalBody,
+  OLModalFooter,
+  OLModalHeader,
+  OLModalTitle,
+} from '@/shared/components/ol/ol-modal'
+import OLNotification from '@/shared/components/ol/ol-notification'
+import GithubLogo from '@/shared/svgs/github-logo'
+
+export const GitHubSyncWidget = function GitHubSyncWidget() {
+  const { t } = useTranslation()
+  const { appName } = getMeta('ol-ExposedSettings')
+
+  const {
+    isLoading: isCheckingConn,
+    isError: isErrorConnCheck,
+    runAsync: runAsyncConnCheck,
+    data: isConnected,
+    setData: setConnState,
+  } = useAsync<boolean>()
+
+  const {
+    isLoading: isUnlinking,
+    isError: isErrorUnlink,
+    runAsync: runAsyncUnlink,
+  } = useAsync<void>()
+
+  const [showUnlinkModal, setShowUnlinkModal] = useState(false)
+
+  const handleConnCheck = useCallback(() => {
+    runAsyncConnCheck(getJSON('/user/github-sync/status')).catch(err =>
+      debugConsole.error(err?.data?.message || err?.message || err),
+    )
+  }, [runAsyncConnCheck])
+
+  useEffect(() => {
+    handleConnCheck()
+  }, [handleConnCheck])
+
+  const handleUnlink = useCallback(() => {
+    runAsyncUnlink(postJSON('/user/github-sync/unlink'))
+      .then(() => setConnState(false))
+      .catch(err => debugConsole.error(err?.data?.message || err?.message || err))
+      .finally(() => setShowUnlinkModal(false))
+  }, [runAsyncUnlink])
+
+  if (isCheckingConn) {
+    return (
+      <div className="settings-widget-container">
+        <div>
+          <GithubLogo />
+        </div>
+
+        <div className="description-container">
+          <div className="title-row">
+            <h4>GitHub</h4>
+          </div>
+
+          <p className="small">
+            <span>{t('loading')}…</span>
+          </p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <>
+      <div className="settings-widget-container">
+        <div>
+          <GithubLogo size={40} />
+        </div>
+
+        <div className="description-container">
+          <div className="title-row">
+            <h4 id="github-sync">GitHub</h4>
+          </div>
+
+          <p className="small">
+            {t('github_sync_description', { appName })}
+          </p>
+
+          {isErrorConnCheck && (
+            <OLNotification
+              type="error"
+              content={t('github_sync_error')}
+            />
+          )}
+
+          {isErrorUnlink && (
+            <OLNotification
+              type="error"
+              content={t('generic_something_went_wrong')}
+            />
+          )}
+        </div>
+
+        <div>
+          {isConnected ? (
+            <OLButton
+              variant="danger-ghost"
+              onClick={() => setShowUnlinkModal(true)}
+              disabled={isUnlinking}
+            >
+              {isUnlinking ? t('unlinking') : t('unlink')}
+            </OLButton>
+          ) : isErrorConnCheck ? (
+            <OLButton
+              variant="secondary"
+              onClick={handleConnCheck}
+            >
+              {t('reconnect')}
+            </OLButton>
+          ) : (
+            <OLButton
+              variant="secondary"
+              href="/user/github-sync/oauth2"
+            >
+              {t('link')}
+            </OLButton>
+          )}
+        </div>
+      </div>
+
+      <OLModal
+        id="git-sync-modal"
+        show={showUnlinkModal}
+        onHide={() => setShowUnlinkModal(false)}
+        backdrop="static"
+      >
+        <OLModalHeader>
+          <OLModalTitle>
+            {t('unlink_provider_account_title', {
+              provider: 'GitHub',
+            })}
+          </OLModalTitle>
+        </OLModalHeader>
+
+        <OLModalBody>
+          <p>
+            {t('unlink_github_warning', {
+              provider: 'GitHub',
+            })}
+          </p>
+        </OLModalBody>
+
+        <OLModalFooter>
+          <OLButton
+            variant="secondary"
+            onClick={() => setShowUnlinkModal(false)}
+          >
+            {t('cancel')}
+          </OLButton>
+
+          <OLButton
+            variant="danger-ghost"
+            onClick={handleUnlink}
+            disabled={isUnlinking}
+          >
+            {isUnlinking ? t('unlinking') : t('unlink')}
+          </OLButton>
+        </OLModalFooter>
+      </OLModal>
+    </>
+  )
+}