Fix invalid hook call in handleSyncEverything

Gemfile.lock

@@ -657,6 +657,7 @@ GEM
 
 PLATFORMS
   arm64-darwin-23
+  arm64-darwin-24
   x64-mingw32
   x86_64-linux
 

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])
+}