GitHub syncer tweaks (exercism#7903)

* Sort tracks

* Tweak delete flow

* Delete unused line

Author: dem4ron

app/controllers/settings/github_syncer_controller.rb

@@ -74,6 +74,5 @@ def callback
 
   def destroy
     current_user.github_solution_syncer&.destroy
-    redirect_to settings_github_syncer_path, notice: "GitHub disconnected"
   end
 end

app/helpers/react_components/settings/github_syncer_form.rb

@@ -38,7 +38,7 @@ def syncer = current_user.github_solution_syncer
 
       memoize
       def tracks
-        current_user.tracks.select(:slug, :title).map do |track|
+        current_user.tracks.select(:slug, :title).order(:slug).map do |track|
           {
             slug: track.slug,
             title: track.title,

app/javascript/components/settings/github-syncer/GitHubSyncerForm.tsx

@@ -35,6 +35,8 @@ type GitHubSyncerContextType = Omit<
 > & {
   isSyncingEnabled: boolean
   setIsSyncingEnabled: React.Dispatch<SetStateAction<boolean>>
+  isUserConnected: boolean
+  setIsUserConnected: React.Dispatch<SetStateAction<boolean>>
 }
 
 export const GitHubSyncerContext = React.createContext<GitHubSyncerContextType>(
@@ -47,6 +49,7 @@ export default function GitHubSyncerForm(
   const [isSyncingEnabled, setIsSyncingEnabled] = useState(
     data.syncer?.enabled || false
   )
+  const [isUserConnected, setIsUserConnected] = useState(data.isUserConnected)
   return (
     <GitHubSyncerContext.Provider
       value={{
@@ -58,9 +61,11 @@ export default function GitHubSyncerForm(
         defaultPathTemplate: data.defaultPathTemplate,
         isSyncingEnabled,
         setIsSyncingEnabled,
+        isUserConnected,
+        setIsUserConnected,
       }}
     >
-      {data.isUserConnected ? <ConnectedSection /> : <ConnectToGithubSection />}
+      {isUserConnected ? <ConnectedSection /> : <ConnectToGithubSection />}
       <Toaster position="bottom-right" />
     </GitHubSyncerContext.Provider>
   )

app/javascript/components/settings/github-syncer/common/ConfirmationModal.tsx

@@ -10,6 +10,7 @@ type ConfirmationModalProps = Omit<ModalProps, 'className'> & {
   onConfirm: () => void
   onDecline?: () => void
   confirmButtonClass?: string
+  isConfirmButtonDisabled?: boolean
 }
 
 export const ConfirmationModal = ({
@@ -21,6 +22,7 @@ export const ConfirmationModal = ({
   onDecline,
   onClose,
   confirmButtonClass = 'btn-warning',
+  isConfirmButtonDisabled = false,
   ...props
 }: ConfirmationModalProps): JSX.Element => {
   const handleClose = useCallback(() => {
@@ -49,6 +51,7 @@ export const ConfirmationModal = ({
         </button>
         <button
           type="button"
+          disabled={isConfirmButtonDisabled}
           className="btn-enhanced btn-s"
           onClick={handleClose}
         >

app/javascript/components/settings/github-syncer/sections/ConnectedSection/DangerZoneSection.tsx

@@ -1,14 +1,16 @@
 import React, { useState, useCallback } from 'react'
 import toast from 'react-hot-toast'
 import { ConfirmationModal } from '../../common/ConfirmationModal'
-import { fetchWithParams } from '../../fetchWithParams'
+import { fetchWithParams, handleJsonErrorResponse } from '../../fetchWithParams'
 import { GitHubSyncerContext } from '../../GitHubSyncerForm'
 import { GraphicalIcon } from '@/components/common'
 
 export function DangerZoneSection() {
-  const { links, isSyncingEnabled, setIsSyncingEnabled } =
+  const { links, isSyncingEnabled, setIsSyncingEnabled, setIsUserConnected } =
     React.useContext(GitHubSyncerContext)
 
+  const [isDeleting, setIsDeleting] = useState(false)
+
   const [isDeleteConfirmationModalOpen, setDeleteConfirmationModalOpen] =
     useState(false)
   const handleDeleteConfirmationModalClose = useCallback(() => {
@@ -45,24 +47,15 @@ export function DangerZoneSection() {
   }, [links.settings])
 
   const handleDelete = useCallback(() => {
+    setIsDeleting(true)
     fetchWithParams({ url: links.settings, method: 'DELETE' })
       .then(async (response) => {
         if (response.ok) {
           toast.success('GitHub sync deleted successfully')
+          setIsUserConnected(false)
           setDeleteConfirmationModalOpen(false)
         } else {
-          const text = await response.text()
-          try {
-            const data = JSON.parse(text)
-            toast.error(
-              `Failed to delete GitHub sync: ${
-                data.error?.message || 'Unknown error'
-              }`
-            )
-          } catch {
-            console.error('Expected JSON, but received:', text)
-            toast.error('Failed to delete GitHub sync.')
-          }
+          handleJsonErrorResponse(response, 'Failed to delete GitHub sync.')
         }
       })
       .catch((error) => {
@@ -71,6 +64,7 @@ export function DangerZoneSection() {
         )
         console.error('Error:', error)
       })
+      .finally(() => setIsDeleting(false))
   }, [links.settings])
 
   return (
@@ -128,6 +122,7 @@ export function DangerZoneSection() {
             description="This action cannot be undone."
             confirmLabel="Disconnect Syncer"
             confirmButtonClass="btn-alert"
+            isConfirmButtonDisabled={isDeleting}
             declineLabel="Cancel"
             onConfirm={handleDelete}
             open={isDeleteConfirmationModalOpen}