Fix invalid hook call in handleSyncEverything (#8460)

* Fix invalid hook call in handleSyncEverything

The handleSyncEverything function was a standalone exported function that
called useAppTranslation (a React hook), violating the Rules of Hooks.
It was called from onClick handlers, outside the component render cycle.

Move the logic into useCallback hooks inside the respective components,
matching the pattern already used by handleSyncSingleTrack.

Closes #8452

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* DRY

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: dem4ron <demaaron88@gmail.com>

Author: 3 people

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

@@ -2,15 +2,16 @@ import React from 'react'
 import Modal from '@/components/modals/Modal'
 import { GitHubSyncerContext } from '../../GitHubSyncerForm'
 import { Icon } from '@/components/common'
-import { handleSyncEverything } from './ManualSyncSection'
 import { useAppTranslation } from '@/i18n/useAppTranslation'
+import { useSyncEverything } from '../../useSyncEverything'
 
 export function JustConnectedModal(): JSX.Element {
   const { t } = useAppTranslation(
     'components/settings/github-syncer/sections/ConnectedSection'
   )
   const { links } = React.useContext(GitHubSyncerContext)
   const [isModalOpen, setIsModalOpen] = React.useState(false)
+  const syncEverything = useSyncEverything(links.syncEverything)
 
   React.useEffect(() => {
     const searchParams = new URLSearchParams(window.location.search)
@@ -27,9 +28,9 @@ export function JustConnectedModal(): JSX.Element {
   }, [])
 
   const handleSync = React.useCallback(() => {
-    handleSyncEverything({ syncEverythingEndpoint: links.syncEverything })
+    syncEverything()
     handleRemoveParam()
-  }, [links.syncEverything])
+  }, [syncEverything, handleRemoveParam])
 
   const handleCloseModal = React.useCallback(() => {
     handleRemoveParam()

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

@@ -6,6 +6,7 @@ import { fetchWithParams, handleJsonErrorResponse } from '../../fetchWithParams'
 import { StaticTooltip } from '@/components/bootcamp/JikiscriptExercisePage/Scrubber/ScrubberTooltipInformation'
 import { useAppTranslation } from '@/i18n/useAppTranslation'
 import { Trans } from 'react-i18next'
+import { useSyncEverything } from '../../useSyncEverything'
 
 type Track = {
   title: string
@@ -52,6 +53,8 @@ export function ManualSyncSection() {
     [links.syncTrack, t]
   )
 
+  const handleSyncEverything = useSyncEverything(links.syncEverything)
+
   return (
     <section
       style={{
@@ -119,11 +122,7 @@ export function ManualSyncSection() {
       <div className="group relative">
         <button
           disabled={!isSyncingEnabled}
-          onClick={() =>
-            handleSyncEverything({
-              syncEverythingEndpoint: links.syncEverything,
-            })
-          }
+          onClick={handleSyncEverything}
           className="btn btn-primary relative group"
         >
           {t('backupEverythingLabel')}
@@ -139,37 +138,3 @@ export function ManualSyncSection() {
     </section>
   )
 }
-
-export function handleSyncEverything({
-  syncEverythingEndpoint,
-}: {
-  syncEverythingEndpoint: string
-}) {
-  const { t } = useAppTranslation(
-    'components/settings/github-syncer/sections/ConnectedSection/ManualSyncSection.tsx'
-  )
-  fetchWithParams({
-    url: syncEverythingEndpoint,
-  })
-    .then(async (response) => {
-      if (response.ok) {
-        toast.success(
-          t(
-            'yourBackupForAllTracksHasBeenQueuedAndShouldBeCompletedWithinAFewMinutes'
-          ),
-          { duration: 5000 }
-        )
-      } else {
-        await handleJsonErrorResponse(
-          response,
-          t('errorQueuingBackupForAllTracks')
-        )
-      }
-    })
-    .catch((error) => {
-      console.error('Error:', error)
-      toast.error(
-        t('somethingWentWrongWhileQueuingTheBackupForAllTracksPleaseTryAgain')
-      )
-    })
-}

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

@@ -0,0 +1,37 @@
+import { useCallback } from 'react'
+import toast from 'react-hot-toast'
+import { fetchWithParams, handleJsonErrorResponse } from './fetchWithParams'
+import { useAppTranslation } from '@/i18n/useAppTranslation'
+
+export function useSyncEverything(syncEverythingEndpoint: string) {
+  const { t } = useAppTranslation(
+    'components/settings/github-syncer/sections/ConnectedSection/ManualSyncSection.tsx'
+  )
+
+  return useCallback(() => {
+    fetchWithParams({
+      url: syncEverythingEndpoint,
+    })
+      .then(async (response) => {
+        if (response.ok) {
+          toast.success(
+            t(
+              'yourBackupForAllTracksHasBeenQueuedAndShouldBeCompletedWithinAFewMinutes'
+            ),
+            { duration: 5000 }
+          )
+        } else {
+          await handleJsonErrorResponse(
+            response,
+            t('errorQueuingBackupForAllTracks')
+          )
+        }
+      })
+      .catch((error) => {
+        console.error('Error:', error)
+        toast.error(
+          t('somethingWentWrongWhileQueuingTheBackupForAllTracksPleaseTryAgain')
+        )
+      })
+  }, [syncEverythingEndpoint, t])
+}